【章名目录】
第1章　Web前端开发概述
第2章　Vue.js开发基础
第3章　计算属性与侦听器
第4章　控制页面的CSS样式
第5章　事件处理
第6章　表单绑定
第7章　结构渲染
第8章　阶段案例——网页汇率计算器和番茄钟
第9章　组件基础
第10章　单文件组件
第11章　AJAX与Axios
第12章　过渡动画
第13章　路由Vue Router
第14章　状态管理
第15章　综合案例——“豪华版”待办事项
第16章　综合案例——网页图片剪裁器
第17章　综合案例——电子商务网站
附录A　从Vue.js 2升级到Vue.js 3
附录B　ECMAScript 2015（ES6）基础知识

【详细目录】
第1章　Web前端开发概述
1.1　Web开发简史　2
1.2　基于前后端分离模式的Web开发　3
1.2.1　从提供内容到提供服务的转变　3
1.2.2　从“单一网站”到“多终端应用”　4
1.3　Vue.js与MVVM模式　4
1.4　Vue.js开发中常用的工具　7
1.4.1　Chrome浏览器　7
1.4.2　VS Code文本编辑器　8
1.4.3　命令行窗口　9
1.5　安装Vue.js　10
1.6　上手实践：第一个Vue.js程序　11
本章小结　13
习题1　13

第2章　Vue.js开发基础
2.1　Vue应用实例　14
2.1.1　文本插值　14
2.1.2　方法属性　18
2.1.3　属性绑定　21
2.1.4　插入HTML片段　22
2.2　Vue实例的生命周期　23
本章小结　25
习题2　25

第3章　计算属性与侦听器
3.1　计算属性　26
3.1.1　定义计算属性　26
3.1.2　计算属性的缓存特性　28
3.2　侦听器　31
3.2.1　侦听器的应用场景　31
3.2.2　侦听器的基本用法　32
3.2.3　深度侦听　33
3.2.4　侦听对象时获取对象原值　34
3.2.5　使用immediate参数　36
3.2.6　对数组进行侦听　36
本章小结　38
习题3　38

第4章　控制页面的CSS样式
4.1　绑定class属性　39
4.1.1　以对象方式绑定class属性　39
4.1.2　将class属性与对象变量绑定　41
4.1.3　以数组方式绑定class属性　42
4.1.4　动态改变class属性值　43
4.1.5　在数组中使用对象　43
4.2　绑定style属性　44
4.2.1　以对象方式绑定style属性　44
4.2.2　将style属性与对象变量绑定　45
4.2.3　以数组方式绑定style属性　46
4.2.4　动态改变style属性值　46
本章小结　47
习题4　47

第5章　事件处理
5.1　标准DOM中的事件　48
5.1.1　事件与事件流　48
5.1.2　事件对象　49
5.2　使用Vue.js处理事件　51
5.2.1　以内联方式响应事件　51
5.2.2　事件处理方法　52
5.2.3　在Vue.js中使用事件对象　53
5.3　动手练习：监视鼠标移动　54
5.4　事件修饰符　55
5.4.1　准备基础页面　56
5.4.2　.stop　56
5.4.3　.self　57
5.4.4　.capture　57
5.4.5　.once　57
5.4.6　.prevent　58
5.4.7　事件修饰符使用说明　58
5.4.8　按键修饰符　59
本章小结　61
习题5　61

第6章　表单绑定
6.1　输入文本的绑定　62
6.1.1　文本框　62
6.1.2　多行文本框　63
6.2　选择类表单元素的绑定　64
6.2.1　单选按钮　64
6.2.2　复选框　65
6.2.3　下拉框　66
6.2.4　多选列表框　66
6.2.5　键值对绑定　67
6.3　修饰符　68
6.3.1　.lazy　68
6.3.2　.number　68
6.3.3　.trim　69
本章小结　69
习题6　69

第7章　结构渲染
7.1　条件渲染指令v-if　70
7.1.1　v-if和v-else　70
7.1.2　v-else-if　71
7.1.3　v-if和v-show　72
7.2　列表渲染指令v-for　73
7.2.1　基本列表　73
7.2.2　迭代对象数组　74
7.2.3　对象属性列表　75
7.2.4　数值范围　76
7.2.5　数组更新检测　76
7.2.6　v-for中的key属性有何作用　78
7.2.7　将v-for与v-if一同使用时的注意事项　80
本章小结　81
习题7　81

第8章　阶段案例——网页汇率计算器和番茄钟
8.1　网页汇率计算器　82
8.1.1　页面结构和样式　83
8.1.2　数据模型　83
8.2　番茄钟　86
8.2.1　功能描述　86
8.2.2　用到的知识点　87
8.2.3　页面结构和样式　87
8.2.4　实现核心逻辑　88
8.2.5　使用Vue.js处理交互　91
本章小结　95

第9章　组件基础
9.1　自定义组件与HTML标记　97
9.1.1　组件的名称　98
9.1.2　组件的属性　99
9.1.3　组件的内容　100
9.1.4　在组件中处理事件　100
9.2　全局组件与局部组件　103
本章小结　105
习题9　105

第10章　单文件组件
10.1　安装Vue CLI脚手架工具　107
10.2　动手练习：投票页面　111
10.2.1　制作greeting组件　112
10.2.2　制作app组件　113
10.2.3　在父子组件之间传递数据　115
10.2.4　构建用于生产环境的文件　119
10.3　单页应用和多页应用　120
10.3.1　单页应用和多页应用的区别　121
10.3.2　多页应用开发　121
10.3.3　单页应用开发　123
本章小结　129
习题10　129

