标注清晰的代码和插图

数据建模和使用API

Vuex的便捷状态管理

创建自定义指令

《Vue,js开发实战》适合具有一定JavaScript、HTML和CSS经验的Web开发人员。

2017年年初，在Benjamin Listwon因个人原因退出之后，我有机会撰写这《Vue.js开发实战》。我最近刚从雷诺内华达大学获得了工商管理硕士学位，自从我出版上一《Vue.js开发实战》Ember.js Cookbook (Pact Publishing，2016)以来已经整整一年了。我已经开始了我的YouTube频道，和Erik合作，我花了大部分时间试图找出如何更好地为我的小规模但人数不断增长的观众录制节目教程。大约在这段时间，我开始在Vue.js上制作一个电影系列，并从我的观众那里得到了积极反馈。这让我更想探索Vue.js。

首先，我会倾听Evan You(Vue.js的创建者)及其框架路线图。然后我看了无数的YouTube教程和其他创建者的视频。我访问了在线论坛和Facebook群组，看看人们在谈论什么。无论我到哪里，人们都对Vue.js框架的可能性感到兴奋。这使我想探索写这《Vue.js开发实战》的可能性。

经过深思熟虑，并且与我妻子谈话后，我决定去做这件事。幸运的是，Benjamin为我打下很好的基础，所以我可以在此基础上进行创作。在接下来的10个月里，我花了无数的夜晚和周末研究、测试和写作。

我希望我能告诉你写这《Vue.js开发实战》多么容易，或者说我没有遇到任何问题。但事情并没有按计划进行。我遇到了个人挫折，错过了最后期限，遇到了写作障碍，如果这还不够的话，我最终不得不在Vue.js做了一次更新之后进行重大修改。

尽管如此，我还是为这《Vue.js开发实战》感到骄傲。每次挫折，我都被激励加倍努力。我决心以最高质量完成这《Vue.js开发实战》。

谢谢读者，非常感谢你购买了《Vue.js开发实战》。我真的希望它能帮助你学习Vue.js。如果真的帮到了你，请告诉我。你可以在@ErikCH上发推特，在erik@programwitherik.com上发邮件给我，或者在https://goo.gl/UmemSS上加入我的邮件列表！再次感谢！

目    录

第Ⅰ部分  初识Vue.js

第1章  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调用和测试

第10章  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

第11章  与服务器通信   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

第12章  测试   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

 

Vue.js是一个轻量级的前端框架，提供简单的双向数据绑定、反应式UI以及常规的项目结构。它使用UI模式和现代HTML，通过小的代码片段逐步实现了难以置信的快速页面加载和流畅的转场。使用普通的JavaScript以及集成的Vuex状态管理工具，在Vue中进行开发是一种乐趣。

《Vue,js开发实战》是构建现代Web应用程序的优秀指南。你将从探索反应式UI模型开始，同时熟悉Vue的独特功能。然后，通过构建具有管理界面和库存管理功能的购物车，你将更深入地了解Vue！最后，你将扩展你的应用程序，添加转场、测试和其他关键功能，直到产品就绪。

Erik Hanchett是一位拥有超过10年开发经验的Web开发人员。他是Ember.js Cookbook (Packt Publishing，2016)的作者，也是YouTuber(http://erik.video)和博主(http://programwitherik.com)。他运行了一个邮件列表，通过https://goo.gl/UmemSS为JavaScript开发人员提供提示和技巧。在工作或编码之余，他会和妻子Susan以及两个孩子Wyatt和Vivian共度时光。