Vue.js 学习(2) -- Vue实例

Vue.js都是通过new Vue…创建一个Vue的根实例来开始运行的，上一节我们已经看到了很多这样格式的栗子：

var vm = new Vue({
  // ...我的代码,这里其实是传入了一个开发者定义的对象,这里暂时命名为setting。
})

在setting中，可以定义我们需要的数据、模板、挂载元素、方法、生命周期等选项。

data&属性：

Vue实例，也就是上文的vm，会代理起data对象中的所有属性，也就是，data的属性，可以用vm的属性的形式来直接访问，这样说可能不太好理解，来看一个栗子：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true 说明vm代理了data
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了代理data，Vue实例还暴露了一些有用的实例属性和方法，但是这些实例和方法都必须以$符号开头（有点像jQuery呢），这样我们就可以区分到底是在代理data，还是在访问vm实例自己的方法：

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`  改变后调用
})

实例的生命周期：

有图有真相，图中西瓜红色的方框里的都是生命周期方法

注：文章 Vue.js学习–xxx 中的代码均来自于Vue.js官网。