初学Vue——part 2

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

生命周期图示

生命周期钩子在不同的阶段被使调用，如beforeCreate、created、beforeMount、mounted、beforepdate、updated、beforeDestroy、destroyed

生命周期钩子的this上下文指向调用它的Vue实例

注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致Uncaught TypeError: Cannot read property of undefined或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

Vue模板语法

• 插值表达式
  数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

• v-text作用与插值表达式相同
• v-html作用和v-text相似，但是v-html可以识别解析插入的符号

以上三种方式都能使用js表达式

有些指令能够接收一个“参数”，在指令之后以冒号表示
如：

<a v-bind:href="url">...</a>

动态参数
可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
如：

<a v-bind:[attributeName]="url"> ... </a>

可以使用动态参数为一个动态事件名绑定处理函数

修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>