Vue.js从入门到项目实战

　　本书从Vue框架的基础语法讲起，逐步深入Vue进阶实战，并在最后配合项目实战案例，重点演示了Vue在项目开发中的一些应用。在系统地讲解Vue的相关知识之余，本书力图使读者对Vue项目开发产生更深入的理解。
　　本书共分为11章，涵盖的主要内容有前端的发展历程、Vue的基本介绍、Vue的语法、Vue中的选项、Vue中的内置组件、Vue项目化、使用Vue开发电商类网站、使用Vue开发企业官网、使用Vue开发移动端资讯类网站、使用Vue开发工具类网站。
　　本书内容通俗易懂、案例丰富、实用性强，特别适合Vue的初学者和从业人员阅读，同时也适合职业生涯遇到“瓶颈”的前端从业人员和其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材。

　　开发理论与编码实践结合，让你不仅学有所成，更能学以致用！
　　系统：从点到面讲解，循序渐进，有条有理
　　深入：以底层筑基实现上层运用，让你知其所以然
　　实用：提供62个应用案例，以实践检验真理
　　实战：4种常见类型网站实例，避免纸上谈兵
　　免费提供配套源程序下载+精彩视频学习教程

　　JS进行开发，正如一切的编程语言都立足于电元信号的正负极，即01码，可为什么软件都不采用二进制编码来进行开发呢？这里面牵扯到一个成本的问题，这正是影响项目领导者进行决策的关键因素。Vue项目与原生JS或jQuery等仿原生框架项目相比，开发成本要低一些。与此同时，Vue项目对从业者的要求要高一些，待遇和前景要好一些。
　　如果你是一名原生JS的应用开发者，不妨学一手Vue，也许就此突破职业“瓶颈”，迎来职业生涯又一春天。本书将作为你成长路上的最佳伴侣。
　　（3）对MVVM架构理念感兴趣的爱好者
　　从GitHub上被标星的次数来看，Vue从诞生至今，以其强大的特性和低廉的学习成本后来居上，已经成为MVVM框架中的最受欢迎者。从各个角度的对比来看，Vue也比在MVVM框架中同样具有代表性的Angular和React更出色一些，这点在本书中也有论述。毫无疑问，对Vue的学习将有助于你了解MVVM的架构理念，达到一叶知秋的效果。此外，本书还将演示多个采用MVVM架构的Web项目，在实战中践行理论，以呈现出最真实的观感。
　　（4）大中专院校和培训机构等相关专业的学生
　　从本质上来讲，Vue属于前端技术栈中的一项实用技能，更适合于软件工程和计算机科学与技术等相关专业的同学学习。但如果你想跨专业就业的话，上手Vue也并不是一件难事，本书将带领你快速入门Vue的世界，前提是需要一定的前端基础。
　　多年以来，程序员的薪资待遇一直为人所羡慕且不断地提升，而前端工程师更是其中热门。从近年来的招聘信息来看，企业对于前端的要求也越来越高，“MVVM框架（Vue/React/Angular）的使用经验”已成为Web应用项目招人的基本要求。本书将以理论结合实战的方式，由浅入深地对Vue进行讲解，脚踏实地，一步一个脚印，帮你筑基前端工程师之路。
　　本书特色
　　（1）示例为主，剖析为辅，一切尽在运行中，避免将理论架空本书中的知识点均配以精心编制、具有代表性的示例，并力图将知识点融入示例中进行讲述，目的在于以示例为驱动演绎知识点，将理论生动形象化，避免大段理论带来的枯燥感和视野盲区。在由浅入深地讲述一套知识体系时，笔者将以同一示例为原型，不断对其进行丰富和变换，绝不会引入新的示例代码以增添读者的负担。此外，这些示?例均是独立可运行的，读者完全可以在模仿和拓展中解决阅读时产生的疑惑。
　　（2）理论与实践结合，在理论中洞察，在实践中感悟本书的前六章内容重在讲解Vue的知识体系，力图使读者达到学有所知、学有所感的地步，使读者在接触到陌生的Vue代码片段时，能够知其优劣。而后五章内容以常见的网站类型为例，展示了Vue在项目开发中的运用，这些网站包括电商类网站（PC端）、企业官网（兼容PC和移动端）、资讯类网站（移动端）和工具类网站（PC端）。
　　以理论指导实践，以实践检验和丰富理论，这是一个螺旋上升的过程，也是认知新事物的正确方法。笔者希望以理论与实践相结合的方式，避免纸上谈兵，使读者不仅能够学有所知、学有所感，更能够学以致用。
　　（3）多年经验和心得，大型项目的最佳实践和设计模式笔者一直活跃于GitHub等开源社区，接触过国内外许多优秀项目的源码，并以软件工程的专业知识不断检验和更新自己的认知。在本书的创作过程中，笔者会将一些最佳实践和设计模式应用于示例和项目的开发中。对于一些常用的实践和模式，笔者还将划分小节对其进行专题讲述。在讲解Vue之外，笔者希望这本书能够对你的编程境界有所提升。
　　本书愿景
　　从一无所知到略有心得，笔者也遇到过许多困难，借鉴过许多前辈的经验，也希望能够将自己的知识和心得分享出去，给走在路上的人照亮一段旅程。
　　本书从Vue的基础语法入手，逐步深入进阶特性，最后选取最具代表性的网站类型进行项目实战，其中穿插着各种最佳实践的讲解并模拟框架底层机制的实现，力图使同学们在理论学习中知其全貌，在实战中融会贯通。
　　希望这本书能够给你带来一定的收获和启发，在职业生涯上助你一臂之力。本书学前基础
　　Vue立足于JS，这意味着你在学习本书之前要具备扎实的JS基础，除了会用最基本的关键字和语法结构之外，你还需要掌握JS中的事件机制、DOM编程、闭包、对象引用和一些内置对象的常用方法等内容。当然，笔者也会在书中对这些内容进行简单的介绍，以确保不会对Vue的学习造成障碍。不过，作为一本前端技术的进阶用书，你的编程境界越高，你能体会的也就越多。
　　除了具备扎实的JS基础之外，你还需要掌握基本的CSS和HTML 5用法，这些是组件化开发中必不可少的内容。
　　在项目实战中，笔者将会使用一些CSS和HTML 5的高级特性或引入一些第三方组件库，缺乏相关开发经验的同学也许会对此感到陌生，不过也不必担心，笔者会对这些内容进行详细讲解。当然，它们也并不难于习得。
　　本书内容及体系结构
　　本书共分为11个章节，其中第1～6章属于概念篇，用于描述理论体系；7～11章属于实战篇，用于演示实战项目。下面分别介绍这11个章节的内容。
　　第1章介绍Vue的发展历程、因果关系，这部分内容并不影响你对技术的掌握，如果你对此没有兴趣的话，可以跳过不看。
　　第2章首先介绍如何在项目中引入Vue，这是使用Vue的起点所在；之后介绍Vue实例和实例的生命周期并主题化讲解Vue中的数据链和数据绑定原理，了解这些将会让你在项目开发中大受裨益。
　　第3章介绍Vue中的插值绑定和常见指令的用法，这是Vue学习中的重点部分。
　　第4章讲述了三个方面的选项。其中，有关数据和方法的选项也是Vue学习中的重点部分，掌握这些和第3章的内容足以让你构建一个完整的Vue应用；有关DOM渲染的选项在本书的实战章节中没有主动用到，这些选项是否能派上用场取决于你所在项目的开发方式；有关封装复用的选项属于Vue进阶特性，学习难度相对较大，学好这些将使你的代码结构更加优雅且易于维护，从而在面对复杂功能和频繁的需求变动时游刃有余。
　　第5章讲述了Vue中内置的一些组件，这些组件封装了一些功能，用好这些将使开发变得更加简单。
　　第6章讲述了Vue技术栈中的其他成员，包括前端路由（Vue Router）、状态管理器（Vuex）和项目快速构建工具（Vue Cli），这些都将服务于Vue项目的开发。
　　从第7章开始，本书进入实战章节。
　　第7章和第8章演示了电商类网站的开发，涉及的内容还包括打包工具Webpack、字体图标库Font Awesome和缓存对象localStorage。
　　第9章演示了企业官网的开发，涉及的内容还包括响应式设计、翻页组件Swiper和网站多语的配置。
　　第10章演示了资讯类网站的开发，涉及的内容还包括移动端应用的开发。
　　第11章演示了工具类网站的开发，涉及的内容还包括可伸缩矢量图形SVG。
　　本书学习建议
　　对于初次接触Vue的同学来说，最好你能耐心将本书读完，除了学会使用Vue之外，你的编程境界也会有所提高。
　　如果你急于应聘要求具备Vue使用经验的岗位，就需要掌握第3章和第4章中有关数据和方法的选项，并对第4章中有关封装复用和第5章、第6章的内容有所了解，之后快速进入实战，查看4个Web项目的源码和演示。在Vue的深水区游泳，还不至于窒息。
　　如果你喜欢听故事的话，不妨把第1章读一下，毕竟在日后的工作中能接触到的代码五花八门，能对这些代码的年代特征形成基本的认识，也是蛮不错的。
　　本书的知识点均配以示例，希望通过演示示例的方式使复杂和空洞的理论变得形象起来，这些示例的代码将随书附赠。希望同学们在学习时不要干嚼文字，对于不理解的地方一定要运行代码，空看十遍不如上手一试。
　　在后面的实战章节中，本书只摘取了部分具有代表性的代码和流程进行讲解，逻辑结构较为抽象，建议同学们先运行项目，对项目内容有个大致的了解，之后参照项目源码进行学习。
　　辅助学习资料
　　●
　　本书源代码
　　●
　　本书辅助视频教程
　　以上内容，我们将存储在云端并提供下载链接（或二维码），具体请见本书封底。
　　致谢
　　其实每一个项目都不是一蹴而就的，一开始的计划总是随着局势（团队领导者的想法、市场变动、客户需求等）的变化被不断地修改，项目总是在一次次试错的过程中不断地成长和成熟，在反复的优化和重构后，项目才有了最终的模样。其实，人的一生也是如此，我们总是在不停地遇到困难，不停地追寻答案，借鉴着别人的经验和心得，借助前辈们踏平的道路，才走到了我们现在的位置。过去，我常常在想，“为往圣继绝学，呵，这是多么伟大的志向”，然而事实上，我们每个人都在做着这件事。人类社会现有的文明也绝非少数人的功劳，这来自一代代人的传承。
　　这里，首先要感谢Vue团队的开源精神，他们的无私奉献使我们在项目开发时有了更多和更好的技术选择，同时也促成了本书的编写。
　　感谢本书的所有编校人员，在你们的支持和帮助下，这本书才有了更高的质量。
　　最后感谢我的家人和同事们，是他们的支持给了我充足的空间和自由进行创作。
　　作 者
　　2018年10月

