《Vue.js从入门到项目实战》

编辑推荐

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

内容简介

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

作者简介

目录

第一篇概念篇——扎根于基础
第1章引言002
1.1前端技术的发展002
1.1.1从静态走向动态002
1.1.2从后端走向前端003
1.1.3从前端走向全端005
1.2MVVM族员——Vue.js008
1.2.1从MVC到MVVM008
1.2.2Vue.js简介009
1.3Vue与React010
1.3.1虚拟DOM010
1.3.2功能性组件011
1.3.3轻量级——将与核心库无关的业务封装成独立库011
1.3.4视图模板011
1.3.5其他012
1.4Vue与Angular013
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.js016
2.1.2安装VueDevtools017
2.2Vue实例介绍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.3Vue中的数据链026
2.3.4数据绑定视图028
第3章Vue语法030
3.1插值绑定030
3.1.1文本插值030
3.1.2HTML插值031
3.2属性绑定033
3.2.1指令v-bind033
3.2.2类名和样式绑定034
3.3事件绑定037
3.3.1指令v-on037
3.3.2常见修饰符039
3.3.3按键修饰符041
3.3.4组合修饰符042
3.4双向绑定044
3.4.1指令v-model044
3.4.2v-model与修饰符047
3.4.3v-model与自定义组件048
3.5条件渲染和列表渲染050
3.5.1指令v-if和v-show050
3.5.2指令v-for053
3.5.3列表渲染中的key057
第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.2DOM渲染074
4.2.1指定被挂载元素074
4.2.2视图的字符串模板075
4.2.3渲染函数render076
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.1VueCLI简介117
6.1.2使用VueCLI构建项目118
6.1.3项目目录介绍119
6.2前端路由123
6.2.1前端路由的简单实现123
6.2.2Vue中的前端路由127
6.3状态管理132
6.3.1对象引用133
6.3.2状态管理器Vuex133
6.3.3在项目中使用Vuex138
第二篇实战篇——提升于项目
第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.2webpack是什么？155
8.1.3FontAwesome图标库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.3JS布局174
9.2页面开发175
9.2.1页面切换175
9.2.2Swiper组件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.1SVG简介199
11.1.1有关SVG的三个问题199
11.1.2基本图形的使用201
11.1.3SVG中的渐变202
11.2项目介绍204
11.2.1页面介绍204
11.2.2代码简析208
附录拓展篇
附录AGit入门218
附录BNPM入门221
附录CWebpack入门224
附录D闭包和对象引用230
附录E常见的ECMAScript6语法233

精彩书摘

　　1.4.4学习曲线
　　最后一点，广为人知且津津乐道的是，Angular的学习曲线十分陡峭，初学者可能会有一种坐过山车的感觉。不过，笔者在2016年，接触过一个使用Angular1进行开发的项目，当时感觉坡度是有的，但没有那么夸张，也可能是因为应用比较浅吧。
　　Vue的学习曲线则较为平缓，在Ember、Knockout、Angular、React等前辈踏平的道路上，Vue有更多趋于成熟的最佳实践可以拿来使用，也有更多的经验教训可以参考，从而设计出更简便的API来实现更复杂的功能。同时，这也有效降低了团队开发成本，并使得大型Web项目的构建变得更加容易。
　　当然也可以用NPM［NodePackageManager，Node包（依赖）管理工具］安装。
　　NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。你需要在Node的官网下载Node客户端，同时，你会得到一个“附送的”NPM工具。
　　由于NPM的仓库源布置在国外，资源传输速度较慢且可能受制，这里，笔者不建议直接使用NPM安装其他依赖，而是使用淘宝镜像源的cnpm。
　　（1）安装cnpm：
　　npminstall-gcnpm--registry=https://registry.npm.taobao.org
　　（2）之后，使用cnpm安装Vue.js：
　　cnpminstallvue
　　（3）引入Vue模块：
　　importVuefrom'vue'
　　2.1.2安装VueDevtools
　　在Vue学习和开发之前，笔者建议在你的浏览器（推荐使用GoogleChrome）上先安装VueDevtools拓展程序。VueDevtools提供了一个界面，可以帮助我们查看Vue组件和全局状态管理器Vuex中记录的数据。
　　有条件访问国外受限网站的读者，可以直接访问GoogleWebStore，搜索vuejs-devtools进行安装。
　　没有条件的同学只好跟着笔者手动安装了。
　　（1）下载VueDevtools（不了解Git的同学可以查看附录相关内容）。
　　gitclonehttps://github.com/vuejs/vue-devtools.git
　　（2）进入vue-devtools目录下，安装构建工具所需要的依赖。
　　cnpminstall
　　（3）构建工具，出现类似如图2.2中的信息即表示构建成功。
　　npmrunbuild
　　C:\Users\Administrator\Desktop\vue.book\Vue.js2从入门到项目实战\images\02\图2.2构建vue-devtools.png图2.2构建vue-devtools
　　图2.2构建vue-devtools
　　（4）打开Chrome扩展程序，如图2.3所示。
　　图1.3拓展程序
　　图2.3GoogleChrome拓展程序
　　（5）在扩展程序界面中，开启“开发者模式”（“开发者模式”为关闭状态时，搜索栏下的按钮将被隐藏），并点击“加载已解压的扩展程序”，选择“shell/chome”文件夹进行安装，如图2.4所示。
　　图2.3加载vue-devtools
　　图2.4安装vue-devtools
　　（6）再次打开Vue项目时，我们就可以在Chrome调试工具中通过vue-devtools查看组件状态了，如图2.5所示。
　　……

前言/序言

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