第 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