Vue.js是一套用于构建用户界面的渐进式框架，是目前流行的三大前端框架之一。本书以Vue 2.6.12为基础，重点讲解Vue生产环境配置与开发工具的使用、基础语法、指令、组件开发及周边生态系统；以Vue 3.0为提高，重点介绍新版本改进和优化之处以及如何利用新版本开发应用程序。

全书共分为12章，主要涵盖Vue.js概述、Vue.js基础、Vue.js指令、Vue.js基础项目实战、Vue.js组件开发、Vue.js过渡与动画、Vue项目开发环境与辅助工具部署、前端路由Vue Router、状态管理模式Vuex、Vue UI组件库、Vue高级项目实战以及Vue 3.0基础应用。每章均附有本章学习目标、本章小结、练习与实训，便于广大读者和工程技术人员学习、实践与提高。

本书可作为高等院校数据科学与大数据技术、计算机科学与技术、软件工程、物联网工程、网络工程等理工科相关专业“网页开发与设计”“Web前端开发技术”“Web应用技术”等课程的教材，也可作为Web前端工程师等IT技术人员学习“新Web前端框架”的自学参考书。

随着移动互联网技术的迅速发展，基于互联网的应用与日俱增，PC端和移动端商业应用需求层出不穷，网站重构、用户体验提升、前端交互的需求越来越高，商业应用功能越来越复杂，原有的前端框架已经不能满足新的中大型商业应用的需要。在传统的MVC下，前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。特别是在移动端，当前端对数据进行操作时，刷新页面的代价太昂贵。目前，AngularJS、React和Vue.js三大主流渐进式前端框架能够很好地解决这一问题。相比AngularJS和React，Vue.js这个渐进式的MVVM框架具有更轻量、渲染速度更快、打包体积更小、学习曲线比较平稳、用户体验更佳等特点，深受全球用户欢迎，中国用户特别喜爱。所以笔者以“Vue.js前端框架技术与实战”为主题创作新编教材，重点阐述Vue.js的基础、指令、组件、Vue Router、Vuex及周边生态技术和应用，以帮助读者掌握Vue前端项目的开发流程和开发方法，从而满足当前商业应用的需求。

Vue.js是一套用于构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计，这与其他重量级框架有所不同，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。最初它不过是个人项目，发展至今，已成为全世界三大主流前端框架之一，领先于AngularJS和React，在国内更是首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。近几年，Vue.js前端框架越来越受欢迎，越来越多的网站前端开始采用Vue.js开发。为了方便Web前端开发人员、编程爱好者以及广大读者用户熟悉和使用Vue.js，笔者编写了《Vue.js前端框架技术与实战：微课视频版》。

编写思路

以Vue工程项目开发的生命周期为导向，从项目脚手架、构建、插件化、组件化，到编辑器工具、浏览器插件、Vue周边生态等方面构建教材知识体系，从基础应用、项目开发环境配置、开发工具使用、编译打包工具、项目实战等方面构建内容结构。基础部分为了方便读者理解和消化，不使用任何工具，只引入Vue.js和浏览器就可以运行Vue应用；提高部分及实战部分需要使用脚手架、插件、组件等开发Vue应用程序。整本书以“基础Vue单页应用→Vue前端项目→Vue前后端分离项目”为开发线路，逐层深入、递进式培养读者的工程能力和工程素养。每章配置学习目标、本章小结和适量练习与实训，帮助读者消化和理解所学知识，运用所学知识和技能解决实训中的技术难题，从而提高自己的编程能力和水平。

编写特色

? 理论教学与技能实训一体化设计。《Vue.js前端框架技术与实战：微课视频版》填补了Vue.js图书市场上一直缺乏“理论与实训一体化设计教材”的空白。在构建章节结构时，设置了本章学习目标、教学内容（含基础语法、语法说明、示范案例、代码解释、注意提醒等）、本章小结、练习与实训（实训要求和实训步骤）。

? 知识传授与能力培养一体化实施。《Vue.js前端框架技术与实战：微课视频版》在传授知识的同时，将工程项目中常用环境配置、开发工具的使用及项目工程化工具一并传授，融会贯通，以期培养学生的工程能力和工程素养。

? 知识更新与技术发展同步。紧跟Vue.js技术的发展，及时将Vue.js 3.0新特性和新应用写入书中，进一步完善《Vue.js前端框架技术与实战：微课视频版》的知识体系结构，引入新技术、新特性、新应用，提高项目开发速度、项目执行速度，降低开发成本。

教学资源

为了方便各类高校选用教材和读者选书自学，《Vue.js前端框架技术与实战：微课视频版》提供了大量的配套资源，包括教学大纲、教学课件、程序源码、素材、习题答案和700分钟的微课视频。书中教学案例以统一格式进行命名，如vue_2_1.html表示第2章第1个案例。每章资源以子目录形式存放，如chapter5存放第5章的各类资源。

资源下载提示

课件等资源：扫描封底的“课件下载”二维码，在公众号“书圈”下载。

素材（源码）等资源：扫描目录上方的二维码下载。

在线作业：扫描封底作业系统二维码，登录网站在线做题及查看答案。

