前言

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

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

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

本书的上一版是基于Vue 2.0版本编写的。为了与时俱进，本版所有内容根据最新的Vue 3.0版本进行了升级与修改。修改的内容主要在三个方面。

（1）在知识点讲解中，全面采用了Vue 3.0的概念与理念，例如，Vue 3.0更多接管了组件的生命周期管理，使开发者能够更集中精力在业务逻辑的开发上。

（2）在代码中移除了原Vue 2.0版本与Vue 3.0 API不兼容的调用方式，继续保持本书实例代码在最新版本中可运行。例如，Vue 3.0创建Vue App的方式与Vue 2.0不同，使得最简单的Vue 2.0代码都无法在Vue 3.0中运行。

（3）代码风格与习惯根据Vue 3.0的写法全面改写，使读者学习到的内容与最新业内标准相一致。例如，Vue 3.0中应用ES 6最新的Proxy以支持对象属性拓展，而不再使用defineProperty，这会影响所有试图进行对象属性拓展的逻辑。

读者对象

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

（1）Vue初学者。

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

（2）原生或仿原生JS（JavaScript）的从业者。

Vue立足于JS（JavaScript），一切使用Vue进行开发的项目均可以使用JS进行开发，正如一切编程语言都立足于电元信号的正负极，即01码，可为什么软件都不采用二进制编码来进行开发呢？这里面涉及一个成本的问题，这正是影响项目领导者进行决策的关键因素。Vue项目与原生JS或jQuery等仿原生框架项目相比，开发成本要低一些。与此同时，Vue项目对从业者的要求要高一些，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）理论与实践结合，在理论中洞察，在实践中感悟。

本书的前6章内容重在讲解Vue的知识体系，力图使读者达到学有所知、学有所感的地步，使读者在接触到陌生的Vue代码片段时，能够知其优劣；后5章内容以常见的网站类型为例，展示了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团队的开源精神，他们的无私奉献使我们在项目开发时有了更多和更好的技术选择，同时也促成了本书的编写。

感谢本书的所有编校人员，在你们的支持和帮助下，这本书才有了更高的质量。最后感谢我的家人和同事，是他们的支持给了我充足的空间，使我可以自由进行创作。

作者

2021年12月