编辑推荐
适读人群：Vue.js初学者Vue.js开发者Vues.js培训机构使用教材
Vue.js作者尤雨溪作推荐序
业界前端大腕TalkingData研发副总裁,马骥;w3cplus.com站长,大漠;在线回声前端技术专家,justjavac（迷渡）;laravel-china.org站长,Summer联袂推荐！Vue社区iView组件贡献者，前端大神梁灏执笔编撰，突出实战，应用为王。
内容简介
《Vue.js实战》》以Vue.js2为基础，以项目实战的方式来引导读者渐进式学习Vue.js。《Vue.js实战》分为基础篇、进阶篇和实战篇三部分。基础篇主要是对Vue.js核心功能的介绍；进阶篇主要讲解前端工程化Vue.js的组件化、插件的使用；实战篇着重开发了两个完整的示例，所涉及的内容涵盖Vue.js绝大部分API。通过阅读《Vue.js实战》，读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。
《Vue.js实战》示例丰富、侧重实战，适用于刚接触或即将接触Vue.js的开发者，也适用于对Vue.js有过开发经验，但需要进一步提升的开发者。
作者简介
梁灏:网名Aresn，基于Vue.js的开源UI组件库iView的作者。目前在大数据公司TalkingData负责可视化基础架构。创办了程序员社区TalkingCoder。
目录
目录
第1篇基础篇
第1章初识Vue.js3
1.1Vue.js是什么3
1.1.1MVVM模式3
1.1.2Vue.js有什么不同4
1.2如何使用Vue.js5
1.2.1传统的前端开发模式5
1.2.2Vue.js的开发模式5
第2章数据绑定和第一个Vue应用8
2.1Vue实例与数据绑定9
2.1.1实例与数据9
2.1.2生命周期10
2.1.3插值与表达式11
2.1.4过滤器13
2.2指令与事件15
2.3语法糖18
第3章计算属性19
3.1什么是计算属性19
3.2计算属性用法20
3.3计算属性缓存23
第4章v-bind及class与style绑定25
4.1了解v-bind指令25
4.2绑定class的几种方式26
4.2.1对象语法26
4.2.2数组语法27
4.2.3在组件上使用29
4.3绑定内联样式30
第5章内置指令32
5.1基本指令32
5.1.1v-cloak32
5.1.2v-once33
5.2条件渲染指令33
5.2.1v-if、v-else-if、v-else33
5.2.2v-show36
5.2.3v-if与v-show的选择36
5.3列表渲染指令v-for37
5.3.1基本用法37
5.3.2数组更新41
5.3.3过滤与排序43
5.4方法与事件44
5.4.1基本用法44
5.4.2修饰符46
5.5实战：利用计算属性、指令等知识开发购物车47
第6章表单与v-model55
6.1基本用法55
6.2绑定值61
6.3修饰符63
第7章组件详解65
7.1组件与复用65
7.1.1为什么使用组件65
7.1.2组件用法66
7.2使用props传递数据70
7.2.1基本用法70
7.2.2单向数据流72
7.2.3数据验证74
7.3组件通信75
7.3.1自定义事件75
7.3.2使用v-model77
7.3.3非父子组件通信79
7.4使用slot分发内容83
7.4.1什么是slot83
7.4.2作用域84
7.4.3slot用法85
7.4.4作用域插槽87
7.4.5访问slot89
7.5组件高级用法90
7.5.1递归组件90
7.5.2内联模板92
7.5.3动态组件93
7.5.4异步组件94
7.6其他95
7.6.1$nextTick95
7.6.2X-Templates96
7.6.3手动挂载实例97
7.7实战：两个常用组件的开发98
7.7.1开发一个数字输入框组件98
7.7.2开发一个标签页组件106
第8章自定义指令118
8.1基本用法118
8.2实战121
8.2.1开发一个可从外部关闭的下拉菜单121
8.2.2开发一个实时时间转换指令v-time126
第2篇进阶篇
第9章Render函数133
9.1什么是VirtualDom133
9.2什么是Render函数136
9.3createElement用法140
9.3.1基本参数140
9.3.2约束143
9.3.3使用JavaScript代替模板功能147
9.4函数化组件153
9.5JSX157
9.6实战：使用Render函数开发可排序的表格组件159
9.7实战：留言列表172
9.8总结183
第10章使用webpack184
10.1前端工程化与webpack184
10.2webpack基础配置187
10.2.1安装webpack与webpack-dev-server187
10.2.2就是一个js文件而已188
10.2.3逐步完善配置文件191
10.3单文件组件与vue-loader194
10.4用于生产环境201
第11章插件206
11.1前端路由与vue-router207
11.1.1什么是前端路由207
11.1.2vue-router基本用法208
11.1.3跳转212
11.1.4高级用法213
11.2状态管理与Vuex216
11.2.1状态管理与使用场景216
11.2.2Vuex基本用法217
11.2.3高级用法221
11.3实战：中央事件总线插件vue-bus227
第3篇实战篇
第12章iView经典组件剖析235
12.1级联选择组件Cascader236
12.2折叠面板组件Collapse249
12.3iView内置工具函数257
第13章实战：知乎日报项目开发261
13.1分析与准备261
13.2推荐列表与分类265
13.2.1搭建基本结构265
13.2.2主题日报267
13.2.3每日推荐271
13.2.4自动加载更多推荐列表276
13.3文章详情页278
13.3.1加载内容278
13.3.2加载评论281
13.4总结286
第14章实战：电商网站项目开发288
14.1项目工程搭建288
14.2商品列表页290
14.2.1需求分析与模块拆分290
14.2.2商品简介组件291
14.2.3列表按照价格、销量排序297
14.2.4列表按照品牌、颜色筛选306
14.3商品详情页309
14.4购物车313
14.4.1准备数据314
14.4.2显示和操作数据316
14.4.3使用优惠码320
14.5总结324
第15章相关开源项目介绍325
15.1服务端渲染与Nuxt.js325
15.1.1是否需要服务端渲染325
15.1.2Nuxt.js326
15.2HTTP库axios327
15.3多语言插件vue-i18n329
精彩书摘
第5章内置指令
回顾一下第2.2节，我们已经介绍过指令（Directive）的概念了，Vue.js的指令是带有特殊前缀“v-”的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上。其实我们已经用到过很多Vue内置的指令，比如v-html、v-pre，还有上一章的v-bind。本章将继续介绍Vue.js中更多常用的内置指令。
5.1基本指令
5.1.1v-cloak
v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用：
{{message}}
varapp=newVue({
el:'#app',
data:{
message:'这是一段文本'
}
})
这时虽然已经加了指令v-cloak，但其实并没有起到任何作用，当网速较慢、Vue.js文件还没加载完时，在页面上会显示{{message}}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句CSS就可以解决这个问题了：
[v-cloak]{
display:none;
}
在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如后面进阶篇将介绍webpack和vue-router时，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
5.1.2v-once
v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，例如：
{{message}}
{{message}}
varapp=newVue({
el:'#app',
data:{
message:'这是一段文本'
}
})
v-once在业务中也很少使用，当你需要进一步优化性能时，可能会用到。
5.2条件渲染指令
5.2.1v-if、v-else-if、v-else
与JavaScript的条件语句if、else、elseif类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：
当status为1时显示该行
当status为2时显示该行
否则显示该行
varapp=newVue({
el:'#app',
data:{
status:1
}前言/序言
引言
两年前，我开始接触Vue.js框架，当时就被它的轻量、组件化和友好的API所吸引。之后我将Vue.js和webpack技术栈引入我的公司（TalkingData）可视化团队，并经过一年多的实践，现已成为整个公司的前端开发规范。
与此同时，我开源了iView项目，它是基于Vue.js的一套高质量UI组件库，从设计规范、工程构建到国际化都提供了完整的解决方案，并支持SSR。在许多志愿者的帮助下，将文档全部翻译为英文，在Vue开发者社区颇受欢迎。
如今，前端框架可谓百家争鸣，但每一个框架的产生都是为了解决具体问题的。Vue.js以渐进式切入，对不同阶段的开发者提供了不同的开发模式，由浅入深。Vue.js提供了友好的API和强大的功能，包括双向数据绑定、路由、状态管理、动画、组件化、SSR，无论是简单的页面还是复杂的系统，从可复用性、便捷性和维护性上都精益求精。
有幸完成此书，希望能给Vue.js社区带来一点帮助。
梁灏（Aresn）
2017年7月10日
