《Vue.js权威指南》

编辑推荐

　　√前端大腕集体赞誉站台，随着阿里Weex开源，2016可谓Vue.js年！
　　√作为移动端优秀方案，Vue在ReactNative和Ionic之外另辟蹊径！
　　√滴滴前端团队潜心研究和实践Vue.js，得到框架作者尤雨溪盛赞！
　　√《Vue.js权威指南》兼容和覆盖新版本Vue.js2.0特性，同样适用于进阶人群！

内容简介

　　Vue.js是一个用来开发Web界面的前端库。《Vue.js指南》致力于普及国内Vue.js技术体系，让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js基础知识感兴趣，如果你对源码解析感兴趣，如果你对Vue.js2.0感兴趣，如果你对主流打包工具感兴趣，如果你对如何实践感兴趣，《Vue.js指南》都是一本不容错过的以示例代码为引导、知识涵盖全面的优秀选择。《Vue.js指南》一共30章，由浅入深地讲解了Vue.js基本语法及源码解析。主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。

作者简介

　　滴滴出行公共前端团队，主要负责公司级组件库和基础服务建设和前端解决方案。我们喜欢新技术，热衷沉淀和积累。

　　张耀春，公共前端团队负责人，人称“小春”，09年接触前端，喜欢潜水、赛车和专研新技术。

　　黄轶，前端技术专家，擅长前端自动化、工程化及前端架构，喜欢开源，乐于分享。

　　王静，负责mis项目开发管理，爱生活、爱冒险、爱挑战，对代码有一丢丢的小洁癖。

　　苏伟，负责MIS系统开发，熟悉Angular、Vue等开发框架，擅长使用工具来提高开发效率。

　　王瑾，负责webapp方向的开发，喜欢自己的代码最终呈现在用户面前的感觉。

　　殷献勇，北邮土著，CS硕士在读。享受编程，热爱前端。期待成为JavaScript技术栈工程师。

精彩书评

　　Vue.js是一个很令人着迷的前端框架，它既简洁又强大，各方面设计得恰到好处，值得深入学习理解。Vue.js2.0也提供了VirtualDOM支持，使得它具有跨端渲染能力和更多想象力，未来大有可为。
　　——滴滴出行平台产品中心技术总监　杜欢

　　近几年，前端视图层框架领域百花齐放，Vue.js以其精致的API、强大的组件化机制、小巧的体积赢得了不少开发者的芳心。在移动端Web应用领域，Vue.js已经差不多成为优选方案。Vue2.0吸收了其他框架的很多优点，为开发者提供了更多便利。
　　——Teambition前端架构师　徐飞

　　Vue.js易于上手、搭建模式简便、模块化编程结构完善等特点，成了众多新一代前端框架中的佼佼者。《Vue.js权威指南》包含了从基础语法、组件化编程到复杂工具使用及2.0版本更新等全面的内容，值得推荐，也希望越来越多的人开始了解使用Vue.js。
　　——掘金gold.xitu.io技术社区创始人　阴明

　　在前端框架和库百家争鸣的时代，Vue.js是其中一支新秀，用独特思路来解决前端业务急需解决的问题。《Vue.js权威指南》是一本丰富且全面的Vue.js书籍。强烈推荐给每一位想要或正在学习Vue.js的开发人员。
　　——《图解CSS3》作者&W3cplus站长　大漠

　　近年来，前端技术的发展日新月异，各种框架、工具层出不穷，呈现出百花齐放的状态。虽然在一些基本的设计思想方面各种框架不断趋同，但是每一种框架依然保持了自己的特色，希望大家通过这《Vue.js权威指南》能品味出纯正的Vue味儿。
　　——GoogleAngular中国区专职推广　大漠穷秋

