作者：（法）纪尧姆·周（Guillaume Chau）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Vue.js项目实战试读：
前言
作为一个相对较新的UI库，Vue对于当前主流的JavaScript库（如Angular和React）来说有很大的威胁。Vue有很多优点：易用、灵活、速度快，并且为构建完整的现代Web应用提供了所需的所有功能。
Vue渐进式的特点使得开发者能够轻松上手，然后使用更高级的功能对应用进行扩展。Vue还具有一个丰富的生态系统，包括官方提供的一些库，用于路由、状态管理、脚手架（vue-cli）和单元测试。Vue甚至开箱即用地支持服务端渲染。
这一切都要归功于一个令人惊叹的社区，以及一支了不起的核心团队。是他们推动着Web技术的创新，并使得Vue成为一个可持续发展的开源项目。
为了帮助开发者学习Vue并利用Vue构建应用，本书由6个指南构成。每个指南都是一个具体的项目。在学习每个项目时，开发者将自己动手构建一个实际的应用。这也就意味着，学完本书时，开发者将拥有6个可以运行的Vue应用。
就如Vue一样，书中的这些项目也是渐进式的，一步一步引入新的知识点，使得开发者能轻松地掌握Vue。第一个项目不需要太多配置和构建工具，所以开发者可以立即构建出一个实际的应用。接着，更高级的知识点会被逐步引入项目中。当学完本书时，开发者将拥有一套完整的Vue开发技能。本书涵盖的内容
第1章，Vue开发入门。这一章介绍如何利用动态模板创建一个基本的Vue应用，以及如何通过指令实现基本的交互。
第2章，项目1：Markdown笔记本。这一章探索创建一个完整的Vue应用要使用的功能，例如计算属性、函数、生命周期钩子、列表渲染、DOM事件、动态CSS、模板条件和过滤器格式化等。
第3章，项目2：城堡决斗游戏。这一章阐述浏览器卡牌游戏的创建，其结构如同一棵树，由可以相互通信且可复用的组件组成。该游戏还拥有动画和动态的SVG图形。
第4章，高级项目配置。这一章关注如何使用官方提供的Vue命令行工具（CLI），根据CLI的向导使用Webpack、Babel以及更多构建工具来构建一个完整的项目。同时还介绍了单文件组件的格式，让开发者能够创建组件作为构建块。
第5章，项目3：支持中心。这一章介绍如何利用官方路由库来组织一个多页面应用，涉及嵌套路由、动态参数和导航守卫等。此项目还拥有自定义用户登录系统。
第6章，项目4：博客地图。这一章带你创建一个利用Google OAuth登录和Google Maps API的应用。还介绍了利用官方提供的VueX库进行状态管理，以及快速功能组件等重要内容。
第7章，项目5：在线商店以及扩展。这一章概述一些高级开发技术。例如，使用ESLint做代码质量检查，使用Jest对Vue组件进行单元测试，将应用翻译为多语言，以及使用服务端渲染技术提高速度和解决搜索引擎优化（SEO）的问题。
第8章，项目6：使用Meteor开发实时仪表盘。这一章教你如何在Meteor应用中使用Vue，以利用这个全栈框架的实时处理功能。本书需要的工具
学习本书的过程中，你只需要一个文本编辑器或代码编辑器（推荐使用Visual Studio Code和Atom），以及一个Web浏览器（建议优先选择最新版的Firefox或Chrome浏览器作为开发工具）。目标读者
如果你是一名Web开发者，想利用Vue.js来构建功能丰富、交互性强的专业应用，那么本书正适合你。在阅读本书时，你应该已经掌握了JavaScript语言。如果熟悉HTML、Node.js，以及类似npm和Webpack这样的工具，那么对于阅读本书将很有帮助，但这不是必需的。排版约定
为了区分不同类型的信息，本书定义了一些文本样式。下面是一些样式的示例以及相关说明。
正文中的代码采用以下样式：“可以通过使用d3.select函数选择HTML元素。”
代码块的样式如下所示：class Animal{public:virtual void Speak(void) const // 基类中的关键字virtual{ // 使用Mach 5控制台输出 M5DEBUG_PRINT("...\n");}
新的术语和重要的词语将以黑体形式显示。在屏幕上（如菜单或对话框中）出现的文字按照如下样式显示：“单击按钮Next将打开下一个界面。” 此图标表示警告或重要提示。 此图标表示提示或小技巧。读者反馈
欢迎读者随时进行反馈，告诉我们你对本书的想法——喜欢或者不喜欢都可以。读者反馈对我们来说非常有用。
一般的反馈可以发送到电子邮箱feedback@packtpub.com，请在邮件标题中提及书名。
如果你精通某一领域，并有意向参与相关图书的编写，请查看我们的作者指南：www.packtpub.com/authors。客户支持
现在你已经是Packt图书（本书）的拥有者了，我们为你提供了许多物超所值的内容。下载示例代码
用你的账号登录http://www.packtpub.com，可以下载本书的示例代码文件。如果是从其他渠道购买，可以打开网址http://www.packtpub.com/support，注册之后，我们会将文件通过电子邮件直接发送给你。
可以按照如下步骤下载代码文件。
(1) 使用你的电子邮箱地址和密码登录或注册我们的网站。
(2) 将鼠标移到网页顶部的SUPPORT选项卡上。
(3) 点击Code Downloads & Errata。
(4) 在Search框中输入书名。
(5) 选择要下载代码文件的图书。
(6) 在下拉菜单中选择购买渠道。
(7) 点击Code Download。
还可以在Packt Publishing网站的图书详情页面点击Code Files按钮进行下载。可以在Search框中输入书名找到图书详情页面。注意，需要用Packt账号登录。
下载代码文件之后，利用最新版的解压缩软件进行解压或提取：● Windows用户使用WinRAR/7-Zip● Mac用户使用Zipeg/iZip/UnRarX● Linux用户使用7-Zip/PeaZip
本书的代码也可以在GitHub（https://github.com/PacktPublishing/Vue-js-2-Web-Development-Projects）上找到。我们出版的其他图书的相关代码和视频可以在https://github.com/PacktPublishing/获取。下载本书的彩色图片
本书中使用的彩色截图和图表以PDF文件的形式提供下载。彩色图片有助于读者更好地理解控制台输出的变化。可以在这里下载该文件：https://www.packtpub.com/sites/default/files/downloads/Vuejs2WebDevelopmentProjects_ColorImages.pdf。勘误
虽然我们已经想尽办法确保内容的准确性，但错误在所难免。如果你发现我们出版的图书有错误（不论是文本还是代码的错误），请告诉我们，我们将不胜感激。这样你不仅可以让别人知晓错误，减少疑惑，还有助于我们对本书后续版本的改进。如果你发现了任何错误，1请访问http://www.packtpub.com/submit-errata告知我们。通过点击Errata Submission Form链接选择图书，然后输入勘误详情。一旦你的勘误得到验证，我们将接受此勘误并上传到我们的网站上或添加到已有勘误表的相应位置。针对本书中文版的勘误，请到http://www.ituring.com.cn/1book/2575查看和提交。——编者注
要查看之前提交的勘误，可以打开https://www.packtpub.com/books/content/support，然后在搜索框里输入书名，相关信息将会出现在Errata部分。第1章Vue开发入门
Vue是一个专注于构建Web用户界面的JavaScript库。本章首先通过一段简单的介绍让你对Vue有一个初步的认识，然后创建一个Web应用，为本书后续创建的不同项目奠定基础。1.1 为什么需要另外一个前端框架
相对来说，Vue在JavaScript前端领域属于后来者，但是对于当前主流JavaScript库的地位具有很大的威胁。它易用、灵活、速度快，还提供了许多功能和可选工具，这使得开发者能够快速地构建一个现代Web应用。Vue的作者尤雨溪将其称为渐进式框架。● Vue遵循渐进增量的设计原则，其核心库专注于用户界面，使得
现有的项目可以方便地集成使用Vue。● Vue既可以构建出很小的原型，又可以构建出复杂的大型Web应
用。● Vue非常容易上手——初学者能轻松掌握Vue，而已经熟悉Vue
的开发者则可以在实际项目中快速发挥出它的作用。
Vue整体上遵循MVVM（Model-View-ViewModel，模型－视图－视图模型）架构，也就是说View（用户界面或视图）和Model（数据）是独立的，ViewModel（Vue）是View和Model交互的桥梁。Vue对View和Model之间的更新操作做了自动化处理，并且已经为开发者进行了优化。因此，当View的某个部分需要更新时，开发者并不需要特别指定，Vue会选择恰当的方法和时机进行更新。
Vue还吸取了其他类似框架（如React、Angular和Polymer）的精华。下面是对Vue核心功能的概述。● 一个响应式的数据系统，能通过轻量级的虚拟DOM引擎和最少
的优化工作来自动更新用户界面。● 灵活的视图声明，包括优雅友好的HTML模板、JSX（在
JavaScript中编写HTML的技术）以及hyperscript渲染函数（完全
使用JavaScript）。● 由可维护、可复用组件构成的组件化用户界面。● 官方的组件库提供了路由、状态管理、脚手架以及更多高级功能，
使Vue成为了一个灵活且功能完善的前端框架。1.1.1 一个有发展前景的项目
2013年，尤雨溪开始筹划构建Vue的第一版原型。那时候尤雨溪任职于Google，并在工作中使用Angular。尤雨溪最初的目标是吸取Angular中所有优秀的功能，比如数据绑定和数据驱动DOM，并摒弃会导致框架死板、难以学习和使用的一些功能。
Vue于2014年2月首次公开亮相，并在第一天就大获成功：出现在HackerNews首页，在Reddit的/r/javascript板块中位居榜首，并且其官网获得了1万次独立访问。
Vue的第一个主要版本1.0于2015年10月发布。截至2015年年底，Vue在npm中的下载量飙升至38.2万次，在GitHub上收获了1.1万个star，其官网获得了36.3万次独立访问。主流的PHP框架Laravel选用Vue替代React作为其官方的前端库。
Vue的第二个主要版本2.0于2016年9月发布，具有基于虚拟DOM的全新渲染器以及许多新特性，比如服务端渲染和性能提升等。本书就是基于2.0编写的。Vue是目前速度最快的前端框架之一。根据与React团队共同得出的对比报告，Vue的性能甚至优于React（https://cn.vuejs.org/v2/guide/comparison）。写作本书时，Vue是GitHub上第二流行的前端框架，有7.2万个star，位于React之后、Angular之前1。中文版出版时，Vue已超越React，位居第一，参见：1https://github.com/collections/front-end-javascript-frameworks。——编者注
在其路线图中，Vue的下一个主要版本会集成更多的Vue原生库，比如Weex和NativeScript，以便使用Vue来构建原生移动应用，同时还会添加新的特性和优化。
如今，有许多公司都在使用Vue，比如微软、Adobe、阿里巴巴、百度、小米、Expedia、任天堂和GitLab。1.1.2 兼容性要求
Vue没有任何第三方依赖，可以在所有兼容ECMAScript 5的浏览器中使用。这也就是说它不支持Internet Explorer 8及以下版本，因为Vue使用了JavaScript中相对较新的特性，比如Object.defineProperty，而它们在老版本的浏览器中是无法polyfill的。
在本书中，编写代码使用的JavaScript版本为ES2015（以前称为ES6），所以在学习前几章时，需要一个较新的浏览器（比如Edge、Firefox或Chrome）来运行示例代码。本书后续章节将介绍编译器Babel，它编译过的代码可以很好地运行在老版本浏览器中。1.2 一分钟设置
事不宜迟，下面我们通过快速设置来创建第一个Vue应用。由于Vue与生俱来的灵活性，只需要一个简单的
Is this an Hello world?
在浏览器的控制台中，可以看到类似如下的内容：Yes! We are using Vue version 2.0.3
正如上面的代码所示，库对外提供了一个Vue对象，该对象包含使用Vue所需的所有功能。至此，一切就绪。1.3 创建一个应用
现在，这个Web页面中还没有运行Vue应用。整个库都是基于Vue实例的，而实例是View和Model（数据）交互的桥梁。因此需要创建一个新的Vue实例来启动应用：// 创建Vue实例var app = new Vue({ // 根DOM元素的CSS选择器 el: '#root', // 一些数据 data () { return { message: 'Hello Vue.js!', } },})
在上面的代码中，使用关键字new调用Vue构造器创建了一个新的实例。Vue构造器有一个参数—— option对象。该参数可以携带多个属性（称为选项），我们会在后面的章节中逐渐学习。这里只使用其中的两个属性。
通过el选项，我们使用CSS选择器告知Vue将实例添加（挂载）到Web页面的哪个DOM元素中。在这个示例中，Vue实例将使用
我们还会在data选项中初始化一些数据，利用了携带一个字符串的message属性。现在Vue应用运行起来了，但是此处还并没有做什么。 在单个Web页面中，开发者可以添加任意多个Vue应用。只需要为每个应用创建出新的Vue实例并挂载到不同的DOM元素即可。当想要将Vue集成到已有的项目中时，这非常方便。Vue开发者工具
Vue有一个官方调试工具，在Chrome中以扩展的方式呈现，名为Vue.js devtools。通过该工具可以看到应用的运行情况，这有助于调试代码。可以在Chrome网上应用商店（https://chrome.google.com/webstore/search/vue）下载；如果使用Firefox，则可以到Firefox附加组件（https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss）下载。
使用Chrome版本的话，还需要进行额外的设置。在扩展设置中，启用Allow access to file URLs选项，这样调试工具就能在从本地磁盘打开的Web页面上检测Vue了。
打开我们的Web页面，按快捷键F12（在OS X中快捷键是Shift + command + c）打开Chrome开发者工具，然后找到Vue选项卡（有可能隐藏在More tools...下拉菜单中）。打开该选项卡之后，就可以看到一棵默认名为Root的Vue实例树。如果点击Root的话，会在侧边栏上显示出实例的相关属性。 可以将devtools选项卡拖放到喜欢的位置。建议将其放在靠前的位置，因为当Vue不处于开发模式或没有运行时，该选项卡在页面中是隐藏起来的。
可以通过name选项修改Vue实例的名字：var app = new Vue({ name: 'MyApp', // ...})
当一个页面中有多个Vue实例时，这有助于直观地在开发者工具中找到具体的某个实例。1.4 借助模板实现DOM的动态性
在Vue中，开发者可采用多种方式编写View。现在，我们先从模板开始。模板是描述View最简单的方法，因为它看起来很像HTML，并且只需要少量额外的语法就能轻松实现DOM的动态更新。1.4.1 文本显示
先来看看模板的第一个功能：文本插值。文本插值用于在Web页面中显示动态的文本。文本插值的语法是在双花括号内包含单个任意类型的JavaScript表达式。当Vue处理模板时，该JavaScript表达式的结果将会替换掉双花括号标签。用下面的代码替换掉
{{ message }}
在上面的模板中，有一个
元素。该元素的内容是JavaScript表达式message的结果。该表达式将返回Vue实例中message属性的值。现在应该可以在Web页面中看到输出了一行新的文本内容：Hello Vue.js!。这看起来只是显示了一个字符串，但是Vue已经为开发者做了很多事情——DOM和数据连通了。
为了证明这一点，我们打开浏览器控制台并修改app.message的值，然后按回车键：app.message = 'Awesome!'
可以发现显示的文本发生了改变。这背后的技术称为数据绑定。也就是说每当数据有改变时，Vue都能够自动更新DOM，不需要开发者做任何事情。Vue框架中包含一个非常强大且高效的响应式系统，能对所有的数据进行跟踪，并且能在数据发生改变时按需自动更新View。所有这些操作都非常快。1.4.2 利用指令添加基本的交互
接下来在我们的静态应用中加入交互性吧。例如，允许用户通过输入文本修改页面中显示的内容。要达到这样的交互效果，可以在模板中使用称为指令的特殊HTML属性。 Vue中所有的指令名都是带v-前缀的，并遵循短横线分隔式（kebab-case）语法。这意味着要用短横线将单词分开。HTML属性是不区分大小写的（大写或小写都没有任何问题）。
在此，需要使用的指令是v-model，它将元素的值与message数据属性进行绑定。在模板里面添加一个新的元素，该元素带有v-model="message"属性：
{{ message }}
当input值发生改变时，Vue会自动更新message属性。你可以在input中输入一些内容，验证文本内容是否会随着输入的变化而变化，以及开发者工具中值的变化：
Vue提供了许多指令，开发者还可以自定义指令。不用担心，后续章节会进行介绍。1.5 小结
本章首先快速设置了一个Web页面来着手使用Vue，然后编写了一个示例应用。我们在页面中创建并挂载了一个Vue实例到DOM中，接着编写模板实现了DOM的动态性。在这个模板中，我们借助文本插值用一个JavaScript表达式来显示文本内容。最后，通过v-model指令将input元素绑定到数据属性，给Web页面添加了一些交互。
在下一章中，我们会使用Vue创建第一个真正的Web应用——Markdown笔记本。我们将用到Vue提供的更多优秀功能，使得该应用的开发成为一次快速而有趣的体验。第2章项目1：Markdown笔记本
我们将创建的第一个应用是一个Markdown笔记本，过程中会逐步展开介绍Vue的几个功能。我们会在第1章的基础之上添加更多的元素，例如用于用户交互的指令和事件，更多的Vue实例选项，以及对值做处理的过滤器。
在开始编写代码之前，先介绍一下即将开发的应用，并明确要达成的目标：● 该笔记本应用允许用户以Markdown标记语言来写笔记；● 支持Markdown的实时预览；● 用户可以添加任意多条笔记；● 笔记可以在用户下次打开应用时重新加载出来。
为此，我们将用户界面分为三部分：● 笔记编辑器作为主要内容呈现在中间；● 右侧面板用来实时预览当前的Markdown笔记；● 左侧面板上有笔记列表和一个添加笔记的按钮。
本章学习结束时，应用的效果看起来如下所示。2.1 一个基本的笔记编辑器
现在我们将从一个非常简单的Markdown笔记本应用入手：只在左侧显示一个文本编辑器，在右侧显示Markdown实时预览。然后，再将应用扩展为支持多条笔记的完整笔记本。2.1.1 项目设置
对于此项目，我们需要准备几个文件用于起步。
(1) 首先下载本章的源代码文件，解压到一个文件夹后打开chapter2-simple。打开文件index.html，添加一个div元素，其id为notebook。然后添加一个section，其class为main。至此，index.html文件看起来是这样的：
(2) 现在打开script.js文件并添加一些JavaScript代码。如同第1章中一样，创建一个Vue实例，并利用Vue构造函数将实例挂载到#notebook元素上。// 新建一个VueJS实例new Vue({ // 根DOM元素的CSS选择器 el: '#notebook',})
(3) 然后，添加一个名为content的数据属性，用于保存笔记内容。new Vue({ el: '#notebook', // 一些数据 data () { return { content: 'This is a note.', } },})
至此，你已经可以创建第一个实际的Vue应用了。2.1.2 笔记编辑器
应用现在可以运行了，接下来添加一个文本编辑器。我们使用一个简单的textarea元素，以及第1章介绍的v-model指令。
在index.html中创建一个section元素，在里面添加textarea，然后在textarea中添加一个v-model指令，并绑定到content属性上：
现在，如果在笔记编辑器里面修改文字，可以在Chrome的开发者工具中看到content的值会自动改变。 v-model指令不限于文本输入使用。它同样可以用于其他元素，例如勾选框、单选按钮，甚至自定义组件。本书的后面有相关介绍。2.1.3 预览面板
为了将以Markdown编写的笔记转换为有效的HTML，这里使用了一个名为Marked的第三方库。
(1) 在页面中，将Marked添加到引用Vue的
Marked使用起来非常简单，调用它的时候传入Markdown文本内容，它将会返回相应的HTML。
(2) 用一些Markdown文本内容进行尝试：const html = marked('**Bold** *Italic* [link] (http://vuejs.org/)')console.log(html)
在浏览器的控制台可以看到如下输出：
Bold Italiclink
1. 计算属性计算属性是Vue提供的一个强大功能。通过它可以定义一个新的属性，而该属性可以结合任意多个属性，并做相关转换操作，
例如将一个Markdown字符串转换为HTML——这也是为什么要
使用一个函数来定义它的值。计算属性具有下面几个特征：● 计算属性的值基于它的依赖进行缓存，因此如果没有必要是不会重新运行函数的，从而有效防止无用的计算；● 当函数中用到的某个属性发生了改变，计算属性的值会根据需要自动更新；● 计算属性可以如其他普通属性一样使用（可以在其他的计算属性中使用计算属性）；● 计算属性只有真正用于应用中时，才会进行计算操作。计算属性可以帮助我们将Markdown格式的笔记自动转换为
有效的HTML，这样就可以实现笔记的实时预览。只需要在
computed选项中声明我们的计算属性即可：
// 计算属性
computed: {
notePreview () {
// Markdown渲染为HTML
return marked(this.content)
},
},2. 文本插值转义现在使用文本插值将笔记显示到一个新面板中。(1) 创建一个class为preview的aside元素，用来显示计算属
性notePreview的值：
{{ notePreview }}
这样在应用的右侧就有一个用来显示笔记的预览面板了。如果在笔记编辑器中输入一些文本，可以看到预览面板中的内容会
自动更新。但是，当使用Markdown格式时，应用会有一个问
题。(2) 利用**将文本加粗，如下所示：
I'm in **bold**!对于上面的内容，计算属性应该返回有效的HTML，并且我
们应该能在预览面板中看到渲染了一些加粗的文字。但是，实际
看到的内容是这样的：
I'm in bold!可以看到文本插值自动将内容转义为HTML标签了。这样可
以防止注入攻击，提升应用的安全性。好在有一种方法可以显示
出HTML内容，我们稍后会看到。不过，这迫使你思考用这种方
法会纳入存在潜在威胁的动态内容。例如，你开发了一个评论系统，任意用户都可以在这个系统
中写一些文字评论。如果有人在评论中写了一些HTML，在页面
中显示出有效的HTML内容，会怎么样呢？他们可以添加一些不
怀好意的JavaScript代码，这样所有访问该系统的用户都会受到
恶意代码的攻击。这类攻击称为跨站脚本攻击（XSS攻击）。这
就是为什么文本插值总是对HTML标签做转义处理。 在应用内，不建议使用v-html指令对用户提供的内容做HTML插值。这是因为用户可能会在
试读结束[说明：试读内容隐藏了图片]