模板语法

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
当创建一个 Vue 实例时，你可以传入一个选项对象
el 选项
- 不能是 html、body 标签
data 选项
- data 中的数据就是我们平常使用模板引擎所常见的模板数据对象
- data 中的数据是响应式的，即数据改变之后随之驱动视图发生变化
- 注意：动态为实例添加属性是无效的，所以我们要在实例初始化开始的时候初始化我们的 data 选项数据
methods 选项
…
不同选项有不同功能作用，更多实例选项参考

创建一个 Vue 的实例

当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档中浏览完整的选项列表。

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

参考文档：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

!> 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

var vm = new Vue({
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

先来听一段延伸法师的人生感悟：《绳命》。

生命是如此的美丽，让我们祝福这所有，让我们祝福生命如此的精彩！

生命周期这个词挺起来也是挺吓人的，在很多个编程领域都存在着这么一个说法。对于一个萌新来说，确实比较难懂。

同样的，实例，一开始我们说了，需要被构造出来，紧接着他也会经历它生命中的各个阶段，然后死掉。

所以，要了解一个人，我们就要从他一生中的各个阶段去了解它，了解实例也一样！

所以说，每进入一个阶段都可以干一件什么事情。Vue 中也是这样的。所以 Vue 提供了一些称之为钩子(HOOK) 的东西，为我们提供了机会去操作某个阶段的行为。

比如说进入童年就可以比喻为一个钩子，上学就可以比喻为这个阶段要让他做的事情。

Vue实例生命周期

好了，回过头来再看一下官方的生命周期图：

我们在里面可以看到几个钩子：

created
- 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
- el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
- 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
activated
deactivated
beforeDestroy
destroyed
errorCaptured