Vue.js从入门到精通

第1篇 基础知识
第1章 初识Vue.js 2
视频讲解：19分钟
1.1 什么是Vue.js 2
1.1.1 Vue.js简介 2
1.1.2 MVVM开发模式 3
1.1.3 Vue.js的特点 3
1.2 安装Vue.js 4
1.2.1 使用CDN 4
1.2.2 使用NPM 4
1.2.3 使用Vue CLI 5
1.3 Vue.js 3.0的新特性 5
1.4 WebStorm的下载和安装 6
1.4.1 WebStorm的下载 6
1.4.2 WebStorm的安装 7
1.5 第一个Vue.js程序 10
1.6 实践与练习 14
第2章 ECMAScript 6语法介绍 15
视频讲解：74分钟
2.1 块级声明 15
2.1.1 let声明 16
2.1.2 const声明 16
2.2 模板字面量 17
2.2.1 多行字符串 17
2.2.2 字符串占位符 17
2.3 默认参数和rest参数 18
2.3.1 默认参数 18
2.3.2 rest参数 18
2.4 解构赋值 20
2.4.1 对象解构 20
2.4.2 数组解构 21
2.5 展开运算符 21
2.6 对象字面量语法扩展 22
2.6.1 对象初始化的简写 23
2.6.2 对象方法的简写 23
2.6.3 动态属性名 24
2.7 箭头函数 24
2.7.1 语法 24
2.7.2 箭头函数中的this 25
2.8 Promise 26
2.9 类 27
2.9.1 创建类和实例 27
2.9.2 类的构造函数 28
2.9.3 在类中添加方法 29
2.9.4 类的继承 31
2.9.5 静态成员 31
2.10 模块 32
2.10.1 模块概述 32
2.10.2 ES6中的模块 33
2.11 实践与练习 36
第3章 Vue实例与数据绑定 38
视频讲解：36分钟
3.1 应用程序实例及选项 38
3.1.1 数据 39
3.1.2 方法 39
3.1.3 生命周期钩子 40
3.2 插值 42
3.2.1 文本插值 42
3.2.2 插入HTML 43
3.2.3 绑定属性 44
3.2.4 使用表达式 45
3.3 指令 47
3.3.1 参数 47
3.3.2 动态参数 47
3.3.3 修饰符 48
3.4 实践与练习 48
第4章 条件判断指令 49
视频讲解：30分钟
4.1 v-if指令 49
4.1.1 基本用法 49
4.1.2 判断一组元素 50
4.2 v-else指令 51
4.3 v-else-if指令 53
4.4 v-show指令 55
4.5 如何选择v-if和v-show 56
4.6 实践与练习 57
第5章 v-for指令 58
视频讲解：56分钟
5.1 遍历数组 58
5.1.1 基本用法 58
5.1.2 循环一组元素 61
5.1.3 更新数组 62
5.2 遍历对象 65
5.2.1 基本用法 65
5.2.2 向对象中添加响应式属性 67
5.3 遍历整数 68
5.4 key属性 70
5.5 实践与练习 71
第6章 计算属性和监听属性 72
视频讲解：47分钟
6.1 计算属性 72
6.1.1 计算属性简介 72
6.1.2 计算属性的应用 73
6.1.3 计算属性的getter和setter 74
6.1.4 计算属性的缓存 77
6.2 监听属性 79
6.2.1 监听属性简介 79
6.2.2 监听属性的应用 80
6.2.3 监听对象 81
6.3 计算属性和监听属性的比较 82
6.4 实践与练习 83
第2篇 核心技术
第7章 元素样式绑定 86
视频讲解：38分钟
7.1 class绑定 86
7.1.1 对象语法 86
7.1.2 数组语法 94
7.2 style绑定 96
7.2.1 对象语法 96
7.2.2 数组语法 99
7.3 实践与练习 101
第8章 事件处理 102
视频讲解：34分钟
8.1 监听事件 102
8.2 事件处理方法 103
8.2.1 绑定方法 103
8.2.2 使用事件对象 105
8.2.3 使用内联语句 107
8.3 修饰符的使用 109
8.3.1 事件修饰符 109
8.3.2 按键修饰符 111
8.4 实践与练习 114
第9章 表单元素绑定 116
视频讲解：95分钟
9.1 文本框绑定 116
9.1.1 单行文本框 117
9.1.2 多行文本框 119
9.2 复选框绑定 121
9.2.1 单个复选框 121
9.2.2 多个复选框 124
9.3 单选按钮绑定 125
9.4 下拉列表框绑定 127
9.4.1 单选列表框 127
9.4.2 多选列表框 130
9.5 值绑定 133
9.5.1 单选按钮 133
9.5.2 复选框 134
9.5.3 下拉列表框 135
9.6 修饰符的使用 136
9.6.1 lazy 136
9.6.2 number 137
9.6.3 trim 137
9.7 实践与练习 138
第10章 自定义指令 139
视频讲解：16分钟
10.1 注册自定义指令 139
10.1.1 全局自定义指令 139
10.1.2 局部自定义指令 140
10.2 钩子函数 141
10.3 绑定值的类型 145
10.3.1 绑定数值 145
10.3.2 绑定字符串 146
10.3.3 绑定对象字面量 147
10.4 实践与练习 148
第11章 组件 149
视频讲解：118分钟
11.1 注册组件 149
11.1.1 注册全局组件 150
11.1.2 注册局部组件 152
11.2 向子组件传递数据 153
11.2.1 Prop基本用法 153
11.2.2 数据验证 160
11.3 监听子组件事件 163
11.3.1 监听自定义事件 163
11.3.2 监听原生事件 166
11.4 插槽的使用 168
11.4.1 基础用法 168
11.4.2 编译作用域 169
11.4.3 默认内容 170
11.4.4 命名插槽 171
11.4.5 作用域插槽 174
11.5 混入 178
11.5.1 基础用法 178
11.5.2 选项合并 179
11.6 动态组件 182
11.6.1 动态组件的用法 182
11.6.2 缓存效果 185
11.7 实践与练习 190
第12章 组合API 191
视频讲解：31分钟
12.1 什么是组合API 191
12.2 setup()函数 192
12.3 响应式API 194
12.3.1 reactive()方法 194
12.3.2 watchEffect()方法 195
12.3.3 ref()方法 195
12.3.4 computed()方法 197
12.3.5 watch()方法 198
12.4 生命周期钩子函数 200
12.5 使用ref获取DOM元素 200
12.6 实践与练习 202
第13章 过渡和动画效果 203
视频讲解：83分钟
13.1 单元素过渡 203
13.1.1 CSS过渡 203
13.1.2 过渡的类名 205
13.1.3 自定义过渡的类名 206
13.1.4 CSS动画 208
13.1.5 使用JavaScript钩子函数实现动画 209
13.2 多元素过渡 213
13.2.1 多元素过渡的用法 213
13.2.2 设置元素的key属性 214
13.2.3 过渡模式的设置 217
13.3 多组件过渡 218
13.4 列表过渡 222
13.5 实践与练习 224
第14章 渲染函数 226
视频讲解：22分钟
14.1 什么是虚拟DOM 226
14.2 render()函数的使用 227
14.2.1 基本用法 227
14.2.2 h()函数 230
14.3 使用JavaScript代替模板功能 233
14.4 实践与练习 238
第3篇 高级应用
第15章 使用Vue Router实现路由 240
视频讲解：42分钟
15.1 路由基础 240
15.1.1 引入Vue Router 241
15.1.2 基本用法 241
15.1.3 动态路由匹配 244
15.1.4 命名路由 245
15.2 编程式导航 245
15.3 嵌套路由 249
15.4 命名视图 254
15.5 高级用法 257
15.5.1 beforeEach钩子函数 257
15.5.2 scrollBehavior方法 261
15.6 实践与练习 263
第16章 使用axios实现Ajax请求 264
视频讲解：33分钟
16.1 什么是axios 264
16.2 引入axios 265
16.3 发送get请求 265
16.4 发送post请求 267
16.5 实践与练习 270
第17章 Vue CLI 272
视频讲解：17分钟
17.1 Vue CLI简介 272
17.2 Vue CLI的安装 273
17.3 创建项目 274
17.3.1 使用vue create命令 274
17.3.2 使用图形界面 278
17.4 项目结构 279
17.5 编写一个单文件组件 281
17.6 实践与练习 283
第18章 状态管理 285
视频讲解：59分钟
18.1 什么是Vuex 285
18.2 Vuex的组成 286
18.3 Vuex的安装 287
18.4 在项目中使用Vuex 287
18.4.1 创建store 287
18.4.2 定义state 288
18.4.3 定义getter 291
18.4.4 定义mutation 293
18.4.5 定义action 297
18.5 Vuex应用 299
18.6 实践与练习 304
第4篇 项目开发
第19章 51购商城 308
视频讲解：12分钟
19.1 项目的设计思路 309
19.1.1 项目概述 309
19.1.2 界面预览 309
19.1.3 功能结构 311
19.1.4 业务流程 312
19.1.5 文件夹组织结构 312
19.2 商城主页 313
19.2.1 主页的设计 313
19.2.2 顶部区和底部区功能 315
19.2.3 商品分类导航功能 318
19.2.4 轮播图功能 320
19.2.5 商品推荐功能 324
19.3 商品详情页面 327
19.3.1 商品详情页面的设计 327
19.3.2 图片放大镜效果 328
19.3.3 商品概要功能 330
19.3.4 “猜你喜欢”功能 333
19.3.5 选项卡切换效果 336
19.4 购物车页面 338
19.4.1 购物车页面的设计 338
19.4.2 购物车页面的实现 338
19.5 付款页面 341
19.5.1 付款页面的设计 341
19.5.2 付款页面的实现 342
19.6 注册和登录页面 346
19.6.1 注册和登录页面的设计 346
19.6.2 注册页面的实现 347
19.6.3 登录页面的实现 350