Vue.js权威指南(txt+pdf+epub+mobi电子书下载)

作者：张耀春等

出版社：电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Vue.js权威指南试读：

前言

本书是一本全方位讲解Vue.js，从入门到精通的权威指南。

从本书中你将学到：● Vue.js基本语法● Vue.js源码解析● 如何开发一个完整的组件● 如何集成第三方组件● 如果构建和调试一个Vue的项目● 主流打包构建工具的使用● Vue.js 2.0● Scrat与Vue.js结合本书读者对象

本书写给从未使用Vue.js开发项目或想深入了解Vue.js原理的读者，同时也适合热衷于追求新技术、探索新工具的读者。特此声明：本书基础语法讲解基于Vue.js 1.0版本，其中涵盖了与其他版本的比较。我们假设读者已经掌握了HTML和CSS，并且熟悉JavaScript基础知识。如何阅读本书

如果你从事Web开发工作，之前没有接触过Vue.js，建议从第1章开始仔细阅读，并亲手实践每个章节提供的示例，可以加深理解；如果你已经使用Vue.js开发项目，则可以跳过前面基础知识，直接进入源码解析篇，让我们共同探索Vue.js是如何实现的，以及有哪些值得借鉴学习的知识；如果你想看看Vue.js 2.0都发生了什么转变，请直接进入Vue.js 2.0章节阅读；如果你想了解打包构建工具如何使用，请直接进入工具篇，那里有三款打包工具供选择。希望你阅读愉快。本书结构

每个章节的开头都会介绍一个概念，帮你了解该章节所讲内容是什么，以便快速了解或准确地找到所关注的内容

在基础知识讲解中，每一节中都会有大量丰富、详尽的示例，方便你更全面地掌握所讲解的知识。

在章节最后还会附加一些常见问题，帮助你快速解决问题并定位问题所在。第1章遇见Vue.js

滴滴公共前端团队从2013年开始接触React和AngularJS，以及后来的Polymer，在项目实战中踩过了各种坑，参与了一些公司级的组件库开发和复杂业务模块的设计，也在与之配套的工程化闭环里做了很多解决方案。

回过头来看看，这几年的前端开发已经不再是去适配低版本的PC浏览器，对于大部分国内一线的移动互联网公司的前端开发者，移动端的前端项目需求尤其强烈，用户体验也一再被大家提及，页面已经不能简单地通过重新渲染来更新数据的频繁变化，后端的一些MVC模式也在往前端框架迁移。

在正式学习Vue.js之前，我们先和大家简单地回顾一下MVX。1.1　MVX模式是什么

MVC框架最早出现在Jaca领域，然后慢慢在前端开发中也被提到，后来又出现了MVP，以及现在最成熟的MVVM，下面我们来简单介绍一下各种模式。1.1.1　MVC

MVC是应用最广泛的软件架构之一，一般MVC分为：Model（模型）、Controller（控制器）和View（视图）。这主要是基于分层的目的，让彼此的职责分开，如图1-1所示。图1-1　MVC通信方式一

View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者，View和Model不直接联系。基本联系都是单向的。

那么，用户操作应该放在什么位置，MVC之间又会有什么变化，如图1-2所示。图1-2　MVC通信方式二

用户（User）通过Controller来操作Model以达到View的变化。1.1.2　MVP

MVP是从经典的MVC模式演变而来的，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。MVP通信方式如图1-3所示。图1-3　MVP通信方式1.1.3　MVVM

MVVM代表框架有：知名度相对偏低的Knockout、早期的Ember.js、目前比较火热的来自Google的AngularJS，以及我们今天要讲的Vue.js。

相比前面两种模式，MVVM只是把MVC的Controller和MVP的Presenter改成了ViewModel。View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示。

这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作，如图1-4所示。图1-4　用户操作影响1.2　Vue.js是什么

Vue.js不是一个框架——它只聚焦视图层，是一个构建数据驱动的Web界面的库。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