视频等资源：扫描封底刮刮卡中的二维码，再扫描书中相应章节中的二维码，可以在线学习。

全书由储久良独立编写、修订和统稿。《Vue.js前端框架技术与实战：微课视频版》出版得到清华大学出版社相关人员的大力支持，在此谨表示衷心感谢。作者参阅了GitHub和其他网络资源，对这些资源的贡献者深表感谢。由于互联网技术发展迅速，前端技术持续改进与优化，加上作者水平有限，书中的疏漏之处在所难免，恳请各位专家和读者批评指正。

《Vue.js前端框架技术与实战：微课视频版》是2019年江苏省高等教育教改立项研究课题“‘Web前端开发技术’数字课程与优质教学资源共建共享研究与实践”（项目编号：2019JSJG596）的成果。

                                                     作  者

                                                     2021年8月

第1章  Vue.js概述 1

1.1  Vue.js简介 1

1.2  Vue.js生产环境配置 2

1.2.1  Vue.js引入方法 2

1.2.2  安装Vue Devtools 3

1.3  Vue页面基本结构 5

1.3.1  <template>标记 5

1.3.2  <script>标记 6

1.3.3  <style>标记 8

1.4  Vue.js开发工具 8

1.4.1  Visual Studio Code 9

1.4.2  Sublime Text 9

1.4.3  WebStorm 10

1.4.4  HBuilderX 10

本章小结 11

练习1 11

实训1   12

第2章  Vue.js基础 15

2.1  MVC与MVVM模式 15

2.1.1  MVC模式 15

2.1.2  MVVM模式 16

2.1.3  MVVM模式的前端框架发展趋势 17

2.1.4  MVVM模式的应用 17

2.2  数据绑定与插值 20

2.2.1  文本绑定 20

2.2.2  HTML代码绑定 20

2.2.3  属性绑定 21

2.2.4  JavaScript表达式绑定 21

2.3  计算属性与方法 22

2.3.1  计算属性基础应用 23

2.3.2  计算属性缓存与方法的比较 24

2.3.3  计算属性的setter和getter 26

2.4  侦听属性 29

2.4.1  侦听属性基本用法 29

2.4.2  侦听属性高级用法 31

2.5  生命周期钩子函数 34

2.5.1  生命周期钩子函数的作用 34

2.5.2  生命周期钩子函数的应用 37

2.6  控制台对象 39

2.6.1  显示信息的命令 40

2.6.2  占位符 40

2.6.3  分组显示 41

2.6.4  查看对象的信息 42

2.6.5  显示某个节点的内容 42

2.6.6  判断变量是否为真 42

2.6.7  追踪函数的调用轨迹 43

2.6.8  计时功能 43

2.6.9  性能分析 44

2.6.10  表格形式输出数组和对象 45

2.7  数据与方法 48

2.7.1  数据对象的定义与使用 49

2.7.2  Vue实例属性与方法 50

2.8  Vue中的数组变动更新检测 53

2.8.1  变异方法 53

2.8.2  非变异方法 54

2.9  Vue中的过滤器 57

本章小结 60

练习2 61

实训2   62

第3章  Vue.js指令 66

3.1  Vue.js内置指令 67

3.1.1  条件渲染 67

3.1.2  用key管理可复用的元素 69

3.1.3  根据条件展示元素 71

3.1.4  列表渲染 73

3.1.5  绑定属性 81

3.1.6  事件处理 83

3.1.7  事件修饰符 85

3.1.8  按键修饰符 90

3.1.9  表单输入绑定 92

3.1.10  表单元素值绑定 95

3.1.11  v-model修饰符 97

3.1.12  v-text与v-html指令 98

3.1.13  v-pre、v-once和v-cloak指令 100

3.2  Vue.js自定义指令 101

3.2.1  自定义指令注册 101

3.2.2  对象字面量 105

3.2.3  动态指令参数 105

3.2.4  自定义指令实际应用 107

本章小结 108

练习3 109

实训3   110

第4章  Vue.js基础项目实战 114

4.1  简易图书管理 114

4.1.1  项目需求 114

4.1.2  项目实现 115

4.2  我的待办事项 119

4.2.1  项目需求 119

4.2.2  项目实现 120

本章小结 125

实训4   125

第5章  Vue.js组件开发 126

5.1  组件基础 126

5.1.1  组件命名 127

5.1.2  组件注册 128

5.2  组件间通信 131

5.2.1  父组件向子组件传值 131

5.2.2  子组件向父组件传值 139

5.2.3  兄弟组件之间的通信 143

5.2.4  父链与子组件索引 145

5.3  单文件组件 146

5.4  插槽 149

5.4.1  匿名插槽 149

5.4.2  具名插槽 151

5.4.3  作用域插槽 153

5.4.4  动态插槽名 155

本章小结 157

练习5 158

实训5   158

第6章  Vue.js过渡与动画 163

6.1  单元素/单组件的过渡 163

6.1.1  过渡的类名 165

6.1.2  CSS 过渡 166

6.1.3  CSS动画 167

6.1.4  自定义过渡的类名 168

6.1.5  同时使用过渡和动画 170

