Vue 实例
创建 Vue 实例
开发一个 Vue 应用，首先要通过 new Vue 创建一个根 Vue 实例。通常这个实例要与 HTML 中的元素关联。
示例：
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>My first Vue app</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8
9<body>
10 <div id="app">
11 {{ message }}
12 </div>
13
14 <script>
15 var app = new Vue({
16 el: '#app',
17 data: {
18 message: 'Hello Vue!'
19 }
20 })
21 </script>
22</body>
23
24</html>
数据和方法
使用 new Vue() 创建 Vue 实例时，需要传入一个参数对象。
这个对象最主要的属性有三个：
el-- element 的缩写，用来指定 HTML 元素的 id 属性值，将 Vue 实例和 HTML 元素关联起来。data-- data 的值是一个对象，该对象中的所有属性（property）会被加入到 Vue 的 响应式系统 中。当这些属性的值发生变化时，对应的视图中的数据也会被更新。methods- methods 的值也是一个对象，通常把用来处理事件的函数放在这个对象中。
通过 Vue 实例变量可以直接访问 data 对象和 methods 对象的属性。
示例：
1// 我们的数据对象
2var data = { a: 1 }
3
4// 该对象被加入到一个 Vue 实例中
5var vm = new Vue({
6 data: data
7})
8
9// 获得这个实例上的 property
10// 返回源数据中对应的字段
11vm.a == data.a // => true
12
13// 设置 property 也会影响到原始数据
14vm.a = 2
15data.a // => 2
16
17// ……反之亦然
18data.a = 3
19vm.a // => 3
除了用户（开发人员）传入的 data 和 methods 对象，Vue 实例还提供了一些有用的属性和方法。这些属性和方法以 $ 为前缀，以便跟用户定义的属性区分开来。
示例：
1var data = { a: 1 }
2var vm = new Vue({
3 el: '#example',
4 data: data
5})
6
7vm.$data === data // => true
8vm.$el === document.getElementById('example') // => true
9
10// $watch 是一个实例方法
11vm.$watch('a', function (newValue, oldValue) {
12 // 这个回调将在 `vm.a` 改变后调用
13})
生命周期
Vue 生命周期是指 Vue 实例从创建到销毁都要经历一系列的不同阶段，如下图所示：
在 Vue 实例的生命周期中，Vue 提供了一些钩子函数（如上图所示），通过这些钩子函数开发人员可以在不同的阶段添加自己的代码。
示例：利用 created 函数添加代码，让其在实例创建之后执行：
1new Vue({
2 data: {
3 a: 1
4 },
5 created: function () {
6 // `this` 指向 vm 实例
7 console.log('a is: ' + this.a)
8 }
9})
10// => "a is: 1"