先看看Vue.js的特性。

1．确实轻量

除了以MVP模式代表的Riot.js外，Vue.js已经算是前端库里面体积非常小的，旦不依赖其他基础库。

2．数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

3．指令

类似于AngularJS，可以用一些内置的简单指令（v-*），也可以自定义指令，通过对应表达式值的变化就可以修改对应的DOM。

4．插件化

Vue.js核心包不包含Router、AJAX、表单验证等功能，但是可以非常方便地加载对应的插件，后续章节我们会做完整的补充说明。1.2.1　Vue.js与其他框架的区别

相信很多读者都有一些其他框架（比如AngularJS）的学习或者应用背景，本节将以对比方式来介绍各自的特点。

1．与AngularJS的区别

首先要提到的肯定是AngularJS，它来自Google，是目前国内最火的前端框架之一，应用于PC类的复杂交互系统，我们内部也产出了一套基于它的PC UI组件库。那两者到底有什么区别呢？

相同点：● 都支持指令——内置指令和自定义指令。● 都支持过滤器——内置过滤器和自定义过滤器。● 都支持双向绑定。● 都不支持低端浏览器（比如IE6/7/8）：

➢ Vue.js使用比如Array.isArray的ES 5特性。

➢ AngularJS 1.3开始不支持IE 8。

不同点：● AngularJS的学习成本比较高，比如增加了Dependency Injection

特性，而Vue.js本身提供的API都比较简单、直观。● 在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越

慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所

有的数据都是独立触发的。对于庞大的应用来说，这个优化差异

还是比较明显的。

2．与React的区别

