VUE.JS开发实战

标注清晰的代码和插图
数据建模和使用API
Vuex的便捷状态管理
创建自定义指令
《Vue,js开发实战》适合具有一定JavaScript、HTML和CSS经验的Web开发人员。

第Ⅰ部分 初识Vue.js
章 Vue.js介绍 3
1.1 站在巨人的肩膀上 4
1.1.1 MVC模式 4
1.1.2 MVVM模式 6
1.1.3 什么是反应式应用程序 7
1.1.4 JavaScript计算器 7
1.1.5 Vue计算器 10
1.1.6 JavaScript和Vue的差别 11
1.1.7 Vue如何促进MVVM和响应性 12
1.2 使用Vue.js的理由 12
1.3 展望未来 14
1.4 本章小结 14
第2章 Vue实例 15
2.1 我们的个应用程序 16
2.1.1 Vue根实例 16
2.1.2 确保应用程序可以运行 18
2.1.3 在视图中显示内容 20
2.1.4 检查Vue中的属性 22
2.2 Vue生命周期 23
2.2.1 添加生命周期钩子 24
2.2.2 探索生命周期代码 25
2.2.3 是否保留生命周期代码 27
2.3 显示商品 27
2.3.1 定义商品数据 27
2.3.2 添加商品视图标签 28
2.4 运用输出过滤器 31
2.4.1 编写过滤器函数 31
2.4.2 将过滤器添加到我们的标签并测试不同的值 32
2.5 练习题 33
2.6 本章小结 34
第Ⅱ部分 视图与视图模型
第3章 增加交互性 37
3.1 购物车数据，从添加一个数组开始 38
3.2 绑定到DOM事件 39
3.2.1 事件绑定基础 39
3.2.2 将事件绑定到Add to cart按钮 39
3.3 添加购物车件数按钮并计数 42
3.3.1 何时使用计算属性 42
3.3.2 使用计算属性检查更新事件 43
3.3.3 显示购物车商品计数及测试 47
3.4 让我们的按钮具备用户直观功能 49
3.4.1 密切关注库存 49
3.4.2 使用计算属性和库存 50
3.4.3 指令v-show的基础知识 51
3.4.4 使用v-if和v-else显示被禁用的按钮 52
3.4.5 添加Adding the cart按钮用于切换 54
3.4.6 使用v-if显示结账页面 55
3.4.7 对比v-show与v-if/v-else 56
3.5 练习题 57
3.6 本章小结 57
第4章 表单与输入框 59
4.1 使用v-model绑定 60
4.2 关于值绑定 68
4.2.1 绑定值到复选框 68
4.2.2 使用值绑定和单选按钮 69
4.2.3 学习v-for指令 71
4.2.4 没有可选key的v-for指令 73
4.3 通过应用程序学习修饰符 74
4.3.1 使用.number修饰符 75
4.3.2 修剪输入值 76
4.3.3 v-model的.lazy 修饰符 78
4.4 练习题 78
4.5 本章小结 78
第5章 条件语句、循环和列表 79
5.1 显示可用的库存信息 80
5.1.1 用v-if添加剩余的商品数量 80
5.1.2 使用v-else和v-else-if添加更多消息 82
5.2 循环商品 83
5.2.1 使用v-for范围循环增加星级评分 84
5.2.2 将HTML类绑定到星级评分 85
5.2.3 设置商品 87
5.2.4 从product.json文件导入商品 89
5.2.5 使用v-for指令重构应用程序 91
5.3 排序记录 95
5.4 练习题 97
5.5 本章小结 97
第6章 使用组件 99
6.1 什么是组件 100
6.1.1 创建组件 100
6.1.2 全局注册 101
6.1.3 局部注册 102
6.2 组件之间的关系 103
6.3 使用props传递数据 104
6.3.1 字面量props 104
6.3.2 动态props 105
6.3.3 props验证 108
6.4 定义模板组件 111
6.4.1 使用内联模板字符串 111
6.4.2 text/x-template脚本元素 112
6.4.3 使用单文件组件 113
6.5 使用自定义事件 114
6.5.1 监听事件 114
6.5.2 使用.sync修改子属性 116
6.6 练习题 117
6.7 本章小结 117
第7章 不错组件和路由 119
7.1 使用插槽 120
7.2 具名插槽 123
7.3 作用域插槽 125
7.4 创建动态组件应用程序 127
7.5 设置异步组件 129
7.6 使用Vue-CLI转换宠物商店应用程序 131
7.6.1 使用Vue-CLI新建应用程序 132
7.6.2 设置路由 134
7.6.3 将CSS、Bootstrap和axios添加到应用程序中 135
7.6.4 设置组件 137
7.6.5 创建Form组件 139
7.6.6 添加Main组件 140
7.7 路由 143
7.7.1 添加带参数的商品路由 143
7.7.2 设置带标签的router-link 146
7.7.3 设置带样式的router-link 148
7.7.4 添加子编辑路由 149
7.7.5 使用重定向和通配符 151
7.8 练习题 153
7.9 本章小结 153
第8章 转场和动画 155
8.1 转场基础 155
8.2 动画基础 160
8.3 JavaScript钩子 161
8.4 组件的转场 164
8.5 更新宠物商店应用程序 167
8.5.1 在宠物商店应用程序中添加转场 167
8.5.2 在宠物商店应用程序中加入动画 168
8.6 练习题 171
8.7 本章小结 171
第9章 扩展Vue 173
9.1 用Mixin实现功能复用 174
9.2 通过示例学习自定义指令 179
9.3 render函数和JSX 184
9.3.1 render函数示例 185
9.3.2 JSX示例 188
9.4 练习题 192
9.5 本章小结 192
第Ⅲ部分 数据建模、API调用和测试
0章 Vuex 195
10.1 Vuex的优势 196
10.2 Vuex状态与mutation 197
10.3 getter和action 201
10.4 在宠物商店应用程序的Vue-CLI脚手架中加入Vuex 203
10.5 Vuex助手 207
10.6 Vuex模块速览 210
10.7 练习题 212
10.8 本章小结 212
1章 与服务器通信 213
11.1 服务器端渲染 214
11.2 Nuxt.js简介 215
11.2.1 创建一个音乐搜索应用程序 217
11.2.2 创建项目并安装依赖库 218
11.2.3 创建构建块和组件 221
11.2.4 更新默认布局 223
11.2.5 添加Vuex存储 224
11.2.6 使用中间件 225
11.2.7 使用Nuxt.js生成路由 226
11.3 用Firebase和VuexFire与服务器通信 231
11.3.1 设置Firebase 231
11.3.2 使用Firebase设置宠物商店应用程序 234
11.3.3 用身份验证状态更新Vuex 236
11.3.4 在Header组件中加入身份验证 237
11.3.5 更新Main.vue以使用Firebase实时数据库 241
11.4 练习题 242
11.5 本章小结 242
2章 测试 243
12.1 创建测试用例 244
12.2 持续集成、持续交付和持续部署 245
12.2.1 持续集成 245
12.2.2 持续交付 246
12.2.3 持续部署 246
12.3 测试类型 246
12.4 配置环境 247
12.5 使用vue-test-utils创建个测试用例 249
12.6 测试组件 252
12.6.1 测试属性 253
12.6.2 测试文本 254
12.6.3 测试CSS样式类 254
12.6.4 使用Vuex模拟数据进行测试 255
12.7 配置Chrome调试器 257
12.8 练习题 260
12.9 本章小结 260
附录A 配置开发环境 261
附录B 练习题解答 267