第一篇 概念篇——扎根于基础
第1章 引言 002
1.1 前端技术的发展002
1.1.1 从静态走向动态 002
1.1.2 从后端走向前端 003
1.1.3 从前端走向全端 005
1.2 MVVM族员——Vue.js 008
1.2.1 从MVC到MVVM 008
1.2.2 Vue.js简介 009
1.3 Vue与React 010
1.3.1 虚拟DOM 010
1.3.2 功能性组件 011
1.3.3 轻量级——将与核心库无关的业务封装成独立库 011
1.3.4 视图模板 011
1.3.5 其他 012
1.4 Vue与Angular 013
1.4.1 模板语法 013
1.4.2 脏检测 013
1.4.3 双向数据绑定 014
1.4.4 学习曲线 015
第2章 基本介绍 016
2.1 安装和引入016
2.1.1 如何引入Vue.js 016
2.1.2 安装Vue Devtools 017
2.2 Vue实例介绍 019
2.2.1 简单实例 019
2.2.2 生命周期 020
目录
VIII
Vue. js从入门到项目实战
2.3 数据响应式原理024
2.3.1 初识数据链 024
2.3.2 函数式编程 025
2.3.3 Vue中的数据链 026
2.3.4 数据绑定视图 028
第3章 Vue语法 030
3.1 插值绑定030
3.1.1 文本插值 030
3.1.2 HTML插值 031
3.2 属性绑定033
3.2.1 指令v-bind 033
3.2.2 类名和样式绑定 034
3.3 事件绑定037
3.3.1 指令v-on 037
3.3.2 常见修饰符 039
3.3.3 按键修饰符 041
3.3.4 组合修饰符 042
3.4 双向绑定044
3.4.1 指令v-model 044
3.4.2 v-model与修饰符 047
3.4.3 v-model与自定义组件 048
3.5 条件渲染和列表渲染050
3.5.1 指令v-if和v-show 050
3.5.2 指令v-for 053
3.5.3 列表渲染中的key 057
第4章 Vue选项 059
4.1 数据和方法059
4.1.1 数据选项 059
IX
目 录
4.1.2 属性选项 065
4.1.3 方法选项 067
4.1.4 计算属性 068
4.1.5 侦听属性 072
4.2 DOM渲染 074
4.2.1 指定被挂载元素 074
4.2.2 视图的字符串模板 075
4.2.3 渲染函数render 076
4.2.4 选项的优先级 083
4.3 封装复用085
4.3.1 过滤器 085
4.3.2 自定义指令 086
4.3.3 组件的注册 090
4.3.4 混入的使用 091
第5章 Vue内置组件 095
5.1 组件服务095
5.1.1 动态组件 095
5.1.2 使用插槽分发内容 097
5.1.3 组件的缓存 103
5.2 过渡效果104
5.2.1 单节点的过渡 104
5.2.2 多节点的过渡 113
第6章 Vue项目化 117
6.1 快速构建项目117
6.1.1 Vue CLI简介 117
6.1.2 使用Vue CLI构建项目 118
6.1.3 项目目录介绍 119
6.2 前端路由123
6.2.1 前端路由的简单实现 123
6.2.2 Vue中的前端路由 127
6.3 状态管理132
6.3.1 对象引用 133
6.3.2 状态管理器Vuex 133
6.3.3 在项目中使用Vuex 138
第二篇 实战篇 —— 提升于项目
第7章 打造线上商城（一） 144
7.1 项目规划144
7.1.1 需求分析 144
7.1.2 流程分析 146
7.2 项目展示147
7.2.1 首页 147
7.2.2 商品详情 150
7.2.3 购物车 151
7.2.4 订单 152
第8章 打造线上商城（二） 154
8.1 项目构建154
8.1.1 目录结构 154
8.1.2 webpack是什么？ 155
8.1.3 Font Awesome图标库 157
8.2 动态资源和数据159
8.2.1 关于配置 159
8.2.2 动态资源 162
8.2.3 动态数据的存储 163
8.3 自定义组件164
8.3.1 幻灯片 164
8.3.2 复选框 168
第9章 企业官网的建设 171
9.1 响应式设计171
9.1.1 响应式设计 171
9.1.2 媒体查询 172
9.1.3 JS布局 174
9.2 页面开发175
9.2.1 页面切换 175
9.2.2 Swiper组件 176
9.2.3 划分内容区 177
9.3 多语种网站的建设179
9.3.1 将一切纳入配置 180
9.3.2 将配置绑定到视图 183
第10章 我的掌上新闻 186
10.1 应用介绍186
10.1.1 应用首屏 186
10.1.2 应用首页 187
10.1.3 新闻详情 189
10.1.4 搜索页面 190
10.1.5 搜索结果 193
10.2 项目构建193
10.2.1 项目结构 193
10.2.2 数据流图 198
第11章 SVG画图板 199
11.1 SVG简介 199
11.1.1 有关SVG的三个问题 199
11.1.2 基本图形的使用 201
11.1.3 SVG中的渐变 202
11.2 项目介绍 204
11.2.1 页面介绍 204
11.2.2 代码简析 208
附录 拓 展 篇
附录A Git入门 218
附录B NPM入门 221
附录C Webpack入门 224
附录D 闭包和对象引用 230
附录E 常见的ECMAScript 6语法 233