VUE.JS前端开发入门与实践

第1章 理解Vue.js及其产生的背景 1
1.1 什么是Vue.js 2
1.1.1 为什么使用Vue.js 2
1.1.2 Vue.js的主要特点 3
1.1.3 Vue.js的优势 4
1.2 Vue.js产生的背景 4
1.2.1 传统的前端开发模式 5
1.2.2 Vue.js的开发模式 5
1.2.3 Vue.js与jQuery的区别 7
1.2.4 Vue.js与React、Angular的比较 8
1.2.5 如何选择Angular、React和Vue.js 11
1.3 如何学习Vue.js 12
1.3.1 知识储备 12
1.3.2 学习安排 17
1.4 小结 18
第2章 快速开启 一个Vue.js应用 19
2.1 开发环境准备 20
2.1.1 安装Node.js 20
2.1.2 设置NPM镜像 21
2.1.3 选择合适的IDE 22
2.1.4 安装Vue CLI 29
2.1.5 检查和调试Vue.js应用的工具——Vue Devtools 30
2.2 创建Vue.js应用hello-world 32
2.2.1 利用Vue CLI初始化Vue.js应用hello-world 32
2.2.2 运行Vue.js应用hello-world 33
2.3 探索Vue.js应用 35
2.3.1 整体项目结构 35
2.3.2 项目根目录文件 35
2.3.3 node_modules目录 36
2.3.4 public目录 37
2.3.5 src目录 37
2.4 在Vue.js应用中使用TypeScript 38
2.4.1 基于Vue 3 Preview创建项目 38
2.4.2 基于Manually select features创建项目 39
2.4.3 TypeScript与JavaScript应用的差异 43
2.5 小结 44
第3章 TypeScript基础 45
3.1 TypeScript概述 46
3.1.1 TypeScript与JavaScript、ECMAScript的关系 46
3.1.2 TypeScript与Vue.js的关系 47
3.1.3 使用TypeScript的优势 48
3.1.4 安装TypeScript 49
3.1.5 TypeScript代码的编译及运行 49
3.2 常量与变量 51
3.2.1 const、let、var三者的作用域 52
3.2.2 常量与变量的区别 54
3.2.3 变量提升 55
3.3 TypeScript数据类型 64
3.3.1 基本类型 65
3.3.2 复杂基础类型 71
3.3.3 对象类型 74
3.3.4 任意类型 75
3.3.5 联合类型 75
3.3.6 交集类型 76
3.4 强大的面向对象体系 76
3.4.1 类 77
3.4.2 接口 78
3.4.3 演示接口的使用 78
3.4.4 泛型 79
3.4.5 演示泛型的使用 79
3.5 TypeScript的命名空间 80
3.5.1 声明命名空间 80
3.5.2 命名空间体 80
3.5.3 导入声明 81
3.5.4 导出声明 81
3.5.5 合并声明 82
3.6 TypeScript模块 86
3.6.1 了解模块 86
3.6.2 导入声明 87
3.6.3 导入Require声明 87
3.6.4 导出声明 88
3.6.5 导出分配 88
3.6.6 了解CommonJS模块 89
3.6.7 了解AMD模式 91
3.7 装饰器 91
3.7.1 定义装饰器 91
3.7.2 了解装饰器的执行时机 91
3.7.3 认识4类装饰器 93
3.8 小结 93
第4章 Vue.js应用实例 95
4.1 创建应用实例 96
4.1.1 一个应用实例 97
4.1.2 让应用实例执行方法 98
4.1.3 理解选项对象 99
4.1.4 理解根组件 102
4.1.5 理解MVC模型 104
4.1.6 理解MVP模型 105
4.1.7 理解MVVM模型 106
4.2 data property与data methods 107
4.2.1 理解data property 107
4.2.2 理解data methods 108
4.3 Vue.js的生命周期 110
4.3.1 生命周期中的钩子函数 110
4.3.2 生命周期的图示 111
4.3.3 生命周期钩子函数的实例 112
4.4 小结 114
第5章 Vue.js组件 115
5.1 组件的基本概念 116
5.1.1 创建和注册组件的基本步骤 116
5.1.2 理解组件的创建和注册 117
5.1.3 父组件和子组件 118
5.1.4 DOM模板解析注意事项 119
5.1.5 data必须是函数 122
5.1.6 组件组合 124
5.1.7 组件注册 124
5.2 组件通信 126
5.2.1 父组件与子组件通信 126
5.2.2 子组件与父组件通信 129
5.2.3 子组件之间的通信 130
5.2.4 通过插槽分发内容 130
5.3 特殊情况 133
5.4 让组件可以动态加载 136
5.5 使用keep-alive缓存组件 137
5.6 小结 139
第6章 Vue.js模板 141
6.1 在模板中使用插值 142
6.1.1 文本 142
6.1.2 原生HTML代码 143
6.1.3 绑定HTML属性 145
6.1.4 JavaScript表达式 146
6.2 在模板中使用指令 148
6.2.1 理解指令中的参数 148
6.2.2 理解指令中的动态参数 161
6.2.3 理解指令中的修饰符 163
6.3 在模板中使用指令的缩写 164
6.3.1 使用v-bind指令的缩写 165
6.3.2 使用v-on指令的缩写 166
6.4 综合实例 167
6.5 小结 172
第7章 Vue.js计算属性与侦听器 173
7.1 通过实例理解“计算属性”的必要性 174
7.2 声明“计算属性” 176
7.3 “计算属性”缓存与方法的关系 177
7.4 计算属性的注意事项 178
7.4.1 计算函数不应有副作用 178
7.4.2 避免直接修改计算属性值 178
7.4.3 计算属性无法追踪非响应式依赖 178
7.5 为什么需要侦听器 179
7.5.1 理解侦听器 179
7.5.2 一个侦听器的实例 181
7.6 综合实例 183
7.7 小结 187
第8章 Vue.js样式 189
8.1 绑定样式class 190
8.1.1 在class中绑定字符串 190
8.1.2 在class中绑定对象 191
8.1.3 在class中绑定数组 192
8.2 绑定内联样式 193
8.2.1 在内联样式中绑定对象 193
8.2.2 在内联样式中绑定数组 194
8.2.3 在内联样式中绑定多重值 195
8.3 综合实例 196
8.4 小结 198
第9章 Vue.js表达式 199
9.1 Vue表达式的优点 200
9.2 条件表达式 200
9.2.1 v-if指令的实例 201
9.2.2 v-else指令的实例 203
9.2.3 v-else-if指令的实例 204
9.2.4 v-show指令的实例 206
9.2.5 理解v-if指令与v-show指令的关系 207
9.3 for循环表达式 209
9.3.1 使用v-for指令遍历数组 209
9.3.2 使用v-for指令遍历数组设置索引 211
9.3.3 使用v-for指令遍历对象的property名称 212
9.3.4 数组过滤 213
9.3.5 使用值的范围 214
9.4 v-for指令的不同使用场景 214
9.4.1 在中使用v-for指令 214
9.4.2 v-for指令与v-if指令一起使用 215
9.4.3 在组件上使用v-for指令 216
9.5 综合实例 218
9.6 小结 222
第10章 Vue.js事件 223
10.1 什么是事件 224
10.1.1 一个简单的监听事件实例 224
10.1.2 处理原始的DOM事件 225
10.1.3 为什么需要在HTML代码中 监听事件 228
10.2 多事件处理器的实例 228
10.3 小结 231
第11章 Vue.js表单 233
11.1 理解“表单输入绑定” 234
11.2 “表单输入绑定”的基础用法 235
11.2.1 文本 235
11.2.2 多行文本 236
11.2.3 复选框 237
11.2.4 单选按钮 239
11.2.5 选择框 240
11.3 表单修饰符的使用 241
11.3.1 使用.lazy修饰符的实例 242
11.3.2 使用.number修饰符的 实例 242
11.3.3 使用.trim修饰符的实例 244
11.4 综合实例 245
11.5 小结 250
第12章 深入组件 251
12.1 什么是组件注册 252
12.2 全局注册的实现 252
12.3 局部注册的实现 256
12.4 深入介绍props(输入属性) 260
12.4.1 props声明 260
12.4.2 props名字格式 261
12.4.3 传递不同的值类型 262
12.4.4 props校验 264
12.4.5 运行时类型检查 266
12.5 综合实例 267
12.6 小结 274