目前单页应用框架层出不穷，Vue.js是其中十分耀眼的项目之一，广受国内外开发人员的推崇。《Vue.js前端开发入门与实践》讲解Vue.js前端框架的基础知识，共分为12章，包括Vue.js概述和安装、TypeScript基础、Vue.js应用实例、Vue.js组件、Vue.js模板、Vue.js计算属性与侦听器、Vue.js样式、Vue.js表达式、Vue.js事件、Vue.js表单和深入组件等内容，最后还给出一个实战案例供读者系统学习Vue.js项目开发过程。 《Vue.js前端开发入门与实践》既适合Vue.js初学者、Web前端开发人员阅读，也适合高等院校和培训机构的师生参考。

《Vue.js前端开发入门与实践》介绍了应用实例、组件、模板、计算属性、监听器、指令、表单、事件、数据绑定、路由、依赖注入、自定义样式、动画、渲染函数、测试、响应式编程等，还介绍了Vue CLI、TypeScript、Animate.css、Mocha、Vue Router、Naive UI、vue-axios等内容。Vue.js 3完全支持TypeScript，使读者可以采用类、面向对象的方式进行编程。本书不仅能帮助前端新手理解前端框架功能，而且为开发者阅读源码提供助力，还能对广大的前端技术爱好者有所启发，适合相关开发人员学习使用。

在使用Vue.js之前，笔者考察过Angular、React、Meteor，尽管这几个框架都适合做快速开发，然而它们要么是学习曲线陡峭，概念复杂，把简单的事情复杂化(如Angular)；要么就是编码风格不好，前后端代码混写在一起(如React、Meteor)。而Vue.js是当今在stack overflow等国外技术站点上被一致看好的技术。
第一次使用Vue.js就可以发现入门特别快，有一定Webpack开发经验的程序员，在一周内就可以上手做项目，认真学习的话，一个月就可以达到熟练水平(快速地开发项目)，两三个月就可以达到高级水平(熟练使用Vuex，自己写Component等)。这么快的上手速度，对于其他语言来说是不可想象的。根据笔者的实际体验，使用Angular入门需要一个月，使用React入门速度也不是很快。总之，越是简洁的框架，就越容易学。
本书共分12章，具体内容如下。
第1章讲述了Vue.js产生的背景，并将Vue.js与React、Angular做了比较，使读者对Vue.js有基本的认识。
第2章讲述了Vue.js的开发环境和Vue.js应用的创建，以及Vue.js的目录结构。
第3章介绍了TypeScript基础知识，使读者对TypeScript有一个基本的认识。
第4章介绍了Vue.js应用实例的创建、执行和生命周期，以及常用的前端模型。
第5章介绍了Vue.js组件的基本概念、组件的交互，并以插槽为例进行分析，更有助于读者了解组件。
第6章讲述了Vue.js模板的基本概念，并以在模板中渲染文本、在模板中使用指令为例进行分析，更有助于读者了解模板。
第7章主要介绍了Vue.js计算属性和侦听器，通过实例讲解了设置计算属性和侦听器的必要性，更有助于读者了解计算属性和侦听器。
第8章主要介绍了Vue.js样式，通过实例讲解了Vue.js绑定样式和内联样式的方法。
第9章主要介绍了Vue.js表达式，并以条件表达式和循环表达式为例进行分析，更有助于读者了解Vue.js表达式。
第10章主要介绍了Vue.js事件，讲述了事件的基本概念，并以如何处理原始的DOM、事件修饰符为例进行分析，更有助于读者了解Vue.js事件。
第11章主要介绍了Vue.js表单，讲述了表单绑定的基本概念，并以表单中的文本、单选按钮、复选框和选择框为例进行讲解，更有助于读者了解Vue.js表单。
第12章深入介绍了Vue.js组件，讲述了组件注册的基本概念，并以全局注册、局部注册和输入属性为例进行分析，更有助于读者了解组件。
本书不仅融入了作者丰富的工作经验和多年的使用心得，还提供了大量来自工作现场的实例，具有较强的实用性和可操作性。读者系统学习后可以掌握Vue.js前端框架的基础知识，拥有全面编写框架的编程能力、优良的团队协同技能和丰富的项目实战经验。编写本书的目的就是让框架初学者快速成长为合格的中级程序员，通过演练积累项目开发经验和团队合作技能，在未来的职场中获取一个较高的起点，并能迅速融入软件开发团队中。
本书由唐山师范学院的姬婧、郑铮两位老师共同编写，其中，第1章至第8章由姬婧老师编写，第9章至第12章由郑铮老师编写。
由于编者水平有限，书中难免存在不足和疏漏之处，敬请广大读者批评、指正。

