5 Vue实例 5.1创建一个 Vue 实例 创建 Vue 实例： var vm = new Vue({ // ... }) 5.2数据与方法 // 我们的数据对象 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' 那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如： data: { a: 1, b: '' } 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。 var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) <div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div> 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如： 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 (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 }) 5.3实例生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的初始化过程。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 比如 created 钩子可以用来在一个实例被创建之后执行代码： new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } })// => "a is: 1" 5.4 生命周期图示 完整代码： 5 Vue实例1.html <!DOCTYPE html> <html> <head> <title>Vue实例</title> <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> 5 Vue实例2.html <!DOCTYPE html> <html> <head> <title>Vue实例</title> <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> </div> <script> var data = { a: 1, b: '' } var vm = new Vue({ el: '#app', data: data }) // alert(vm.a == data.a); vm.a = 2 // alert(data.a); data.a = 3 // alert(vm.a); vm.b = 'hi' alert("vm.b=" + vm.b); alert("data.b=" + data.b); </script> </body> </html> 5 Vue实例3.html <!DOCTYPE html> <html> <head> <title>Vue实例</title> <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div> <script> var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) </script> </body> </html> 5 Vue实例4.html <!DOCTYPE html> <html> <head> <title>Vue实例</title> <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="example"> </div> <script> var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) // alert(vm.$data === data) // => true // alert(vm.$el === document.getElementById('example')) // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 console.log('newValue: ' + newValue) console.log('oldValue: ' + oldValue) }) vm.a = 2 </script> </body> </html> 5 Vue实例5.html <!DOCTYPE html> <html> <head> <title>Vue实例</title> <script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <script> new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) alert('a is: ' + this.a) } }) </script> </body> </html> 欢迎观看视频教程：https://ke.qq.com/course/432961?tuin=36914f34，如有疑问，请加QQ群665714453交流讨论。
转载于:https://www.cnblogs.com/daqiang123/p/11368384.html
相关资源：JAVA上百实例源码以及开源项目