本书以一个多年前端老司机的视角，循序渐进地介绍当前流行的前端框架Vue.js 3的新特性、各项功能及其在商业开发中的应用。全书共15章，第1~6章介绍Vue.js 3的模板、组件、交互处理等基础知识；第7章介绍Vue.js 3框架的响应式原理及组合式API；第8章介绍使用Vue.js 3框架开发前端动画效果；第9章介绍开发大型项目的脚手架工具VueCli和Vite；第10章介绍基于Vue.js 3的UI框架Element Plus；第11~13章分别介绍网络请求框架vue-axios、路由管理框架Vue Router、状态管理框架Vuex；第14章和第15章介绍两个相对完整的项目的开发，即学习网站和电商后台系统。本书试图介绍Vue.js 3全家桶及周边框架和工具的综合应用，旨在使读者通过阅读本书开发自己的应用程序。本书还在各章安排了小型范例和练习题，并提供了教学视频、源代码及PPT课件。 本书既可以入门，也可以进阶，适合Vue.js 3初学者和前端开发人员使用，也可以作为网课、培训机构与大中专院校的教学用书。

Vue.js 3可以让你的前端项目开发效率成倍提升，无论你是否接触过Vue，本书都会让你体验到使用Vue.js 3框架高效开发商业项目的魅力。

本书以一个多年前端老司机的视角，循序渐进地讲解了Vue框架的新特性及其各项功能的用法，原理与实践并重，代码注解详尽，并列举了大量开发范例，以提升读者的动手能力。

为使读者能够开发商业项目，本书除了介绍Vue.js框架本身外，还讲解了Vue.js在开发商业项目中需要用到的相关框架和工具，如状态管理框架Vuex、路由框架Vue-Route、UI框架Element Plus、网络请求框架Vue-Axios、构建工具Vue CLI及其Vite等，活用这些框架可以让你轻松地开发出自己的商业应用。

作者还为本书录制了配套的视频教程，对于初学者来说，通过观看教学视频，可以大幅降低学习难度，提升学习效率，可以说是物超所值。

本书各章还专门设计了动手练习题，以帮助读者巩固知识，还提供了完整的源代码和PPT学习课件，扫码即可下载使用。

当下互联网已经成为人们生活中必不可少的一部分，无论是在互联网上查询信息、玩游戏，还是通过互联网购物、付款，都离不开成千上万的互联网应用程序的支持。不知你有没有想过，这些互联网应用是如何开发出来的呢？开发一个外观精美、功能强大的网站需要多长时间？我们是否具备这样的能力来将自己的想法、创意开发成产品？如果你曾有过类似的思考，那么本书可以帮你快速掌握这一技能。
阅读任何一本图书的过程本身就是一个学习的过程，扩展自己的知识边界、提高自己的技能水平可能并非一件容易的事，但却是一件有趣的事。如果你能够自主开发功能完备的商业项目，能够通过自己开发的应用程序为更多的人带来生活上的帮助，这一定是一件非常令人快乐的事情。因此，若要品尝幸福的果实，一定要经历开花结果过程中的辛劳，本书会尽量帮助你将这一过程缩短。
突出应用开发的内容安排
在章节安排上，本书共分15章。从前端基础讲起，深入浅出地介绍了Vue.js框架的功能用法及实现原理。并且，几乎每一章的后都安排了实践与练习，力求能使读者边学边练，快速且扎实地掌握Vue.js框架的方方面面，并且可以真正使用它开发出商业级别的应用程序。
第1章是本书的入门章节，简单介绍了前端开发的基础知识，包括HTML、CSS和JavaScript这3种前端开发的技能。这些虽然不是本书的重点，但却是学习Vue前必须掌握的基础技能，如果读者在阅读本章时对书中所介绍的技术不甚了解，建议还是先不要阅读后续章节，毕竟没有基础，应用将无从谈起。
第2章介绍Vue模板的基本用法，包括模板插值、条件与循环渲染的相关语法。这些功能是Vue.js框架提供的基础功能，使用它们能使我们在开发网页应用时事半功倍。
第3章介绍了Vue组件中属性和方法的相关概念，将使用面向对象的思路来进行前端程序开发，本章的后会通过一个功能简单的登录注册页面来对读者的掌握情况进行检验。
第4章将介绍前端应用中用户交互的处理方法，一个网页如果不能进行用户交互，那么将如一潭死水，毫无生机，用户交互为应用程序带来灵魂。本章除了介绍基础的网页用户交互的处理外，还将结合Vue.js来讲解如何在Vue.js框架中更加高效地处理用户交互事件。
第5章和第6章将由浅入深地介绍Vue.js中组件的相关应用。组件是Vue.js框架的核心，在实际的应用开发中，更是离不开自定义组件技术。有了组件，我们才有了开发大型互联网应用的基础，组件使得项目的结构更加便于管理，工程的可维护与可扩展性大大提高，且组件本身的复用性也使开发者可以大量使用第三方模块或将自己开发的模块作为组件供各种项目使用，极大地提高了开发效率。
第7章介绍Vue.js框架的响应式原理，以及Vue.js 3.0版本引入的组合式API新特性。本章是对读者开发能力的一种拔高，引导读者从实现功能到精致逻辑设计的方向进步。
第8章将介绍通过Vue.js框架方便地开发前端动画效果。动画技术在前端开发中也非常重要，前端是直接和用户面对面的，功能本身只是前端应用的一部分，更重要的是给用户带来良好的体验，合理地使用动画是提升用户体验的一大法宝。
第9章会给读者介绍开发大型项目的脚手架VueCli的基本用法，管理项目、编译打包项目都需要使用此脚手架工具；本章还介绍了Vue CLI与新一代前端构建工具Vite的优缺点以及Vite的简单使用。
通过前9章的学习，对于Vue.js框架本身的功能与用法基本学习完毕。但是对于开发一款商业级的互联网应用，这还远远不够，第10章将介绍样式美观且扩展性极强的基于Vue.js的UI框架Element Plus；第11章将网络请求框架vue-axios；第12章将介绍一款非常好用的Vue应用路由管理框架Vue Router；第13章会介绍强大的状态管理框架Vuex，使用它开发者可以更好地管理大型Vue项目各个模块间的交互。
第14章和第15章将通过两个相对完整的应用项目来全面地对本书涉及的Vue.js技能进行综合应用，帮助读者学以致用，更加深入地理解所学习的内容。
实用丰富的配套资源
为使读者能够轻松地掌握本书内容，本书录制了配套的视频教程，对于初学者来说，通过观看教学视频，可以大幅降低学习难度，提升学习效率，可以说是物超所值。读者扫描本书的二维码即可观看。
本书还提供了源代码和PPT课件，以方便读者上机演练和巩固学习成果，读者扫描以下二维码即可下载：

