Vue初识(1)

1、Vue是一个响应式系统，所有在Vue实例中data对象中所有的属性都会加入到响应式系统中，这些属性的值发生改变，视图就会发生相应的改变，改为最新的值。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，它的值变化不会引起任何视图的更新。创建Vue的一个实例代码如下：

var vm = new Vue({

    el:'#div1',

    data:{

            name :'jack',

            age:40

    }

    vm.$data.age = 35;

});

2、计算属性和方法列表

使用v-on指令绑定的函数，必须放在vue实例的methods里面，否则事件不会触发。

计算属性和方法列表表示如下：

var vm = new Vue({

        data:{},

        computed:{},

        methods:{}

})

计算属性和方法的区别在于，计算属性有缓存，除非依赖的属性发生变化，否则一直采用之前的值，不会重新触发计算属性的get方法。

而方法不会有缓存，每次都会执行。

3、watch方法 。监听data对象中某个属性值的变化。

var vm = new Vue({

    data:{

            message:'hello'

    }

});

vm.$watch('message',function(newVal,oldVal){

    console.log('oldvalue'+oldVal);

    console.log('newvalue'+newVal);

});

vm.$data.message = 'world';