第11章　AJAX与Axios
11.1　认识AJAX与Axios　130
11.1.1　AJAX的基本概念　130
11.1.2　AJAX的组成部分　132
11.1.3　用原生方法获取异步数据　133
11.1.4　认识Axios　135
11.2　Axios的基础用法　136
11.2.1　基本用法　136
11.2.2　GET与POST　138
11.2.3　嵌套请求与并发请求　142
11.3　Axios的进阶用法　146
11.3.1　创建实例　146
11.3.2　实例的相关配置　146
11.3.3　错误处理　147
11.3.4　拦截器　148
11.4　动手练习：实现自动提示的文本框　151
11.4.1　基本思路与结构　152
11.4.2　样式布局　152
11.4.3　匹配用户输入并显示提示框　153
11.5　动手练习：模拟百度的“数据加载中”效果　155
本章小结　155
习题11　156

第12章　过渡动画
12.1　CSS过渡　157
12.2　单元素过渡　158
12.2.1　transition组件　158
12.2.2　过渡的类名　159
12.3　动手练习：可折叠的多级菜单　160
12.3.1　搭建页面结构　160
12.3.2　展开和收起菜单　162
12.3.3　添加过渡效果　163
12.3.4　实现多级菜单　164
12.4　列表过渡　167
12.4.1　transition-group组件　167
12.4.2　动手练习：待办事项　169
本章小结　174
习题12　174

第13章　路由Vue Router
13.1　基本用法　175
13.2　命名路由　179
13.3　路由动态匹配　180
13.3.1　路由参数　180
13.3.2　多路由参数与侦听路由　182
13.3.3　查询参数　184
13.3.4　捕获所有路由　184
13.4　编程式导航　186
13.5　重定向和别名　186
13.6　进阶用法　187
13.6.1　导航守卫　187
13.6.2　路由元信息　189
13.7　history模式　190
本章小结　190
习题13　190

第14章　状态管理
14.1　store模式　192
14.1.1　整体页面结构　193
14.1.2　创建store对象　193
14.1.3　使用store对象　194
14.2　Vuex的基本用法　196
14.3　深入掌握Vuex　199
14.3.1　在单文件组件中使用Vuex　199
14.3.2　action与mutation　203
14.4　动手练习：改进版的“待办事项”（TodoList）　207
本章小结　208
习题14　208

第15章　综合案例——“豪华版”待办事项
15.1　功能描述　212
15.2　用到的知识点　213
15.3　使用Vue CLI搭建项目　213
15.4　页面结构和样式　215
15.4.1　添加待办事项　215
15.4.2　任务状态的筛选项以及对应的任务个数　217
15.4.3　任务列表　218
15.4.4　编辑任务弹框　219
15.5　组件化　220
15.5.1　抽离单个任务　220
15.5.2　抽离编辑弹框　221
15.6　核心功能的实现　221
15.6.1　定义Todo类　221
15.6.2　使用Vuex管理任务列表　222
15.7　实现各项功能　224
15.7.1　添加任务　224
15.7.2　显示任务列表　225
15.7.3　动态化筛选项　225
15.7.4　修改任务状态　226
15.7.5　编辑任务　227
15.7.6　删除任务　230
15.7.7　调整任务顺序　230
15.7.8　持久化任务　231
本章小结　233

第16章　综合案例——网页图片剪裁器
16.1　整体分析　235
16.2　页面结构和CSS样式　236
16.2.1　HTML结构　236
16.2.2　选区部分的结构与样式　237
16.3　实现核心逻辑　238
16.3.1　定义基础类　238
16.3.2　定义Cropper类　240
16.4　使用Vue.js处理交互　244
16.4.1　初始化图像　244
16.4.2　绘制选区　246
16.4.3　移动选区　251
16.4.4　调整选区大小　252
16.4.5　将手柄封装为组件　256
16.4.6　最终剪裁　258
本章小结　259

第17章　综合案例——电子商务网站
17.1　案例总体介绍　260
17.1.1　案例目标　260
17.1.2　最终效果展示　262
17.2　搭建网站框架　264
17.2.1　使用Vue CLI搭建项目　264
17.2.2　准备基本页面及路由　266
17.2.3　安装Bootstrap　268
17.3　产品页面　269
17.3.1　静态产品列表页　269
17.3.2　动态化产品列表页　270
17.3.3　产品详情页　273
17.3.4　页面装载状态提示　274
17.4　购物车　278
17.4.1　静态结构　278
17.4.2　实现购物车可移动　279
17.4.3　实现购物车动态化　281
17.5　完成网站剩余部分　284
本章小结　287

附录A　从Vue.js 2升级到Vue.js 3
A.1　底层变化　288
A.2　开发者使用层面的改进　293
A.3　开发工具层面的改进　294

附录B　ECMAScript 2015（ES6）基础知识
B.1　let关键字　296
B.2　const关键字　297
B.3　for…of循环　298
B.4　字符串模板　298
B.5　参数默认值　298
B.6　类与继承　299
B.7　箭头函数　300
B.8　剩余运算符与剩余参数　302
B.9　展开运算符　302
B.10　数组的解构赋值　303
B.11　对象的解构赋值　303
B.12　模块　304