编 者

姬婧，现任唐山师范学院计算机科学系教师。主要从事vue.js设计开发、Web开发、游戏开发相关的教学与科研工作，具有丰富的软件实践经验。在国内专业权威期刊发表论文多篇，参与省厅市级教改、科研课题多项。

第1章 理解Vue.js及其产生的背景 1
1.1 什么是Vue.js 2
1.1.1 为什么使用Vue.js 2
1.1.2 Vue.js的主要特点 3
1.1.3 Vue.js的优势 4
1.2 Vue.js产生的背景 4
1.2.1 传统的前端开发模式 5
1.2.2 Vue.js的开发模式 5
1.2.3 Vue.js与jQuery的区别 7
1.2.4 Vue.js与React、Angular的比较 8
1.2.5 如何选择Angular、React和Vue.js 11
1.3 如何学习Vue.js 12
1.3.1 知识储备 12
1.3.2 学习安排 17
1.4 小结 18
第2章 快速开启 一个Vue.js应用 19
2.1 开发环境准备 20
2.1.1 安装Node.js 20
2.1.2 设置NPM镜像 21
2.1.3 选择合适的IDE 22
2.1.4 安装Vue CLI 29
2.1.5 检查和调试Vue.js应用的工具Vue Devtools 30
2.2 创建Vue.js应用hello-world 32
2.2.1 利用Vue CLI初始化Vue.js应用hello-world 32
2.2.2 运行Vue.js应用hello-world 33
2.3 探索Vue.js应用 35
2.3.1 整体项目结构 35
2.3.2 项目根目录文件 35
2.3.3 node_modules目录 36
2.3.4 public目录 37
2.3.5 src目录 37
2.4 在Vue.js应用中使用TypeScript 38
2.4.1 基于Vue 3 Preview创建项目 38
2.4.2 基于Manually select features创建项目 39
2.4.3 TypeScript与JavaScript应用的差异 43
2.5 小结 44
第3章 TypeScript基础 45
3.1 TypeScript概述 46
3.1.1 TypeScript与JavaScript、ECMAScript的关系 46
3.1.2 TypeScript与Vue.js的关系 47
3.1.3 使用TypeScript的优势 48
3.1.4 安装TypeScript 49
3.1.5 TypeScript代码的编译及运行 49
3.2 常量与变量 51
3.2.1 const、let、var三者的作用域 52
3.2.2 常量与变量的区别 54
3.2.3 变量提升 55
3.3 TypeScript数据类型 64
3.3.1 基本类型 65
3.3.2 复杂基础类型 71
3.3.3 对象类型 74
3.3.4 任意类型 75
3.3.5 联合类型 75
3.3.6 交集类型 76
3.4 强大的面向对象体系 76
3.4.1 类 77
3.4.2 接口 78
3.4.3 演示接口的使用 78
3.4.4 泛型 79
3.4.5 演示泛型的使用 79
3.5 TypeScript的命名空间 80
3.5.1 声明命名空间 80
3.5.2 命名空间体 80
3.5.3 导入声明 81
3.5.4 导出声明 81
3.5.5 合并声明 82
3.6 TypeScript模块 86
3.6.1 了解模块 86
3.6.2 导入声明 87
3.6.3 导入Require声明 87
3.6.4 导出声明 88
3.6.5 导出分配 88
3.6.6 了解CommonJS模块 89
3.6.7 了解AMD模式 91
3.7 装饰器 91
3.7.1 定义装饰器 91
3.7.2 了解装饰器的执行时机 91
3.7.3 认识4类装饰器 93
3.8 小结 93
第4章 Vue.js应用实例 95
4.1 创建应用实例 96
4.1.1 一个应用实例 97
4.1.2 让应用实例执行方法 98
4.1.3 理解选项对象 99
4.1.4 理解根组件 102
4.1.5 理解MVC模型 104
4.1.6 理解MVP模型 105
4.1.7 理解MVVM模型 106
4.2 data property与data methods 107
4.2.1 理解data property 107
4.2.2 理解data methods 108
4.3 Vue.js的生命周期 110
4.3.1 生命周期中的钩子函数 110
4.3.2 生命周期的图示 111
4.3.3 生命周期钩子函数的实例 112
4.4 小结 114
第5章 Vue.js组件 115
5.1 组件的基本概念 116
5.1.1 创建和注册组件的基本步骤 116
5.1.2 理解组件的创建和注册 117
5.1.3 父组件和子组件 118
5.1.4 DOM模板解析注意事项 119
5.1.5 data必须是函数 122
5.1.6 组件组合 124
5.1.7 组件注册 124
5.2 组件通信 126
5.2.1 父组件与子组件通信 126
5.2.2 子组件与父组件通信 129
5.2.3 子组件之间的通信 130
5.2.4 通过插槽分发内容 130
5.3 特殊情况 133
5.4 让组件可以动态加载 136
5.5 使用keep-alive缓存组件 137
5.6 小结 139
第6章 Vue.js模板 141
6.1 在模板中使用插值 142
6.1.1 文本 142
6.1.2 原生HTML代码 143
6.1.3 绑定HTML属性 145
6.1.4 JavaScript表达式 146
6.2 在模板中使用指令 148
6.2.1 理解指令中的参数 148
6.2.2 理解指令中的动态参数 161
6.2.3 理解指令中的修饰符 163
6.3 在模板中使用指令的缩写 164
6.3.1 使用v-bind指令的缩写 165
6.3.2 使用v-on指令的缩写 166
6.4 综合实例 167
6.5 小结 172
第7章 Vue.js计算属性与侦听器 173
7.1 通过实例理解计算属性的必要性 174
7.2 声明计算属性 176
7.3 计算属性缓存与方法的关系 177
7.4 计算属性的注意事项 178
7.4.1 计算函数不应有副作用 178
7.4.2 避免直接修改计算属性值 178
7.4.3 计算属性无法追踪非响应式依赖 178
7.5 为什么需要侦听器 179
7.5.1 理解侦听器 179
7.5.2 一个侦听器的实例 181
7.6 综合实例 183
7.7 小结 187
第8章 Vue.js样式 189
8.1 绑定样式class 190
8.1.1 在class中绑定字符串 190
8.1.2 在class中绑定对象 191
8.1.3 在class中绑定数组 192
8.2 绑定内联样式 193
8.2.1 在内联样式中绑定对象 193
8.2.2 在内联样式中绑定数组 194
8.2.3 在内联样式中绑定多重值 195
8.3 综合实例 196
8.4 小结 198
第9章 Vue.js表达式 199
9.1 Vue表达式的优点 200
9.2 条件表达式 200
9.2.1 v-if指令的实例 201
9.2.2 v-else指令的实例 203
9.2.3 v-else-if指令的实例 204
9.2.4 v-show指令的实例 206
9.2.5 理解v-if指令与v-show指令的关系 207
9.3 for循环表达式 209
9.3.1 使用v-for指令遍历数组 209
9.3.2 使用v-for指令遍历数组设置索引 211
9.3.3 使用v-for指令遍历对象的property名称 212
9.3.4 数组过滤 213
9.3.5 使用值的范围 214
9.4 v-for指令的不同使用场景 214
9.4.1 在