vue-属性与方法

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

var mydata= { a: 1 }
var vm = new Vue({
  el: '#example',
  data: mydata
})

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

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

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

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

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

vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用

})

例如:

<div id="example"><input type="text" v-model='mydata.a' /></div>

var mydata= { a: 1 }var vm = new Vue({  el: '#example',  data: mydata})vm.$watch('a', function (newVal, oldVal) {  // 这个回调将在 `vm.a`  改变后调用  alert('changed');  console.log(mydata.a+'and'+vm.a);})

结果将弹出alert窗口并在控制台输出修改后的数据且 mydata.a==vm.a

Vue实例在创建过程中包含许多可被调用的方法，比如创造后的created

例子

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

下图是Vue实例的生命周期