作文导读：Vue 实例
属性和方法


每个 Vue 实例都会代理其 data 对象里所有的属性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3


只有被代理的属性是响应的。在实例创建之后添加新的属性到实例上，它不会触发视图更新。
Vue 实例暴露了一些有用的实例属性和方法。这些属性和方法都有前缀 $ ，以便于代理的数据属性区分。

实例生命周期


Vue 实例在其生命周期的不同阶段会调用不同的钩子，如 created 、 compiled 、 ready 、 destroy 。钩子的 this 指向调用它的 Vue 实例。
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"



生命周期图示






数据绑定语法
插值
文本


处理单次插值，今后的数据变化不引起插值更新。
This will never change: {{* msg }}



原始的 HTML


使用三 Mustache 标签输出真的 HTML 字符串。



内容以 HTML 字符串插入时，**数据绑定将被忽略 **。如果要复用模板片段，应当使用 partials
只对可信内容使用 HTML 插值，永不用于用户提交的内容。

HTML 特性


Mustache 标签也可以用在 HTML 特性 (attribute) 内。



Vue.js 指令和特殊特性内不能用插值。

绑定表达式
JavaScript 表达式

Vue.js 在数据绑定内支持全功能的 JavaScript 表达式。表达式将在 Vue 实例的作用域内计算。
每个绑定只能包含单个表达式。

过滤器


Vue.js 允许在表达式后添加可选的“过滤器”，以 |（管道符）指示。
{{ message | capitalize }}


管道语法不是 JavaScript 语法，不能在表达式内使用过滤器，只能添加到表达式后边。

过滤器可以串联，也可以接受参数。过滤器函数始终以表达式的值作为第一个参数。
{{ message | filterA | filterB }}
{{ message | filterA 'arg2' arg3 }}



指令
修饰符


修饰符是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。




Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别版的缩写：







计算属性

在模板中要使用多余一个表达式的逻辑时，应当使用计算属性。

基础例子
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})



计算 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]
}
}
}
// ...


规定 setter 之后，调用 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。

Class 与 Style 绑定

在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class


class="{{ className }}" 和 v-bind:class 的用法，二者只能选其一。

对象语法


传递给 v-bind:class 一个对象，以动态地切换 class 。注意 v-bind:class 指令可以与普通的 class 特性共存。


data: {
isA: true,
isB: false
}

渲染为



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

数组语法


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