6.1.6  显性的过渡持续时间 170

6.1.7  JavaScript 钩子 170

6.2  初始渲染的过渡 171

6.3  多个元素的过渡 172

6.4  多个组件的过渡 177

6.5  列表过渡 178

6.5.1  列表的进入/离开过渡 179

6.5.2  列表的排序过渡 181

6.5.3  列表的交错过渡 183

本章小结 186

练习6 186

实训6   187

第7章  Vue项目开发环境与辅助工具部署 192

7.1  部署Node.js 192

7.1.1  Node.js简介 192

7.1.2  Node.js部署 194

7.1.3  Node.js模块系统 194

7.1.4  Node.js 创建第1个应用 202

7.2  Node包管理器npm 203

7.2.1  npm简介 203

7.2.2  npm常用命令 204

7.3  Node.js环境配置 206

7.4  webpack打包工具 208

7.4.1  webpack简介 208

7.4.2  webpack使用与基本配置 209

7.4.3  webpack配置加载器 215

7.4.4  webpack配置插件 222

7.4.5  webpack配置开发服务器 228

7.5  Vue CLI 235

7.5.1  Vue CLI安装 236

7.5.2  Vue CLI创建Vue项目 236

7.5.3  Vue CLI可视化创建Vue项目 238

本章小结 240

练习7 240

实训7   241

第8章  前端路由Vue Router 246

8.1  Vue Router概述 246

8.1.1  Vue Router的安装与使用 247

8.1.2  Vue Router基础应用 247

8.2  Vue Router高级应用 252

8.2.1  动态路由匹配 252

8.2.2  嵌套路由 254

8.2.3  编程式导航 260

8.2.4  命名路由 262

8.2.5  命名视图 263

8.2.6  重定向和别名 264

8.2.7  路由组件传参 265

8.2.8  HTML5 History模式 267

本章小结 267

练习8 268

实训8   269

第9章  状态管理模式Vuex 275

9.1  Vuex概述 275

9.1.1  Vuex定义 276

9.1.2  简单状态管理——store模式 277

9.2  Vuex基本应用 280

9.3  Vuex核心概念 281

9.3.1  一个完整的store结构 281

9.3.2  最简单的store 282

9.3.3  Vuex中的state 283

9.3.4  Vuex中的getters 287

9.3.5  Vuex中的mutations 291

9.3.6  Vuex中的actions 293

9.3.7  Vuex中的modules 301

9.4  Vuex多模块实战案例 307

本章小结 313

练习9 313

实训9   314

第10章  Vue UI组件库 318

10.1  Vue PC端组件库 318

 10.1.1  Element UI 319

 10.1.2  iView UI 331

 10.1.3  其他PC端UI组件库 336

10.2  Vue移动端UI组件库 336

 10.2.1  Mint UI 336

 10.2.2  Vant 340

 10.2.3  其他移动端组件库 344

本章小结 345

练习10 345

实训10   346

第11章  Vue高级项目实战 351

11.1  友联通讯录 351

 11.1.1  项目需求 351

 11.1.2  实现技术 352

 11.1.3  环境配置 352

 11.1.4  项目实现 353

11.2  通用登录/注册管理系统 379

 11.2.1  项目需求 379

 11.2.2  实现技术 380

 11.2.3  环境配置 381

 11.2.4  项目实现 383

本章小结 415

练习11 415

实训11 415

第12章  Vue 3.0基础应用 416

12.1　Vue 3.0新特性 416

 12.1.1  新特性简介 417

 12.1.2  下一阶段工作 418

 12.1.3  Vue 3.0学习参考 418

12.2  Vue 3.0初步体验 418

 12.2.1  Vue 3.0下载与引用 418

 12.2.2  Vue 3.0创建简易应用 419

 12.2.3  Vue 3.0发布文档的使用 422

12.3  Vue 3.0新特性应用 423

 12.3.1  使用脚手架创建项目 423

 12.3.2  组件选项 425

 12.3.3  ref()、reactive()和toRefs()函数 428

 12.3.4  computed、watch和watchEffect 431

 12.3.5  ref引用DOM元素和组件实例 434

 12.3.6  Vue Router和Vuex 436

 12.3.7  Vue 3.0生命周期 441

 12.3.8  provide()和inject()函数 442

 12.3.9  组合式API 447

 12.3.10  模板refs 449

12.4  Vue 3.0购物车实战 453

 12.4.1  项目设计要求 453

 12.4.2  项目实现 455

本章小结 464

练习12 464

实训12   465

参考文献 470

本书配套资源丰富，包括教学大纲、教学课件、程序源码、习题答案、素材、在线作业，作者还为本书精心录制了700分钟的微课视频。

厚基础重提高。以Vue2.6.12为基础，重点讲解Vue.js基础应用及周边生态系统。以Vue 3.0为提高，重点介绍利用新特性开发实际工程项目。 重理论强实践。以基础语法→语法说明→示范案例→代码解释→注意提醒→练习与实训为教学主线，突出教、学、做一体设计。 精编排易教学。以简易单页应用→前端工程项目→前后端分离项目为开发线路，逐层深入、递进式培养读者的工程能力和工程素养。