[http://jsrun.pro/bvfKp/edit](http://jsrun.pro/bvfKp/edit) ### 开始 Vue应用从使用Vue函数创建一个Vue实例开始。 ``` var vm = new Vue({ // 选项 }) ``` vm是ViewModel的缩写， 关联MVVM模型。 ### 数据 data 是选项之一。 data 的值是一个JSON对象。 当Vue实例被创建是，data对象中的所有属性加入到Vue的响应式系统中， 当属性值发生改变时，视图将会产生“响应”。 ``` // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // => true // 设置属性也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3 ``` 需要注意： 数据改变，视图重新渲染的前提是实例创建之前属性就已经存在data中， 如果是实例之后新加的属性则不会生效。比如： ``` vm.b = 'hi' ``` 所以， 如果是需要的属性值，可以提前设置一个空值。 ### Object.freeze()， 阻止属性修改，页面响应不变化 ### 实例属性与方法 ``` var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) ``` 1. 实例的$data属性， vm.$data === data 2. 实例的$el属性， vm.$el === document.getElementById('example') 3. $watch实例方法 ``` vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 }) ``` ### 实例生命周期钩子 钩子函数也称作回调函数， 是框架在进行一些操作之后提供了一些切入点执行自定义的代码。 #### created 钩子函数， 在实例创建之后执行代码 ``` new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // => "a is: 1" ``` 函数种的this指向调用它的Vue实例。 **不要在选项函数或回调上使用箭头函数，比如** ``` created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod()) ``` 原因是箭头函数并没有`this`，`this`会作为变量一直向上级词法作用域查找，直至找到为止，经常导致： ``` `Uncaught TypeError: Cannot read property of undefined`或`Uncaught TypeError: this.myMethod is not a function`之类的错误。 ``` ### 生命周期图示