第二个要提到的便是React，来自Facebook，在国内已经完全复制AngularJS的热潮，成为目前受关注度很高的前端框架。为了方便没有用过React的同学理解，我们用React来编写一个Footer组件，代码示例如下：<-- components/FooterView.jsx -->/** @jsx React.DOM */var FooterView = React.createClass({ render: function () { return (

相同点：● React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue

特殊文件格式，对文件内容都有一些约定，两者都需要编译后使

用。● 中心思想相同：一切都是组件，组件实例之间可以嵌套。● 都提供合理的钩子函数，可以让开发者定制化地去处理需求。● 都不内置类似AJAX、Router等功能到核心包，而是以其他方式（插件）加载。● 在组件开发中都支持mixins的特性，具体内容在第11章中会进行

介绍。

不同点：● React依赖Virtual DOM，而Vue.js使用的是DOM模板。React采用

的Virtual DOM会对渲染出来的结果做脏检查。● Vue.js在模板中提供了指令、过滤器等，可以非常方便、快捷地

操作DOM。● 虽然在第18章Vue.js 2.0中也会提到支持Virtual DOM，但是两者

还是有差异的。

3．与Knockout的区别

Knockout也是非常轻量的，甚至兼容IE 6+的MVVM框架。

可能有部分人不熟悉Knockout，代码示例如下：

相同点：● 都用到了数据和DOM元素绑定。● DOM元素都是基于模板的。● 都追求UI和数据关联，自动刷新。● 都支持依赖跟踪。

不同点：● Knockout的所有可观测属性都需要手动用observable方法来初始

化，并且需要用函数调用的方式来操作数据。● Knockout没有ViewModel之间作用域的继承。

4．与Ractive.js的区别

Ractive.js和Vue.js API很像，通过实例化一个Ractive类，传一个元素和一些数据、模板等，但是它用字符串模板，数据模型和Knockout一样用get和set，本身代码体积较大。

可能大部分人还不熟悉Ractive.js，代码示例如下：

5．与Polymer的区别

很多人可能接触Polymer不多，它是在2013年Google I/O之后推出的，提出了Web Component早期的很多规范性方案，如HTML Imports、Shadow DOM、数据绑定等。不过，由于后续的新版本对之前的冲击比较大，也一度受到早期开发者的抱怨。我们先来看一个具体的例子，代码如下：

相同点：● 都支持数据绑定。● 与Vue.js推崇的组件文件都是以.vue后缀组织结构类似，在

Polymer中也是把template、script都放在一个文件里面。

不同点：● Polymer主要推崇Web Component标准化，所以会依赖浏览器环

境的特性支持，如果不支持就需要加载对应的Polyfill。● Polymer代码体积较大，无法做到轻量级。

6．与Backbone.js的区别

定位不同，Vue.js专注于View，而Backbone除了View之外，还提供了Collection、Model及Router。Vue.js拥有数据绑定，而Backbone需要手动通过事件来操作DOM。

7．与Riot的区别

作为React-like的MVP框架的代表，在Riot的官方Git上有一个框架大小比较列表，Riot以不到10KB的大小稳居第一，超越第二的Vue.js。我们先来看一个官方的timer示例，代码如下： DDFE 个数: { time }

相同点：● API设计简单而专注，学习成本低。● 提供自定义的生命周期钩子，方便开发者灵活使用。● 与主流的工具集成度比较高，支持与各种预编译工具集成。● 组件化思想，而且将HTML和JS、CSS混在一个组件中。● 都只更新变化了的元素。

不同点：● Riot内置路由功能、设计支持Virtual DOM。● Riot支持自定义标签，将标签内容放在.tag文件中，使用script特

殊的type="riot/tag"来加载编译。● 和Polymer的初衷一样，推崇Web Component 标准化，但是不依

赖冗余的Polyfill。● Riot支持服务端渲染，在后续的章节中我们也会介绍Vue.js 2.0支

持情况。● Riot默认单向绑定。1.2.2　如何使用Vue.js

上节我们通过对比一些比较熟知的框架，了解了Vue.js支持的一些特性和优势，下面简单地来实践一下。

1．安装（1）script

如果项目直接通过script加载CDN文件，代码示例如下：（2）npm

如果项目基于npm管理依赖，则可以使用npm来安装Vue，执行如下命令：$ npm i vue –save-dev（3）bower

如果项目基于bower管理依赖，则可以使用bower来安装Vue，执行如下命令：$ bower i vue –save-dev

2．第一个Hello World程序

每一次学习新框架，都必将经历过Hello World程序，我们用Vue.js来输出一个微信内滴滴打车的WebApp首页Tab，代码示例如下：

Vue.js正式发布于2014年2月，对于目前的Vue.js：● 在开发人数上，覆盖70多贡献者。● 在受关注度上，GitHub拥有 20000 多 Star。

从脚手架、构建、插件化、组件化，到编辑器工具、浏览器插件等，基本涵盖了从开发到测试等多个环节。

Vue.js的发展里程碑如下：● 2013年12月24日，发布0.7.0。● 2014年1月27日，发布0.8.0。● 2014年2月25日，发布0.9.0。● 2014年3月24日，发布0.10.0。● 2015年10月27日，正式发布1.0.0。● 2016年4月27日，发布2.0的preview版本。

目前推荐使用比较稳定的1.0.24版本。第2章数据绑定

数据绑定是将数据和视图相关联，当数据发生变化时，可以自动更新视图。本章将介绍Vue.js中数据绑定的语法。2.1　语法2.1.1　插值

文本插值是最基本的形式，使用双大括号{{ }}（类似于Mustache，所以本文中称作Mustache标签），代码示例如下：Text: {{text}}

例子中的标签{{text}}将会被相应的数据对象text属性的值替换掉，当text的值改变时，文本中的值也会联动地发生变化。有时候只需渲染一次数据，后续数据变化不再关心，可以通过“*”实现，代码示例如下：Text: {{*text}}

双大括号标签会把里面的值全部当作字符串来处理，如果值是HTML片段，则可以使用三个大括号来绑定，代码示例如下：

双大括号标签还可以放在HTML标签内，示例如下：

总之，Vue.js提供了一系列文本渲染方式，足够我们应对日常的模板渲染情况。需要注意的是，Vue指令和自身特性内是不可以插值的，如果用错了地方，Vue.js会发出警告。2.1.2　表达式

Mustache标签也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成。过滤器可以没有，也可以有多个。

表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。表达式的值是其运算结果，代码示例如下：{{ cents/100 }} // 在原值的基础上除以100{{ true? 1 : 0 }} // 值为真，则渲染出1，否则渲染出0{{ example.split(",") }}{{var logo = 'DDFE'}} // 这是语句，不是表达式{{if(true) return 'DDFE'}} // 条件控制语句是不支持的，可以使用三元式

类似于Linux中的管道，Vue.js允许在表达式后面添加过滤符，代码示例如下：{{example | toUpperCase}}

这里toUpperCase就是过滤器，其本质是一个JS函数，返回字符串的全大写形式。Vue.js允许过滤器串联，代码示例如下：{{example | filterA | filterB}}

过滤器还支持传入参数，代码示例如下：{{example | filter a b}}

这里a和b均为参数、用空格隔开。

Vue.js还提供了许多内置的过滤器，第6章将对此进行详细介绍。2.1.3　指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是JavaScript表达式和过滤器。指令的作用是当表达式的值发生变化时，将这个变化也反映到DOM上。代码示例如下：

当show为true时，展示DDFE字样，否则不展示。还有一些指令的语法稍有不同，在指令和表达式之间插入一个参数，用冒号分隔，如v-bind指令。代码示例如下：

Vue.js中数据绑定的语法被设计为可配置的。如果不习惯Mustache风格的语法，则可以自己设置。

我们可以在Vue.config中配置绑定的语法。Vue.config是一个对象，包含了Vue.js的所有全局配置，可以在Vue实例化前修改其中的属性。分隔符在Vue.config中源码定义如下：let delimiters = ['{{', '}}']let unsafeDelimiters = ['{{{', '}}}']

1．delimitersVue.config.delimiters = ["<%" ,"%>"]

如果修改了默认的文本插值的分隔符，则文本插值的语法由{{example}}变为<%example%>。

2．unsafeDelimitersVue.config.unsafeDelimiters = ["<$", "$>"]

如果修改了默认的HTML插值的分隔符，则HTML插值的语法由{{{example}}}变为<$emample$>。第3章指令

指令（Directive）是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。3.1　内部指令

首先来看看和原生HTML标签相似的一组内置指令，这组指令非常容易记忆，因为仅仅是在原生标签前面加上了v-前缀，如图3-1所示。图3-1 内部指令3.1.1　v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。代码示例如下：

效果如图3-2所示。图3-2　v-if

因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把

效果如图3-3所示。图3-3　v-if3.1.2　v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display: none"。代码示例如下：

效果如图3-4所示。图3-4　v-show

注：v-show不支持

在切换v-if模块时，Vue.js有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。

v-if是惰性的——如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于CSS切换。

一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。3.1.3　v-else

顾名思义，v-else 就是JavaScript中else的意思，它必须跟着v-if或v-show，充当else功能。代码示例如下：

将v-show用在组件上时，因为指令的优先级v-else会出现问题，所以不要这样做。代码示例如下：

这可能也是一个组件

我们可以用另一个v-show替换v-else，代码示例如下：

这可能也是一个组件

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。尽管有点神奇，但是v-model不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。代码示例如下：

效果如图3-5所示。图3-5　v-model

除了以上用法，在v-model指令后面还可以添加多个参数（number、lazy、debounce）。

1．number

如果想将用户的输入自动转换为Number类型（如果原值的转换结果为NaN，则返回原值），则可以添加一个number特性。

2．lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。代码示例如下：
{{msg}}

我们在input输入框中输入“依然没变”，虽然触发了input事件，但是因为加入了lazy属性，msg的值一直没有发生变化。效果如图3-6所示。图3-6　lazy

3．debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送AJAX请求），那么它较为有用。代码示例如下：
{{msg}}

在5000ms内我们将输入框的内容清空，msg的值没有马上改变，还依然保持着“内容是在5000ms后才改变的~”，效果如图3-7所示。图3-7 5000ms内效果

5000ms后内容才被清空，效果如图3-8所示。图3-8 5000ms后效果3.1.5　v-repeat

我们可以使用v-repeat指令基于源数据重复渲染元素。对于数组中的每一个对象，该指令都会创建一个子Vue实例。这些子实例继承父类的所有数据，所以在重复的元素中，我们可以访问重复实例和父实例的属性。此外，我们也可以使用$index来呈现相对应的数组索引。代码示例如下：

• {{$index}} - {{parentMsg}} {{childMsg}}

效果如图3-9所示。图3-9　v-repeat

有时我们可能想重复一个包含多个DOM元素的块，在这种情况下，则可以使用

对于含有原始值的数组，我们可以简单地通过$value来获取值。代码示例如下：

• {{$value}}

效果如图3-10所示。图3-10　$value

有时我们更希望显式地访问变量，而不是隐式地回退到父作用域，这时可以通过使用别名的方式实现：v-repeat="item in items"

注：Vue.js 0.12.8及以后版本支持in分隔符。

当数组数据出现变动时如何检测呢？Vue.js包装了被观察数组的变异方法，它们能触发视图更新。被包装的方法有：● push()● pop()● shift()● unshift()● splice()● sort()● reverse()

源码定义如下：;[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function (method) { // cache original method var original = arrayProto[method] def(arrayMethods, method, function mutator () { // avoid leaking arguments: // http://jsperf.com/closure-with-arguments var i = arguments.length var args = new Array(i) while (i--) { args[i] = arguments[i] } var result = original.apply(this, args) var ob = this.__ob__ var inserted switch (method) { case 'push': inserted = args break case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // notify change ob.dep.notify() return result })})

如源码所示，Vue.js重写这些方法之后，触发了一次notify。

Vue.js还增加了两个方法来观测变化：$set、$remove。源码定义如下：def( arrayProto, '$set', function $set (index, val) { if (index >= this.length) { this.length = Number(index) + 1 } return this.splice(index, 1, val)[0] })def( arrayProto, '$remove', function $remove (item) { /* istanbul ignore if */ if (!this.length) return var index = indexOf(this, item) if (index > -1) { return this.splice(index, 1) } })

我们应该尽量避免直接设置数据绑定的数组元素，因为这些变化不会被Vue.js检测到，因而也不会更新视图渲染。这时，我们可以使用$set方法：// same as `demo.items[0] = ...` but triggers view updatedemo.items.$set(0, { childMsg: 'Changed!'})

$remove是$splice的语法糖，用于从目标数组中查找并删除元素。因此，不必这样：
{{msg}}

只用这样：// remove the item at index 0demo.items.$remove(0)

另外，也可以使用filter、concat、slice方法，返回的数组将是一个不同的实例。我们可以用新的数组替换原来的数组。demo.items = demo.items.filter(function (item) { return item.childMsg.match(/Hello/)})

在某些情况下，我们有时可能需要用全新对象（例如，通过API调用创建的对象）来替换数组。因为在默认情况下，v-repeat通过数据对象的特征来决定对已有作用域和DOM元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一的ID属性，便可以使用track-by特性给Vue.js一个提示，因而Vue.js能尽可能地复用已有实例。假定数据为：{ items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ]}

可以这样给出提示，代码示例如下：

在替换数组items时，如果Vue.js遇到一个包含有_uid: '88f869d'的新对象，那么它知道可以复用这个已有对象的作用域与DOM元素。

如果没有唯一的键供追踪，则可以使用track-by="$index"，它强制让v-for进入原位更新模式：片段不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。

这让数据替换非常高效，但是也会付出一定的代价。因为这时DOM节点不再映射数组元素顺序的改变，不能同步临时状态（比如元素的值），以及组件的私有状态。因此，如果v-repeat块包含元素或子组件，则要小心使用track-by="$index"。

因为JavaScript的限制，Vue.js不能检测到下面数组的变化：● 直接用索引设置元素，如vm.items[0] = {}。● 修改数据的长度，如vm.items.length = 0。

为了解决前一个问题，Vue.js 扩展了观察数组，我们可以使用上面讲过的$set方法：// 与 `example1.items[0] = ...` 相同，但是能触发视图更新vm.items.$set(0, { childMsg: 'Changed!'})

至于后一个问题，只需用一个空数组替换items即可。

我们也可以使用v-repeat遍历一个对象，每一个重复的实例都将有一个特殊的属性$key，对于原始值，我们可以使用$value来获取。代码示例如下：

• {{$key}} : {{$value}}
• ===
• {{$key}} : {{msg}}

效果如图3-11所示。图3-11　遍历对象

注：ECMAScript 5无法检测到新属性添加到一个对象上或者在对象中删除。要处理这种情况，Vue.js增加了三种方法：$add(key, value)、$set(key, value)和$delete(key)，这些方法可以用来添加和删除属性，同时触发视图更新。

v-repeat也支持整数。代码示例如下：

将模板重复整数次，效果如图3-12所示。图3-12　重复模板

也可以将元素重复整数次，代码示例如下：{{n}}

效果如图3-13所示。图3-13 整数

v-repeat同时还可以和Vue.js提供的内置过滤器或排序数据一起使用。

1．filterBy（0.12版本）

语法：filterBy searchKey [in dataKey...]

用法：

• {{user.name}}

数据如下：users: [ { name:'快车', tag:'1' }, { name:'出租车', tag:'2' }, { name:'顺风车', tag:'3' }, { name:'专车', tag:'4' },]

在

标签中展示了滴滴业务类型，在输入框中输入“快车，
中数据会根据所输入的“快车”，在users的name字段中过滤出我们需要的信息，并展示出来。效果如图3-14所示。图3-14　filterBy

2．orderBy（0.12版本）

语法：orderBy sortKey [reverseKey]

用法：

• {{user.name}}

在

标签中根据field变量代表的tag字段

正序排列数据，效果如图3-15所示。图3-15　orderBy3.1.6　v-for

我们可以使用v-for指令基于源数据重复渲染元素。我们也可以使用$index来呈现相对应的数组索引，代码示例如下：

• {{$index}} –{{parentMessage}} {{item.msg}}}

效果如图3-16所示。图3-16　v-for

v-for需要特殊的别名，形式为“item in items”（items是数据数组，item是当前数组元素的别名）。v-for在开始时对传入的表达式做了语法分析，不是“item in / of items”的形式，将给出警告信息。Vue.js 1.0.17及以后版本支持of分隔符，更接近JavaScript遍历器语法，用法如下：

源码定义如下：// support "item in/of items" syntaxvar inMatch = this.expression.match(/(.*) (?:in|of) (.*)/)if (inMatch) { var itMatch = inMatch[1].match(/\((.*),(.*)\)/) if (itMatch) { this.iterator = itMatch[1].trim() this.alias = itMatch[2].trim() } else { this.alias = inMatch[1].trim() } this.expression = inMatch[2]}if (!this.alias) { process.env.NODE_ENV !== 'production' ＆＆ warn( 'Invalid v-for expression "' + this.descriptor.raw + '": ' + 'alias is required.', this.vm ) return}

注：Vue.js 0.12.8及以后版本支持in分隔符。

使用v-for，将得到一个特殊的作用域，类似于AngularJS的隔离作用域，我们需要明确指定props属性传递数据，否则在组件内将获取不到数据。对于组件内的

标签，我们可以使用：

{{item.text}}

当数组数据出现变动时如何检测呢？Vue.js包装了被观察数组的变异方法，它们能触发视图更新。被包装的方法有：● push()● pop()● shift()

试读结束[说明：试读内容隐藏了图片]

下载完整电子书