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实例的生命周期