前言

传统的网站开发一般采用HTML+CSS+JS“三驾马车”作为技术架构，而Vue立足于其上，以模板语法为基础，以数据绑定和组件化开发为核心，极大地简化了开发流程。使用Vue技术栈，开发者甚至可以在几分钟内搭建出一个完整的前端项目。

本书正是以Vue技术栈为核心，由浅入深地进行讲解。在语法学习之外，本书还将深入探讨和模拟底层机制的实现，从原生的角度剖析框架。最后，本书将以当前最常见的网站类型为例来讲解。

本书将选取有代表性和表达鲜明的示例，以实战示例讲解知识点，避免将理论架空和复杂化，并力图用浅显易懂的语言进行论述，最大程度地使文章内容更易于理解。对于一些最佳实践和优秀模式，本书还将划分小节对其进行专题讲述。与其他同类书籍相比，本书是从前端从业者的角度来思考和编写的，专注于解决学习者在职业生涯上遇到的困难和“瓶颈”。

读者对象

本书适合以下读者群体阅读。

（1）Vue初学者

初学者往往会发现上手Vue并不困难，但在项目开发中却不能灵活自如地使用它，接踵而来的程序漏洞和频繁变动的项目需求会使自己手忙脚乱，甚至想采用熟悉却更复杂的原生写法来进行开发。导致这种现象的根源在于他们对于Vue的理解还不够深，对Vue中暗藏的“黑魔法”无法敏锐地洞察，甚至仅在学习过语法之后就开始进行开发，以致在实战中无法根据具体情况采用最合适的方案。本书针对这一情况，特意将这些“黑魔法”总结出来并模拟实现许多框架底层的机制，深入浅出地对其进行讲解，意在让读者看懂会用。

（2）原生或仿原生JS（Java Script）的从业者

Vue立足于JS，一切使用Vue进行开发的项目均可以使用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月