小树叶

作文导读：
这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于 Vue 1.0 ，可以参考我的另一篇文章 Vue.js 1.0 Official Guide Notes。

Vue 实例
属性与方法


不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod()) ）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义

实例生命周期


生命周期钩子
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"


也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。
Vue 没有 Controller ，组件的自定义逻辑可以分布在这些钩子中。

生命周期图示





Vue Lifecycle

模板语法

在 Vue 2 中，提供了支持 JSX 语法的 render 函数。

插值
文本


使用 v-once 指令执行一次性插值
This will never change: {{ msg }}



纯 HTML


使用 v-html 指令输出纯 HTML



被插入的内容都会被当做 HTML ，数据绑定会被忽略。
不能使用 v-html 来复合局部模板。
只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。（避免 XSS ）



属性


Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令（包括布尔值）。




使用 JavaScript 表达式

Vue.js 对于所有的数据绑定都提供了完全的 JavaScript 表达式支持。
每个绑定只能包含单个表达式，不能是语句（比如：赋值语句）也不能是流程控制（使用三元表达式替代）。
模板表达式被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。不能模板表达式中访问用户定义的全局变量。

指令

指令（Directives）是带有 v- 前缀的特殊属性。其属性的值预期是单一 JavaScript 表达式（除了 v-for ）。
指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

参数

一些指令能接受一个“参数”，在指令后以冒号指明。


v-bind 指令被用来响应地更新 HTML 属性：




v-on 指令，它用于监听 DOM 事件：






修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。


.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() ：

过滤器

过滤器被用作一些常见的文本格式化。
过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

{{ message | capitalize }}

在 Vue 2 中，过滤器只能在 mustache 绑定和 v-bind 表达式中使用，对于更复杂的数据变换应当使用计算属性。

过滤器函数总接受表达式的值作为第一个参数。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})



过滤器可以串联。
{{ message | filterA | filterB }}



过滤器是 JavaScript 函数，因此可以接受参数。
{{ message | filterA('arg1', arg2) }}
// 字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数



计算属性
计算属性

在模板中放入太多的逻辑会让模板过重且难以维护。

计算属性 vs Methods

对于最终结果，计算属性与 Method 是相同的。

计算属性是基于它们的依赖进行缓存的，其只有在它的相关依赖发生改变时才会重新求值。


当然这也意味着有些计算属性求值后将不会更新，比如 Date.now() ，因为它不是响应式依赖。
computed: {
now: function () {
return Date.now()
}
}




相比而言，只要发生重新渲染，method 调用总会执行该函数。

Computed 属性 vs Watched 属性

Computed 属性能更好的处理多个数据的变动，而不需要为每一个数据单独书写 watch 函数。

计算 setter


计算属性默认只有 getter ，但允许提供 setter 。
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...


现在在运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也相应地会被更新。

观察 Watchers

当想要在数据变化响应时，执行异步操作或开销较大的操作，watch 会很实用。

举个栗子：

Ask a yes/no question:

{{ answer }}

在这个示例中，使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。
除了 watch 选项之外，还有 vm.$watch 命令。

Class 与 Style 绑定
绑定 HTML Class
对象语法

v-bind:class 指令可以与普通的 class 属性共存。

可以直接绑定数据里的一个对象。

data: {
classObject: {
active: true,
'text-danger': false
}
}



也可以在这里绑定返回对象的计算属性。

data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}



数组语法

可以把一个数组传给 v-bind:class ，以应用一个 class 列表。

如果需要根据条件切换列表中的 class ，可以用三元表达式。

// 始终添加 errorClass ，但只有在 isActive 是 true 时添加 activeClass



可以在数组语法中使用对象语法。

用在组件上

在一个定制的组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。

绑定内联样式

和 Class 类似。

条件渲染
v-if

使用 v-if 选择性的渲染（不是显示）元素。

v-else-if

A

B

C

Not A/B/C

类似于 v-else ，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

用 key 管理可复用的元素

Vue 通常会复用已有元素而不是从头开始渲染，以提升运行效率。

例如：如果允许用户在不同的登录方式之间切换




上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素， 不会被替换掉——仅仅是替换了它的的 placeholder 。



有些情况下这样做不符合需求。Vue 提供了一种方式来声明两个元素的独立性：添加一个具有唯一值的 key 属性。




注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。



v-show

使用 v-show 根据条件展示元素。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-show 不支持