Vue.js学习系列（十二）---属性和方法

属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }

var vm = new Vue({

 el：'#app',

  data: mydata

})

vm.a === data.a // -> true

因为其响应式，无论是改变vm.a还是mydata.a，他们的值都会一起改变，但是！如果某属性是在创建了该实例后被添加进去的，则该属性不会触发视图更新

//同样设置属性也会影响到原始数据

vm.a = 2

mydata.a // -> 2

//反之亦然

mydata.a = 3

vm.a // -> 3

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

var data = { a: 1 }

var vm = new Vue({

  el: '#example',

  data: data

})

vm.$data === data // -> true

vm.$el === document.getElementById('example') // -> true

 

// $watch 是一个实例方法

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

  // 这个回调将在 `vm.a`  改变后调用

})

注意，不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。

实例属性和方法的完整列表中查阅 官方API.