共计 7785 个字符，预计需要花费 20 分钟才能阅读完成。
第 1 章 –Vue.js 简介
一、有关于 Vue.js 特性的例子
1. 第一个特性是数据绑定。绑定用户输入的数据，视图会随着用户的输入而变化。
<div id=”app”>
<h1>Your input is {{message}}</h1>
<input type=”text” v-model=”message”>
</div>
2. 第二个特性是组件化，简单来说我们可以自己定义 HTML 标签，并在模板中使用它。
<div id=”app”>
<message content=”Hello World”></message>
</div>
<script>
var Message = Vue.extend({
props: [‘content’],
template: ‘<h1>{{content}}</h1>’
})
Vue.component(‘message’, Message);
new Vue({
el: ‘#app’,
})
</script>
HTML 结果为：
<div id=”app”>
<h1>Hello World</h1>
</div>
第 2 章 – 基础特性
一、数据
Vue.js 实例中可以通过 data 属性定义数据，如果传入 data 的是一个对象，Vue 实例会代理起 data 对象里的所有属性，而不会对传入的对象进行深拷贝。另外，我们可以引用 Vue 实例 vm 中的 $data 来获取声明的数据，例如：
var data = {
a: 1
};
var vm = new Vue({
data: data
});
console.log(vm.$data === data); // true
console.log(vm.$data.a === data.a); // true
console.log(vm.a === data.a); // true
// 设置属性也会影响到原始数据
vm.a = 2;
console.log(data.a); // 2
// 反之亦然
data.a = 3;
console.log(vm.a); // 3
在模板中使用 {{a}} 就会输出 vm.a 的值，并且修改 vm.a 的值，模板中的值会随之改变。我们称这个数据为响应式数据。注意：只有初始化时传入的对象才是响应式的，即在生命完实例后，再加上 vm.$data.b = ‘2’，并在模板中使用{{b}}，是不会输出字符串 ’2’ 的。例如：
<div id=”app”>
<p>{{a}}</p>
<p>{{b}}</p>
</div>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
a: 1
}
});
vm.$data.b = 2; // 报错
</script>
如果需要在实例化之后加入响应式变量，需要调用实例方法 $set，例如：vm.$set(‘b’,2); 不过 Vue.js 并不推荐这么做，会抛出异常。所以我们应尽量在初始化的时候，把所有的变量都设定好，如果没有值，可以用 undefined 或 null 占位。另外，组件类型的实例也可以通过 props 获取数据，同 data 一样，也需要在初始化时预设好。例如：
<div id=”app”>
<my-component title=”myTitle” content=”myContent”></my-component>
</div>
<script>
var MyComponent = Vue.component(‘my-component’, {
props: [‘title’, ‘content’],
template: ‘<h1>{{title}}</h1><p>{{content}}</p>’
});
</script>
也可以在上述组件类型实例中同时使用 data，但需注意：
1.data 的值必须是一个函数，并且返回值不是原始对象。如果传给组件的 data 是一个原始对象，则在建议多个组件实例时它们就会共用这个 data 对象，修改其中一个组件实例的数据就会影响到其他组件实例的数据，这显然不是我们所期望的。
2.data 中的属性和 props 中的不能重名。
这两者均会抛出异常。
正确使用方法：
var MyComponent = Vue.component(‘my-component’, {
props: [‘title’, ‘content’],
data: function () {
return {
desc: ‘ 描述 ’
}
},
template: `<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
<p>{{desc}}</p>
</div>`
});
二、生命周期通过一个简单的 demo 来清楚地了解内部的运行机制，代码如下：
var vm = new Vue({
el: ‘#app’,
init: function () {
// 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。2.0 中更名为 beforeCreate
console.log(‘init’);
},
created: function () {
// 在实例创建之后调用。此时已完成数据绑定、事件方法，但尚未开始 DOM 编译，即未挂载到 document 中。
console.log(‘created’);
},
beforeCompile: function () {
// 在 DOM 编译前调用。2.0 废弃了该方法，推荐使用 created。
console.log(‘beforeCompile’);
},
beforeMount: function () {
// 2.0 新增的生命周期钩子，在 mounted 之前运行。
console.log(‘beforeMount’);
},
compiled: function () {
// 在编译结束时调用。此时所有指令已生效，数据变化已能触发 DOM 更新，但不保证 $el 已插入文档。2.0 中更名为 mounted。
console.log(‘compiled’);
},
mounted: function () {
// 2.0 中 compiled 更名。
console.log(‘mounted’);
},
attached: function () {
// 在 vm.$el 插入 DOM 时调用，ready 会在第一次 attached 后调用。操作 $el 必须使用指令或实例方法（例如 $appendTo()），直接操作 $el 不会触发这个钩子。2.0 废弃了该方法，推荐在其它钩子中自定义方法检查是否已挂载。
console.log(‘attached’);
},
dettached: function () {
// 同 attached 类似，该钩子在 vm.$el 从 DOM 删除时调用，而且必须是指令或实例方法。2.0 中同样废弃了该方法。
console.log(‘dettached’);
},
beforeDestroy: function () {
// 在开始销毁实例时调用，此时实例仍然有效。
console.log(‘beforeDestory’);
},
destroyed: function () {
// 在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。
console.log(‘destroyed’);
},
ready: function () {
// 在编译结束和 $el 第一次插入文档之后调用。2.0 废弃了该方法，推荐使用 mounted。这个变化其实已经改变了 ready 这个生命周期状态，相当于取消了在 $el 首次插入文档后的钩子函数。
console.log(‘ready’);
// 组件完成后调用 $destroy()函数，进行销毁
this.$destroy();
},
beforeUpdate: function () {
// 2.0 新增的生命周期钩子，在实例挂载之后，再次更新实例（例如更新 data）时会调用该方法，此时尚未更新 DOM 结构。
console.log(‘beforeUpdate’);
},
update: function () {
// 2.0 新增的生命周期钩子，在实例挂载之后，再次更新实例并更新完 DOM 结构后调用。
console.log(‘update’);
},
activated: function () {
// 2.0 新增的生命周期钩子，需要配合动态组件 keep-live 属性使用。在动态组件初始化渲染的过程中调用该方法。
console.log(‘activated’);
},
deactivated: function () {
// 2.0 新增的生命周期钩子，需要配合动态组件 keep-live 属性使用。在动态组件移出的过程中调用该方法。
console.log(‘deactivated’);
}
});
三、数据绑定 Vue.js 作为数据驱动视图的框架，核心是一个响应式的数据绑定系统，建立绑定后，DOM 将和数据保持同步，这样就无需手动维护 DOM，使代码能给更加简洁易懂、提升效率。数据绑定语法：js 代码：
var vm = new Vue({
el: ‘#app’,
data: {
id: 1,
index: 0,
name: ‘Vue’,
avatar: ‘http://…’,
count: [1, 2, 3, 4, 5],
names: [‘Vue1.0’, ‘Vue2.0’],
items: [
{name: ‘Vue1.0’, version: ‘1.0’},
{name: ‘Vue2.0’, version: ‘2.0’}
]
}
});
1. 文本插值
<span>Hello {{name}}</span> // Hello Vue
修改数据对象中的 name 属性，DOM 也会随之更新。// console 中修改 name 属性为 Vue2.0 后输出 Hello Vue2.0 模板语法同时也支持单次插值，即首次赋值后再更改 vm 实例属性值不会引起 DOM 变化，例如：
<span>Hello {{* name}}</span>
Vue.js 2.0 去除了 {{*}} 这种写法，采用 v -once 代替。
<span>Hello {{* name}}</span> // console 中修改 name 属性后依然输出 Hello Vue
2.HTML 属性
Mustache 标签也同样适用于 HTML 属性中，例如：
<div id=”id-{{id}}”></div> // <div id=”id-1″></div>
Vue.js 2.0 废弃了这种写法，用 v -bind 指令代替。
<div v-bind:id=”‘id-‘ + id”></div> // <div id=”id-1″></div>
或简写为：
<div :id=”‘id-‘ + id”></div> // <div id=”id-1″></div>
3. 绑定表达式
放在 Mustache 标签内的文本内容称为绑定表达式。除了直接输出属性值之外，一段绑定表达式可以由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。例如：
<div>{{index + 1}}</div> // <div>1</div>
<div>{{index == 0 ? ‘a’ : ‘b’}}</div> // <div>a</div>
<div>{{name.split(”).join(‘|’)}}</div> // <div>V|u|e</div>
每个绑定中只能包含单个表达式，并不支持 JavaScript 语句，否则 Vue.js 就会抛出 warning 异常。并且绑定表达式里不支持正则表达式，如果需要进行复杂的转换，可以使用过滤器或者计算属性来进行处理。
4. 过滤器
Vue.js 允许在表达式后添加可选的过滤器，以管道符 ”” 指示。示例：
<div>{{name | uppercase}}</div> // VUE
Vue.js 将 name 的值传入给 uppercase 这个过滤器中（本质是一个函数），返回字符串中的大写值。同时也允许多个过滤器链式使用。例如：
<div>{{name | filterA | filterB}}</div> // VUE
也允许入多个参数，例如：
<div>{{name | filterA arg1 arg2}}</div> // VUE
注意：Vue.js 2.0 中已经去除了内置的过滤器，不过可以声明自定义过滤器。
5. 指令
修饰符：修饰符（Modifiers）是以半角句号. 开始的特殊后缀，用于表示指令应该以特殊方式绑定。
<button v-on:click.stop=”doClick”></button>
v-on 的作用是在对应的 DOM 元素上绑定事件监听器，doClick 为函数名，而 stop 即为修饰符，作用是停止冒泡，相当于调用了 e.stopPropagation()。
二、计算属性
在项目开发中，展示的数据往往需要经过一些处理。除了在模板中绑定表达式或者利用过滤器外，Vue.js 还提供了计算属性方法。
1. 基础例子
<div id=”app”>
<div>{{firstName}}</div>
<div>{{lastName}}</div>
<div>{{fullName}}</div>
</div>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
firstName: ‘Gavin’,
lastName: ‘CLY’
},
computed: {
fullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
});
</script>
输出结果：
Gavin
CLY
Gavin CLY
对 vm.firstName 和 vm.lastName 进行修改，始终会影响 vm.fulllName。
2.Setter 计算属性的 Setter 方法，在更新属性时带来了便利。例如：
<div id=”app”>
<div>¥{{price}}</div>
</div>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
cents: 100
},
computed: {
price: {
set: function (newValue) {
this.cents = newValue * 100;
},
get: function () {
return (this.cents / 100).toFixed(2);
}
}
}
});
</script>
输出结果：￥1.00
在处理商品价格的时候，后端往往会把价钱定义成以分为单位的整型，避免在处理浮点类型数据时产生的问题。而前端则需要把价钱再转成元进行展示，如果需要对价钱进行修改，要把输入的价格再恢复到分传给后端，很繁琐。使用 Vue.js 的计算属性，可以将 vm.cents 设置为后端所存的数据，计算属性 price 为前端展示和更新的数据。此时更改 vm.price=2，vm.cents 会被更新为 200，在传递给后端时无需再手动转化一遍数据。
三、表单控件
Vue.js 中提供 v -model 指令对表单元素进行双向数据绑定。js 代码：
var vm = new Vue({
el: ‘#app’,
data: {
message: ”,
gender: ”,
checked: ”,
multiChecked: [],
selected: ”,
multiSelected: [],
a: ‘checked’,
b: ‘checked’
}
});
1.Text 输入框示例，用户输入的内容和 vm.message 直接绑定：
<input type=”text” v-model=”message”>
<div>Your input is : {{message}}</div>
2.Radio 单选框示例：
<label><input type=”radio” value=”male” v-model=”gender”> 男 </label>
<label><input type=”radio” value=”female” v-model=”gender”> 女 </label>
<div>{{gender}}</div>
gener 值即为选择的 radio 元素的 value 值。
3.Checkbox 分两种情况：单个勾选框和多个勾选框。单个勾选框，v-model 即为布尔值，此时 input 的 value 值并不影响 v -model 的值。
<input type=”checkbox” v-model=”checked”>
<div>checked: {{checked}}</div>
多个勾选框，v-model 使用相同的属性名称，且属性为数组。
<label><input type=”checkbox” value=”1″ v-model=”multiChecked”>1</label>
<label><input type=”checkbox” value=”2″ v-model=”multiChecked”>2</label>
<label><input type=”checkbox” value=”3″ v-model=”multiChecked”>3</label>
<div>multiChecked: {{multiChecked}}</div>
请输入代码
4.Select 同 checkbox 元素一样，也分单选和多选两种，多选的时候也需要绑定到一个数组。单选：
<select v-model=”selected”>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>selected: {{selected}}</div>
多选：
<select v-model=”multiSelected” multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>multiSelected: {{multiSelected}}</div>
注意：multiple 属性规定可同时选择多个选项。在不同操作系统中，选择多个选项的差异：
对于 windows：按住 Ctrl 按钮来选择多个选项
对于 Mac：按住 command 按钮来选择多个选项
由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。提示：可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。
5. 参数特性默认情况下，v-model 在 input 事件中同步输入框值与数据，加 lazy 属性后会在 change 事件中同步。number 会自动将用户输入转为 Number 类型，如果原值转换结果为 NaN 则返回原值。不过 Vue.js 2.0 中取消了 lazy 和 number 作为参数，用修饰符来代替。新增了 trim 修饰符，去掉输入值首尾空格。
<input type=”text” v-model.lazy=”message” @change=”changeFn”>
<input type=”text” v-model.number=”message”>
<input type=”text” v-model.trim=”message”>
四、模板渲染
1. 前后端渲染对比：两种方式各有自己的优缺点，需要根据自己的业务场景来选择技术方案。前端渲染的优点在于：① 业务分离，后端只需要提供数据接口，前端在开发时也不需要部署对应的后端环境，通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。② 计算量转移，原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。后端渲染的优点在于：① 对搜索引擎友好。② 首页加载时间短，后端渲染加载完成后就直接显示 HTML，但前端渲染在加载完成后还需要有段 js 渲染的时间。Vue.js 2.0 开始支持服务端渲染，从而让开发者在使用上有了更多的选择。
