描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302523888丛书名: 新时代·技术新未来
系统：从点到面讲解，循序渐进，有条有理
深入：以底层筑基实现上层运用，让你知其所以然
实用：提供62个应用案例，以实践检验真理
实战：4种常见类型网站实例，避免纸上谈兵
免费提供配套源程序下载 精彩视频学习教程
本书共分为11章，涵盖的主要内容有前端的发展历程、Vue的基本介绍、Vue的语法、Vue中的选项、Vue中的内置组件、Vue项目化、使用Vue开发电商类网站、使用Vue开发企业官网、使用Vue开发移动端资讯类网站、使用Vue开发工具类网站。
本书内容通俗易懂、案例丰富、实用性强，特别适合Vue的初学者和从业人员阅读，同时也适合职业生涯遇到“瓶颈”的前端从业人员和其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材。
件都不采用二进制编码来进行开发呢？这里面牵扯到一个成本的问题，这正是影响项目
领导者进行决策的关键因素。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）示例为主，剖析为辅，一切尽在运行中，避免将理论架空
本书中的知识点均配以精心编制、具有代表性的示例，并力图将知识点融入示例中
进行讲述，目的在于以示例为驱动演绎知识点，将理论生动形象化，避免大段理论带来
的枯燥感和视野盲区。在由浅入深地讲述一套知识体系时，笔者将以同一示例为原型，
不断对其进行丰富和变换，绝不会引入新的示例代码以增添读者的负担。此外，这些示
III
前 言
例均是独立可运行的，读者完全可以在模仿和拓展中解决阅读时产生的疑惑。
（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月
早期的HTML作为静态文件，即使只有部分内容是需要变动的，那么有多少种变动
的可能性，就需要准备多少份文档，这对开发者来说是非常不友好的，并且无法与用户
进行交互。
CGI（Common Gateway Interface）的出现改善了这一情况。CGI作为服务器拓展功
能，可以从数据库或者文件系统获取数据，在将数据渲染为HTML文档后，返回至客户
端，从而实现了网页的动态生成。在接收到用户请求后，CGI还可以在服务端进行处理，
并返回对应的处理结果，如图1.2所示。
图1.2 动态网页渲染流程
CGI被广泛认为是服务端脚本语言的鼻祖。然而，它也有着非常致命的缺陷。首先，
CGI每接收到一个请求，都会新开一个进程进行处理，占用服务器的CPU和内存，当请
求量成千上万时，服务器可能无法支撑以致崩溃。其次，黑客很容易通过不完善的CGI
程序非法进入开发者的服务器系统，这从安全方面来考虑是绝对不允许的。
以后来人的角度来看，笔者认为CGI出现的最大意义就是给当时刚起步的Web提供
了一个发展方向。在这之后，PHP、JSP、ASP等各种服务端语言层出不穷，不仅弥补了
CGI的缺陷，而且在性能上愈加高效，在开发上愈加简捷。这些语言的出现和广泛应用，
使得Web技术飞速发展，前端网页从此从静态走向动态，这个时代被称为Web 1.0时代。
1.1.2 从后端走向前端
在 Web 1.0 时代，前后端是如何协作的呢？由于网页是在服务端使用动态脚本语言
和模板引擎渲染出来的，所以一般由前端先写模板，写好后交付给后端套用，之后再由
前后端联调，以确认模板套用无误。
在这种开发环境下，前后端耦合密切，项目开发需要很高的沟通成本。在模板引擎
的变量、判断和循环、宏区块等语法糖的支持下，前端也可以拿到环境变量来实现部分
004
Vue. js从入门到项目实战
业务逻辑。如果前端开发者表现得稍微弱势一些，就很有可能被后台摁着在视图层实现
一些业务代码。同时，整个项目的代码质量也随之降低。
网站的这种组织架构还会带来另外一些问题。比如，页面哪怕仅有一小块内容需要
变更，浏览器也需要重新请求和渲染整个页面。一方面，网站资源的传输耗费了更多的
时间；另一方面，页面重载的用户体验也十分糟糕。
举个例子，用户在登录页面输入了错误密码时，服务器要将校验信息渲染到页面并
传给浏览器。实际上，页面只是多了一行类似于“密码错误”的提示，然而网站资源却
需要重新进行传输，同时页面还会丢失用户输入的表单数据（即便到了今天，这种现象
依然可以在一些政府和国企的老旧网站中看到）。
当时虽然出现了各种页面和数据的缓存技术，稍有成效地缓解了这一问题，但也无
法从根本上解决问题。于是，从事Web的前辈们开始探寻其他一些解决方案，如Ajax
异步数据加载。
Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML）通过XMLHttpRequest
对象，可以在不重载页面的情况下与Web服务器交换数据，再加上JavaScript的document
对象，开发者们可以很轻松地实现页面局部内容刷新。
从1999年开始，ActiveX和XMLHttpRequest陆续问世，Ajax的星星之火渐渐燃起。
时间推移到2005年，互联网巨头Google发布了全面使用Ajax打造的Gmail（如图1.3所示）
和Gmap两款应用。人们惊讶地发现，原来使用异步数据传输获得的应用体验是如此地
良好。自此，Ajax获得了井喷式的发展。
评论
还没有评论。