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';