0. 知识点
// data 对象中的所有的属性加入到 Vue 的响应式系统中
// 只有当实例被创建时 data 中存在的属性才是响应式的
// 阻止修改现有的属性 Object.freeze()
// 暴露了一些有用的实例属性与方法。它们都有前缀 $ vm.$data vm.$el vm.$watch
// 生命周期钩子
1. 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div> <script src="vue.js"></script> <script> var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // data 对象中的所有的属性加入到 Vue 的响应式系统中 console.log(vm.a == data.a); // true // 只有当实例被创建时 data 中存在的属性才是响应式的 data = { newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null } // 阻止修改现有的属性 Object.freeze() var obj = { foo: 'bar' } Object.freeze(obj) // error new Vue({ el: '#app', data: obj }) // 暴露了一些有用的实例属性与方法。它们都有前缀 $ vm.$data vm.$el vm.$watch var data = { a: 1 } var vm = new Vue({ el: '#app', data: data, created: function () { // 生命周期钩子 `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) console.log(vm.$data === data); // true console.log(vm.$el === document.getElementById('app')) // => true // $watch 是一个实例方法 回调将在 `vm.a` 改变后调用 vm.$watch('a', function (newValue, oldValue) { console.log(newValue, oldValue); }) </script> </body> </html>
2. 相关链接