　　Vue.js是一个轻量高效的MVVM框架，提供了响应式编程、组件化等强大的能力，配合丰富多彩的生态圈和工具链，可以让你完成非常复杂的前端应用。《Vue.js权威指南》是滴滴公共前端团队多年实践经验的结晶，不仅介绍了Vue在大规模前端项目的应用，还提供了周边工具链如webpack、rollup等相关实践经验，干货满满，不仅适合初学者学习，还为企业的工程化实践提供了丰富的参考
　　——阿里巴巴国际站前端工程师　姜天意

目录

第1章遇见Vue.js1
1.1MVX模式是什么1
1.1.1MVC1
1.1.2MVP2
1.1.3MVVM3
1.2Vue.js是什么4
1.2.1Vue.js与其他框架的区别4
1.2.2如何使用Vue.js10
1.2.3Vue.js的发展历史11
第2章数据绑定13
2.1语法13
2.1.1插值13
2.1.2表达式14
2.1.3指令14
2.2分隔符15
第3章指令16
3.1内部指令16
3.1.1v-if16
3.1.2v-show17
3.1.3v-else18
3.1.4v-model19
3.1.5v-repeat22
3.1.6v-for30
3.1.7v-text32
3.1.8v-html32
3.1.9v-bind33
3.1.10v-on34
3.1.11v-ref35
3.1.12v-el36
3.1.13v-pre36
3.1.14v-cloak36
3.2自定义指令37
3.2.1基础37
3.2.2高级选项41
3.3内部指令解析47
3.4常见问题解析50
第4章计算属性53
4.1什么是计算属性53
4.2计算属性缓存54
4.3常见问题56
4.3.1计算属性getter不执行的场景56
4.3.2在v-repeat中使用计算属性57
第5章表单控件绑定59
5.1基本用法59
5.1.1text59
5.1.2checkbox59
5.1.3radio60
5.1.4select60
5.2值绑定62
5.3v-model修饰指令63
5.3.1lazy63
5.3.2debounce64
5.3.3number64
5.4修饰指令原理64
5.4.1lazy64
5.4.2debounce65
5.4.3number66
第6章过滤器67
6.1内置过滤器68
6.1.1字母操作68
6.1.2json69
6.1.3限制69
6.1.4currency72
6.1.5debounce73
6.2自定义过滤器73
6.2.1fillter语法73
6.2.2教你写一个filter75
6.3源码解析76
6.3.1管道实现76
6.3.2过滤器解析77
6.4常见问题解析78
第7章Class与Style绑定80
7.1绑定HTMLClass80
7.1.1对象语法80
7.1.2数组语法82
7.2绑定内联样式82
7.2.1对象语法82
7.2.2数组语法83
7.2.3自动添加前缀84
第8章过渡86
8.1CSS过渡87
8.1.1内置Class类名88
8.1.2自定义CSS类名89
8.1.3显式声明CSS过渡类型89
8.1.4动画案例89
8.1.5过渡流程90
8.2JavaScript过渡92
8.3渐进过渡93
第9章Method95
9.1如何绑定事件95
9.1.1内联方式95
9.1.2methods配置96
9.1.3$events应用97
9.2如何使用修饰符97
9.2.1prevent98
9.2.2stop98
9.2.3capture98
9.2.4self98
9.2.5按键99
9.3Vue.js0.12到1.0中的变化99
9.3.1v-on变更99
9.3.2@click缩写100
第10章Vue实例方法101
10.1实例属性101
10.1.1组件树访问101
10.1.2DOM访问102
10.1.3数据访问102
10.2实例方法102
10.2.1实例DOM方法的使用102
10.2.2实例Event方法的使用104
第11章组件107
11.1基础108
11.1.1注册108
11.1.2数据传递110
11.1.3混合123
11.1.4动态组件126
11.2相关拓展129
11.2.1组件和v-for129
11.2.2编写可复用组件130
11.2.3异步组件130
11.2.4资源命名约定131
11.2.5内联模板132
11.2.6片段实例133
11.3生命周期134
11.4开发组件136
11.4.1基础组件136
11.4.2基于第三方组件开发141
11.5常见问题解析146
第12章表单校验154
12.1安装154
12.2基本使用155
12.3验证结果结构156
12.4验证器语法158
12.4.1校验字段名field158
12.4.2校验规则定义160
12.5内置验证规则163
12.5.1required163
12.5.2pattern165
12.5.3minlength165
12.5.4maxlength166
12.5.5min167
12.5.6max167
12.6与v-model同时使用168
12.7重置校验结果169
12.8表单元素169
12.9各校验状态对应的class172
12.9.1自定义校验状态class173
12.9.2在其他元素上使用校验状态class173
12.10分组校验174
12.11错误信息174
12.11.1错误信息输出组件177
12.11.2动态设置错误信息180
12.12事件182
12.12.1单个字段校验事件182
12.12.2整个表单校验事件183
12.13延迟初始化185
12.14自定义验证器186
12.14.1注册自定义验证器187
12.15自定义验证时机189
12.16异步验证192
12.16.1注册异步验证器192
12.16.2验证器函数context194
第13章与服务端通信196
13.1.1安装197
13.1.2参数配置198
13.1.3headers配置199
13.1.4基本HTTP调用200
13.1.5请求选项对象202
13.1.6response对象205
13.1.7RESTful调用205
13.1.8拦截器207
13.1.9跨域AJAX208
13.1.10Promise210
13.1.11url模板211
13.2vue-async-data212
13.2.1安装212
13.2.2使用212
13.3常见问题解析213
13.3.1如何发送JSONP请求213
13.3.2如何修改发送给服务端的数据类型215
13.3.3跨域请求出错215
13.3.4$.http.post方法变为OPTIONS方法216
第14章路由与视图217
14.1如何安装217
14.2基本使用218
14.3视图部分219
14.3.1v-link219
14.3.2router-view222
14.4路由实例222
14.4.1实例化路由222
14.5组件路由配置227
14.5.1路由切换的各个阶段227
14.5.2各阶段的钩子介绍230
14.6路由匹配236
14.6.1动态片段236
14.6.2全匹配片段237
14.6.3具名路径237
14.6.4路由对象238
14.7transition对象239
14.8嵌套路由239
14.9动态加载路由组件241
14.10实战242
14.10.1浏览器直接引用242
14.10.2Webpack模块化开发244
14.11常见问题解析250
第15章vue-cli254
15.1安装254
15.2基本使用254
15.3命令257
15.3.1init257
15.3.2list257
15.4模板258
15.4.1官方模板258
15.4.2自定义模板258
15.4.3本地模板259
15.5不错的工具包259
15.5.1commander259
15.5.2download-git-repo259
15.5.3inquirer259
15.5.4ora260
第16章测试开发与调试261
16.1测试工具261
16.1.1ESLint261
16.1.2工具包263
16.2开发工具264
16.2.1VueSyntaxHighlight264
16.2.2Snippets264
16.2.3其他编辑器/IDE265
16.3调试工具269
第17章scrat+Vue.js的化学反应271
17.1浅谈前端工程化271
17.2前端工程化怎么做271
17.3scrat简介273
17.4scrat+Vue.js实现组件275
17.5案例分析276
17.5.1准备工作277
17.5.2代码实现279
17.5.3编译和发布284
17.6总结287
第18章Vue.js2.0288
18.1API变更288
18.1.1全局配置288
18.1.2全局API289
18.1.3VM选项290
18.1.4实例属性294
18.1.5实例方法294
18.1.6指令296
18.1.7特殊元素297
18.1.8服务端渲染297
18.2VirtualDOM297
18.2.1认识VirtualDOM297
18.2.2VirtualDOM在Vue.js2.0中的实现299
18.3服务端渲染技术315
18.3.1普通服务端渲染315
18.3.2流式服务端渲染320
18.4总结326
第19章源码篇——util327
19.1env327
19.1.1系统判断328
19.1.2属性支持328
19.1.3过渡属性329
19.1.4nextTick330
19.1.5set332
19.2dom332
19.2.1dom操作332
19.2.2属性操作339
19.2.3class操作341
19.2.4事件操作343
19.2.5其他344
19.3lang347
19.3.1对象操作347
19.3.2名称转换351
19.3.3数组操作352
19.3.4类型转换352
19.3.5方法绑定354
19.3.6其他354
19.4components357
19.5options359
19.6debug364
第20章源码篇——深入响应式原理365
20.1如何追踪变化365
20.1.1Observer367
20.1.2Directive372
20.1.3Watcher382
20.2变化检测问题391
20.3初始化数据394
20.4异步更新队列395
20.5计算属性的奥秘398
20.6总结402
第21章源码篇——父子类合并策略403
21.1策略是什么403
第22章源码篇——缓存409
22.1Cache有什么用409
22.2LRU410
22.3Cache类410
22.4put410
22.5shift411
22.6get412
第23章源码篇——属性props413
23.1流程设计413
23.2属性name415
23.3coerce416
23.4type验证416
23.5default417
23.6validator418
第24章源码篇——events419
24.1events配置是什么419
第25章Webpack428
25.1安装428
25.2基本使用429
25.3命令行430
25.4配置文件430
25.5开发调试435
25.6使用插件436
第26章Rollup440
26.1简介440
26.2安装441
26.3配置441
26.4命令443
26.5插件447
26.6常见问题解析449
第27章Browserify450
27.1安装450
27.2基本使用450
27.3转换模块451
第28章vue-loader456
28.1如何配置456
28.2包含内容456
28.3特性介绍457
28.4常见问题解析458
28.5源码解析459
28.6工具包介绍465
第29章PostCSS467
29.1安装467
29.2配置467
29.3命令468
29.4插件471
第30章拓展篇473
30.1CompositionEvent473
30.2ES6474
30.3object482
30.4函数柯里化488

