作者：宋鹏等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Vue.js快跑：构建触手可及的高性能Web应用试读：
前言
前端开发领域一直在改变。网站变得越来越丰富，交互性也越来越强，作为前端开发者，我们需要不断增加复杂的功能和使用更加强大的工具。使用 jQuery 在某个页面中更改一部分文本很简单，但我们要做的事可不止这些——比如更新页面中大量具有交互性的部分、处理复杂的状态、使用客户端路由、高效简洁地编写和组织代码——在这种情况下，使用 JavaScript 框架会让我们的工作变得更加轻松。
框架是一种 JavaScript 工具，它使开发者能够更容易地创建丰富而又具有交互性的网站。框架所包含的功能使我们能够创建一个功能完备的 Web 应用程序，包括操作复杂的数据并将其显示在页面上、处理客户端路由而不是依赖服务端、有时甚至允许我们只需访问服务器一次并完成初始下载就能构建一个完整的网站。Vue.js 是一款近来十分流行的JavaScript 框架，同时它的普及性还在扩大。当时还在Google工作的 Evan You 在 2014年编写并发布了 Vue.js 的第一版。在写本书时，Vue.js 在 GitHub 上已经拥有超过 75000个星标，这使得它成为 GitHub 上受关注度排名第八位的代码仓库，同时这个数量还在迅速上涨[1]。Vue 拥有上百位合作者，它在 npm 上 每天约有 40000 次的下载量。它包含在开发网站和应用程序时非常有用的功能：一种功能强大、能够创建 DOM 和监听事件的模板语法，无须操心数据变化带来相应模板更新的响应式原理以及使维护数据变得更容易的功能。
适合读者
如果你已经对 HTML 和 JavaScript 有一定了解，并希望通过学习如何使用框架来提升对它们的认识，则这本书是为你而准备的。你没有必要精通 JavaScript，但是我在代码示例中没有解释任何有关 Vue.js 功能以外的 JavaScript 代码，所以了解一些 JavaScript 的基础知识将会很有帮助。代码示例也使用 JavaScript 的最新规范 ECMAScript 2015 进行编写，因此其中会包含诸如常量、箭头函数和解构等新的语言特性。如果你对 ES2015不熟悉，不要担心——有大量高质量的文章和资源能够帮助你[2]，同时示例代码也拥有很好的可读性。
如果你有使用 React 的经验，这本书仍然适合你，但花一些时间查看附录B是值得的，其中解释了 Vue.js 中涉及的一些概念，并与你在 React 中已经了解的内容做了比较。
各章简介
本书包含7章和两个附录。
第1章 Vue.js基础
本章介绍 Vue.js 的基础知识和核心技术。阐述如何安装并将 Vue.js 引入网页，以及如何使用它在页面上展示数据。
第2章 Vue.js 组件
Vue.js 允许并鼓励你将代码拆分为多个可在代码库中复用的组件。这一章将详细阐述如何创建一个易于维护和理解的代码库。
第3章 使用 Vue 添加样式
本书中的每一部分都会涉及 HTML 和 JavaScript，但在这一章中，将介绍更多在创建网站中关于视图层的内容。将阐述如何在 Vue 中使用 CSS 来定制化网站和应用，以及使用内置的辅助函数来协助你完成这项工作。
第4章 render 函数和 JSX
如果你看过了很多 Vue 代码或已经阅读完入门指南，就会熟知模板语法，但除了这个，Vue 还支持自定义渲染函数，它允许你使用 JSX 语法——一种 React 用户熟悉的语法。在本章中还将阐述如何在 Vue 中使用 JSX 语法。
第5章 使用 vue-router 实现客户端路由
Vue 本身只是一个视图层。要创建一个具有多个页面且无须新的额外请求即可访问的应用程序（或者用专业的说法：单页应用），需要将 vue-router 添加到网站中，可以使用它来处理客户端路由——比如说请求指定的路径时，代码如何执行和展示数据。这一章将阐述如何做到这一点。
第6章 使用 vuex 实现状态管理
在一个具有多级组件层级、更加复杂的应用中，在组件中传递数据会变得有些棘手。Vuex 使你能够在一个集中的空间里处理应用的状态，本章将阐述如何使用它来轻
松处理复杂应用的状态。
第7章 对 Vue 组件进行测试
到此，已经学习到了能够使网站正常运作所需要了解的一切，但是如果需要在未来继续维护网站，你应该为它编写测试。这一章将介绍如何使用 vue-test-utils 来为组件编写单元测试以确保它们在未来的运行中不会出现问题。
附录A 搭建 Vue 开发环境
vue-cli 使你能够从给定的模板中，快速构建 Vue 应用，本附录向你展示它是如何工作的以及它提供的一些模板。
附录B Vue 与 React
如果你拥有使用 React 的经验，那么可能已经很熟悉 Vue 中的诸多概念。本附录重点介绍 Vue 和 React 之间的异同点。
风格指南
本书中的所有示例代码都遵循官方 Vue 风格指南中所列举的指导原则。一旦你理解了Vue 并希望创建一个大型应用或者与他人进行协作，推荐你去阅读风格指南并遵循其中的指导原则。
可以在Vue.js 的网站上找到风格指南。
约定
下面是本书中所使用的排版约定：
中文楷体或英文斜体（Italic）
用于新的术语、URLs、电子邮件地址、文件名和文件扩展名。
等宽字体（Constant width）
用于程序清单以及段落内所涉及的程序元素，如变量或函数名称、数据库、数据类型、环境变量、语句和关键字。
等宽字体加粗（Constant width bold）
用于应当被用户输入的指令或者其他文本。
等宽字体加斜（Constant width italic）
用于应当被用户所提供的值或者取决于上下文的值所替换的文本。
这个元素代表技巧或者建议。
这个元素代表通用的备注。
这个元素代表警告或者提醒。
如何联系我们
请将对本书的评价和发现的问题通过如下地址通知出版社。
美国：
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2 号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
我们提供了本书网页，上面列出了勘误表、示例和其他信息。请通过http://bit.ly/reactNativeCookbook访问该页。
要给出本书意见或者询问技术问题，请发送邮件到bookquestions@oreilly.com。
更多有关书籍、课程、会议和新闻的信息，请见网站http://www.oreilly.com。
在Facebook 找到我们：http://facebook.com/oreilly。
在Twitter 上关注我们：http://twitter.com/oreillymedia。
在YouTube 上观看：http://www.youtube.com/oreillymedia。
致谢
首先，我向所有在我编写本书时，被我冷落的朋友们，表示抱歉和感谢。现在我已经写完了，我们又可以愉快地交流了。
特别感谢 Michelle，因为他一直都很棒，并且对音乐有很好的品位。
非常感谢 JuhoVepsäläinen 和 Rob Pemberton，他们帮助我处理 React 示例。我使用React已有一段时间，所以我很感谢他们的帮助！还要感谢其他人激发了我在写作时脑海中跳过的想法、句子和文字：Sab、Ash、Alex、Chris、Gaffen 和 Dave 等。
感谢 O’Reilly Media的每一位，并特别感谢 Chris Fritz、Jakub Juszczak、Kostas Maniatis 和 Juan Vega，他们为本书提供了很多技术反馈，我从中也学到了很多。
[1]当我开始着手写这本书的时候，它已经拥有了 65000 个星标。当你读到这本书的时候，它肯定已经不止75000 个星标了！
[2]推荐Babel网站上的“学习ES2015”。第1章 Vue.js基础
如前言所述，Vue.js 是构建强大客户端应用的技术体系中的核心库。但开发一个网站并非必须使用一整套技术方案，因此我们会从 Vue 自身开始讲起。为什么选择 Vue.js
如果不使用框架，项目最终会成为一团不可维护的代码，而绝大部分代码所要处理的工作，框架都已经为我们抽象出来了。以下面两段代码为例，它们都实现了同样的功能：使用 Ajax 下载一个列表数据并在页面上显示。其中，第一段使用 jQuery 实现，而第二段使用 Vue 实现。
使用 jQuery 的代码逻辑是下载列表数据，选择 ul 元素，然后判断列表项是否存在，如果存在则遍历列表，手动创建 li 元素，根据需要添加 is-blue 类名，把列表项设置为li 的文本子节点，最后把生成的 li 节点添加到 ul 元素中：
这段代码执行了以下逻辑：
1.使用 $.get() 发起 Ajax 请求。
2.选取类名为 .js-items 的元素并将它存入 $itemUl 变量。
3.如果下载的列表中没有列表项，则创建一个 li 元素，设置这个 li 元素的文本节点以表示当前没有列表项，然后将它添加到文档流中。如果列表中存在列表项，则循环遍历每一个列表项。
4.为列表中的每一项创建一个 li 元素，并将其文本节点设置为该列表项的值。然后判断该列表项是否包含 blue 字符串，如果包含则将 li 元素的类名设置为 isblue。最后，将 li 元素添加到文档流中。
上面的每一步都不得不手动实现——每一个元素都需要单独创建并添加到文档流中。而且代码逻辑乍看起来并不清晰，我们不得不阅读所有的代码来弄懂发生了什么。使用 Vue 实现同样功能的代码则更加容易阅读和理解——即使你还不熟悉 Vue：
这段代码执行了以下逻辑：
1.使用 fetch() 发起一个 Ajax 请求。
2.将返回的 JSON 数据解析为 JavaScript 对象。
3.将下载的列表项存储为 data 对象中的 items 属性。
上述便是这段代码的所有逻辑。现在已经下载并存储了列表项，然后可以使用 Vue 的模板功能将这些元素渲染到文档对象模型（Document Object Model，简称 DOM，用于标明元素如何在 HTML 页面上呈现）。我们只需要告诉 Vue 我们希望为每个列表项创建一个 li 元素，并且将 item 作为该元素的文本，Vue 会为我们处理元素的创建和类名的设置。如果还不能完全理解这段示例代码，请不要担心，放慢节奏，通过整本书逐一介绍各种各样的概念。
第二段代码明显更短，而且更加易读，这是因为实际的应用逻辑和视图逻辑是完全隔离的。和不得不艰难地查看一些 JQuery 代码来了解当时添加了哪些元素不同，我们可以看一下上面的 Vue 模板：如果列表项没有展示一段警告信息，则列表项会用列表元素显示。在大型示例中，它们的差别会变得更加明显。想象一下，要在页面上增加一个按钮，当用户单击这个按钮时向服务器发送请求，获取新的列表项，然后更新页面。要实现这个功能，在 Vue 的例子中只需要增加几行额外的代码，但在 jQuery 的例子中，事情会变得愈加复杂。除了核心的 Vue 框架，还有几个库和 Vue 配合起来非常好用，而且是由 Vue 的原班人马来维护的。vue-router 用于路由控制——根据应用的不同 URL 来显示不同的内容。vuex用于状态管理——通过一个全局数据中心在组件间共享数据。vue-test-utils 用于 Vue 组件的单元测试。本书后续内容将对这3个库进行恰当的介绍：第5章介绍vue-router，第6章介绍 vuex，第7章介绍 vue-test-utils。安装和设置
安装 Vue 不需要任何特殊的工具，使用下面的代码就可以实现：
这段代码有3个重点。首先有一个 ID 为 app 的 div 元素用于初始化 Vue ——因为多种原因，不能在 body 元素上进行初始化。然后，在页面上引用 CDN[1]版本的 Vue 文件。当然也可以下载到本地并引用，但出于简化的考虑，暂且这样处理。最后，运行一些JavaScript 代码，创建一个 Vue 的实例，并将该实例的 el 属性指向之前提到的 div 元素。上述方式对于简单的页面很好用，但对于任何更加复杂的场景，你可能希望使用类似 webpack 这样的打包工具。借助它可以使用 ECMAScript 2015（甚至更高）标准的JavaScript 语言、编写单文件组件、实现组件的相互引用，以及书写作用域为特定组件的 CSS（在第2章中会有详细介绍）等其他特性。vue-loader和webpack
vue-loader 是一个 webpack 的加载器，允许你将一个组件的所有 HTML、JavaScript 和CSS 代码编写到同一个文件中。目前只需要了解如何安装它，我们将会在第2章中适当深入地探索它。如果已经配置好 webpack 或者有喜爱的 webpack 配置模板，可以通过npm 安装 vue-loader，然后将下面的代码添加到webpack 配置的 loader 部分，就可以完成 vue-loader 的安装。
如果还没有配置好 webpack 或者正在头疼如何添加 vue-loader，不要担心，我也没有从无到有地完成过 webpack 的配置。可以使用一份现成的模板来初始化 vue 项目，它使用了 webpack 并已经安装好了 vue-loader。你可以通过 vue-cli 使用它：
执行上述命令后你会被问到一系列的问题，例如项目的名称以及它需要哪些依赖，一旦回答完这些问题，vue-cli 会为你初始化一个基础的项目：
现在就尝试一下，然后根据命令行工具的提示来启动服务器。
恭喜——你已经创建了你的第一个 Vue 工程！
可以查看生成的文件来了解发生了什么，大部分重要的内容在 src 目录下的 .vue 文件中。模板（Template）、数据（Data）和指令（Directive）
Vue 的核心是将数据显示在页面上，这一功能通过模板实现。为正常的 HTML 添加特殊的属性——被称作指令——借助它来告诉 Vue 我们想要实现的效果以及如何处理提供给它的数据。
来看一个例子。下面的示例会在早上显示“早上好！”，在下午 6 点前显示“中午好！”，在之后显示“晚上好！”：
首先来看最后一部分：data 对象，我们通过它告诉 Vue 想在 template 上显示哪些内容。在这个对象上设置了3个属性——isMorning、isAfternoon和isEvening——它们中有一个值为 true，其他两个值为 false，具体根据当前时间决定。
之后，在 template 中使用 v-if 指令来根据3个变量的值显示3种问候语中的一种。设有 v-if 属性的元素只有传递给指令的值为真时才会显示，否则，该元素不会被写入页面。如果当前时间为下午2:30，那么如下内容会被输出到页面上：
尽管 Vue 具备响应式能力，但上述例子并非响应式的，页面也不会随着时间变化而更新。稍后我们会更详细地介绍响应式。
然而上述示例中出现了很多重复代码：如果能够将当前时间设置为 data 的一个属性，然后在 template 中实现比较逻辑，这样代码将会更加简洁。幸运的是我们可以这样做，Vue 支持在 v-if 中进行简单的表达式运算：
在 JavaScript 中实现业务逻辑，而在 template 中实现视图逻辑，以这种方式编写代码意味着我们可以对页面上将会显示的内容一目了然。相比让离元素很远的 JavaScript 代码来决定该元素是显示还是隐藏，这种方法要好很多。
后面还会介绍计算属性，它可以使上面的代码更加简洁——上述代码仍然有些重复。除了使用指令，也可以通过插值的方式将数据传递给模板，如下所示：
上述代码将会输出如下内容到页面上：
可以将上述两者结合起来，同时使用指令和插值来只显示一些被定义的或者有用的文本。来试一下，看你是否能指出下面的代码在什么情况下会显示什么内容到页面上？
location.pathname 是当前页面 URL 的路径值，因此对于网站的首页它的值会是“/”，对于网站的其他页面，它的值就会是其他值（比如可能是“/post/1635”）。上述示例代码会告诉你当前页面是否是网站的首页：它在 v-if 指令中检测路径值是否等于“/”（由此可以判断用户是否位于网站的首页），然后会遇到一个新指令：v-else。这个指令很简单，当用在带有 v-if 指令的元素之后时，它的表现和一个 if-else 语句中的 else 语句一样。所以第二个元素只在第一个元素不显示时才会显示在页面上。
正如你所见，除了可以传递字符串和数字，还可以传递其他类型的数据到模板中。因为可以在模板中执行简单的表达式运算，所以可以传递一个数组或对象，并在模板中引用它的某个属性或元素：
上述代码将会输出如下内容到页面上：
可见，如果将整个数组或对象输出到页面上，Vue 会输出 JSON 编码后的值。在调试时，这样做比将日志输出到控制台更加有效，因为页面显示会随着值的变化而更新。v-if vs v-show
在前面一节中知道了 v-if 指令可以控制一个元素的显示和隐藏，那么它是如何实现的？它和看起来很像的 v-show 指令有什么区别呢？
如果 v-if 指令的值为假[2]，那么这个元素不会被插入 DOM 。
下面的 Vue 模板
会输出如下内容：
和 v-show 指令比较一下，该指令使用 CSS 样式控制元素的显示/隐藏。
下面的 Vue 模板
会输出如下内容：
你的用户（可能）会看到同样的内容，但两者间确实存在其他的影响和差异。
首先，因为使用 v-if 隐藏的内部元素不会被显示，Vue 不会尝试生成对应的 HTML 代码；而对于 v-show 指令，事实并非如此。这意味着隐藏尚未加载的内容时，v-if 指令更好一些。
下面这个例子会抛出一个异常：
试读结束[说明：试读内容隐藏了图片]