第1章 Vue.js简介 1
1.1 Web前端的发展历程 1
1.2 MV*模式 2
1.2.1 MVC模式 3
1.2.2 MVP模式 3
1.2.3 MVVM模式 4
1.3 走进Vue.js 4
1.3.1 Vue的发展历程 4
1.3.2 Vue的生态系统 5
1.3.3 渐进式框架 5
1.3.4 响应式系统 6
1.3.5 前端框架对比 6
1.4 Vue.js 3.0的新变化 7
1.5 本章小结 8
1.6 习题 8
第2章 Vue.js环境搭建与项目创建 9
2.1 安装Vue.js 9
2.1.1 使用CDN方式安装Vue.js 9
2.1.2 使用NPM方式安装Vue.js 10
2.1.3 使用VueCLI方式安装
Vue.js 10
2.1.4 使用Vite方式安装Vue.js 10
2.2 Vue.js的开发与调试工具 11
2.2.1 Web前端开发工具 11
2.2.2 安装VS Code 11
2.2.3 安装vue-devtools 13
2.3 实训：创建第一个Vue.js程序 16
2.3.1 菜系介绍页面的结构简图 16
2.3.2 实现菜系介绍页面的效果 17
2.4 本章小结 18
2.5 习题 18
第3章 ECMAScript 6的语法 20
3.1 ECMAScript 6介绍 20
3.2 块作用域构造—— let声明
与const声明 21
3.2.1 let声明 21
3.2.2 const声明 22
3.3 模板字面量 23
3.4 默认参数与rest参数 25
3.4.1 默认参数 25
3.4.2 rest参数 26
3.5 展开运算符 27
3.6 解构赋值 28
3.6.1 解构的必要性 29
3.6.2 对象解构 29
3.6.3 数组解构 30
3.7 箭头函数 31
3.7.1 箭头函数的基本语法 31
3.7.2 箭头函数与this指向 33
3.7.3 实训：用户信息页 34
3.8 Symbol 36
3.8.1 Symbol的基本语法 36
3.8.2 作为属性名的Symbol 36
3.8.3 可共享的Symbol 37
3.9 Promise 38
3.9.1 Promise的基本语法 38
3.9.2 Promise的生命周期 39
3.9.3 Promise的原型方法 39
3.10 Class 41
3.11 Module模块 42
3.12 async函数 45
3.12.1 async函数简介 45
3.12.2 async函数的基本语法 45
3.13 实训：商品订单页面 46
3.13.1 商品订单页面的结构简图 47
3.13.2 实现商品订单页面的效果 47
3.14 本章小结 50
3.15 习题 50
第4章 Vue的基本语法 52
4.1 创建应用程序实例 52
4.2 插值语法 54
4.2.1 文本插值 54
4.2.2 原始HTML 55
4.2.3 插值表达式 56
4.2.4 实训：商品价格计算页面 56
4.3 方法选项 57
4.4 指令 59
4.4.1 指令参数 59
4.4.2 内置指令 60
4.4.3 自定义指令 70
4.4.4 实训：商品信息管理表格 72
4.5 计算属性 75
4.5.1 计算属性的定义 75
4.5.2 计算属性的缓存 77
4.5.3 计算属性有选择性地渲染
列表 78
4.5.4 实训：购物车页面 79
4.6 侦听器 81
4.7 Class与Style绑定 83
4.7.1 绑定HTML样式（Class） 83
4.7.2 绑定内联样式（Style） 84
4.7.3 实训：斑马纹商品表 85
4.8 生命周期钩子 86
4.9 实训：农产品后台管理系统 88
4.9.1 商品信息页面的结构简图 88
4.9.2 实现商品信息页面的效果 89
4.10 本章小结 92
4.11 习题 93
第5章 事件处理与表单绑定 94
5.1 事件处理 94
5.1.1 方法事件处理器 94
5.1.2 内联事件处理器 95
5.1.3 事件修饰符 97
5.1.4 按键修饰符 99
5.1.5 其他修饰符 101
5.1.6 实训：账户信息管理页面 102
5.2 表单输入绑定 104
5.2.1 单行文本输入框 105
5.2.2 多行文本输入框 105
5.2.3 复选框 106
5.2.4 单选按钮 108
5.2.5 选择框 109
5.2.6 值绑定 110
5.2.7 实训：用户注册页面 113
5.3 实训：新增商品页面 115
5.3.1 新增商品页面的结构简图 116
5.3.2 实现新增商品页面的效果 116
5.4 本章小结 119
5.5 习题 119
第6章 组件 121
6.1 组件化开发 121
6.2 组件的注册 122
6.2.1 全局注册 122
6.2.2 局部注册 123
6.3 组件间通信 124
6.3.1 父组件向子组件传递数据 125
6.3.2 单向数据流 126
6.3.3 prop校验 127
6.3.4 子组件向父组件传递数据 129
6.4 插槽 131
6.4.1 插槽的基本用法 131
6.4.2 为插槽指定默认内容 132
6.4.3 具名插槽 133
6.4.4 作用域插槽 135
6.5 组件通信的其他方式 137
6.5.1 使用$root访问根组件实例 137
6.5.2 使用$parent访问父组件
实例 139
6.5.3 使用$refs访问子组件实例
或子元素 140
6.5.4 依赖注入 142
6.6 动态组件 144
6.7 实训：商品详情页面 145
6.7.1 商品详情页面的结构简图 146
6.7.2 实现商品详情页面的效果 146
6.8 本章小结 149
6.9 习题 149
第7章 过渡与动画 151
7.1 过渡与动画的内置组件 151
7.2 基于CSS的过渡与动画 151
7.2.1 CSS过渡 151
7.2.2 CSS动画 154
7.2.3 自定义过渡类名 155
7.3 借助JavaScript钩子函数
实现动画效果 157
7.4 元素间过渡 158
7.5 列表过渡 160
7.6 实训：商品列表页面 162
7.6.1 商品列表页面的
结构简图 162
7.6.2 实现商品列表页面的
效果 163
7.7 本章小结 165
7.8 习题 166
第8章 组合式API 167
8.1 组合式API的必要性 167
8.2 setup()函数 168
8.2.1 setup()函数的特性 168
8.2.2 setup()函数的基本语法 168
8.2.3 实训：用户信息展示页面 170
8.3 ref()方法与reactive()方法 172
8.3.1 ref()方法 172
8.3.2 reactive()方法 174
8.3.3 实训：密保问题管理页面 176
8.4 toRefs()方法与toRef()方法 178
8.4.1 toRefs()方法 179
8.4.2 toRef()方法 180
8.4.3 实训：销售额展示页面 182
8.5 计算属性与侦听器 184
8.5.1 computed()方法 184
8.5.2 watchEffect()方法 186
8.5.3 watch()方法 187
8.5.4 实训：用户查询页面 190
8.6 provide()方法与inject()方法 192
8.7 组合式API中的生命周期
钩子 194
8.8 实训：促销活动管理页面 196
8.8.1 促销活动管理页面的
结构简图 196
8.8.2 实现促销活动管理页面的
效果 196
8.9 本章小结 201
8.10 习题 201
第9章 Vue工程化 203
9.1 VueCLI 203
9.1.1 VueCLI简介 203
9.1.2 VueCLI的环境配置 204
9.1.3 安装VueCLI 206
9.1.4 使用VueCLI创建项目 206
9.1.5 项目结构分析 209
9.1.6 实训：诗歌展示页面 211
9.2 新一代前端构建工具Vite 214
9.3 Element Plus组件库 216
9.3.1 安装Element Plus 217
9.3.2 使用Element Plus组件 217
9.3.3 实训：使用Element Plus
重构诗歌展示页面 218
9.4 实训：物流公司管理页面 220
9.4.1 物流公司管理页面的
结构简图 220
9.4.2 实现物流公司管理页面的
效果 221
9.5 本章小结 228
9.6 习题 228
第10章 Vue Router单页应用程序
开发 230
10.1 初识路由 230
10.1.1 路由的定义 230
10.1.2 路由的分类 230
10.2 路由基础 232
10.2.1 路由的安装与配置 232
10.2.2 创建第一个路由项目 233
10.2.3 嵌套路由 236
10.2.4 重定向与命名路由 237
10.2.5 路由传参 238
10.2.6 编程式导航 240
10.2.7 实训：重构农产品后台
管理系统页面 241
10.3 路由进阶 246
10.3.1 导航守卫 246
10.3.2 路由组合式API 251
10.4 实训：蔬菜商品信息页面 252
10.4.1 蔬菜商品信息页面的
结构简图 252
10.4.2 实现蔬菜商品信息页面的
效果 253
10.5 本章小结 256
10.6 习题 257
第11章 axios数据请求 258
11.1 初识axios 258
11.1.1 axios的特征 258
11.1.2 axios的安装与引入 259
11.2 axios的基本用法 260
11.2.1 axios的常用请求方式 260
11.2.2 请求JSON数据 262
11.2.3 跨域请求数据 263
11.3 axios请求配置 266
11.3.1 axios配置对象 266
11.3.2 配置对象的应用 269
11.4 并发请求 269
11.5 创建axios实例 270
11.6 配置默认值 270
11.7 axios拦截器 271
11.8 实训：销售额查询页面 271
11.8.1 销售额查询页面的
结构简图 272
11.8.2 实现销售额查询页面的
效果 272
11.9 本章小结 276
11.10 习题 276
第12章 Vuex状态管理 277
12.1 初识Vuex状态管理 277
12.1.1 Vuex简述 277
12.1.2 单组件与多组件的
状态管理 278
12.1.3 Vuex的原理 279
12.2 Vuex的安装与配置 280
12.2.1 Vuex的安装 280
12.2.2 在VueCLI创建的项目中
配置Vuex 281
12.3 Vuex的核心概念 282
12.3.1 State 282
12.3.2 Getters 284
12.3.3 Mutations 286
12.3.4 Actions 289
12.3.5 Modules 292
12.4 Vuex与组合式API 294
12.5 实训：粮食信息列表页面 295
12.5.1 粮食信息列表页面的
结构简图 295
12.5.2 实现粮食信息列表页面的
效果 296
12.6 本章小结 299
12.7 习题 299