学习目标

了解ES6的新语法

掌握Vue实例创建，了解Vue的常见属性掌握Vue的生命周期相关钩子函数掌握使用Vue常见指令掌握Vue计算属性和侦听器使用

1、ES6语法入门

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1.1 什么是ECMAScript ？

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

1.2 ES6与ECMAScript 2015的关系

ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。它与 ES6 是什么关系呢？2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等。

但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。

标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。1.3 ECMAScript 的历史ES6 从开始制定到最后发布，整整用了 15 年。前面提到，ECMAScript 1.0 是 1997 年发布的，接下来的两年，连续发布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习 JavaScript，其实就是在学 3.0 版的语法。2000 年，ECMAScript 4.0 开始酝酿。这个版本最后没有通过，但是它的大部分内容被 ES6 继承了。因此，ES6 制定的起点其实是 2000 年。为什么 ES4 没有通过呢？因为这个版本太激进了，对 ES3 做了彻底升级，导致标准委员会的一些成员不愿意接受。ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等大公司。2007 年 10 月，ECMAScript 4.0 版草案发布，本来预计次年 8 月发布正式版本。但是，各方对于是否通过这个标准，发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司，则坚持当前的草案。2008 年 7 月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激烈，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为 Harmony（和谐）。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。 2009 年 12 月，ECMAScript 5.0 版正式发布。Harmony 项目则一分为二，一些较为可行的设想定名为 JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不是很成熟的设想，则被视为 JavaScript.next.next，在更远的将来再考虑推出。TC39 委员会的总体考虑是，ES5 与 ES3 基本保持兼容，较大的语法修正和新功能加入，将由 JavaScript.next 完成。当时，JavaScript.next 指的是 ES6，第六版发布以后，就指 ES7。TC39 的判断是，ES5 会在 2013 年的年中成为 JavaScript 开发的主流标准，并在此后五年中一直保持这个位置。2011 年 6 月，ECMAScript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15 年。1.4 ES6新特性参考：阮一峰教程 1.4.1 let和const命令var在目前我们的知识盲区内，js定义变量只有一个关键字：varvar有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。例如这样的一段代码：for(var i = 0; i < 10; i++){    console.log(i);}console.log(\"你猜i是多少：\" + i)你猜打印的结果是什么？letlet所声明的变量，只在let命令所在的代码块内有效。我们把刚才的var改成let试试：for(let i = 0; i < 10; i++){    console.log(i);}console.log(\"你再猜猜i是多少：\" + i)constconst声明的变量是常量，不能被修改1.4.2 字符串拓展新APIES6为字符串扩展了几个新的API：includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 字符串模板传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。$('#result').append(  'There are ' + basket.count + ' ' +  'items in your basket, ' +  '' + basket.onSale +  ' are on sale!');上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。$('#result').append(`  There are ${basket.count} items   in your basket, ${basket.onSale}  are on sale!`);模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。// 普通字符串`In JavaScript '\\n' is a line-feed.`// 多行字符串`In JavaScript this is not legal.`console.log(`string text line 1string text line 2`);// 字符串中嵌入变量let name = \"Bob\", time = \"today\";`Hello ${name}, how are you ${time}?`上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。let greeting = `\\`Yo\\` World!`;模板字符串中嵌入变量，需要将变量名写在${}之中。function authorize(user, action) {  if (!user.hasPrivilege(action)) {    throw new Error(      // 传统写法为      // 'User '      // + user.name      // + ' is not authorized to do '      // + action      // + '.'      `User ${user.name} is not authorized to do ${action}.`); }}大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。let x = 1;let y = 2;`${x} + ${y} = ${x + y}`// \"1 + 2 = 3\"`${x} + ${y * 2} = ${x + y * 2}`// \"1 + 4 = 5\"let obj = {x: 1, y: 2};`${obj.x + obj.y}`// \"3\"模板字符串之中还能调用函数。function fn() {  return \"Hello World\";}`foo ${fn()} bar`// foo Hello World bar1.4.3 解构表达式数组解构有如下数组：let arr = [10,20,30] 如果需要获取其中的值，只能通过角标。ES6可以这样：const [a,b,c] = arr;//a,b,c将与arr中的每个位置对应来取值// 然后打印console.log(a, b, c);对象解构有如下person对象：const person = {    name:\"张三\",    age:22,    subjects: ['java','js','css']}我们可以这么做：// 解构表达式获取值const {name,age,subjects} = person;// 打印console.log(name);console.log(age);console.log(subjects);1.4.4 函数优化函数参数默认值优化在ES6以前，我们无法给一个函数参数设置默认值，只能通过逻辑表达式判断function add(a , b) {    // 判断b是否为空，为空就给默认值1    b = b || 1;    return a + b;}// 传一个参数console.log(add(10)); 现在可以这么写：function add(a , b = 1) {    return a + b;}// 传一个参数console.log(add(10));箭头函数ES6中定义函数的简写方式：一个参数时：var print = function (obj) {    console.log(obj);}// 简写为：var print_v2 = obj => console.log(obj);多个参数：// 两个参数的情况：var sum = function (a , b) {    return a + b;}// 简写为：var sum_v2 = (a,b) => a+b;代码不止一行，可以用{}括起来var sum_v3 = (a,b) => {    return a + b;}对象的函数属性简写比如一个Person对象，里面有eat方法：let person = {    name: \"张三\",    // 方式一：    eat: function (food) {        console.log(this.name + \"在吃\" + food);   },    // 方式二：箭头函数版：    eat2: food => console.log(person.name + \"在吃\" + food),// 箭头函数默认不具备this    // 方式三：简写版：    eat3(food) {        console.log(this.name + \"在吃\" + food);   }}箭头函数结合解构表达式比如有一个函数：const person = {    name:\"张三\",    age:21,    subjects: ['java','js','css']}function hello(person) {    console.log(\"hello,\" + person.name)}如果用箭头函数和解构表达式var hello_v2 = ({name}) =>  console.log(\"hello,\" + name);1.4.5 map和reducemapmap()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。 举例：有一个价格数组，我们希望在原有价格基础之上五折出售let price = [10, 20, 30, 40];console.log(price)let sale = price.map(i => i*0.5);console.log(sale)reducereduce(callback(x, y),initvalue)：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：第一个参数是上一次reduce处理的结果第二个参数是数组中要处理的下一个元素reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。1.4.6 Promise 对象Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 语法：const promise = new Promise(function(resolve, reject) {  // ... 执行异步操作  if (/* 异步操作成功 */){    resolve(value);// 调用resolve，代表Promise将返回成功的结果 } else {    reject(error);// 调用reject，代表Promise会返回失败结果 }});这样，在promise中就封装了一段异步执行的结果。如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：$.get('/api/user/list',function(res){},function(error){})promise.then(function(value){    // 异步执行成功后的回调});如果想要处理promise异步执行失败的事件，还可以跟上catch：promise.then(function(value){    // 异步执行成功后的回调}).catch(function(error){    // 异步执行失败后的回调})1.4.7 对象拓展ES6给Object拓展了若干新的方法，如：keys(obj)：获取对象的所有key形成的数组values(obj)：获取对象的所有value形成的数组entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],...]assian(dest, ...src) ：将多个src对象的值 拷贝到 dest中 1.4.8 数组拓展ES6给数组新增了若干方法：find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素findIndex(callback)：与find类似，不过返回的是品牌到的元素的索引includes（value）：与find类似，如果匹配到元素，则返回true，代表找到了 1.4.9 模块化（了解思想,以下代码别敲了）1.4.9.1 何为模块化？模块化就是把代码进行拆分，方便重复利用。模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于导入其他模块提供的功能。 1.4.9.2 export比如我定义一个js文件:util.js，里面有一个对象： const util = {    sum(a,b){        return a + b;   }}我可以使用export将这个对象导出：const util = {    sum(a,b){va{}        return a + b;   }}export util;当然，也可以简写为：export const util = {    sum(a,b){        return a + b;   }}export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。当要导出多个值时，还可以简写。比如我有一个文件：user.js：var base_url = \"http://localhost:8080\"var age = 21export {base_url,age}省略名称上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。因此js提供了default关键字，可以对导出的变量名进行省略例如：// 无需声明对象的名字export default { sum(a,b){        return a + b;   }}这样，当使用者导入时，可以任意起名字1.4.9.3 import使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。例如我要使用上面导出的util： // 导入utilimport util from 'util.js'// 调用util中的属性let result = util.sum(1,2)要批量导入前面导出的name和age： import {base_url, age} from 'user.js'console.log(base_url, age);2、Vue入门2.1 Vue简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官网GitHub 从架构层看为什么要使用Vue？Vue：MVVM模式的框架M：即Model，模型，包括数据和一些基本操作V：即View，视图，页面渲染结果VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。把开发人员从繁琐的DOM操作中出来，把关注点放在如何操作Model上。2.2 安装环境（Node.js、npm）2.2.1 Node.js简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。下载地址https://nodejs.org/en/检查版本node -v 2.2.2 NPMNPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 \"npm -v\" 来测试是否成功安装。注意：更换npm镜像npm默认的仓库地址是在国站，速度较慢，建议大家设置到淘宝镜像。此处使用nrm镜像切换工具进行切换我们首先安装nrm，这里-g代表全局安装npm install nrm -g 然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：通过nrm use taobao来指定要使用的镜像源,并通过npm config ls查看当前镜像2.3 快速入门2.3.1 安装Vue方式一：CDN对于制作原型或学习，你可以这样使用最新版本： 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：方式二：NPM1.初始化项目npm init -y2.安装vuenpm install vue --save3.引入vue2.3.2 入门案例1. HTML模板                

    2.vue渲染然后我们通过Vue进行渲染：                        首先通过 new Vue()来创建Vue实例然后构造函数接收一个对象，对象中有一些属性：el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个divdata：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中date：这里我们指定了一个date属性页面中的h4元素中，我们通过{{date}}的方式，来渲染刚刚定义的date属性。2.3.3 双向数据绑定                         我们在data添加了新的属性：num在页面中有一个input元素，通过v-model与num进行绑定。同时通过{{num}}在页面输出 我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。input与num绑定，input的value值变化，影响到了data中的num值页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。没有任何dom操作，这就是双向绑定的魅力。2.3.4 事件处理我们在页面添加一个按钮：增加 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num普通click是无法直接操作num的。3、Vue实例3.1 创建Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({  // 选项}) 在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：eldatamethods等等3.2 模板、元素每个Vue实例都需要关联一段HTML模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。例如一段html模板： 然后创建Vue实例，关联这个divvar vm = new Vue({ el:\"#app\"})这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用Vue特性的。3.3 数据当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。 html：js:var vm = new Vue({    el:\"#app\",    data:{        name:\"极客营\"   }})name的变化会影响到input的值input中输入的值，也会导致vm中的name发生改变3.4 方法Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。html: js:var vm = new Vue({    el:\"#app\",    data:{        num: 0   },    methods:{        add:function(){            // this代表的当前vue实例，也即vm对象            this.num++;       }   }})3.5 生命周期钩子3.5.1 生命周期图示生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。生命周期： 每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为3.5.2 钩子函数例如：created代表在vue实例创建后；我们可以在Vue中定义一个created函数，代表这个周期的构造函数html: js:var vm = new Vue({    el:\"#app\",    data:{        hello: '' // hello初始化为空   },    created(){        this.hello = \"hello, Vue!\";   }})3.5.3 this对象我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this var vm = new Vue({    el:\"#app\",    data:{        hello: '' // hello初始化为空   },    created(){        this.hello = \"hello, Vue!\";        console.log(this);   }})4、指令什么是指令？指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如我们在入门案例中的v-on，代表绑定事件。 4.1 插值表达式4.1.1 花括号格式：{{表达式}} 说明：该表达式支持JS语法，可以调用js内置函数（必须有返回值）表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;可以直接获取Vue实例中定义的数据或函数示例：HTML：JS:var app = new Vue({    el:\"#app\",    data:{        name:\"极客营\"   }})4.1.2 v-text和v-html我们还可以使用v-text和v-html指令来替代{{}}说明：v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出 v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染示例：HTML:JS:var vm = new Vue({    el:\"#app\",    data:{        hello: \"

地震高岗，一派溪山千古秀

\"   }})4.2 v-model以上的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：inputselecttextareacheckboxradiocomponents（自定义组件）基本上除了最后一项，其它都是表单的输入项。举例：html：多个checkBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型radio对应的值是input的value值input 和textarea 默认对应的model是字符串select单选对应字符串，多选对应也是数组4.3 v-on4.3.1 基本语法v-on指令用于给页面元素绑定事件。语法：v-on:事件名=\"js片段或函数名\" 示例：另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'4.3.2 事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需 求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.stop ：阻止事件冒泡.prevent：阻止默认事件发生.capture：使用事件捕获模式.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）.once：只执行一次4.3.3 按键修饰符在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：全部的按键别名：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right4.3.4 组合事件可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的。.ctrl.alt.shift 例如：4.4 v-for遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。 4.4.1 遍历数组语法：v-for=\"item in items\"items：要遍历的数组，需要在vue的data中定义好。item：迭代得到的数组元素的别名示例4.4.2.数组角标在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：语法v-for=\"(item,index) in items\" items：要迭代的数组item：迭代得到的数组元素别名index：迭代到的当前元素索引，从0开始。示例    4.4.3.遍历对象v-for除了可以迭代数组，也可以迭代对象。语法基本类似语法： v-for=\"value in object\"v-for=\"(value,key) in object\"v-for=\"(value,key,index) in object\"1个参数时，得到的是对象的值2个参数时，第一个是值，第二个是键3个参数时，第三个是索引，从0开始示例：4.5 v-if和v-show4.5.1 基本使用v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。语法：v-if=\"布尔表达式\" 示例：            4.5.2 与v-for结合当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。示例：             4.5.3 v-else你可以使用 v-else 指令来表示 v-if 的else代码块 ： v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。4.5.4 v-show另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

Hello Vue!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。示例：            4.6 v-bind4.6.1 绑定class样式假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的： 因为插值表达式不能用在属性的值中。Vue对class属性进行了特殊处理，可以接收数组或对象格式：数组语法我们可以借助于v-bind指令来实现：HTML：你的data属性：data:{    isActive:['active','hasError']}渲染后的效果：对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class：上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:和如下 data：data: {  isActive: true,  hasError: false}结果渲染为：当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError的值为 true，class 列表将变为 \"static active text-danger\"。4.6.2 简写v-bind:class可以简写为:class 4.7 计算属性在插值表达式中使用js表达式是非常方便的，而且也经常被用到。 但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：data:{    birthday:1429032123201 // 毫秒值}我们在页面渲染，希望得到yyyy-MM-dd的样式：

Birthday：{{   new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()   }}

虽然能得到结果，但是非常麻烦。Vue中提供了计算属性，来替代复杂的表达式：var vm = new Vue({    el:\"#app\",    data:{        birthday:1429032123201 // 毫秒值   },    computed:{        birth(){            // 计算属性本质是一个方法，但是必须返回结果            let d = new Date(this.birthday);            return d.getFullYear() + \"-\" + d.getMonth() + \"-\" + d.getDay();       }   }})计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。页面使用：    4.8 watch侦听器watch可以让我们监控一个值的变化。从而做出相应的反应。示例：