前言/序言

　　《Vue.js权威指南》是一本全方位讲解Vue.js，从入门到精通的权威指南。
　　从《Vue.js权威指南》中你将学到：
　　Vue.js基本语法
　　Vue.js源码解析
　　如何开发一个完整的组件
　　如何集成第三方组件
　　如果构建和调试一个Vue的项目
　　主流打包构建工具的使用
　　Vue.js2.0
　　Scrat与Vue.js结合
　　《Vue.js权威指南》读者对象
　　《Vue.js权威指南》写给从未使用Vue.js开发项目或想深入了解Vue.js原理的读者，同时也适合热衷于追求新技术、探索新工具的读者。特此声明：《Vue.js权威指南》基础语法讲解基于Vue.js1.0版本，其中涵盖了与其他版本的比较。我们假设读者已经掌握了HTML和CSS，并且熟悉JavaScript基础知识。
　　如何阅读《Vue.js权威指南》
　　如果你从事Web开发工作，之前没有接触过Vue.js，建议从第1章开始仔细阅读，并亲手实践每个章节提供的示例，可以加深理解；如果你已经使用Vue.js开发项目，则可以跳过前面基础知识，直接进入源码解析篇，让我们共同探索Vue.js是如何实现的，以及有哪些值得借鉴学习的知识；如果你想看看Vue.js2.0都发生了什么转变，请直接进入Vue.js2.0章节阅读；如果你想了解打包构建工具如何使用，请直接进入工具篇，那里有三款打包工具供选择。希望你阅读愉快。
　　《Vue.js权威指南》结构
　　每个章节的开头都会介绍一个概念，帮你了解该章节所讲内容是什么，以便快速了解或准确地找到所关注的内容
　　在基础知识讲解中，每一节中都会有大量丰富、详尽的示例，方便你更全面地掌握所讲解的知识。
　　在章节最后还会附加一些常见问题，帮助你快速解决问题并定位问题所在。