单元1
Vue.js 3入门基础 1
单元导学 1
学习目标 1
知识学习 1
1.1　前端开发模式的演变历程 1
1.2　认识Vue.js 2
1.3　项目开发准备 3
1.3.1　了解相关工具 3
1.3.2　安装开发和调试工具 4
应用实践 10
项目1　历史名城简介页面 10
任务1-1　构建Vue应用程序 10
任务1-2　运行并调试Vue应用程序 12
同步训练 12
单元小结 13
单元练习 13

单元2
基础语法 14
单元导学 14
学习目标 14
知识学习 15
2.1　剖析Vue应用程序 15
2.2　单向绑定 17
2.3　双向绑定 22
2.4　流程控制 25
2.4.1　条件渲染 25
2.4.2　列表渲染 27
2.5　事件处理 29
2.5.1　事件监听 29
2.5.2　事件修饰符 31
2.6　计算属性 34
2.7　数据监听器 35
应用实践 37
项目2-1　简易计算器 37
任务2-1-1　构建页面布局 37
任务2-1-2　创建根组件和Vue应用实例 38
项目2-2　历史名城典故页面 39
任务2-2-1　构建页面布局 39
任务2-2-2　创建根组件和Vue应用实例 40
同步训练 40
单元小结 41
单元练习 42

单元3
组件基础 43
单元导学 43
学习目标 43
3.1　认识组件 44
3.2　组件定义 45
3.3　组件注册 47
3.3.1　全局注册 47
3.3.2　局部注册 48
3.4　组件间数据传递 49
3.4.1　props的使用 49
3.4.2　props的验证 52
3.5　组件事件 55
3.5.1　组件事件的监听与处理 55
3.5.2　组件事件的验证 57
3.5.3　v-model与自定义事件 59
3.6　组件插槽 61
3.6.1　默认插槽 61
3.6.2　具名插槽 63
3.6.3　作用域插槽 64
3.7　动态组件 66
应用实践 67
项目3　自定义页面图标样式 67
任务3-1　构建页面布局 68
任务3-2　实现自定义图标样式 69
同步训练 70
单元小结 70
单元练习 71

单元4
组件进阶 72
单元导学 72
学习目标 72
知识学习 72
4.1　组件生命周期 72
4.1.1　生命周期钩子函数 73
4.1.2　实例创建 74
4.1.3　页面挂载 75
4.1.4　数据更新 76
4.1.5　组件实例销毁 77
4.2　Teleport 79
4.2.1　基本用法 79
4.2.2　结合组件使用 82
应用实践 83
项目4　弹出式登录框 83
任务4-1　构建页面布局 84
任务4-2　创建登录框组件 85
同步训练 86
单元小结 87
单元练习 87

单元5
过渡和动画 88
单元导学 88
学习目标 88
知识学习 89
5.1　认识过渡和动画 89
5.2　实现过渡和动画 90
5.2.1　Transition组件 90
5.2.2　过渡 92
5.2.3　动画 93
5.2.4　基于钩子函数的过渡和动画 93
5.3　多个元素和组件过渡 97
5.4　列表过渡 100
应用实践 101
项目5　会员中心页面 101
任务5-1　构建页面布局 102
任务5-2　创建局部组件 103
同步训练 105
单元小结 105
单元练习 105

单元6
组合式API 107
单元导学 107
学习目标 107
知识学习 107
6.1　组合式API 107
6.1.1　认识组合式API 108
6.1.2　setup函数 111
6.1.3　访问生命周期钩子函数 113
6.2　响应性API 114
6.2.1　响应性原理 114
6.2.2　响应性API的应用 117
6.3　provide/inject响应式传值 123
应用实践 126
项目6　查询历史名城相关诗词 126
任务6-1　采用选项式API实现 126
任务6-2　利用组合式API重构 130
同步训练 131
单元小结 131
单元练习 132

单元7
与后端交互——axios 134
单元导学 134
学习目标 134
知识学习 134
7.1　认识axios 134
7.1.1　异步编程 135
7.1.2　axios安装与配置 140
7.2　axios处理HTTP请求 142
7.3　axios拦截器 145
应用实践 147
项目7　查询旅游城市天气 147
任务7-1　构建页面布局 148
任务7-2　实现天气预报查询 149
同步训练 152
单元小结 152
单元练习 153

单元8
路由管理——Vue Router 154
单元导学 154
学习目标 154
知识学习 155
8.1　认识Vue Router 155
8.1.1　前端路由 155
8.1.2　Vue Router安装与使用 156
8.2　路由属性 157
8.2.1　嵌套路由 157
8.2.2　命名路由 159
8.2.3　命名视图 160
8.3　动态路由 161
8.3.1　路由传参 161
8.3.2　路由函数 162
8.4　导航 164
8.4.1　声明式导航 164
8.4.2　编程式导航 166
8.5　导航守卫 168
8.5.1　全局导航守卫 168
8.5.2　路由导航守卫 170
应用实践 171
项目8　用户登录及注册 171
任务8-1　构建页面头部布局 172
任务8-2　实现登录和注册功能 173
同步训练 176
单元小结 176
单元练习 177

单元9
状态管理——Vuex 179
单元导学 179
学习目标 179
知识学习 179
9.1　认识Vuex 179
9.1.1　状态管理模式 180
9.1.2　Vuex安装与使用 182
9.2　Vuex核心属性 184
9.2.1　state 184
9.2.2　getters 185
9.2.3　mutations 187
9.2.4　actions 189
9.2.5　modules 192
应用实践 194
项目9　记录用户浏览历史 194
任务9-1　构建页面布局 195
任务9-2　实现浏览历史的记录和获取功能 198
同步训练 201
单元小结 201
单元练习 202

单元10
构建工程化的Vue项目 203
单元导学 203
学习目标 203
知识学习 204
10.1　Vue CLI工具 204
10.2　快速构建项目 205
10.3　项目组成要素 207
10.3.1　项目结构 207
10.3.2　项目入口文件 207
10.3.3　单文件组件 208
10.4　项目配置文件 212
10.4.1　package.json 212
10.4.2　vue.config.js 213
10.5　新一代构建工具Vite 214
10.5.1　Vite工具特点 215
10.5.2　体验Vite工具 215
10.6　Element Plus组件库 216
应用实践 218
项目10　todoMVC 218
任务10-1　构建项目主页布局 219
任务10-2　构建组件TodoHeader 220
任务10-3　构建组件TodoList 221
任务10-4　构建组件TodoFooter 223
同步训练 224
单元小结 225
单元练习 225

单元11
工程化项目实战：图片素材库网站 226
单元导学 226
学习目标 226
11.1　项目设计 227
11.1.1　项目功能模块 227
11.1.2　项目实现思路 227
11.1.3　项目工程化规范 232
11.2　前端子项目——构建项目 233
11.2.1　创建Vue工程 234
11.2.2　配置路由 234
11.2.3　配置Vuex 235
11.2.4　配置axios 237
11.2.5　项目入口 238
11.3　前端子项目——公共组件 239
11.4　前端子项目——网站首页 240
11.4.1　整体布局 240
11.4.2　轮播图 243
11.5　前端子项目——用户登录 245
11.6　前端子项目——图片展示与操作 247
11.7　前端子项目——图片分享 251
11.8　后端子项目——构建项目 255
11.8.1　认识Express框架 255
11.8.2　搭建后端子项目 257
11.9　后端子项目——用户登录合法性验证 258
单元小结 262
单元练习 263

附录
ES6相关语法 264