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 = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

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

var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data})vm.$data === data // -> truevm.$el === document.getElementById('example') // -> true// $watch 是一个实例方法vm.$watch('a', function (newVal, oldVal) {  // 这个回调将在 `vm.a`  改变后调用})

实例的生命周期：

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

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