Vue.js 3.x高效前端开发（视频教学版）

第1章 认识Vue.js 3.x 1
1.1 Web前端技术的发展历程 1
1.1.1 从静态向动态转变 1
1.1.2 从后端走向前端 2
1.1.3 从前端走向全端 2
1.2 Vue.js概述 2
1.2.1 Vue.js是什么 2
1.2.2 Vue.js发展历程 4
1.3 MV*模式 4
1.3.1 MVC模式 4
1.3.2 MVVM模式 5
第2章 创建Vue.js实例 6
2.1 安装vue-devtools 6
2.2 在项目中引入Vue.js 8
2.2.1 使用CDN 9
2.2.2 使用NPM 9
2.2.3 使用命令行工具CLI 9
2.2.4 使用Vite 10
2.3 安装和使用编辑器HBuilder 10
2.4 项目实训—我的第一个Vue.js程序 12
第3章 Vue.js模板语法 16
3.1 创建应用程序实例 16
3.2 插值 17
3.3 方法选项 19
3.3.1 使用方法 19
3.3.2 传递参数 21
3.3.3 方法之间的调用 22
3.4 Vue实例的生命周期 23
3.4.1 认识生命周期钩子函数 23
3.4.2 created和mouted 25
3.5 指令 27
第4章 精通指令 29
4.1 常见内置指令 29
4.1.1 v-show指令 29
4.1.2 v-bind指令 30
4.1.3 v-model 31
4.1.4 v-on 33
4.1.5 v-text 34
4.1.6 v-html 35
4.1.7 v-once 36
4.1.8 v-pre 37
4.1.9 v-cloak 38
4.2 条件渲染指令 39
4.2.1 v-if 39
4.2.2 v-else-if和v-else 40
4.2.3 v-for 41
4.3 指令缩写 53
4.4 自定义指令 53
4.4.1 注册自定义指令 53
4.4.2 钩子函数 54
4.4.3 动态指令参数 56
4.5 项目实训—通过指令实现随机背景色效果 57
第5章 计算属性 59
5.1 计算属性的定义 59
5.2 计算属性的getter和setter方法 60
5.3 计算属性的缓存 62
5.4 计算属性代替v-for和v-if 65
5.5 项目实训—使用计算属性设计计算器 66
第6章 v-bind及class与style绑定 68
6.1 绑定HTML样式class 68
6.1.1 数组语法 68
6.1.2 对象语法 70
6.1.3 用在组件上 74
6.2 绑定内联样式style 74
6.2.1 对象语法 74
6.2.2 数组语法 77
6.3 项目实训—设计隔行变色的水果信息表 78
第7章 表单与v-model双向绑定 81
7.1 实现双向数据绑定 81
7.2 单行文本输入框 81
7.3 多行文本输入框 82
7.4 复选框 83
7.5 单选按钮 85
7.6 选择框 86
7.7 值绑定 89
7.7.1 复选框 89
7.7.2 单选框 89
7.7.3 选择框的选项 90
7.8 修饰符 91
7.8.1 lazy 91
7.8.2 number 92
7.8.3 trim 93
7.9 项目实训—设计用户注册页面 94
第8章 精通监听器 96
8.1 使用监听器 96
8.2 监听方法和对象 97
8.2.1 监听方法 97
8.2.2 监听对象 98
8.3 实例方法$watch 101
8.4 项目实训—使用监听器设计购物车效果 102
第9章 事件处理 107
9.1 监听事件 107
9.2 事件处理方法 108
9.3 事件修饰符 111
9.3.1 stop 112
9.3.2 capture 114
9.3.3 self 115
9.3.4 once 117
9.3.5 prevent 118
9.3.6 passive 119
9.4 按键修饰符 119
9.5 系统修饰键 121
9.6 项目实训—处理用户注册信息 122
第10章 过渡和动画效果 125
10.1 单元素/组件的过渡和动画 125
10.1.1 CSS过渡 125
10.1.2 过渡的类名 127
10.1.3 CSS动画 129
10.1.4 自定义过渡的类名 130
10.1.5 动画的JavaScript钩子函数 131
10.2 初始渲染的过渡 135
10.3 多个元素的过渡 136
10.4 列表过渡 137
10.4.1 列表的进入/离开过渡 138
10.4.2 列表的排序过渡 139
10.4.3 列表的交错过渡 140
10.5 项目实训—设计折叠菜单的过渡动画 142
第11章 组件和组合API 145
11.1 组件是什么 145
11.2 组件的注册 146
11.2.1 全局注册 146
11.2.2 局部注册 147
11.3 使用prop向子组件传递数据 147
11.3.1 prop基本用法 148
11.3.2 单向数据流 151
11.3.3 prop验证 151
11.3.4 非prop的属性 153
11.4 子组件向父组件传递数据 154
11.4.1 监听子组件事件 155
11.4.2 将原生事件绑定到组件 156
11.4.3 .sync修饰符 158
11.5 插槽 160
11.5.1 插槽基本用法 160
11.5.2 编译作用域 160
11.5.3 默认内容 161
11.5.4 命名插槽 162
11.5.5 作用域插槽 165
11.5.6 解构插槽prop 166
11.6 什么是组合API 168
11.7 setup()函数 168
11.8 响应式API 169
11.8.1 reactive()方法和watchEffect()方法 169
11.8.2 ref()方法 170
11.8.3 readonly()方法 171
11.8.4 computed()方法 172
11.8.5 watch()方法 172
11.9 项目实训—使用组件创建树状项目分类 173
第12章 虚拟DOM和render()函数 176
12.1 虚拟DOM 176
12.2 render()函数 177
12.3 创建组件的VNode 180
12.4 使用JavaScript代替模板功能 181
12.4.1 v-if和v-for 181
12.4.2 v-on 182
12.4.3 事件和按键修饰符 182
12.4.4 插槽 183
12.5 函数式组件 185
12.6 JSX 185
12.7 项目实训—设计商品采购信息列表 186
第13章 精通Vue CLI和Vite 189
13.1 脚手架的组件 189
13.2 脚手架环境搭建 190
13.3 安装脚手架 191
13.4 创建项目 192
13.4.1 使用命令 192
13.4.2 使用图形化界面 195
13.5 分析项目结构 196
13.6 配置scss、less和stuly 198
13.7 配置文件gackage.json 201
13.8 Vue.js 3.x新增的开发构建工具Vite 202
第14章 使用Vue Router开发单页面应用 205
14.1 使用Vue Router 205
14.1.1 在HTML页面使用路由 205
14.1.2 在项目中使用路由 210
14.2 命名路由 211
14.3 命名视图 213
14.4 路由传参 217
14.5 编程式导航 222
14.6 组件与Vue Router之间解耦 226
14.6.1 布尔模式 226
14.6.2 对象模式 229
14.6.3 函数模式 232
第15章 使用axios与服务器通信 235
15.1 什么是axios 235
15.2 安装axios 236
15.3 基本用法 236
15.3.1 get请求和post请求 236
15.3.2 请求JSON数据 238
15.3.3 跨域请求数据 239
15.3.4 并发请求 241
15.4 axios API 243
15.5 请求配置 244
15.6 创建实例 246
15.7 配置默认选项 246
15.8 拦截器 247
15.9 项目实训—显示近7日的天气情况 248
第16章 使用Vuex管理组件状态 250
16.1 什么是Vuex 250
16.2 安装Vuex 251
16.3 在项目中使用Vuex 252
16.3.1 搭建一个项目 252
16.3.2 state对象 254
16.3.3 getter对象 255
16.3.4 mutation对象 257
16.3.5 action对象 259
第17章 开发网上商城项目 262
17.1 系统功能模块 262
17.2 系统结构分析 263
17.3 系统运行效果 263
17.4 系统功能模块设计与实现 264
17.4.1 首页头部组件 264
17.4.2 首页信息模块 265
17.4.3 用户注册与登录模块 268
17.4.4 商品模块 270
17.4.5 购买模块 276
17.4.6 支付模块 277
后记 279