第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); // trueconsole.log(vm.$data.a === data.a); // trueconsole.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 Vue2.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> // VUEVue.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>输出结果：GavinCLYGavin 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开始支持服务端渲染，从而让开发者在使用上有了更多的选择。