创建 Vue 实例
开发一个 Vue 应用，首先要通过 new Vue 创建一个根 Vue 实例。通常这个实例要与 HTML 中的元素关联。
示例：
<!DOCTYPE html> <html> <head> <title>My first Vue app</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>
数据和方法
使用 new Vue() 创建 Vue 实例时，需要传入一个参数对象。
这个对象最主要的属性有三个：
el-- element 的缩写，用来指定 HTML 元素的 id 属性值，将 Vue 实例和 HTML 元素关联起来。data-- data 的值是一个对象，该对象中的所有属性（property）会被加入到 Vue 的 响应式系统 中。当这些属性的值发生变化时，对应的视图中的数据也会被更新。methods- methods 的值也是一个对象，通常把用来处理事件的函数放在这个对象中。
通过 Vue 实例变量可以直接访问 data 对象和 methods 对象的属性。
示例：
// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 vm.a == data.a // => true // 设置 property 也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3
除了用户（开发人员）传入的 data 和 methods 对象，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` 改变后调用 })
生命周期
Vue 生命周期是指 Vue 实例从创建到销毁都要经历一系列的不同阶段，如下图所示：
在 Vue 实例的生命周期中，Vue 提供了一些钩子函数（如上图所示），通过这些钩子函数开发人员可以在不同的阶段添加自己的代码。
示例：利用 created 函数添加代码，让其在实例创建之后执行：
new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // => "a is: 1"
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于