监听文本框数据改变

1. methods属性

<div id="app">
    <input type="text" v-model="firstname" @keyup="getFullname">+
    <input type="text" v-model="lastname" @keyup="getFullname">=
    <input type="text" v-model="fullname">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: '',
            fullname: ''
        },
        methods: {
            getFullname() {
                this.fullname = this.firstname + '-' + this.lastname
            }
        }
</script>

2. watch属性（这个属性可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数）

<div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: '',
            fullname: ''
        },
        methods: {},
        watch: {
            //要观察的对象(一般为非DOM事件): function(newVal, oldVal) {}
            firstname: function(newVal) {
                this.fullname = newVal + '-' + this.lastname
            },
            lastname: function(newVal) {
                this.fullname = this.firstname + '-' + newVal
            }
        },
    })
</script>

3. computed属性

• 在computed中可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法
• 该属性的三个特点：直接当做普通属性调用不加括号（而不是当作方法调用）；任何data中数据变化立即重新计算；计算属性的求值结果会缓存，方便下次直接使用

<div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
    <!--虽然fullname是一个方法，但不会在后面加小括号去调用-->
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: ''
        },
        methods: {},
        computed: {
            fullname: function() {
                    return this.firstname + '-' + this.lastname//必须retrun结果
                }
        }
    })
</script>

watch、computed和methods之间的对比：

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性使用。
2. methods方法表示一个具体的操作，主要书写业务逻辑。
3. watch一个对象，键是一个需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体。

通过watch监视路由地址的改变：

watch: {
   '$route.path': function(newVal, oldVal) {
       //console.log(newVal + '----' + oldVal)
       if (newVal === '/login') {
           console.log('欢迎进入登录页面')
       } else {
           console.log('欢迎进入注册页面')
       }
   }
}