第 1 篇 Vue.js 基础
第 1 章 初识 Vue.js 1
1.1 Vue.js 是什么 2
1.1.1 Vue.js 的特性 3
1.1.2 MVVM 设计模式介绍 3
1.1.3 Vue.js 的发展历程 4
1.2 为什么要使用 Vue.js 5
1.3 Vue.js 的安装及使用 5
1.3.1 直接用 <script> 引入 5
1.3.2 通过 npm 安装 6
本章小结 14
动手实践 15
第 2 章 Vue.js 基础 16
2.1 创建一个 Vue.js 实例 16
2.2 Vue.js 数据与方法 18
2.2.1 Vue.js 的数据 18
2.2.2 Vue.js 的实例属性与方法 19
2.3 Vue.js 的生命周期及钩子函数 20
2.4 小试牛刀 22
本章小结 23
动手实践 24
第 3 章 Vue.js 模板语法 27
3.1 模板插值 27
3.1.1 文本渲染 28
3.1.2 HTML 渲染 28
3.1.3 使用指令绑定特性 29
3.1.4 使用 JavaScript 表达式 30
3.2 指令与缩写 30
3.2.1 指令的参数 31
3.2.2 指令的修饰符 31
3.2.3 指令使用缩写 32
3.3 常用的列表与条件渲染指令 32
3.3.1 v-if 32
3.3.2 v-else-if 33
3.3.3 v-else 34
3.3.4 v-show 34
3.3.5 v-for 35
3.4 小试牛刀 37
本章小结 38
动手实践 38
第 4 章 Vue.js 表单输入绑定 40
4.1 v-model 指令的基本用法 40
4.1.1 单行文本的双向绑定 41
4.1.2 多行文本的双向绑定 41
4.1.3 复选框的双向绑定 42
4.1.4 单选按钮的双向绑定 44
4.1.5 下拉列表框的双向绑定 45
4.2 v-model 指令的值绑定 46
4.3 使用修饰符 47
4.3.1 .lazy 修饰符 47
4.3.2 .number 修饰符 49
4.3.3 .trim 修饰符 49
4.4 小试牛刀 50
本章小结 51
动手实践 51
第 5 章 Vue.js 计算属性与侦听器 54
5.1 计算属性 54
5.1.1 什么是计算属性 55
5.1.2 计算属性的使用方法 55
5.1.3 计算属性缓存 56
5.1.4 计算属性 setter 和 getter 57
5.2 侦听器 58
5.3 计算属性和侦听器的比较 59
5.3.1 相同点 60
5.3.2 区别 60
5.4 小试牛刀 60
本章小结 61
动手实践 61
第 6 章 动态绑定 class 与 style 64
6.1 绑定 HTML class 64
6.1.1 用对象语法绑定 HTML class 65
6.1.2 用数组语法绑定 HTML class 67
6.1.3 在组件上使用 68
6.2 绑定 style(内联样式) 69
6.2.1 用对象语法绑定 style(内联样式) 69
6.2.2 用数组语法绑定 style(内联样式) 70
6.2.3 多重值使用 71
6.3 小试牛刀 72
本章小结 73
动手实践 73
第 7 章 Vue.js 事件处理 77
7.1 如何使用事件处理方法 77
7.1.1 监听事件 77
7.1.2 事件处理方法 78
7.1.3 方法传递参数 79
7.1.4 v-on 简写 80
7.2 事件修饰符 81
7.2.1 .stop 修饰符 81
7.2.2 .prevent 修饰符 81
7.2.3 .capture 修饰符 81
7.2.4 .self 修饰符 82
7.2.5 .once 修饰符 82
7.2.6 .passive 修饰符 83
7.3 按键修饰符 83
7.3.1 键值编码修饰符和按键修饰符别名 84
7.3.2 自定义按键别名 84
7.4 系统修饰键 84
7.4.1 键盘修饰键 85
7.4.2 鼠标修饰键 85
7.4.3 .exact 修饰键 85
7.5 小试牛刀 86
本章小结 87
动手实践 87
第 2 篇 Vue.js 深入与提高
第 8 章 深入了解组件 89
8.1 组件的注册 89
8.1.1 组件的命名 90
8.1.2 全局注册 90
8.1.3 局部注册 91
8.2 Prop 实现数据传递 92
8.2.1 使用静态或动态的 Prop 传递数据 92
8.2.2 Prop 单向数据流 93
8.2.3 Prop 类型检查 93
8.3 自定义事件的实现 94
8.3.1 如何使用 $emit 触发事件 95
8.3.2 用 .native 修饰符绑定原生事件 96
8.3.3 用 .sync 修饰符实现双向绑定 97
8.4 插槽 slot 的使用 98
8.4.1 如何使用 slot 98
8.4.2 具名 slot 99
8.4.3 作用域插槽 101
8.5 动态组件与异步组件 102
8.5.1 什么是动态组件 102
8.5.2 如何实现组件的缓存 103
8.5.3 异步组件怎么使用 104
8.6 访问实例 104
8.6.1 访问根实例 105
8.6.2 访问父组件实例 106
8.6.3 访问子组件实例 106
8.6.4 依赖注入 107
8.7 小试牛刀 107
本章小结 109
动手实践 110
第 9 章 过渡动画效果 113
9.1 单元素 组件的过渡 113
9.1.1 类名过渡 114
9.1.2 CSS 过渡 115
9.1.3 CSS 动画 115
9.1.4 自定义过渡的类名 117
9.1.5 过渡中使用钩子函数 117
9.2 多个元素的过渡 119
9.2.1 过渡模式 119
9.2.2 多个组件之间的过渡 120
9.3 列表的过渡 120
9.3.1 进入和离开的过渡 120
9.3.2 排序过渡 122
9.3.3 交错过渡 122
9.4 状态过渡 124
9.4.1 状态动画与监听 124
9.4.2 组件里的过渡 125
9.5 小试牛刀 127
本章小结 129
动手实践 130
第 10 章 可复用性与组合 133
10.1 混入 133
10.1.1 什么是混入 134
10.1.2 如何实现混入 134
10.1.3 全局混入 134
10.1.4 选项合并 135
10.2 自定义指令 137
10.2.1 什么是自定义指令 137
10.2.2 怎么实现自定义指令 137
10.2.3 钩子函数 138
10.2.4 参数说明 139
10.3 过滤器 139
10.3.1 什么是过滤器 140
10.3.2 自定义过滤器 140
10.3.3 全局过滤器 140
10.3.4 过滤器传参 141
10.4 小试牛刀 141
本章小结 142
动手实践 143
第 3 篇 Vue-Router管理路由跳转
第 11 章 路由基础与使用 147
11.1 路由介绍 147
11.1.1 什么是路由 148
11.1.2 怎么安装路由 148
11.2 路由的基本使用 148
11.2.1 在 HTML 里实现路由跳转 148
11.2.2 在 JS 中使用路由 149
11.3 动态路由匹配 150
11.3.1 什么是动态路由 150
11.3.2 路由参数的变化 151
11.4 嵌套路由的使用 152
11.5 编程式导航 154
11.5.1 router.push 的使用方法 154
11.5.2 router.replace 的使用方法 155
11.5.3 router.go 的使用方法 155
11.6 命名路由 156
11.6.1 什么是命名路由 156
11.6.2 命名路由的使用方法 156
11.7 命名视图 157
11.7.1 什么是命名视图 157
11.7.2 嵌套命名视图 157
11.8 重定向和别名 158
11.8.1 怎么使用重定向 158
11.8.2 别名的功能 159
11.9 路由组件传参 159
11.9.1 布尔模式 160
11.9.2 对象模式 161
11.9.3 函数模式 161
11.10 路由的 history 模式 161
11.11 小试牛刀 163
本章小结 165
动手实践 165
第 12 章 路由进阶与提升 171
12.1 导航守卫 171
12.1.1 全局守卫 172
12.1.2 路由内的守卫 173
12.1.3 组件内的守卫 173
12.2 路由元信息的配置与使用 175
12.3 动态过渡效果 176
12.3.1 单个路由的过渡 176
12.3.2 基于路由的动态过渡 177
12.4 获取数据 178
12.4.1 在导航完成前获取 178
12.4.2 在导航完成后获取 179
12.5 页面滚动 180
12.5.1 如何实现页面的滚动 181
12.5.2 异步滚动 182
12.6 路由懒加载 182
12.7 小试牛刀 183
本章小结 186
动手实践 186
第 4 篇 Vuex 状态管理
第 13 章 Vuex 概念与使用 193
13.1 Vuex 介绍 193
13.1.1 什么是状态管理模式 194
13.1.2 Vuex 安装 195
13.2 Vuex 核心概念 196
13.2.1 state 状态 197
13.2.2 getter 获取 199
13.2.3 mutation 改造状态 201
13.2.4 action 异步操作 204
13.2.5 module 状态树 207
13.3 处理表单的方法 214
13.4 小试牛刀 215
本章小结 217
动手实践 217
第 5 篇 Element UI 框架
第 14 章 Element UI 框架实战 223
14.1 Element 介绍 223
14.1.1 Element 安装 224
14.1.2 Element 快速上手 224
14.2 Element 组件介绍 227
14.2.1 利用 Element 快速制作表格 228
14.2.2 Element 走马灯效果制作 229
14.2.3 Element 面包屑功能实践 230
14.2.4 利用 Element 快速搭建布局 231
14.3 mock 数据与请求接口 232
14.3.1 如何使用 mock 数据 232
14.3.2 利用 axios 请求接口 236
14.4 网站框架搭建与首页开发 238
14.4.1 vue-router 从头搭建 238
14.4.2 Vuex 在实际项目中的应用 241
14.4.3 axios 配置 242
14.4.4 网站首页搭建 244
14.4.5 运行服务与打包 246
本章小结 247
动手实践 248
展开