如果你在下载过程中遇到问题，可发送邮件至booksaga@126.com获得帮助，邮件标题为循序渐进Vue.js 3前端开发实战。
后，对于本书的出版，要感谢支持我的家人和朋友，感谢清华大学出版社王金柱编辑的辛勤付出。在王编辑的指导下，才能完成本书的选题策划、章节规划、内容修正等工作。重中之重是，感谢读者们的耐心，由衷地希望本书可以带给你预期的收获。无论是学习还是工作，都希望你在阅读本书后能够更上一层楼。同时，由于时间仓促和能力所限，书中难免存在疏漏之处，希望读者不吝指教。

编 者
2021年10月18日 上海

张益珲，从业7年，多年移动与前端开发经验，曾就职于国内知名电商网站，从事移动端应用程序的业务开发与性能优化工作，目前在国内知名社交产品公司从事IM系统的架构设计工作。对移动跨平台开发、前端开发、React Native和Flutter跨平台开发及JavaScript前端开发都拥有丰富的经验。已出版多部编程著作。开源中国特邀技术专家，发表相关技术博客400余篇，访问量100万余次。

第1章 从前端基础到Vue.js 3 1
1.1 前端技术演进 2
1.2 HTML入门 3
1.2.1 准备开发工具 3
1.2.2 HTML中的基础标签 5
1.3 CSS入门 8
1.3.1 CSS选择器入门 8
1.3.2 CSS样式入门 11
1.4 JavaScript入门 14
1.4.1 为什么需要JavaScript 14
1.4.2 JavaScript语法简介 16
1.5 渐进式开发框架Vue 18
1.5.1 个Vue应用 18
1.5.2 范例：实现一个简单的用户登录页面 19
1.5.3 Vue 3的新特性 21
1.5.4 为什么要使用Vue框架 22
1.6 小结与练习 23
第2章 Vue模板应用 24
2.1 模板基础 25
2.1.1 模板插值 25
2.1.2 模板指令 28
2.2 条 件 渲 染 29
2.2.1 使用v-if指令进行条件渲染 30
2.2.2 使用v-show指令进行条件渲染 32
2.3 循 环 渲 染 33
2.3.1 v-for指令的使用方法 33
2.3.2 v-for指令的高级用法 36
2.4 范例：实现待办任务列表应用 37
2.4.1 步骤一：使用HTML搭建应用框架结构 37
2.4.2 步骤二：实现待办任务列表的逻辑开发 38
2.5 小结与练习 40
第3章 Vue组件的属性和方法 41
3.1 属性与方法基础 41
3.1.1 属性基础 42
3.1.2 方法基础 42
3.2 计算属性和侦听器 43
3.2.1 计算属性 43
3.2.2 使用计算属性还是函数 44
3.2.3 计算属性的赋值 45
3.2.4 属性侦听器 46
3.3 进行函数限流 47
3.3.1 手动实现一个简易的限流函数 48
3.3.2 使用Lodash库进行函数限流 49
3.4 表单数据的双向绑定 50
3.4.1 文本输入框 50
3.4.2 多行文本输入区域 51
3.4.3 复选框与单选框 51
3.4.4 选择列表 52
3.4.5 两个常用的修饰符 53
3.5 样 式 绑 定 53
3.5.1 为HTML标签绑定Class属性 53
3.5.2 绑定内联样式 55
3.6 范例：实现一个功能完整的用户注册页面 56
3.6.1 步骤一：搭建用户注册页面 56
3.6.2 步骤二：实现注册页面的用户交互 59
3.7 小结与练习 61
第4章 处理用户交互 63
4.1 事件的监听与处理 63
4.1.1 事件监听示例 63
4.1.2 多事件处理 65
4.1.3 事件修饰符 65
4.2 Vue中的事件类型 68
4.2.1 常用事件类型 68
4.2.2 按键修饰符 70
4.3 范例1：随鼠标移动的小球 72
4.4 范例2：弹球游戏 74
4.5 小结与练习 77
第5章 组件基础 78
5.1 关于Vue应用与组件 78
5.1.1 Vue应用的数据配置选项 79
5.1.2 定义组件 80
5.2 组件中的数据与事件的传递 81
5.2.1 为组件添加外部属性 82
5.2.2 处理组件事件 83
5.2.3 在组件上使用v-model指令 84
5.3 自定义组件的插槽 86
5.3.1 组件插槽的基本用法 87
5.3.2 多具名插槽的用法 88
5.4 动态组件的简单应用 90
5.5 范例：开发一款小巧的开关按钮组件 91
5.6 小结与练习 94
第6章 组件进阶 95
6.1 组件的生命周期与高级配置 95
6.1.1 生命周期方法 96
6.1.2 应用的全局配置选项 99
6.1.3 组件的注册方式 100
6.2 组件Props属性的高级用法 101
6.2.1 对Prop属性进行验证 101
6.2.2 Props的只读性质 104
6.2.3 组件数据注入 105
6.3 组件Mixin技术 108
6.3.1 使用Mixin来定义组件 108
6.3.2 Mixin选项的合并 110
6.3.3 进行全局Mixin 111
6.4 使用自定义指令 111
6.4.1 认识自定义指令 112
6.4.2 自定义指令的参数 113
6.5 使用组件的Teleport功能开发全局弹窗 113
6.6 小结与练习 116
第7章 Vue响应式编程 117
7.1 响应式编程的原理及在Vue中的应用 117
7.1.1 手动追踪变量的变化 118
7.1.2 Vue中的响应式对象 120
7.1.3 独立的响应式值Ref的应用 121
7.2 响应式的计算与监听 123
7.2.1 关于计算变量 124
7.2.2 监听响应式变量 125
7.3 组合式API的应用 127
7.3.1 关于setup方法 127
7.3.2 在setup方法中定义生命周期行为 129
7.4 范例：实现支持搜索和筛选的用户列表 130
7.4.1 常规风格的示例工程开发 130
7.4.2 使用组合式API重构用户列表页面 133
7.5 小结与练习 136
第8章 动画 137
8.1 使用CSS3创建动画 137
8.1.1 transition过渡动画 138
8.1.2 keyframes动画 139
8.2 使用JavaScript的方式实现动画效果 141
8.3 Vue过渡动画 142
8.3.1 定义过渡动画 142
8.3.2 设置动画过程中的监听回调 146
8.3.3 多个组件的过渡动画 147
8.3.4 列表过渡动画 149
8.4 范例：优化用户列表页面 150
8.5 小结与练习 152
第9章 构建工具Vue CLI的使用 153
9.1 Vue CLI工具入门 153
9.1.1 Vue CLI的安装 154
9.1.2 快速创建项目 155
9.2 Vue CLI项目模板工程 157
9.2.1 模板工程的目录结构 157
9.2.2 运行Vue项目工程 161
9.3 在项目中使用依赖 162
9.4 工程构建 164
9.5 新一代前端构建工具Vite 165
9.5.1 Vite与Vue CLI的比较 165
9.5.2 体验Vite构建工具 165
9.6 小结与练习 167
第10章 基于Vue 3的UI组件库Element Plus 168
10.1 Element Plus入门 168
10.1.1 Element Plus的安装与使用 169
10.1.2 按钮组件 171
10.1.3 标签组件 173
10.1.4 空态图与加载占位图组件 176
10.1.5 图片与头像组件 179
10.2 表单类组件 180
10.2.1 单选框与复选框 181
10.2.2 标准输入框组件 182
10.2.3 带推荐列表的输入框组件 184
10.2.4 数字输入框 186
10.2.5 选择列表 187
10.2.6 多级列表组件 190
10.3 开关与滑块组件 193
10.3.1 开关组件 193
10.3.2 滑块组件 194
10.4 选择器组件 196
10.4.1 时间选择器 197
10.4.2 日期选择器 198
10.4.3 颜色选择器 200
10.5 提示类组件 201
10.5.1 警告组件 201
10.5.2 消息提示 202
10.5.3 通知组件 204
10.6 数据承载相关组件 205
10.6.1 表格组件 205
10.6.2 导航菜单组件 208
10.6.3 标签页组件 210
10.6.4 抽屉组件 211
10.6.5 布局容器组件 212
10.7 实战：实现一个教务系统学生列表页面 214
10.8 小结与练习 217
第11章 基于Vue的网络框架vue-axios的应用 219
11.1 使用vue-axios请求天气数据 219
11.1.1 使用互联网上免费的数据服务 219
11.1.2 使用vue-axios进行数据请求 222
11.2 vue-axios实用功能介绍 224
11.2.1 通过配置的方式进行数据请求 224
11.2.2 请求的配置与响应数据结构 225
11.2.3 拦截器的使用 226
11.3 范例：实现一个天气预报应用 227
11.3.1 搭建页面框架 227
11.3.2 实现天气预报应用的核心逻辑 229
11.4 小结与练习 231
第12章 Vue路由管理 232
12.1 Vue Router的安装与简单使用 232
12.1.1 Vue Router的安装 233
12.1.2 一个简单的Vue Router使用示例 233
12.2 带参数的动态路由 235
12.2.1 路由参数匹配 235
12.2.2 路由匹配的语法规则 237
12.2.3 路由的嵌套 239
12.3 页面导航 240
12.3.1 使用路由方法 240
12.3.2 导航历史控制 242
12.4 关于路由的命名 242
12.4.1 使用名称进行路由切换 243
12.4.2 路由视图命名 243
12.4.3 使用别名 245
12.4.4 路由重定向 245
12.5 关于路由传参 246
12.6 路由导航守卫 247
12.6.1 定义全局的导航守卫 248
12.6.2 为特定的路由注册导航守卫 249
12.7 动态路由 250
12.8 小结与练习 252
第13章 Vue状态管理 253
13.1 认识Vuex框架 253
13.1.1 关于状态管理 254
13.1.2 安装与体验Vuex 255
13.2 Vuex中的一些核心概念 258
13.2.1 Vuex中的状态state 258
13.2.2 Vuex中的Getter方法 260
13.2.3 Vuex中的Mutation 261
13.2.4 Vuex中的Action 262
13.2.5 Vuex中的Module 263
13.3 小结与练习 266
第14章 项目演练一：开发一个文档学习网站 267
14.1 网站框架的搭建 267
14.2 配置专题与文章目录 272
14.3 渲染文章笔记内容 274
14.4 小结与练习 278
第15章 项目演练二：电商后台管理系统实战 279
15.1 用户登录模块开发 279
15.1.1 项目搭建 279
15.1.2 用户登录页面的开发 282
15.2 项目主页搭建 285
15.2.1 主页框架搭建 285
15.2.2 完善注销功能 288
15.3 订单管理模块的开发 289
15.3.1 使用Mock.js进行模拟数据的生成 289
15.3.2 编写工具类与全局样式 290
15.3.3 完善订单管理页面 291
15.4 商品管理模块的开发 297
15.4.1 商品管理列表页的开发 297
15.4.2 新建商品的基础配置 302
15.4.3 新建商品的价格和库存配置 305
15.4.4 新建商品的详情设置 308
15.4.5 添加商品分类 310
15.5 店长管理模块的开发 312
15.5.1 店长列表的开发 312
15.5.2 店长审批列表与店长订单 315
15.6 财务管理与数据统计功能模块开发 316
15.6.1 交易明细与财务对账单 316
15.6.2 数据统计模块的开发 317
15.7 小结与练习 322