vue.js中文教程（编）
前言
在阅读了《vue.js权威指南》之后，我【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。发现它基于1.0版本已经完全不适用当前的【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】2.0版本了，大部分介绍虽然很详尽，甚至【转载请注明来源】著作权归作者所有，禁止商业用途转载。还分析了源码，但是实际上感觉是在浪费纸张【原创内容，转载请注明出处】【未经授权禁止转载】，因为读者要看源码会到github上自己原创内容，盗版必究。原创内容，盗版必究。阅读，书里面只需要告诉读者项目的代码结构未经授权，禁止复制转载。【未经授权禁止转载】，让读者可以快速找到对应的源码即可。而且本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】权威指南版本落伍会带来一些使用上的困难，【本文受版权保护】【作者：唐霜】特别是一些api无法使用的时候，很苦恼。
【未经授权禁止转载】
所以，我只把这本书当做一本接触vue的【转载请注明来源】【本文首发于唐霜的博客】入门书，省略了其中非常多的部分，从中大致本文作者：唐霜，转载请注明出处。【未经授权禁止转载】领略vue的使用方法和理念。我大部分时候【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，更多的是对照官网的文档进行开发，一边开【版权所有】唐霜 www.tangshuang.net【作者：唐霜】发一边写代码，经常发现自己找不到对应的文【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】档，翻来翻去很久，才能找到自己需要的内容著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net。
而且官网的文档不是很详细，有些注意点并没未经授权，禁止复制转载。【版权所有，侵权必究】有说的很详细，导致开发的时候遇到一些坑，著作权归作者所有，禁止商业用途转载。【本文受版权保护】或者不是很理解，使用的时候就乱用，多试几【原创内容，转载请注明出处】【转载请注明来源】次就可以试出正确用法。当然这是笨蛋的方法本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。另外，我认为vue-router和vue【关注微信公众号：wwwtangshuangnet】【转载请注明来源】-resource是两个必须讲清楚的插件原创内容，盗版必究。【原创不易，请尊重版权】，《权威指南》里面虽然也讲了，但是对照官【转载请注明来源】【原创内容，转载请注明出处】方文档，还是落伍了。不过《权威指南》的框著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。架结构很好，可以借鉴作为学习的大体框架。
【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。鉴于这些情况，我专门编这本书，用来帮助v【原创不易，请尊重版权】【作者：唐霜】ue的学习者快速理清知识体系。注意，我用著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net的是“编”，也就是说本书的内容基本上是复【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】制黏贴来的，只不过把知识结构重新梳理，以【作者：唐霜】原创内容，盗版必究。便更好的学习这门框架。因此，对前人的努力本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。做出感谢。
【原创内容，转载请注明出处】【转载请注明来源】转载请注明出处：www.tangshuang.net【转载请注明来源】之所以没有通过gitbook等方式开源本转载请注明出处：www.tangshuang.net【版权所有，侵权必究】书，是因为我觉得那样更难维护，而且不利于【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】拷贝。最重要的是，那样没有一个直观的反馈著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】方式，如果你在阅读本书的时候遇到一些疑问原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。，请在下方的留言框中进行留言，我会第一时本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。间进行回复。当然，如果本书有不足之处，也转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。请你留言，我会完善它。
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。背景了解
我在morningstar一直使用的都是【作者：唐霜】著作权归作者所有，禁止商业用途转载。backbone，并且接触了compon著作权归作者所有，禁止商业用途转载。【转载请注明来源】ent的理念，但backbone对我来说【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。还是太重了，于是我在寻找其他的compo【原创内容，转载请注明出处】【转载请注明来源】nent替代方案，最早进入我的视线的是r【关注微信公众号：wwwtangshuangnet】【转载请注明来源】eact，但在接触之后，发现react门【原创内容，转载请注明出处】【本文受版权保护】槛稍微有点高，方法名太长，方式太复杂，可本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。以说“不符合我的审美”，当然，我还会继续【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】学习react，因为我在接触vue之后，本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】发现react在技术理念上，确实是一个未【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。来的产品，这并不是说vue不好，vue非【版权所有】唐霜 www.tangshuang.net【转载请注明来源】常好，所以我才会先花时间学习它，并且在我【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net的业余项目中直接使用它。未来react只本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】会作为我的一个工具，而vue则是我当下最【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net佳的选择。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。vue是什么？
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。vue的英文意思就是“视图”，所以可以未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。知道，vue是一个偏视图的js框架，根据【原创内容，转载请注明出处】未经授权，禁止复制转载。官方的解释的理解，vue不属于MVC的范【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】畴，因为它只有MV，而且它的M是内置于框本文版权归作者所有，未经授权不得转载。【转载请注明来源】架内核中，对于开发者而言，可能基本上都是【作者：唐霜】本文版权归作者所有，未经授权不得转载。在处理V的东西。这也是为什么现在把vue【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】和react对比如此热门的原因之一。既然本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。是解决视图问题，那么不可避免的就会和DO【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netM打交道，自然就会联想到react首创的【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。Virtual DOM理念，这在后文会详【原创不易，请尊重版权】【版权所有，侵权必究】细分析虚拟DOM是怎么回事。vue2.0著作权归作者所有，禁止商业用途转载。【作者：唐霜】也使用了Virtual DOM，因此在视【原创内容，转载请注明出处】【本文受版权保护】图层面的渲染速度也非常快。
【转载请注明来源】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】总之，vue是一个关注视图层面的js框架本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】。
【作者：唐霜】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】既然是框架，而非库，那么就意味着它已经帮【未经授权禁止转载】未经授权，禁止复制转载。你处理好了很多问题，当然，同时也限制了一转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。些方式。这和react不同，react实【本文首发于唐霜的博客】【本文首发于唐霜的博客】际上限制更少一些，内部封装更少一些，re【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】act官方把自己称为library（库）【版权所有，侵权必究】【转载请注明来源】。虽然是一个框架，但vue并不以构建ap【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】p为最终目标，实际上，组件思想在vue中【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】更加突出。因此，在基于vue的开发中，请转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。更多思考组件，这和angular的时代可【版权所有，侵权必究】【本文首发于唐霜的博客】能有些不同。
【原创不易，请尊重版权】【本文首发于唐霜的博客】【转载请注明来源】【原创不易，请尊重版权】发展历史
Vue.js正式发布于2014年2月，对【版权所有】唐霜 www.tangshuang.net【转载请注明来源】于目前的Vue.js：
【作者：唐霜】原创内容，盗版必究。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。在开发人数上，覆盖70多贡献者。
【未经授权禁止转载】
在受关注度上，GitHub拥有 200转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。00 多 Star。
原创内容，盗版必究。
从脚手架、构建、插件化、组件化，到编辑【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】器工具、浏览器插件等，基本涵盖了从开发到【作者：唐霜】【原创内容，转载请注明出处】测试等多个环节。
Vue.js的发展里程碑如下：
【未经授权禁止转载】【本文受版权保护】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。2013年12月24日，发布0.7.0。
【作者：唐霜】
2014年1月27日，发布0.8.0。
本文版权归作者所有，未经授权不得转载。
2014年2月25日，发布0.9.0。
转载请注明出处：www.tangshuang.net
2014年3月24日，发布0.10.0【转载请注明来源】未经授权，禁止复制转载。。
著作权归作者所有，禁止商业用途转载。
2015年10月27日，正式发布1.0未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】.0。
本文版权归作者所有，未经授权不得转载。
2016年4月27日，发布2.0的pr【未经授权禁止转载】【未经授权禁止转载】eview版本。
本文作者：唐霜，转载请注明出处。
2016年10月，2.0正式版发布，整本文版权归作者所有，未经授权不得转载。【转载请注明来源】个框架重新编写，性能提升，支持服务端渲染【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。。
vue的作者
我是对国产框架比较鄙视的，特别是以前用t原创内容，盗版必究。本文作者：唐霜，转载请注明出处。hinkphp，但在前端领域，我接触过s本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】eajs，原本觉得非常不错，可是后来也湮【原创不易，请尊重版权】【本文受版权保护】灭了，就觉得国产开发框架没戏。看到vue原创内容，盗版必究。转载请注明出处：www.tangshuang.net之前，并不知道它的作者是中国人，觉得这个著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。项目超有国际范儿。当后来知道vue的作者转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】竟然是中国人，就突然感觉不一样。当然，这【版权所有，侵权必究】【本文受版权保护】和框架创作者是哪国人没有太大关系，但能够【未经授权禁止转载】转载请注明出处：www.tangshuang.net如此优雅的写出vue，也不得不令人敬佩。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。尤雨溪，网名尤小右，英文名Evan，毕业【未经授权禁止转载】【本文受版权保护】于上海复旦附中，在美国完成大学学业，本科【转载请注明来源】【版权所有】唐霜 www.tangshuang.net毕业于Colgate Universit【转载请注明来源】【本文受版权保护】y，后在Parsons设计学院获得Des【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ign & Technology【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】艺术硕士学位，后职于纽约Google C【原创不易，请尊重版权】【原创不易，请尊重版权】reative Lab，现在和阿里巴巴w本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。eex合作。
【版权所有，侵权必究】
这里是他的知乎主页，你可以follow他的twitter和他交流。
作为设计专业毕业的学生，即使有googl著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。e工作经历，能够写出vue这样高审美的框【作者：唐霜】【本文首发于唐霜的博客】架，除了跪服也没有其他。这里是teahour对他的语言采访，你可以近未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。距离听听大牛的声音。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】vue和其他框架或库的比较
原本应该把标题取名“我为什么选择vue”本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，但是个人认为还是严肃点好。以下内容全部转载请注明出处：www.tangshuang.net【本文受版权保护】来自官方文档，官方对vue和React、Angula本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。r、Ember、Knockout、Pol著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ymer、Riot这些框架都进行了比较，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。虽然是官方，但并没有一味夸自己好，而是进【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net行较为客观的比较，值得一读，可以读到一些【关注微信公众号：wwwtangshuangnet】【本文受版权保护】vue团队对其他框架的优缺点如何吸取和摒本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。弃。本文进行了重点摘抄，如果想看完整版，未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。请点链接进入。
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文受版权保护】react
React 和 Vue 有许多相似之处，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。它们都有：
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】- 使用 Virtual DOM 本文版权归作者所有，未经授权不得转载。【转载请注明来源】【转载请注明来源】【版权所有，侵权必究】
- 提供了响应式（Reactive）和组件化著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】（Composable）的视图组件。 【本文受版权保护】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net
- 将注意力集中保持在核心库，伴随于此，有配【转载请注明来源】本文版权归作者所有，未经授权不得转载。套的路由和负责处理全局状态管理的库。 【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
React 比 Vue 生态系统和丰富的【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】自定义渲染器更好。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。转载请注明出处：www.tangshuang.net在渲染用户界面的时候，DOM 的操作成本【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。是最高的，不幸的是没有库可以让这些原始操【本文受版权保护】【版权所有】唐霜 www.tangshuang.net作变得更快。我们能做到的最好效果就是：
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】- 把必须的 Dom 更新降到最小。Reac著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】t 和 Vue 都是通过 Virtual【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 Dom 抽象层来实现这一要求，而且他们【原创不易，请尊重版权】【原创内容，转载请注明出处】都实现得一样赞。 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
- 在这些 Dom 操作之上，则尽可能少地添【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net加额外性能开销（即：纯 JavaScri未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netpt 运算）。这是 Vue 和 Reac转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】t 产生分歧之处。 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】
JavaScript 开销直接与求算必要著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net DOM 操作的机制相关。尽管 Vue 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】和 React 都使用了 Virtual【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】 Dom 实现这一点，但 Vue 的 V转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。irtual Dom 实现（复刻自 snabbdom）是更加轻量化的，因此也就比 React【本文受版权保护】【本文受版权保护】 的实现更高效。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【未经授权禁止转载】编者按：我的建议是vue和react都去【本文受版权保护】【本文受版权保护】学，从职业角度讲，两者都有可能是未来几年【转载请注明来源】【未经授权禁止转载】风靡一时的应用级产品，各大小公司都会上相【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。应的项目；从编程的角度讲，vue更代表时【转载请注明来源】本文作者：唐霜，转载请注明出处。代的集大成者，react更代表未来。学习转载请注明出处：www.tangshuang.net【转载请注明来源】而言，其实只要掌握了学习方法，其实学什么【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。都很快。谁先谁后？这取决于你当前的紧迫性著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，如果你的项目中马上要用react，那就原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。先学react，但请尽量读完本书。
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。angular
Vue 的一些语法和 Angular 的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。很相似（例如 v-if vs ng-if）。因为 Angular 是 Vue 早【本文首发于唐霜的博客】【版权所有，侵权必究】期开发的灵感来源。然而，Angular 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】中存在的许多问题，在 Vue 中已经得到转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】解决。
在 Angular 1 中，当 watc【版权所有】唐霜 www.tangshuang.net【转载请注明来源】her 越来越多时会变得越来越慢，因为作【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。用域内的每一次变化，所有 watcher未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net 都要重新计算。并且，如果一些 watc【本文受版权保护】【版权所有】唐霜 www.tangshuang.nether 触发另一个更新，脏检查循环（di【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】gest cycle）可能要运行多次。A【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ngular 用户常常要使用深奥的技术，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。以解决脏检查循环的问题。有时没有简单的办原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net法来优化有大量 watcher 的作用域转载请注明出处：www.tangshuang.net原创内容，盗版必究。。
【原创内容，转载请注明出处】【转载请注明来源】Vue 则根本没有这个问题，因为它使用基著作权归作者所有，禁止商业用途转载。【本文受版权保护】于依赖追踪的观察系统并且异步队列更新，所【本文受版权保护】未经授权，禁止复制转载。有的数据变化都是独立触发，除非它们之间有本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】明确的依赖关系。
【作者：唐霜】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net有意思的是，Angular 2 和 Vu【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。e 用相似的设计解决了一些 Angula本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。r 1 中存在的问题。
【作者：唐霜】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】Angular 1 面向的是较小的应用程【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】序，Angular 2 已转移焦点，面向【版权所有，侵权必究】【原创不易，请尊重版权】的是大型企业应用。在这一点上 TypeS【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netcript 经常会被引用，它对那些喜欢用著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 Java 或者 C# 等类型安全的语言转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的人是非常有用的。
【作者：唐霜】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】编者按：总之，如果你以前学过使用过ang【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ular，那么学vue会很快，并且觉得v本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ue非常简单。如果你以前没有学过angu【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。lar，直接跳过，马上学vue，等你使用【版权所有】唐霜 www.tangshuang.net【转载请注明来源】vue开发半年之后再去理解angular【原创内容，转载请注明出处】【版权所有，侵权必究】，会轻松很多。
【本文首发于唐霜的博客】【原创内容，转载请注明出处】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netEmber
编者按：不用学了，既复杂，又死板。虽然它本文作者：唐霜，转载请注明出处。【未经授权禁止转载】是一个齐备的框架，里面什么都有了，但是正未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。是因为它这样，导致它很难跟上时代。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】Knockout
Knockout 是 MVVM 领域内的【版权所有，侵权必究】【本文受版权保护】先驱，并且追踪依赖。它的响应系统和 Vu【本文首发于唐霜的博客】未经授权，禁止复制转载。e 也很相似。它在浏览器支持以及其他方面的表现也是让人印象深刻的。它原创内容，盗版必究。【原创不易，请尊重版权】最低能支持到 IE6，而 Vue 最低只未经授权，禁止复制转载。【本文受版权保护】能支持到 IE9。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。随着时间的推移，Knockout 的发展【转载请注明来源】【作者：唐霜】已有所放缓，并且略显有点老旧了。比如，它【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的组件系统缺少完备的生命周期事件方法，尽【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。管这些在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。
原创内容，盗版必究。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】Polymer
Polymer 是另一个由谷歌赞助的项目转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，事实上也是 Vue 的一个灵感来源。V【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ue 的组件可以粗略的类比于 Polym【转载请注明来源】【原创内容，转载请注明出处】er 的自定义元素，并且两者具有相似的开【原创不易，请尊重版权】【版权所有，侵权必究】发风格。最大的不同之处在于，Polyme本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。r 是基于最新版的 Web Compon【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ents 标准之上，并且需要重量级的 p著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。olyfills 来帮助工作（性能下降）转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，浏览器本身并不支持这些功能。相比而言，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。Vue 在支持到 IE9 的情况下并不需【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。要依赖 polyfills 来工作。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】本文版权归作者所有，未经授权不得转载。Polymer 自定义的元素是用 HTM原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】L 文件来创建的，这会限制使用 Java【作者：唐霜】原创内容，盗版必究。Script/CSS（和被现代浏览器普遍【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net支持的语言特性）。相比之下，Vue 的单未经授权，禁止复制转载。【本文受版权保护】文件组件允许你非常容易的使用 ES201【转载请注明来源】转载请注明出处：www.tangshuang.net5 和你想用的 CSS 预编译处理器。
【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net而 Vue 和 Web Componen著作权归作者所有，禁止商业用途转载。【转载请注明来源】t 标准进行深层次的整合也是完全可行的，【转载请注明来源】【原创内容，转载请注明出处】比如使用 Custom Elements【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net、Shadow DOM 的样式封装。然而【本文受版权保护】【本文首发于唐霜的博客】在我们做出严肃的实现承诺之前，我们目前仍转载请注明出处：www.tangshuang.net【作者：唐霜】在等待相关标准成熟，进而再广泛应用于主流【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】的浏览器中。
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】编者按：读者应该学习一下polymer，【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。主要学习它的思想，如果没有必要，可以不深【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。入学习进行开发。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【未经授权禁止转载】Riot
Riot 2.0 提供了一个类似于基于组【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。件的开发模型（在 Riot 中称之为 T【本文受版权保护】【未经授权禁止转载】ag），它提供了小巧精美的 API。Ri【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ot 和 Vue 在设计理念上可能有许多【版权所有，侵权必究】原创内容，盗版必究。相似处。尽管相比 Riot ，Vue 要原创内容，盗版必究。【原创内容，转载请注明出处】显得重一点。
【未经授权禁止转载】【未经授权禁止转载】编者按：按照尤小右的说法，riot是很不未经授权，禁止复制转载。【未经授权禁止转载】错的，但是因为它用的技术不够fashio【作者：唐霜】【本文受版权保护】n，我也不建议花太多时间学习，除非你有一转载请注明出处：www.tangshuang.net【未经授权禁止转载】个东西很需要一个更小的框架，你想更有个性【关注微信公众号：wwwtangshuangnet】【作者：唐霜】一点。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。Vue实例
首先，你必须掌握一个概念，就是“vue实【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。例”。什么意思呢？所有的vue程序都需要本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】实例化之后使用，实例主要有两种，一个是V【原创内容，转载请注明出处】【作者：唐霜】ue实例，一个是组件实例。当然，如果你把【本文受版权保护】本文版权归作者所有，未经授权不得转载。router和resource加进来，它【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。们也有实例，我们可以称之为插件实例。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【转载请注明来源】构造器
每个 Vue.js 应用都是通过构造函数【转载请注明来源】著作权归作者所有，禁止商业用途转载。 Vue 创建一个 Vue 的根实例 启动的：
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】未经授权，禁止复制转载。var vm = new Vue({
// 选项
})
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net生命周期钩子等选项。全部的选项可以在 API 文档中查看。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net原创内容，盗版必究。组件构造器
可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器。所谓组件构造器，就是创建一个组件的原型原创内容，盗版必究。本文作者：唐霜，转载请注明出处。类。
var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent()
尽管可以命令式地创建扩展实例，不过在多数【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】情况下建议将组件构造器注册为一个自定义元【版权所有】唐霜 www.tangshuang.net【作者：唐霜】素，然后声明式地用在模板中。我们将在后面【原创内容，转载请注明出处】原创内容，盗版必究。详细说明组件系统。现在你只需知道所有的 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。Vue.js 组件其实都是被扩展的 Vu未经授权，禁止复制转载。原创内容，盗版必究。e 实例。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】编者按：组件是vue里面重要的话题。但是【原创不易，请尊重版权】【转载请注明来源】对于开发者而言，其实只需要关心上面那个红著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net色的大括号里面的开发即可。组件的使用有好【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。几种，但是开发者要写的，都在这个大括号身转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。上。另外，Vue.extend之后，就是本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】一个组件构造器，实例化以后，就是一个组件【原创不易，请尊重版权】【转载请注明来源】，下文会有一章详细介绍组件，这里暂且跳过著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net。
【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】实例属性（数据代理和响应）
每个 Vue 实例都会代理其 data 对象里所有的属性：
本文作者：唐霜，转载请注明出处。【本文受版权保护】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】var data = { a: 1 }var app = new Vue({
data: data
})
app.a === data.a // -> true // 设置属性也会影响到原始数据
app.a = 2data.a // -> 2 // ... 反之亦然
data.a = 3app.a // -> 3
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】，它不会触发视图更新。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net编者按：也就是说，你得在new之前，就把未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net所有的data都传进去。实例创建之后，其【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。实可以使用$set来加入属性，也可以实现【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】响应功能。
未经授权，禁止复制转载。【原创内容，转载请注明出处】除了 data 属性， Vue 实例暴露【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】了一些有用的实例属性与方法。这些属性与方【作者：唐霜】著作权归作者所有，禁止商业用途转载。法都有前缀 $，以便与代理的 data 属性区分。例如【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】：
var data = { a: 1 }
var app = new Vue({
el: '#example',
data: data
})
app.$data === data // -> true
app.$el === document.getElementById('example') // -> true
实例方法
在实例里面可以自己传进去一些方法进行调用本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net：
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】未经授权，禁止复制转载。var app = new Vue({
methods: {
myMethod() {},
otherMethod() {
// 这里就可以使用this.myMethod()了
},
},
})
app.otherMethod() // 可以在外面调用
和this.$data一样，vue也有一【未经授权禁止转载】本文作者：唐霜，转载请注明出处。些以$开头的方法，比如app.$watc【本文首发于唐霜的博客】【作者：唐霜】h等，这些都是vue内置的方法。
【作者：唐霜】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。实例属性和方法的完整列表中查阅 API 参考。
原创内容，盗版必究。【原创不易，请尊重版权】模板和数据绑定
Vue的模板语法
Vue.js 使用了基于 HTML 的模本文版权归作者所有，未经授权不得转载。【本文受版权保护】版语法，允许开发者声明式地将 DOM 绑【版权所有】唐霜 www.tangshuang.net【本文受版权保护】定至底层 Vue 实例的数据。所有 Vu【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nete.js 的模板都是合法的 HTML ，【作者：唐霜】未经授权，禁止复制转载。所以能被遵循规范的浏览器和 HTML 解【作者：唐霜】未经授权，禁止复制转载。析器解析。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】在底层的实现上， Vue 将模板编译成虚【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。拟 DOM 渲染函数。结合响应系统，在应【原创内容，转载请注明出处】【版权所有，侵权必究】用状态改变时， Vue 能够智能地计算出【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net重新渲染组件的最小代价并应用到 DOM 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net操作上。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。如果你熟悉虚拟 DOM 并且偏爱 Jav原创内容，盗版必究。【原创不易，请尊重版权】aScript 的原始力量，你也可以不用【转载请注明来源】【本文首发于唐霜的博客】模板，直接写渲染（render）函数，使用可选的 JSX 语法。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。编者按：这里说的render函数和rea【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ct里面是一模一样的。在上面实例化vue【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】的时候，如果你传入了一个template【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】参数，就会使用template，如果你传著作权归作者所有，禁止商业用途转载。【转载请注明来源】入了一个render参数（函数），则会使转载请注明出处：www.tangshuang.net原创内容，盗版必究。用这个函数来作为模板的渲染。
【版权所有，侵权必究】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net插值
文本
数据绑定最常见的形式就是使用 “Must本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ache” 语法（双大括号）的文本插值：
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文受版权保护】未经授权，禁止复制转载。<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
msg和你传入的data.msg是绑定的【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】，当你在操作实例的时候，把实例的data【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。.msg改变了，那么视图上的这个msg也未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net会改变。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】var app = new Vue({
template: '<span>Message: {{msg}}</span>',
data: {
msg: 'Welcome!',
},
})
setTimeout(() => app.msg = 'Let us go!', 1000)
上面你要知道一个事实：app.$data转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net.msg === app.msg，而且由【转载请注明来源】【未经授权禁止转载】于vue的响应系统，所以你直接app.msg = 'Let us go!'和app.$set(app.$data, 'msg', 'Let us go')是一样的。总之，因为javascript著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。的对象是引用型数据，所以你只要使用对了引本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。用，怎么搞都是一样的。
纯 HTML
双大括号会将数据解释为纯文本，而非 HT【版权所有，侵权必究】【版权所有，侵权必究】ML 。为了输出真正的 HTML ，你需【原创不易，请尊重版权】【原创不易，请尊重版权】要使用 v-html 指令：
<div v-html="rawHtml"></div>
被插入的内容都会被当做 HTML —— 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】字符串的模板引擎。组件更适合担任 UI 本文版权归作者所有，未经授权不得转载。【转载请注明来源】重用与复合的基本单元。
你的站点上动态渲染的任意 HTML 可能【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】属性
Mustache 不能在 HTML 属性本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net中使用，应使用 v-bind 指令（下文【本文受版权保护】【本文首发于唐霜的博客】指令一章详细说）：
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被【原创不易，请尊重版权】【本文首发于唐霜的博客】求值为 false 的话该属性会被移除：
著作权归作者所有，禁止商业用途转载。【转载请注明来源】<button v-bind:disabled="someDynamicCondition">Button</button>
使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑【作者：唐霜】【版权所有，侵权必究】定简单的属性键值。但实际上，对于所有的数未经授权，禁止复制转载。【本文首发于唐霜的博客】据绑定， Vue.js 都提供了完全的 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】JavaScript 表达式支持。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net用域下作为 JavaScript 被解析本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。<!-- 这是语句，不是表达式 -->{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->{{ if (ok) { return message } }}
模板表达式都被放在沙盒中，只能访问全局变未经授权，禁止复制转载。【作者：唐霜】量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。义的全局变量。
计算属性
什么是计算属性
模板内的表达式是非常便利的，但是它们实际【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net上只用于简单的运算。在模板中放入太多的逻【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。辑会让模板过重且难以维护。例如：
【本文受版权保护】【原创不易，请尊重版权】<div id="example">{{ message.split('').reverse().join('') }}</div>
在这种情况下，模板不再简单和清晰。在意识【作者：唐霜】本文版权归作者所有，未经授权不得转载。到这是反向显示 message 之前，你【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net不得不再次确认第二遍。当你想要在模板中多未经授权，禁止复制转载。原创内容，盗版必究。次反向显示 message 的时候，问题本文版权归作者所有，未经授权不得转载。【本文受版权保护】会变得更糟糕。
【本文受版权保护】【原创内容，转载请注明出处】这就是对于任何复杂逻辑，你都应当使用计算属性的原因。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。所谓计算属性，就是跟ES5的getter【原创内容，转载请注明出处】【未经授权禁止转载】一样的，用function来定义个属性，本文作者：唐霜，转载请注明出处。【未经授权禁止转载】当你获取这个属性的时候，实际上是要执行这【作者：唐霜】【关注微信公众号：wwwtangshuangnet】个function，执行function【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。的过程就是计算过程，所以也就叫计算属性。【版权所有，侵权必究】未经授权，禁止复制转载。所有的计算属性被放在computed里面【转载请注明来源】转载请注明出处：www.tangshuang.net，computed和data, meth【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netods同级，如下：
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有，侵权必究】var app = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
在使用reversedMessage的时【转载请注明来源】【本文受版权保护】候，把它当做一个属性，app.reversedMessage就可以了，在模板中：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
Vue模板中的变量，都是实例的属性，比如本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】这里面的message -> ap【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。p.message，还记得上面的数据代理【版权所有】唐霜 www.tangshuang.net【转载请注明来源】吗？app.message === ap原创内容，盗版必究。【转载请注明来源】p.$data.message === 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】传入的data.message。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【本文受版权保护】你可以像绑定普通属性一样在模板中绑定计算【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】这种依赖关系：计算属性的 getter 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】是没有副作用，这使得它易于测试和推理。
计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中【作者：唐霜】【未经授权禁止转载】的 method 来达到同样的效果：
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】<p>Reversed message: "{{ reversedMessage() }}"</p>
// in component -------------------------------------
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个 metho【转载请注明来源】【本文受版权保护】d 而不是一个计算属性。对于最终的结果，【未经授权禁止转载】【本文受版权保护】两种方式确实是相同的。然而，不同的是计算【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。属性是基于它们的依赖进行缓存的。计算属性【本文首发于唐霜的博客】【版权所有，侵权必究】只有在它的相关依赖发生改变时才会重新求值未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。。这就意味着只要 message 还没有著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net发生改变，多次访问 reversedMe【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ssage 计算属性会立即返回之前的计算转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net结果，而不必再次执行函数。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。这也同样意味着下面的计算属性将不再更新，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net因为 Date.now() 不是响应式依未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。赖：
【本文受版权保护】【转载请注明来源】转载请注明出处：www.tangshuang.net原创内容，盗版必究。computed: {
now: function () {
return Date.now()
}
}
相比而言，只要发生重新渲染，method【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】 调用总会执行该函数。
【转载请注明来源】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。我们为什么需要缓存？假设我们有一个性能开【原创内容，转载请注明出处】未经授权，禁止复制转载。销比较大的的计算属性 A ，它需要遍历一【原创不易，请尊重版权】【原创不易，请尊重版权】个极大的数组和做大量的计算。然后我们可能【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net有其他的计算属性依赖于 A 。如果没有缓原创内容，盗版必究。本文作者：唐霜，转载请注明出处。存，我们将不可避免的多次执行 A 的 g著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netetter！如果你不希望有缓存，请用 m【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netethod 替代。
未经授权，禁止复制转载。未经授权，禁止复制转载。计算 setter
计算属性默认只有 getter ，不过在本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net需要时你也可以提供一个 setter ：
【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
现在在运行 vm.fullName = 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net‘John Doe̵原创内容，盗版必究。转载请注明出处：www.tangshuang.net7; 时， setter 会被调用， v【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】m.firstName 和 vm.las未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。tName 也相应地会被更新。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。观察 Watchers
在Vue里面有个方法，可以用来监听实例属【本文首发于唐霜的博客】【本文受版权保护】性的变化，就是watcher，如果你用过【版权所有，侵权必究】【版权所有，侵权必究】angular的话，肯定知道watche【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。r是什么。
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net什么是watch
watch是和data, methods【本文首发于唐霜的博客】【本文受版权保护】, computed同级的一个参数，你可转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。以在watch里面规定你要watch的属转载请注明出处：www.tangshuang.net【作者：唐霜】性，当这些属性发生变化的时候，它会执行对未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。应的那个函数。栗子：
【原创不易，请尊重版权】未经授权，禁止复制转载。var app = new Vue({
data: {
message: '',
msg: '',
},
watch: {
message: function() { // 当app.$data.message发生变化的时候，执行这个函数
this.msg = 'Changed!'
},
},
})
虽然计算属性在大多数情况下更合适，但有时原创内容，盗版必究。【转载请注明来源】也需要一个自定义的 watcher 。这【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】是为什么 Vue 提供一个更通用的方法通【未经授权禁止转载】本文作者：唐霜，转载请注明出处。过 watch 选项，来响应数据的变化。【转载请注明来源】未经授权，禁止复制转载。当你想要在数据变化响应时，执行异步操作或【本文受版权保护】本文作者：唐霜，转载请注明出处。开销较大的操作，这是很有用的。
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。例如：
【未经授权禁止转载】【原创不易，请尊重版权】【作者：唐霜】<div id="watch-example">
<p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// _.debounce 是一个通过 lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问yesno.wtf/api的频率
// ajax请求直到用户输入完毕才会发出
// 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
return
}
vm.answer = 'Thinking...'
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},500)// 这是我们为用户停止输入等待的毫秒数
}
})</script>
在这个示例中，使用 watch 选项允许本文作者：唐霜，转载请注明出处。【未经授权禁止转载】我们执行异步操作（访问一个 API），限本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。制我们执行该操作的频率，并在我们得到最终【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net结果前，设置中间状态。这是计算属性无法做转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net到的。
【原创不易，请尊重版权】【作者：唐霜】本文作者：唐霜，转载请注明出处。除了 watch 选项之外，您还可以使用 vm.$watch API 命令。
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】Computed 属性 vs Watched 属性
Vue 确实提供了一种更通用的方式来观察【转载请注明来源】【本文受版权保护】和响应 Vue 实例上的数据变动：wat【原创内容，转载请注明出处】【原创不易，请尊重版权】ch 属性。当你有一些数据需要随着其它数原创内容，盗版必究。【本文受版权保护】据变动而变动时，你很容易滥用 watch【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。——特别是如果你之前使用过 Angula转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。rJS。然而，通常更好的想法是使用 co【转载请注明来源】【未经授权禁止转载】mputed 属性而不是命令式的 wat转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ch 回调。细想一下这个例子：
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net<div id="demo">{{ fullName }}</div>var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面代码是命令式的和重复的。将它与 co【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netmputed 属性的版本进行比较：
转载请注明出处：www.tangshuang.net【作者：唐霜】var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
好得多了，不是吗？
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】指令
什么是指令？
指令（Directives）是带有 v-著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 前缀的特殊属性。指令属性的值预期是单一【本文首发于唐霜的博客】【未经授权禁止转载】 JavaScript 表达式（除了 v【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】-for，之后再讨论）。指令的职责就是当【原创不易，请尊重版权】原创内容，盗版必究。其表达式的值改变时相应地将某些行为应用到【作者：唐霜】【本文受版权保护】 DOM 上。让我们回顾一下在介绍里的例本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】子：
【作者：唐霜】著作权归作者所有，禁止商业用途转载。【本文受版权保护】<p v-if="seen">Now you see me</p>
这里， v-if 指令将根据表达式 se本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】en 的值的真假来移除/插入 <p未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net> 元素。而v-if就是指令。vu【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】e里面有很多内置的指令，你还可以自定义指著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。令。
【本文首发于唐霜的博客】原创内容，盗版必究。Vue2提供的所有指令可以在这里看到，主要有v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once。因为指令还挺重要的，所以本书会全部解释【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net一遍。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。指令怎么用？
只需要直接将指令作为html元素的属性来著作权归作者所有，禁止商业用途转载。【转载请注明来源】使用就可以了，例如<div v-if="hasChild"></div>。指令只对当前所在的这个元素起作用，它在【未经授权禁止转载】转载请注明出处：www.tangshuang.net哪个元素上，就哪个元素做出对应的动作。
该属性的值被称为指令的“表达式”，例如v转载请注明出处：www.tangshuang.net【本文受版权保护】-if=”isExists&【版权所有】唐霜 www.tangshuang.net【本文受版权保护】#8221;，isExists对应thi【本文首发于唐霜的博客】【原创不易，请尊重版权】s.isExists，既然是表达式，就有本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net返回值，它的值被传给指令，指令根据表达式【原创不易，请尊重版权】未经授权，禁止复制转载。的返回结果来决定所在的元素进行怎样的操作【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。。表达式里面的变量，都是来自vue实例的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。属性。
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】指令也可以有参数，主要是指v-on和v-【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】bind这两个指令，它们后面跟上一个冒号【本文受版权保护】原创内容，盗版必究。，冒号和等号之间的内容就是参数，例如v-原创内容，盗版必究。原创内容，盗版必究。bind:src=”src”，红未经授权，禁止复制转载。【未经授权禁止转载】色的src就是参数。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】一些指令还有修饰符，用.符号连接，主要是【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】绑定型指令会有。
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】内容型指令
v-text
<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>
v-html
<div v-html="html"></div>
和v-text不一样，v-html真的是原创内容，盗版必究。原创内容，盗版必究。完完全全innerHTML。为了安全起见原创内容，盗版必究。【作者：唐霜】，不要用。
原创内容，盗版必究。【转载请注明来源】条件判断型指令
v-if
<div v-if="is"></div>
如果this.is值为真，则当前元素会被【版权所有】唐霜 www.tangshuang.net【本文受版权保护】插入到dom中，如果is为假，当前元素会本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。被从dom中移除。因此，v-if是有do未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】m消耗的，使用时不应该反复更改is值。
【转载请注明来源】【作者：唐霜】v-show
<div v-show="is"></div>
v-show和v-if是一样的用法，但是【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。相对于v-if不一样。v-if是会把这个【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。元素从dom中移走或者插入的，但是v-s【版权所有】唐霜 www.tangshuang.net【转载请注明来源】how是不会的，is为false的时候，【本文首发于唐霜的博客】【本文受版权保护】会给这个元素加一个display:non【原创不易，请尊重版权】【本文受版权保护】e，仅仅是隐藏这个元素，所以不会有dom【本文受版权保护】原创内容，盗版必究。的消耗。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】v-else
必须跟v-if一起用。并且不需要表达式，原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】还记得上面说的“表达式”是什么意思吗？
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net<div v-if="Math.random() > 0.5"> Now you see me</div><div v-else> Now you don't</div>
v-else-if
2.1.0版本新增的指令，所以2.0版本【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。是没有的，使用的时候注意。前一兄弟元素必【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】须有 v-if 或 v-else-if。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net表示 v-if 的 “else if 块原创内容，盗版必究。【版权所有，侵权必究】”。可以链式调用。
未经授权，禁止复制转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
循环调用型指令
v-for
基于源数据多次渲染元素或模板块。也就是说【原创不易，请尊重版权】【原创不易，请尊重版权】，跟前面的指令不一样，上面的指令当前元素转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】只会出现0次或1次，而v-for可以让当【转载请注明来源】【转载请注明来源】前元素重复渲染。此指令之值，必须使用特定本文作者：唐霜，转载请注明出处。【转载请注明来源】语法 alias in expressi原创内容，盗版必究。本文作者：唐霜，转载请注明出处。on ，为当前遍历的元素提供别名：
【作者：唐霜】【本文首发于唐霜的博客】<div v-for="item in items">{{ item.text }}</div>
另外也可以为数组索引指定别名（或者用于对【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。象的键）：
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【转载请注明来源】<div v-for="(item, index) in items"></div><div v-for="(val, key) in object"></div><div v-for="(val, key, index) in object"></div>
v-for 默认行为试着不改变整体，而是【原创不易，请尊重版权】【本文首发于唐霜的博客】替换元素。迫使其重新排序的元素,您需要提本文作者：唐霜，转载请注明出处。原创内容，盗版必究。供一个 key 的特殊属性:
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net<div v-for="item in items" :key="item.id">{{ item.text }}</div>
关于这个key，Vue为了确保在virt【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netual dom里面，更新的时候用来做对比【本文首发于唐霜的博客】未经授权，禁止复制转载。用的。如果不使用key，Vue会使用一种本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】最大限度减少动态元素并且尽可能的尝试修复转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】/再利用相同类型元素的算法。使用key，【转载请注明来源】【本文首发于唐霜的博客】它会基于key的变化重新排列元素顺序，并本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。且会移除key不存在的元素。具体可以阅读这里。下文“特殊属性”一节会讲到。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】绑定型指令
绑定型指令会有参数，也就是有冒号，参数是原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】绑定的属性或事件。绑定型指令还有修饰符。
【转载请注明来源】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】v-bind
动态地绑定一个或多个attr或prop属本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】性。简单的说就是，通过v-bind绑定一著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】个属性，这个属性可以是html原本有的，著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】也可以是某些特殊的，绑定的表达式的值赋值【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】给这个属性。例如：<img v-bind:src="imgSrc">，imgSrc是实例的imgSrc属性t【未经授权禁止转载】【本文首发于唐霜的博客】his.imgSrc，它的值将会作为字符【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。串作为属性src的值。绑定之后，如果th著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netis.imgSrc更改，那么src的值也转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。随着更改，图片也就会换成另外一幅。
在绑定 class 或 style 特性本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net时，支持其它类型的值，如数组或对象。下文【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。会详细讲class和style属性的问题【原创内容，转载请注明出处】原创内容，盗版必究。。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。在绑定 prop 时，prop 必须在子著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。组件中声明，这你得读到组件那一章才会了解本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】什么是自组件，以及自组件的props。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。没有参数时，可以绑定到一个包含键值对的对未经授权，禁止复制转载。【作者：唐霜】象。注意此时 class 和 style【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】 绑定不支持数组和对象。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。v-bind:可以缩写成单独的一个冒号:未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net修饰符：
【作者：唐霜】本文作者：唐霜，转载请注明出处。- .prop – 被用于绑定 原创内容，盗版必究。【转载请注明来源】DOM 属性。(what’s the differenc【本文首发于唐霜的博客】【本文首发于唐霜的博客】e?)。编者按：prop和attr是不同的，【本文受版权保护】【原创不易，请尊重版权】熟悉jquery的同学应该知道，比如ch本文版权归作者所有，未经授权不得转载。【作者：唐霜】eckbox的checked属性。 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。
- .camel – trans转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】form the kebab-case 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。attribute name into 著作权归作者所有，禁止商业用途转载。【转载请注明来源】camelCase. (supporte本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。d since 2.1.0) 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
示例：
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 --><div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 --><div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
.camel 修饰符允许在使用 DOM 【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】模板时将 v-bind 属性名称驼峰化，【原创不易，请尊重版权】【原创不易，请尊重版权】例如 SVG 的 viewBox 属性：
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】<svg :view-box.camel="viewBox"></svg>
v-on
绑定事件监听器。事件类型由参数指定。表达转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。式可以是一个方法的名字或一个内联语句，如原创内容，盗版必究。转载请注明出处：www.tangshuang.net果没有修饰符也可以省略。
【原创不易，请尊重版权】
用在普通元素上时，只能监听 原生 DO【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】M 事件。用在自定义元素组件上时，也可以【原创不易，请尊重版权】【作者：唐霜】监听子组件触发的自定义事件。关于这个“子著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】组件的自定义事件”也可以在下文的“组件”本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。一章学到。
在监听原生 DOM 事件时，方法以事件为【原创不易，请尊重版权】【版权所有，侵权必究】唯一的参数。如果使用内联语句，语句可以访著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。问一个 $event 属性： v-on:转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】click=”handle(未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net‘ok’, $e【作者：唐霜】【版权所有】唐霜 www.tangshuang.netvent)”。
【作者：唐霜】【转载请注明来源】v-on:可以缩写成@。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。修饰符：
原创内容，盗版必究。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。- .stop – 调用 eve【本文受版权保护】未经授权，禁止复制转载。nt.stopPropagation()【原创不易，请尊重版权】【本文首发于唐霜的博客】。 【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】
- .prevent – 调用 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。event.preventDefault【版权所有】唐霜 www.tangshuang.net【作者：唐霜】()。 【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【本文受版权保护】
- .capture – 添加事本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。件侦听器时使用 capture 模式。 【转载请注明来源】转载请注明出处：www.tangshuang.net【转载请注明来源】本文版权归作者所有，未经授权不得转载。
- .self – 只当事件是从【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。侦听器绑定的元素本身触发时才触发回调。 【原创内容，转载请注明出处】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- .{keyCode | keyAlias【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】} – 只当事件是从特定键触【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】发时才触发回调。 【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】
- .native – 监听组件【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。根元素的原生事件。 【作者：唐霜】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】
- .once – 只触发一次回著作权归作者所有，禁止商业用途转载。【作者：唐霜】调。 【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】
- .left – (2.2.0未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。) 只当点击鼠标左键时触发。 【作者：唐霜】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】
- .right – (2.2.转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。0) 只当点击鼠标右键时触发。 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
- .middle – (2.2【转载请注明来源】【版权所有】唐霜 www.tangshuang.net.0) 只当点击鼠标中键时触发。 原创内容，盗版必究。未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创内容，转载请注明出处】
示例：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
还有更多的修饰符：
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】- .enter 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- .tab 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
- .delete (捕获 “删除” 和 “未经授权，禁止复制转载。【版权所有，侵权必究】退格” 键) 【原创内容，转载请注明出处】【未经授权禁止转载】
- .esc 【未经授权禁止转载】未经授权，禁止复制转载。未经授权，禁止复制转载。【本文受版权保护】
- .space 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。未经授权，禁止复制转载。
- .up 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
- .down 【未经授权禁止转载】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【本文受版权保护】
- .left 【原创内容，转载请注明出处】【原创不易，请尊重版权】
- .right 【本文受版权保护】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net
- .ctrl 原创内容，盗版必究。【未经授权禁止转载】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
- .alt 未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
- .shift 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有，侵权必究】未经授权，禁止复制转载。
- .meta 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】
这些修饰符是跟键盘相关的，主要是在一些输本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】入相关的元素上可以使用。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【本文首发于唐霜的博客】v-model
在表单控件或者组件上创建双向绑定。它会根未经授权，禁止复制转载。【本文受版权保护】据控件类型自动选取正确的方法来更新元素。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】尽管有些神奇，但 v-model 本质上【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net不过是语法糖，它负责监听用户的输入事件以【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net更新数据，并特别处理一些极端的例子。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netv-model 并不关心表单控件初始化所【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net生成的值。因为它会选择 Vue 实例数据【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】来作为具体的值。
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net对于要求 IME （如中文、 日语、 韩【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】语等） 的语言，你会发现那v-model【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。不会在 ime 构成中得到更新。如果你也未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。想实现更新，请使用 input事件。
未经授权，禁止复制转载。【版权所有，侵权必究】【未经授权禁止转载】编者按：这个指令超级复杂，它一定会跟表单本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。控件联系在一起。所以要事先认真解释一下。【版权所有，侵权必究】【未经授权禁止转载】首先，要理解双向绑定的概念。非常简单的说原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】，就是包含了两种绑定。第一种就是v-bi著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netnd的绑定，v-bind绑定之后，如果v本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ue实例对应的属性变化了，视图也会跟着改【本文受版权保护】【本文首发于唐霜的博客】变。第二种是反过来的，是视图上的改变会导本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net致vue实例对应的属性的变化。视图怎么变原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。呢？比如在input, textarea转载请注明出处：www.tangshuang.net【作者：唐霜】中输入内容，通过点击，切换radio, 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。checkbox, select的选项。【转载请注明来源】未经授权，禁止复制转载。这就是双向绑定。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】原创内容，盗版必究。v-model因为只会用在表单控件上，所【作者：唐霜】未经授权，禁止复制转载。以有关内容都在下面的《表单控件绑定》一章【本文受版权保护】【本文受版权保护】中详解。
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。为了区别v-bind和v-model，我【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net还专门写了一篇文章，你可以在看完这里之后再读一下。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。【本文受版权保护】【原创不易，请尊重版权】【作者：唐霜】补充：<input v-model著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】=”something著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net221;>其实是<input未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net v-bind:value=”原创内容，盗版必究。原创内容，盗版必究。;something” v-【转载请注明来源】【版权所有】唐霜 www.tangshuang.neton:input=”some未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】thing = $event.targe转载请注明出处：www.tangshuang.net原创内容，盗版必究。t.value”>的语未经授权，禁止复制转载。未经授权，禁止复制转载。法糖，也就是说v-model本身就已经包转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net含了v-bind，所以当v-bind:v【版权所有，侵权必究】【本文受版权保护】alue, v-on:input和v-m【原创不易，请尊重版权】【版权所有，侵权必究】odel同时出现在一个input上时，这【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。个v-bind, v-on会失效。这在下【版权所有】唐霜 www.tangshuang.net【本文受版权保护】文会反复出现，如果你此刻没有理解，可以等【转载请注明来源】【原创不易，请尊重版权】到下面阅读到相关内容之后再反过来思考。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
控制型指令
还有内置指令可以实现在渲染过程中暂时挂起【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】当前指令所在的元素，或者改变vue默认的【未经授权禁止转载】本文作者：唐霜，转载请注明出处。渲染机制。
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。v-pre
不进行模板编译的部分。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。<span v-pre>{{ this will not be compiled }}</span>
里面的{{}}不会被认为是js表达式编译著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】成html，而是原模原样的展示出来。
【本文受版权保护】【未经授权禁止转载】【本文受版权保护】本文作者：唐霜，转载请注明出处。v-once
只渲染元素和组件一次。随后的重新渲染,元【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。素/组件及其所有的子节点将被视为静态内容著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】并跳过。这可以用于优化更新性能。
【作者：唐霜】转载请注明出处：www.tangshuang.net<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once><h1>comment</h1><p>{{msg}}</p></div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul><li v-for="i in list" v-once>{{i}}</li></ul>
也就是说，once让渲染失去了数据绑定机著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。制，只有在第一次渲染的时候，会获取当时的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。变量对应的数据进行渲染，渲染结束之后，将本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。不再跟着数据变化而变化。
【未经授权禁止转载】转载请注明出处：www.tangshuang.net原创内容，盗版必究。这个指令有的时候非常有用。比如一些组件并本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net不需要跟着数据变化而变化的时候。
【转载请注明来源】【作者：唐霜】v-cloak
这个指令保持在元素上直到关联实例结束编译【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。。和 CSS 规则如 [v-cloak]【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】 { display: none } 一转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】起用时，这个指令可以隐藏未编译的 Mus本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】tache 标签直到实例准备完毕。
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。[v-cloak] { display: none;}
<div v-cloak>
{{ message }}
</div>
其实也就是一个普通的属性，当编译结束的时【关注微信公众号：wwwtangshuangnet】【转载请注明来源】候，就把这个属性移除掉。所以上面那个cs原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。s，使得这些有v-cloak属性的元素全原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。部先隐藏起来，最后当v-cloak被移除本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net的时候，这些元素就显示出来了。为什么要有转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】这么一个奇怪的属性呢？因为你要知道，{{转载请注明出处：www.tangshuang.net【版权所有，侵权必究】message}}在原始的html中是字本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】符串，是会显示在界面中的。如果你的浏览器【本文首发于唐霜的博客】【版权所有，侵权必究】编译模板速度慢，或者用户网速慢，vue代【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。码半天没加载完，那么用户就会看到这些奇怪【未经授权禁止转载】转载请注明出处：www.tangshuang.net的{{}}，而如果使用一个v-cloak【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。属性，就可以把这些内容事先隐藏起来，不让原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。用户看到。
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】自定义指令
vue里你还可以自定义指令，它们和内置指转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net令一样，以v-开头。开发自己的指令之前，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。你需要理解指令到底是拿来干什么的，而不要【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】把所有的功能都开发成指令来用。
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。创建指令
让我们来创建一个指令：当页面加载时，元素原创内容，盗版必究。【未经授权禁止转载】将获得焦点。事实上，你访问后还没点击任何【原创不易，请尊重版权】【作者：唐霜】内容，input 就获得了焦点。我们希望【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。使用的时候用v-focus来作为标识符。
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net原创内容，盗版必究。new Vue({
directives: {
focus: {
inserted(el) {
el.focus()
},
},
},
})
这样我们我们就创建了v-focus指令，【转载请注明来源】【作者：唐霜】在模板中，就可以这样使用：
【转载请注明来源】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。<input v-focus>
这样当页面打开的时候，这个input就会【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。自动获取焦点。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。钩子函数
你可以看到上面的定义一个指令的结构：在实本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。力参数中传入directives，在di【转载请注明来源】本文作者：唐霜，转载请注明出处。rectives里面就是所有的自定义指令【本文受版权保护】【未经授权禁止转载】，focus就是指令的名称，focus里【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】面会加入多个方法函数，这些函数就是钩子函原创内容，盗版必究。【未经授权禁止转载】数，每一个钩子函数都会在不同的时刻执行，【作者：唐霜】未经授权，禁止复制转载。从而实现你想要的功能。
原创内容，盗版必究。原创内容，盗版必究。指令定义函数提供了几个钩子函数（可选）：
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】【未经授权禁止转载】- bind: 只调用一次，指令第一次绑定到【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】元素时调用，用这个钩子函数可以定义一个在【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。绑定时执行一次的初始化动作。 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】
- inserted: 被绑定元素插入父节点本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】时调用（父节点存在即可调用，不必存在于 未经授权，禁止复制转载。原创内容，盗版必究。document 中）。 原创内容，盗版必究。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- update: 被绑定元素所在的模板更新原创内容，盗版必究。【本文受版权保护】时调用，而不论绑定值是否变化。通过比较更著作权归作者所有，禁止商业用途转载。【作者：唐霜】新前后的绑定值，可以忽略不必要的模板更新【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】（详细的钩子函数参数见下）。 转载请注明出处：www.tangshuang.net【未经授权禁止转载】
- componentUpdated: 被绑著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。定元素所在模板完成一次更新周期时调用。 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
- unbind: 只调用一次， 指令与元素【本文首发于唐霜的博客】【版权所有，侵权必究】解绑时调用。 原创内容，盗版必究。【未经授权禁止转载】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
钩子函数的参数
钩子函数被赋予了以下参数：
原创内容，盗版必究。【原创不易，请尊重版权】- el: 指令所绑定的元素，可以用来直接操【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。作 DOM 。 未经授权，禁止复制转载。【转载请注明来源】原创内容，盗版必究。
- binding: 一个对象，包含以下属性本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】：
- name: 指令名，不包括 v- 前缀。 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】原创内容，盗版必究。
- value: 指令的绑定值， 例如： v本文作者：唐霜，转载请注明出处。【转载请注明来源】-my-directive=”原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。;1 + 1″, value转载请注明出处：www.tangshuang.net原创内容，盗版必究。 的值是 2。 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net
- oldValue: 指令绑定的前一个值，【版权所有，侵权必究】【版权所有，侵权必究】仅在 update 和 componen【原创不易，请尊重版权】【本文首发于唐霜的博客】tUpdated 钩子中可用。无论值是否【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。改变都可用。 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net
- expression: 绑定值的字符串形本文作者：唐霜，转载请注明出处。原创内容，盗版必究。式。 例如 v-my-directive本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】=”1 + 1″著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】 ， expression 的值是 &#【作者：唐霜】【本文受版权保护】8220;1 + 1″。 【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net
- arg: 传给指令的参数。例如 v-my本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。-directive:foo， arg 转载请注明出处：www.tangshuang.net【转载请注明来源】的值是 “foo”【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。;。 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
- modifiers: 一个包含修饰符的对【转载请注明来源】本文作者：唐霜，转载请注明出处。象。 例如： v-my-directiv【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。e.foo.bar, 修饰符对象 mod【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ifiers 的值是 { foo: tr原创内容，盗版必究。【本文首发于唐霜的博客】ue, bar: true }。 【转载请注明来源】【作者：唐霜】【转载请注明来源】
【原创不易，请尊重版权】原创内容，盗版必究。【原创不易，请尊重版权】
- vnode: Vue 编译生成的虚拟节点未经授权，禁止复制转载。未经授权，禁止复制转载。，查阅 VNode API 了解更多详情。 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
- oldVnode: 上一个虚拟节点，仅在本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。 update 和 componentU【原创内容，转载请注明出处】原创内容，盗版必究。pdated 钩子中可用。 原创内容，盗版必究。未经授权，禁止复制转载。
除了 el 之外，其它参数都应该是只读的著作权归作者所有，禁止商业用途转载。【转载请注明来源】，尽量不要修改他们。如果需要在钩子之间共【原创不易，请尊重版权】【本文首发于唐霜的博客】享数据，建议通过元素的 dataset 来进行。
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。<div id="hook-arguments-example" v-demo:hello.a.b="message"></div>
Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') }})new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' }})
函数简写
大多数情况下，我们可能想在 bind 和【原创不易，请尊重版权】【版权所有，侵权必究】 update 钩子上做重复动作，并且不原创内容，盗版必究。【本文首发于唐霜的博客】想关心其它的钩子函数。可以这样写:
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value})
对象字面量
如果指令需要多个值，可以传入一个 Jav原创内容，盗版必究。本文作者：唐霜，转载请注明出处。aScript 对象字面量。记住，指令函【转载请注明来源】【本文受版权保护】数能够接受所有合法类型的 JavaScr原创内容，盗版必究。【作者：唐霜】ipt 表达式。
【原创不易，请尊重版权】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!"})
【未经授权禁止转载】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文受版权保护】编者按：
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
【原创内容，转载请注明出处】 本书到目前为止，所有的方法都是在局部进【原创不易，请尊重版权】【原创内容，转载请注明出处】行定义，而没有进行全局定义，在vue里面转载请注明出处：www.tangshuang.net原创内容，盗版必究。，指令可以通过全局方法Vue.direc著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。tives()来定义，也可以在实例参数、【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net组件参数中加入directives来进行本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。局部定义。局部定义就是说只有在当前这个实著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】例的模板内可以使用指令，而全局定义则可以本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。让所有模板都可以使用这个指令。除了指令，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。还有下文要提的过滤器也有这两种定义方式。【转载请注明来源】【作者：唐霜】但为了增加学习曲线的平滑度，在前面几章都【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。是主要提到局部定义。后面会有专门的章节来【转载请注明来源】本文版权归作者所有，未经授权不得转载。阐述全局和局部问题。
过滤器
什么是过滤器？
什么是过滤器呢？你用过一些模板引擎的话可【原创不易，请尊重版权】【原创不易，请尊重版权】能知道，比如{{name | toUpp转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】erCase}}，通过一个管道符号，后面转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】跟上一个函数，对前面的变量进行输出前的处原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net理。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netVue 2.x 中，过滤器只能在 mus【本文首发于唐霜的博客】【版权所有，侵权必究】tache 绑定和 v-bind 表达式【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net（从 2.1.0 开始支持）中使用，因为【版权所有，侵权必究】转载请注明出处：www.tangshuang.net过滤器设计目的就是用于文本转换。为了在其原创内容，盗版必究。未经授权，禁止复制转载。他指令中实现更复杂的数据变换，你应该使用【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net计算属性。
【版权所有，侵权必究】原创内容，盗版必究。<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
过滤器可以串联：
【本文首发于唐霜的博客】【未经授权禁止转载】【作者：唐霜】{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】此可以接受参数：
【版权所有，侵权必究】【本文首发于唐霜的博客】{{ message | filterA('arg1', arg2) }}
这里，字符串 ‘arg1&#【作者：唐霜】【原创不易，请尊重版权】8217; 将传给过滤器作为第二个参数，【本文首发于唐霜的博客】【转载请注明来源】 arg2 表达式的值将被求值然后传给过【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】滤器作为第三个参数。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】自定义过滤器
从vue2.0开始，vue不再内置过滤器【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net，以前很多过滤器可以直接使用，比如upp【原创不易，请尊重版权】未经授权，禁止复制转载。ercase等。现在不能直接用了，但是我【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net们可以自己自定义。过滤器函数总接受表达式未经授权，禁止复制转载。【原创内容，转载请注明出处】的值作为第一个参数。
未经授权，禁止复制转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】new Vue({
// ...
filters: {
capitalize: function (value) { // 注意，这里的参数上面说过了，可以新增其他参数的
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
使用很简单，和上面一样。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net{{userName | capitalize}}
总之，把你自己的过滤器放在filters本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】变量中。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】Vue2.0把过滤器这块移除是有道理的，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。他们希望你更多使用computed，而不原创内容，盗版必究。【转载请注明来源】是过滤器。
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】表单控件绑定
在前面的v-model一节中已经说了，这【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。一章，其实就是对v-model的展开说明【作者：唐霜】转载请注明出处：www.tangshuang.net。当然，也不完全就是v-model，这章转载请注明出处：www.tangshuang.net原创内容，盗版必究。会全面的讲解跟表单相关的所有开发相关内容著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】。
原创内容，盗版必究。【转载请注明来源】【原创内容，转载请注明出处】数据的双向绑定
前面说了，v-model是双向绑定的秘诀【转载请注明来源】【版权所有】唐霜 www.tangshuang.net。那么到底怎么实现呢？
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】转载请注明出处：www.tangshuang.net文本 input text
<input v-model="message">
<p>Message is: {{ message }}</p>
new Vue({
data: {
message: 'placeholder',
},
})
这里的双向绑定包括两个绑定，一个是dat【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】a.message被绑定到input控件转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net上，被作为input的value值。当然未经授权，禁止复制转载。【原创内容，转载请注明出处】，{{message}}也是被绑定好的。【本文受版权保护】【原创内容，转载请注明出处】当data.message发生变化的时候著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，视图里面会跟着变。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【作者：唐霜】现在，在input里面输入自己的字符串。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。由于v-model的作用，data.me本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ssage也随之发生变化，data.me著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】ssage这次反过来等于输入的值。于此同【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net时，由于data.message变了，{【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net{message}}也跟着变了。
【本文首发于唐霜的博客】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。这个过程就是v-model的双向绑定的结【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】果。
【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【版权所有，侵权必究】编者按：关于v-model是v-bind本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】和v-on的语法糖的问题，你此刻可能不是【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】很懂，因为你还没有阅读事件绑定这一章，下【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net一章会专门讲事件绑定，阅读完下一章你再回【版权所有】唐霜 www.tangshuang.net【转载请注明来源】头阅读这一章，就会有不一样的理解。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
多行文本 textarea
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
在文本区域插值( <textare未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。a>{{message}}<原创内容，盗版必究。本文作者：唐霜，转载请注明出处。/textarea> ) 并不会生【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net效，应用 v-model 来代替。
【本文首发于唐霜的博客】【本文受版权保护】textarea和上面的input te【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】xt是一样的，效果也和我们想象的一样。
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net复选框 input checkbox
单个勾选框
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
这里的v-model绑定了checked本文作者：唐霜，转载请注明出处。【作者：唐霜】，但是checked这个变量应该是一个b著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】oolean值，表示这个checkbox著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】是否被选中，是绑定到了prop属性。
【版权所有，侵权必究】【原创不易，请尊重版权】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】这个时候，你会问，当复选框选中了，那么我转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。怎么知道要用什么值呢？这里有两种解释，一【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net种是你不需要知道它要用什么值，你只需要知【未经授权禁止转载】【未经授权禁止转载】道它的结果是选中还是不选中即可，至于选中【原创不易，请尊重版权】【作者：唐霜】了怎么办，不选中又怎么办，请自己来决定。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】【作者：唐霜】【原创内容，转载请注明出处】另一种是给两个绑定值，如下：
【作者：唐霜】本文版权归作者所有，未经授权不得转载。<input type="checkbox" v-model="checked" :true-value="a" :false-value="b">
这里的a和b都是变量，选中的时候chec本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ked值等于a，即app.checked转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 = app.a，否则app.check原创内容，盗版必究。【版权所有，侵权必究】ed = app.b。这样checked【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。就不是boolean值了。
转载请注明出处：www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net注意：checkbox单个复选框的时候，原创内容，盗版必究。【转载请注明来源】不能使用:value="xxx"绑定值，即使绑定了也没用，会被舍弃，读过【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。我前面那篇文章的就知道。
多个勾选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <span>Checked names: {{ checkedNames }}</span>// 这可以checkedNames直接显示成JSON.stringify()的结果
new Vue({
el: '...',
data: {
checkedNames: [],
}
})
这里，要求type=”che【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netckbox”是一定要有的，如【未经授权禁止转载】【作者：唐霜】果没有type=”check未经授权，禁止复制转载。【原创内容，转载请注明出处】box”，会报错，type值【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。必须是字符串，不能通过v-bind进行绑本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。定使用动态值，否则vue会报错。
【作者：唐霜】【版权所有，侵权必究】data.checkedNames一定要【原创不易，请尊重版权】【转载请注明来源】是数组，当用户勾选了上面checkbox【版权所有，侵权必究】【转载请注明来源】的其中一个时，它的value值会被丢到d原创内容，盗版必究。【本文首发于唐霜的博客】ata.checkedNames这个数组本文版权归作者所有，未经授权不得转载。【转载请注明来源】中来。而它的value值则可以通过v-b【未经授权禁止转载】【版权所有，侵权必究】ind绑定一个动态数据。
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】本文作者：唐霜，转载请注明出处。在HTML中，通过相同的一个name值来未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。确定这组checkbox是一个组的，而在【未经授权禁止转载】【转载请注明来源】这里，则是通过v-model的值是同一个本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。值来确定是一个组的。
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文首发于唐霜的博客】这个时候就可以使用:value来动态绑定本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】value值了，这和单个复选框不一样。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。单选按钮 input radio
<div id="example-4" class="demo"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div>
new Vue({
el: '#example-4',
data: {
picked: '',
}
})
单选框组跟多个checkbox复选框组是转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。一样的。包括:value绑定。唯一不同的本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】是picked是一个单选值，所以是一个值【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，而不是数组。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】选择列表 select
单选列表
【本文首发于唐霜的博客】【未经授权禁止转载】原创内容，盗版必究。<div id="example-5" class="demo">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-5',
data: {
selected: null
}
})
多选列表（绑定到一个数组）
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】<div id="example-6" class="demo">
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
因为multiple要选择的值是一组，因未经授权，禁止复制转载。【本文受版权保护】此selected是一个数组。
【转载请注明来源】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】动态选项，用 v-for 渲染：
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
绑定 value
对于单选按钮，勾选框及选择列表选项， v【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。-model 绑定的 value 通常是【转载请注明来源】【作者：唐霜】静态字符串（对于勾选框是逻辑值）：
【原创内容，转载请注明出处】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
但是有时我们想绑定 value 到 Vu本文版权归作者所有，未经授权不得转载。【转载请注明来源】e 实例的一个动态属性上，这时可以用 v【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】-bind 实现，并且这个属性的值可以不本文作者：唐霜，转载请注明出处。【未经授权禁止转载】是字符串。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net当我们通过v-bind:value对va原创内容，盗版必究。本文作者：唐霜，转载请注明出处。lue进行绑定时，应该要注意，v-bin转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】d就是一个单向绑定操作，你有没有必要对这【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】个value进行单向绑定？你应该怎么绑定【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。呢？准备写表单之前，先想好你的表单逻辑再【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】开始写代码。在这之前，一定要先读一下我的这篇文章。
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net补充：<input v-model未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。=”something本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。221;>其实是<input著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】 v-bind:value=”本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。;something” v-【未经授权禁止转载】【本文受版权保护】on:input=”some【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。thing = $event.targe【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】t.value”>的语【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net法糖，也就是说v-model本身就已经包【未经授权禁止转载】本文作者：唐霜，转载请注明出处。含了v-bind，所以当v-bind和v【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】-model同时出现在一个input上时著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，这个v-bind会失效。
原创内容，盗版必究。【本文受版权保护】未经授权，禁止复制转载。
修饰符
.lazy
在默认情况下， v-model 在 in【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。put 事件中同步输入框的值与数据 (除【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net了 上述 IME 部分)，但你可以添加一本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。个修饰符 lazy ，从而转变为在 ch【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netange 事件中同步：
未经授权，禁止复制转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Numbe【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。r 类型（如果原值的转换结果为 NaN 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net则返回原值），可以添加一个修饰符 num本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ber 给 v-model 来处理输入值【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】：
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有，侵权必究】<input v-model.number="age" type="number">
这通常很有用，因为在 type=R【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。21;number” 时 H【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】TML 中输入的值也总是会返回字符串类型本文版权归作者所有，未经授权不得转载。【本文受版权保护】。
【作者：唐霜】【原创不易，请尊重版权】.trim
如果要自动过滤用户输入的首尾空格，可以添【版权所有，侵权必究】原创内容，盗版必究。加 trim 修饰符到 v-model 【原创内容，转载请注明出处】【原创不易，请尊重版权】上过滤输入：
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】本文作者：唐霜，转载请注明出处。<input v-model.trim="msg">
表单验证：vue-validator
这一章是插入的一章，在实际开发中，你不一著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】定需要vue-validator来验证你【原创不易，请尊重版权】【本文首发于唐霜的博客】的表单选项。但是本章可以给你一些启示，帮【原创内容，转载请注明出处】【原创不易，请尊重版权】助你设计自己的验证思路。vue-vali【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netdator也不是vue官方的插件，而是一【原创不易，请尊重版权】【未经授权禁止转载】个个人项目。不过插件作者比较早的开发了完本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】善的验证机制，所以插件也得到广泛使用。v【转载请注明来源】【本文受版权保护】ue-validator目前对vue2.未经授权，禁止复制转载。【版权所有，侵权必究】2+是不支持的，v3版本支持vue2.0【作者：唐霜】【原创不易，请尊重版权】。它也有自己的完整中文文档，你可以点击这里进入阅读。但是这个中文文档是v2.x的，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。v2.x版本不支持vue2.0，但是大部【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】分接口都是一样的，所以也可以看。但是因为本文作者：唐霜，转载请注明出处。【本文受版权保护】vue-validator对vue2.0【作者：唐霜】本文作者：唐霜，转载请注明出处。的支持还不稳定，所以，本书也更多的只介绍本文版权归作者所有，未经授权不得转载。【作者：唐霜】一些常用功能，以及验证思路。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。安装和开始
vue的插件都使用use方法来安装。我们【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】使用npm来安装vue-validato【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】r：
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】npm install --save vue-validator
安装好之后，在你的项目中使用它：
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。import Vue from 'vue'import VueValidator form 'vue-validator' Vue.use(VueValidator)
在这之后，你就可以使用vue-valid转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ator进行表单验证了。
【转载请注明来源】本文作者：唐霜，转载请注明出处。<div id="app">
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="['required']">
</div>
<div class="comment-field">
<label for="comment">comment:</label>
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
</div>
<div class="errors">
<p v-if="$validation1.username.required">Required your name.</p>
<p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
</div>
<input type="submit" value="send" v-if="$validation1.valid">
</form>
</validator>
</div>
验证结果会关联到验证器元素上。在上例中，【原创不易，请尊重版权】原创内容，盗版必究。验证结果保存在 $validation1未经授权，禁止复制转载。原创内容，盗版必究。 下，$validation1 是由 v【作者：唐霜】未经授权，禁止复制转载。alidator 元素的 name 属性【未经授权禁止转载】【原创内容，转载请注明出处】值加 $ 前缀组成。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。验证结果结构
验证结果（也就是上面的$validati【本文首发于唐霜的博客】【原创内容，转载请注明出处】on1）有如下结构:
原创内容，盗版必究。【转载请注明来源】{
// top-level validation properties
valid: true,
invalid: false,
touched: false,
undefined: true,
dirty: false,
pristine: true,
modified: false,
errors: [{
field: 'field1', validator: 'required', message: 'required field1'
},
...
{
field: 'fieldX', validator: 'customValidator', message: 'invalid fieldX'
}],
// field1 validation
field1: {
required: false, // build-in validator, return `false` or `true`
email: true, // custom validator
url: 'invalid url format', // custom validator, if specify the error message in validation rule, set it
...
customValidator1: false, // custom validator
// field validation properties
valid: false,
invalid: true,
touched: false,
undefined: true,
dirty: false,
pristine: true,
modified: false,
errors: [{
validator: 'required', message: 'required field1'
}]
},
...
// fieldX validation
fieldX: {
min: false, // validator
...
customValidator: true,
// fieldX validation properties
valid: false,
invalid: true,
touched: true,
undefined: false,
dirty: true,
pristine: false,
modified: true,
errors: [{
validator: 'customValidator', message: 'invalid fieldX'
}]
},
}
全局结果可以直接从验证结果中获取到，字段未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。验证结果保存在以字段名命名的键下。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。【转载请注明来源】【未经授权禁止转载】字段验证结果
- valid: 字段有效时返回 true,【版权所有】唐霜 www.tangshuang.net【作者：唐霜】否则返回 false。 【作者：唐霜】未经授权，禁止复制转载。
- invalid: valid 的逆. 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- touched: 字段获得过焦点时返回 【本文首发于唐霜的博客】【本文首发于唐霜的博客】true,否则返回 false。 【本文受版权保护】未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。
- untouched: touched 的【转载请注明来源】原创内容，盗版必究。逆. 【本文首发于唐霜的博客】未经授权，禁止复制转载。【原创不易，请尊重版权】
- modified: 字段值与初始值不同时著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】返回 true,否则返回 false。 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
- dirty: 字段值改变过至少一次时返回转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 true,否则返回 false。 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
- pristine: dirty 的逆. 【本文受版权保护】【转载请注明来源】【转载请注明来源】【原创不易，请尊重版权】
- errors: 字段无效时返回存有错误信【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net息的数据，否则返回 undefined。 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net
全局结果
- valid: 所有字段都有效时返回 tr【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ue,否则返回 false。 【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【本文首发于唐霜的博客】
- invalid: 只要存在无效字段就返回未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net true,否则返回 false。 【本文受版权保护】【转载请注明来源】
- touched: 只要存在获得过焦点的字【转载请注明来源】未经授权，禁止复制转载。段就返回 true,否则返回 false转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。。 【原创不易，请尊重版权】【原创不易，请尊重版权】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】
- untouched: touched 的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。逆。 【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【作者：唐霜】
- modified: 只要存在与初始值不同原创内容，盗版必究。转载请注明出处：www.tangshuang.net的字段就返回 true,否则返回 fal【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。se。 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】
- dirty: 只要存在值改变过至少一次的【原创不易，请尊重版权】【转载请注明来源】字段就返回 true,否则返回 fals【转载请注明来源】著作权归作者所有，禁止商业用途转载。e。 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
- pristine: 所有字段都没有发生过本文作者：唐霜，转载请注明出处。【转载请注明来源】变化时返回 true,否则返回 fals未经授权，禁止复制转载。【转载请注明来源】e。 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- errors: 有无效字段时返回所有无效【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。字段的错误信息，否则返回 undefin【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.neted。 【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
验证器语法
v-validate 指令用法如下:
【未经授权禁止转载】【转载请注明来源】【本文受版权保护】【原创内容，转载请注明出处】v-validate[:field]="array literal | object literal | binding"
字段
2.0-alpha以前的版本中，验证器是本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】依赖于 v-model 的。从2.0-a本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】lpha版本开始，v-model 是可选未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】的。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net~v1.4.4:
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】未经授权，禁止复制转载。<form novalidate>
<input type="text" v-model="comment" v-validate="minLength: 16, maxLength: 128">
<div>
<span v-show="validation.comment.minLength">Your comment is too short.</span>
<span v-show="validation.comment.maxLength">Your comment is too long.</span>
</div>
<input type="submit" value="send" v-if="valid">
</form>
v2.0-alpha后:
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net<validator name="validation"> <form novalidate> <input type="text" v-validate:comment="{ minlength: 16, maxlength: 128 }"> <div> <span v-show="$validation.comment.minlength">Your comment is too short.</span> <span v-show="$validation.comment.maxlength">Your comment is too long.</span> </div> <input type="submit" value="send" v-if="valid"> </form> </validator>
上面的蓝色comment使得$valid著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ation多了一个comment属性，也未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net就是红色的comment。蓝色的大括号里【作者：唐霜】转载请注明出处：www.tangshuang.net面是规则，其中minlength的规则是本文版权归作者所有，未经授权不得转载。【本文受版权保护】16，而当你输入内容之后，验证结果怎么样【本文受版权保护】原创内容，盗版必究。呢？$validation.commen原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。t.minlength就可以得到验证的结未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。果。
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。Caml-case 属性
同 Vue.js一样, v-valida未经授权，禁止复制转载。【作者：唐霜】te 指令中的字段名可以使用 kebab著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。-case:
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。<validator name="validation">
<form novalidate>
<input type="text" v-validate:user-name="{ minlength: 16 }">
<div>
<span v-if="$validation.userName.minlength">Your user name is too short.</span>
</div>
</form>
</validator>
属性
可以通过 field 属性来指定字段名。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】这在动态定义包含验证功能的表单时有用：
【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。注意: 当使用 field 属性指定字段【转载请注明来源】转载请注明出处：www.tangshuang.net名时不需要在 v-validate 指令【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】中再次指定。
【转载请注明来源】原创内容，盗版必究。
<div id="app">
<validator name="validation">
<form novalidate>
<p class="validate-field" v-for="field in fields">
<label :for="field.id">{{field.label}}</label>
<input type="text" :id="field.id" :placeholder="field.placeholder" :field="field.name" v-validate="field.validate">
</p>
<pre>{{ $validation | json }}</pre>
</form>
</validator>
</div>
new Vue({
el: '#app',
data: {
fields: [{
id: 'username',
label: 'username',
name: 'username',
placeholder: 'input your username',
validate: { required: true, maxlength: 16 }
},
{
id: 'message',
label: 'message',
name: 'message',
placeholder: 'input your message',
validate: { required: true, minlength: 8 }
}]
}
})
数组
下例中使用了数组型字面量：
【作者：唐霜】【原创不易，请尊重版权】未经授权，禁止复制转载。<validator name="validation">
<form novalidate>
Zip: <input type="text" v-validate:zip="['required']">
<br />
<div>
<span v-if="$validation.zip.required">Zip code is required.</span>
</div>
</form>
</validator>
因为 required 验证器不要额外的转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net参数，这样写更简洁。
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】对象
下例中使用了对象型字面量：
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。【版权所有，侵权必究】<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="{ required: true, minlength: 3, maxlength: 16 }"><br />
<div>
<span v-if="$validation.id.required">ID is required</span>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
使用对象型字面量允许你为验证器指定额外的【作者：唐霜】【原创内容，转载请注明出处】参数。对于 required，因为它不需【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net要参数，如上例中随便指定一个值即可。
【版权所有，侵权必究】【未经授权禁止转载】【原创内容，转载请注明出处】【本文首发于唐霜的博客】或者可以像下例一样使用严苛模式对象：
【转载请注明来源】【作者：唐霜】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="{ minlength: { rule: 3 }, maxlength: { rule: 16 } }"><br />
<div>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
实例中绑定
下例中展现了动态绑定：
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【原创不易，请尊重版权】new Vue({
el: '#app',
data: {
rules: {
minlength: 3,
maxlength: 16
}
}
})
<div id="app">
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="rules"><br />
<div>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
</div>
除数据属性外，也可以使用计算属性或事例方【未经授权禁止转载】【本文首发于唐霜的博客】法来指定验证规则。
【未经授权禁止转载】【未经授权禁止转载】Terminal 指令问题
请注意，当你想要使用如 v-if 和 v【版权所有】唐霜 www.tangshuang.net【本文受版权保护】-for 这些 terminal 指令时【转载请注明来源】【版权所有，侵权必究】，应把可验证的目标元素包裹在 <t【原创内容，转载请注明出处】【版权所有，侵权必究】emplate> 之类的不可见标签本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。内。因为 v-validate 指令不能【未经授权禁止转载】【本文受版权保护】与这些 terminal 指令使用在同一【本文受版权保护】【关注微信公众号：wwwtangshuangnet】元素上。
本文版权归作者所有，未经授权不得转载。
下例中使用了 <div> 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】标签：
new Vue({
el: '#app',
data: {
enable: true
}
})
<div id="app">
<validator name="validation">
<form novalidate>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" @valid="this.enable = true" @invalid="this.enable = false"
v-validate:username="['required']">
</div>
<div v-if="enable" class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true }, minlength: { rule: 8 }
}"/>
<div>
</form>
</validator>
</div>
内置验证规则
vue-validator内置了一些验证【原创不易，请尊重版权】未经授权，禁止复制转载。规则，也就是上面v-validate:后【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。面的表达式内容中的东西。这些内置规则包括【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】：
【原创内容，转载请注明出处】【本文受版权保护】required
这个字段必须有值。举个例子：
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。<input v-validate:fieldx="{required: true}">
那么当你在提交表单时，如果这个input未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net没有输入值，那么$validation.本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】fieldx.required就会返回f转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】alse。
【版权所有，侵权必究】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。pattern
正则匹配校验器，校验元素值是否跟patt原创内容，盗版必究。【未经授权禁止转载】ern所表示的正则表达式匹配。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netminlength
最小长度，如果元素的值的最小长度小于mi著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】nlength规定的值，就会返回fals【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。e。
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文受版权保护】maxlength
最大长度，如果元素中输入的值大于这个设定【本文受版权保护】【本文受版权保护】值，就会返回false。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。min
最小值校验器，当你输入的值比这个值还小（著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】<=）的时候，返回false。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【本文受版权保护】未经授权，禁止复制转载。max
最大值校验器，当你输入的值比这个值还大(转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net>=)，那返回false。
【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【作者：唐霜】结合 v-model
可以验证通过 v-model 指令进行数【转载请注明来源】【关注微信公众号：wwwtangshuangnet】据绑定的字段：
未经授权，禁止复制转载。【作者：唐霜】【作者：唐霜】【原创内容，转载请注明出处】<div id="app">
<validator name="validation1">
<form novalidate>
message: <input type="text" v-model="msg" v-validate:message="{ required: true, minlength: 8 }"><br />
<div>
<p v-if="$validation1.message.required">Required your message.</p>
<p v-if="$validation1.message.minlength">Too short message.</p>
</div>
</form>
</validator>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: ''
}
})
setTimeout(function () {
vm.msg = 'hello world!!'
}, 2000)
重置验证结果
可以通过 Vue 实例的 $resetV【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】alidation() 方法重置验证结果【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，该方法是由验证器安装时动态定义的。使用【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】方法见下例：
【本文受版权保护】【本文首发于唐霜的博客】【未经授权禁止转载】转载请注明出处：www.tangshuang.net<div id="app">
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="['required']">
</div>
<div class="comment-field">
<label for="comment">comment:</label>
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
</div>
<div class="errors">
<p v-if="$validation1.username.required">Required your name.</p>
<p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
</div>
<input type="submit" value="send" v-if="$validation1.valid">
<button type="button" @click="onReset">Reset Validation</button>
</form>
<pre>{{ $validation1 | json }}</pre>
</validator>
</div>
new Vue({
el: '#app',
methods: {
onReset: function () {
this.$resetValidation()
}
}
})
可验证的表单元素
复选框
支持复选框验证:
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】<div id="app">
<validator name="validation1">
<form novalidate>
<h1>Survey</h1>
<fieldset>
<legend>Which do you like fruit ?</legend>
<input id="apple" type="checkbox" value="apple" v-validate:fruits="{
required: { rule: true, message: requiredErrorMsg },
minlength: { rule: 1, message: minlengthErrorMsg },
maxlength: { rule: 2, message: maxlengthErrorMsg }
}">
<label for="apple">Apple</label>
<input id="orange" type="checkbox" value="orange" v-validate:fruits>
<label for="orange">Orage</label>
<input id="grape" type="checkbox" value="grape" v-validate:fruits>
<label for="grape">Grape</label>
<input id="banana" type="checkbox" value="banana" v-validate:fruits>
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="msg in $validation1.fruits.errors">
<p>{{msg.message}}</p>
</li>
</ul>
</fieldset>
</form>
</validator>
</div>
new Vue({
el: '#app',
computed: {
requiredErrorMsg: function () {
return 'Required fruit !!'
},
minlengthErrorMsg: function () {
return 'Please chose at least 1 fruit !!'
},
maxlengthErrorMsg: function () {
return 'Please chose at most 2 fruits !!'
}
}
})
单选按钮
支持单选按钮验证:
【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】<div id="app">
<validator name="validation1">
<form novalidate>
<h1>Survey</h1>
<fieldset>
<legend>Which do you like fruit ?</legend>
<input id="apple" type="radio" name="fruit" value="apple" v-validate:fruits="{
required: { rule: true, message: requiredErrorMsg }
}">
<label for="apple">Apple</label>
<input id="orange" type="radio" name="fruit" value="orange" v-validate:fruits>
<label for="orange">Orage</label>
<input id="grape" type="radio" name="fruit" value="grape" v-validate:fruits>
<label for="grape">Grape</label>
<input id="banana" type="radio" name="fruit" value="banana" v-validate:fruits>
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="msg in $validation1.fruits.errors">
<p>{{msg.message}}</p>
</li>
</ul>
</fieldset>
</form>
</validator>
</div>
new Vue({
el: '#app',
computed: {
requiredErrorMsg: function () {
return 'Required fruit !!'
}
}
})
下拉列表
支持下拉列表验证:
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【作者：唐霜】<div id="app">
<validator name="validation1">
<form novalidate>
<select v-validate:lang="{ required: true }">
<option value="">----- select your favorite programming language -----</option>
<option value="javascript">JavaScript</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
<option value="lua">Lua</option>
<option value="go">Go</option>
<option value="rust">Rust</option>
<option value="elixir">Elixir</option>
<option value="c">C</option>
<option value="none">Not a nothing here</option>
</select>
<div class="errors">
<p v-if="$validation1.lang.required">Required !!</p>
</div>
</form>
</validator>
</div>
new Vue({ el: '#app' })
验证结果类
v2.1+的功能。有时，我们需要为不同验本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】证结果显示不同的样式以达到更好的交互效果【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。。vue-validator 在验证完表【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net单元素后会自动插入相应的类来指示验证结果本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，如下例所示：
【原创内容，转载请注明出处】原创内容，盗版必究。<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
上例会输出如下 HTML：
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有，侵权必究】<input id="username" type="text" class="invalid untouched pristine">
验证结果类列表
| 验证类型 | 类名 (默认) | 描述 |
|---|---|---|
| valid | valid | 当目标元素变为 valid 时 |
| invalid | invalid | 当目标元素变为 invalid 时 |
| touched | touched | 当 touched 目标元素时 |
| untouched | untouched | 当目标元素还未被 touched 时 |
| pristine | pristine | 当目标元素还未 dirty 时 |
| dirty | dirty | 当目标元素 dirty 时 |
| modified | modified | 当目标元素 modified 时 |
使用自定义验证结果类
当默认的验证结果类名不方便使用时，你可以【作者：唐霜】【转载请注明来源】使用 classes 属性自定义相应的类本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】名，如下所示：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。<validator name="validation1" :classes="{ touched: 'touched-validator', dirty: 'dirty-validator' }">
<label for="username">username:</label>
<input id="username" type="text" :classes="{ valid: 'valid-username', invalid: 'invalid-username' }"
v-validate:username="{ required: { rule: true, message: 'required you name !!' } }"
>
</validator>
classes 属性需要使用在 v-va【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。lidate 或 validator 指【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】令上，值必须为对象。
【原创不易，请尊重版权】未经授权，禁止复制转载。在非目标元素上使用验证结果类
通常情况下验证结果类会插入到定义 v-v转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。alidate 指令的元素上。然而有时候【本文受版权保护】未经授权，禁止复制转载。我们需要把这些类插入到其他元素上。这时我【本文受版权保护】【版权所有】唐霜 www.tangshuang.net们可以使用 v-validate-cla【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ss 来实现，如下所示：
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【转载请注明来源】<validator name="validation1" :classes="{ touched: 'touched-validator', dirty: 'dirty-validator' }">
<div v-validate-class class="username">
<label for="username">username:</label>
<input id="username" type="text" :classes="{ valid: 'valid-username', invalid: 'invalid-username' }"
v-validate:username="{ required: { rule: true, message: 'required you name !!' }
}">
</div>
</validator>
上例会输出如下 HTML：
【转载请注明来源】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<div class="username invalid-username untouched pristine"> <label for="username">username:</label> <input id="username" type="text"> </div>
分组
支持把验证字段分组：
【未经授权禁止转载】原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。<validator name="validation1" :groups="['user', 'password']">
username: <input type="text" group="user" v-validate:username="['required']"><br />
password: <input type="password" group="password" v-validate:password1="{ minlength: 8, required: true }"/><br />
password (confirm): <input type="password" group="password" v-validate:password2="{ minlength: 8, required: true }"/>
<div class="user">
<span v-if="$validation1.user.invalid">Invalid yourname !!</span>
</div>
<div class="password">
<span v-if="$validation1.password.invalid">Invalid password input !!</span>
</div>
</validator>
错误消息
错误消息可以直接在验证规则中指定，同时可【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。以在 v-show 和 v-if 中使用【未经授权禁止转载】【原创内容，转载请注明出处】错误消息：
【原创不易，请尊重版权】【原创内容，转载请注明出处】<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
<span v-if="$validation1.username.required">{{ $validation1.username.required }}</span>
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}">
<span v-if="$validation1.password.required">{{ $validation1.password.required }}</span>
<span v-if="$validation1.password.minlength">{{ $validation1.password.minlength }}</span>
</div>
</validator>
也可以在 v-for 指令中使用错误消息著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。：
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【未经授权禁止转载】<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}">
</div>
<div class="errors">
<ul>
<li v-for="error in $validation1.errors">
<p>{{error.field}}: {{error.message}}</p>
</li>
</ul>
</div>
</validator>
使用数据属性或计算属性来指定验证规则比使【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】用内联验证规则更简洁。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。错误消息枚举组件
在上例中，我们使用 v-for 指令来枚【作者：唐霜】本文版权归作者所有，未经授权不得转载。举验证器的 errors。但是，我们可以原创内容，盗版必究。【未经授权禁止转载】让它更简单。本验证器提供了非常易用的 v【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】alidator-errors 组件来枚【版权所有，侵权必究】未经授权，禁止复制转载。举错误消息，如下例所示：
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}"/>
</div>
<div class="errors">
<validator-errors :validation="$validation1"></validator-errors>
</div>
</validator>
上例的代码渲染出的界面如下：
【作者：唐霜】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。<div class="username">
<label for="username">username:</label>
<input id="username" type="text"></div><div class="password">
<label for="password">password:</label>
<input id="password" type="password"></div><div class="errors">
<div>
<p>password: your password short too !!</p>
</div>
<div>
<p>password: required you password !!</p>
</div>
<div>
<p>username: required you name !!</p>
</div>
</div>
如果你不喜欢 validator-err转载请注明出处：www.tangshuang.net【转载请注明来源】ors 默认的错误消息格式，可以指定自定本文作者：唐霜，转载请注明出处。【本文受版权保护】义的组件或 partial 作为消息模版【本文受版权保护】转载请注明出处：www.tangshuang.net。
【本文受版权保护】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】自定义组件模版
下例中展示了使用组件作为模版：
【原创不易，请尊重版权】【作者：唐霜】未经授权，禁止复制转载。<div id="app">
<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}"/>
</div>
<div class="errors">
<validator-errors :component="'custom-error'" :validation="$validation1">
</validator-errors>
</div>
</validator>
</div>
// register the your component with Vue.component
Vue.component('custom-error', {
props: ['field', 'validator', 'message'],
template: '<p class="error-{{field}}-{{validator}}">{{message}}</p>'
})
new Vue({ el: '#app' })
自定义Partial模版
下例中展示了使用 partial 作为模本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】版：
【版权所有，侵权必究】【本文首发于唐霜的博客】<div id="app">
<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}"/>
</div>
<div class="errors">
<validator-errors partial="myErrorTemplate" :validation="$validation1">
</validator-errors>
</div>
</validator>
</div>
// register custom error template
Vue.partial('myErrorTemplate', '<p>{{field}}: {{validator}}: {{message}}</p>')
new Vue({ el: '#app' })
自定义指定错误消息
有时候你只需要输出部分错误消息，此时你可【原创内容，转载请注明出处】原创内容，盗版必究。以通过 group 或 field 属性【本文受版权保护】本文版权归作者所有，未经授权不得转载。来指定这部分验证结果。
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】- group: 指定组的错误消息 (例如 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。$validation.group1.e【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。rrors) 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
- field: 指定字段的错误消息 (例如未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net $validation.field1.未经授权，禁止复制转载。【转载请注明来源】errors) 【本文首发于唐霜的博客】【原创内容，转载请注明出处】【转载请注明来源】
下例中展示了 group 属性的使用：
【作者：唐霜】【本文首发于唐霜的博客】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。<div id="app">
<validator :groups="['profile', 'password']" name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" group="profile" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="url">
<label for="url">url:</label>
<input id="url" type="text" group="profile" v-validate:url="{
required: { rule: true, message: 'required you name !!' },
url: { rule: true, message: 'invalid url format' }
}">
</div>
<div class="old">
<label for="old">old password:</label>
<input id="old" type="password" group="password" v-validate:old="{
required: { rule: true, message: 'required you old password !!' },
minlength: { rule: 8, message: 'your old password short too !!' }
}"/>
</div>
<div class="new">
<label for="new">new password:</label>
<input id="new" type="password" group="password" v-validate:new="{
required: { rule: true, message: 'required you new password !!' },
minlength: { rule: 8, message: 'your new password short too !!' }
}"/>
</div>
<div class="confirm">
<label for="confirm">confirm password:</label>
<input id="confirm" type="password" group="password" v-validate:confirm="{
required: { rule: true, message: 'required you confirm password !!' },
minlength: { rule: 8, message: 'your confirm password short too !!' }
}"/>
</div>
<div class="errors">
<validator-errors group="profile" :validation="$validation1">
</validator-errors>
</div>
</validator>
</div>
Vue.validator('url', function (val) {
return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
})
new Vue({ el: '#app' })
事件
可以使用 vue 中的事件绑定方法绑定验【本文首发于唐霜的博客】【版权所有，侵权必究】证器产生的事件。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】字段验证事件
对于每一个字段，你都可以监听如下事件：
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】- valid: 当字段验证结果变为有效时触【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】发 【未经授权禁止转载】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net
- invalid: 当字段验证结果变为无效【转载请注明来源】【版权所有，侵权必究】时触发 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net
- touched: 当字段失去焦点时触发 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】
- dirty: 当字段值首次变化时触发 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net
- modified: 当字段值与初始值不同【转载请注明来源】【本文首发于唐霜的博客】时或变回初始值时触发 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
<div id="app">
<validator name="validation1">
<div class="comment-field">
<label for="comment">comment:</label>
<input type="text" @valid="onValid" @invalid="onInvalid" @touched="onTouched" @dirty="onDirty"
@modified="onModified"
v-validate:comment="['required']"/>
</div>
<div>
<p>{{occuredValid}}</p>
<p>{{occuredInvalid}}</p>
<p>{{occuredTouched}}</p>
<p>{{occuredDirty}}</p>
<p>{{occuredModified}}</p>
</div>
</validator>
</div>
new Vue({
el: '#app',
data: {
occuredValid: '',
occuredInvalid: '',
occuredTouched: '',
occuredDirty: '',
occuredModified: ''
},
methods: {
onValid: function () {
this.occuredValid = 'occured valid event'
this.occuredInvalid = ''
},
onInvalid: function () {
this.occuredInvalid = 'occured invalid event'
this.occuredValid = ''
},
onTouched: function () {
this.occuredTouched = 'occured touched event'
},
onDirty: function () {
this.occuredDirty = 'occured dirty event'
},
onModified: function (e) {
this.occuredModified = 'occured modified event: ' + e.modified
}
}
})
顶级验证事件
可以监听如下顶级验证结果的变化事件：
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。- valid: 当全局验证结果变为有效时触【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】发 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。
- invalid: 当全局验证结果变为无效本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。时触发 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】
- touched: 当任意验证字段失去焦点【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。时触发 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- dirty: 当任意字段首次改变时触发 【原创内容，转载请注明出处】【作者：唐霜】未经授权，禁止复制转载。【作者：唐霜】
- modified: 当任意字段首次改变时【未经授权禁止转载】转载请注明出处：www.tangshuang.net或所有字段恢复初始值时触发 原创内容，盗版必究。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
<div id="app">
<validator name="validation1" @valid="onValid" @invalid="onInvalid"
@touched="onTouched"
@dirty="onDirty"
@modified="onModified">
<div class="comment-field">
<label for="username">username:</label>
<input type="text" v-validate:username="['required']"/>
</div>
<div class="password-field">
<label for="password">password:</label>
<input type="password" v-validate:password="{ required: true, minlength: 8 }"/>
</div>
<div>
<p>{{occuredValid}}</p>
<p>{{occuredInvalid}}</p>
<p>{{occuredTouched}}</p>
<p>{{occuredDirty}}</p>
<p>{{occuredModified}}</p>
</div>
</validator>
</div>
new Vue({
el: '#app',
data: {
occuredValid: '',
occuredInvalid: '',
occuredTouched: '',
occuredDirty: '',
occuredModified: ''
},
methods: {
onValid: function () {
this.occuredValid = 'occured valid event'
this.occuredInvalid = ''
},
onInvalid: function () {
this.occuredInvalid = 'occured invalid event'
this.occuredValid = ''
},
onTouched: function () {
this.occuredTouched = 'occured touched event'
},
onDirty: function () {
this.occuredDirty = 'occured dirty event'
},
onModified: function (modified) {
this.occuredModified = 'occured modified event: ' + modified
}
}
})
手动设置错误消息
有时候你需要手动设置验证错误的消息，如从原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net服务器端得到的验证错误消息。这时你可以通【作者：唐霜】【版权所有】唐霜 www.tangshuang.net过 $setValidationErro著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】rs 方法设置错误消息，如下例：
【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。<div id="app">
<validator name="validation">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-model="username" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="old">
<label for="old">old password:</label>
<input id="old" type="password" v-model="passowrd.old" v-validate:old="{
required: { rule: true, message: 'required you old password !!' }
}"/>
</div>
<div class="new">
<label for="new">new password:</label>
<input id="new" type="password" v-model="password.new" v-validate:new="{
required: { rule: true, message: 'required you new password !!' },
minlength: { rule: 8, message: 'your new password short too !!' }
}"/>
</div>
<div class="confirm">
<label for="confirm">confirm password:</label>
<input id="confirm" type="password" v-validate:confirm="{
required: { rule: true, message: 'required you confirm password !!' },
confirm: { rule: passowd.new, message: 'your confirm password incorrect !!' }
}"/>
</div>
<div class="errors">
<validator-errors :validation="$validation"></validator-errors>
</div>
<button type="button" v-if="$validation.valid" @click.prevent="onSubmit">update</button>
</validator>
</div>
new Vue({
el: '#app',
data: {
id: 1,
username: '',
password: {
old: '',
new: ''
}
},
validators: {
confirm: function (val, target) {
return val === target
}
},
methods: {
onSubmit: function () {
var self = this
var resource = this.$resource('/user/:id')
resource.save({ id: this.id }, {
username: this.username,
passowrd: this.new
}, function (data, stat, req) {
// something handle success ...
// ...
}).error(function (data, stat, req) {
// handle server error
self.$setValidationErrors([
{ field: data.field, message: data.message }
])
})
}
}
})
延迟初始化
如果在 validator 元素上设置了【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。 lazy 属性，那么验证器直到 $ac本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】tivateValidator() 被调未经授权，禁止复制转载。原创内容，盗版必究。用时才会进行初始化。这在待验证的数据需要【本文受版权保护】著作权归作者所有，禁止商业用途转载。异步加载时有用，避免了在得到数据前出现错本文作者：唐霜，转载请注明出处。【未经授权禁止转载】误提示。
【转载请注明来源】原创内容，盗版必究。下例中在得到评论内容后验证器才开始工作；本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】如果不设置 lazy 属性，在得到评论内【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】容前会显示错误提示。
【原创内容，转载请注明出处】【本文受版权保护】本文版权归作者所有，未经授权不得转载。<!-- comment component -->
<div>
<h1>Preview</h1>
<p>{{comment}}</p>
<validator lazy name="validation1">
<input type="text" :value="comment" v-validate:comment="{ required: true, maxlength: 256 }"/>
<span v-if="$validation1.comment.required">Required your comment</span>
<span v-if="$validation1.comment.maxlength">Too long comment !!</span>
<button type="button" value="save" @click="onSave" v-if="valid">
</validator>
</div>
Vue.component('comment', {
props: {
id: Number,
},
data: function () {
return { comment: '' }
},
activate: function (done) {
var resource = this.$resource('/comments/:id');
resource.get({ id: this.id }, function (comment, stat, req) {
this.comment = comment.body
// activate validator
this.$activateValidator()
done()
}.bind(this)).error(function (data, stat, req) {
// handle error ...
done()
})
},
methods: {
onSave: function () {
var resource = this.$resource('/comments/:id');
resource.save({ id: this.id }, { body: this.comment }, function (data, stat, req) {
// handle success
}).error(function (data, sta, req) {
// handle error
})
}
}
})
自定义验证器
全局注册
可以使用 Vue.validator 方【作者：唐霜】本文版权归作者所有，未经授权不得转载。法注册自定义验证器。
【版权所有，侵权必究】未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】提示: Vue.validator as本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。set 继承自 Vue.js 的 ass【未经授权禁止转载】【未经授权禁止转载】et 管理系统.
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】
通过下例中的 email 自定义验证器详本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】细了解 Vue.validator 的使【转载请注明来源】原创内容，盗版必究。用方法：
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。// Register email validator function.
Vue.validator('email', function (val) {
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
})
new Vue({
el: '#app'
data: {
email: ''
}
})
<div id="app">
<validator name="validation1">
address: <input type="text" v-validate:address="['email']"><br />
<div>
<p v-show="$validation1.address.email">Invalid your mail address format.</p>
</div>
<validator>
</div>
局部注册
可以通过组件的 validators 选本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】项注册只能在组件内使用的自定义验证器。
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】自定义验证器是通过在组件的 valida转载请注明出处：www.tangshuang.net【未经授权禁止转载】tors 下定义验证通过返回真不通过返回【本文受版权保护】原创内容，盗版必究。假的回调函数来实现。
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】下例中注册了 numeric 和 url【本文受版权保护】原创内容，盗版必究。 两个自定义验证器：
【版权所有，侵权必究】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netnew Vue({
el: '#app',
validators: { // `numeric` and `url` custom validator is local registration
numeric: function (val/*,rule*/) {
return /^[-+]?[0-9]+$/.test(val)
},
url: function (val) {
return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
}
},
data: {
email: ''
}
})
<div id="app">
<validator name="validation1">
username: <input type="text" v-validate:username="['required']"><br />
email: <input type="text" v-validate:address="['email']"><br />
age: <input type="text" v-validate:age="['numeric']"><br />
site: <input type="text" v-validate:site="['url']"><br />
<div class="errors">
<p v-if="$validation1.username.required">required username</p>
<p v-if="$validation1.address.email">invalid email address</p>
<p v-if="$validation1.age.numeric">invalid age value</p>
<p v-if="$validation1.site.url">invalid site uril format</p>
</div>
<validator>
</div>
错误消息
可以为自定义验证器指定默认的错误消息：
著作权归作者所有，禁止商业用途转载。【作者：唐霜】// `email` custom validator global registration
Vue.validator('email', {
message: 'invalid email address', // error message with plain string
check: function (val) { // define validator
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
}
})
// build-in `required` validator customization
Vue.validator('required', {
message: function (field) { // error message with function
return 'required "' + field + '" field'
},
check: Vue.validator('required') // re-use validator logic
})
new Vue({
el: '#app',
validators: {
numeric: { // `numeric` custom validator local registration
message: 'invalid numeric value',
check: function (val) {
return /^[-+]?[0-9]+$/.test(val)
}
},
url: { // `url` custom validator local registration
message: function (field) {
return 'invalid "' + field + '" url format field'
},
check: function (val) {
return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
}
}
},
data: {
email: ''
}
})
<div id="app">
<validator name="validation1">
username: <input type="text" v-validate:username="['required']"><br />
email: <input type="text" v-validate:address="['email']"><br />
age: <input type="text" v-validate:age="['numeric']"><br />
site: <input type="text" v-validate:site="['url']"><br />
<div class="errors">
<validator-errors :validation="$validation1"></validator-errors>
</div>
<validator>
</div>
自定义验证时机
默认情况下，vue-validator 【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】会根据 validator 和 v-va【本文首发于唐霜的博客】原创内容，盗版必究。lidate 指令自动进行验证。然而有时【本文受版权保护】【未经授权禁止转载】候我们需要关闭自动验证，在有需要时手动触转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。发验证。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】initial
当 vue-validator 完成初始【转载请注明来源】原创内容，盗版必究。编译后，会根据每一条 v-validat未经授权，禁止复制转载。【转载请注明来源】e 指令自动进行验证。如果你不需要自动验原创内容，盗版必究。【未经授权禁止转载】证，可以通过 initial 属性或 v【本文受版权保护】原创内容，盗版必究。-validate 验证规则来关闭自动验【原创不易，请尊重版权】未经授权，禁止复制转载。证，如下所示：
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】<div id="app">
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<!-- 'inital' attribute is applied the all validators of target element (e.g. required, exist) -->
<input id="username" type="text" initial="off" v-validate:username="['required', 'exist']">
</div>
<div class="password-field">
<label for="password">password:</label>
<!-- 'initial' optional is applied with `v-validate` validator (e.g. required only) -->
<input id="password" type="password" v-validate:passowrd="{ required: { rule: true, initial: 'off' }, minlength: 8 }">
</div>
<input type="submit" value="send" v-if="$validation1.valid">
</form>
</validator>
</div>
这在使用服务器端验证等异步验证方式时有用【本文首发于唐霜的博客】未经授权，禁止复制转载。，具体可见后文例子。
【本文受版权保护】转载请注明出处：www.tangshuang.net【未经授权禁止转载】detect-blur and detect-change
vue-validator 会在检测到表未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。单元素(input, checkbox,【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】 select 等)上的 DOM 事件(本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。input, blur, change)【版权所有，侵权必究】【未经授权禁止转载】时自动验证。此时，可以使用 detect【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】-change 和 detect-blu【作者：唐霜】本文版权归作者所有，未经授权不得转载。r 属性：
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。<div id="app">
<validator name="validation">
<form novalidate @submit="onSubmit">
<h1>user registration</h1>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" detect-change="off" detect-blur="off" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}" />
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-model="password" detect-change="off" detect-blur="off" v-validate:password="{
required: { rule: true, message: 'required you new password !!' },
minlength: { rule: 8, message: 'your new password short too !!' }
}" />
</div>
<div class="confirm">
<label for="confirm">confirm password:</label>
<input id="confirm" type="password" detect-change="off" detect-blur="off" v-validate:confirm="{
required: { rule: true, message: 'required you confirm password !!' },
confirm: { rule: password, message: 'your confirm password incorrect !!' }
}" />
</div>
<div class="errors" v-if="$validation.touched">
<validator-errors :validation="$validation"></validator-errors>
</div>
<input type="submit" value="register" />
</form>
</validator>
</div>
new Vue({
el: '#app',
data: {
password: ''
},
validators: {
confirm: function (val, target) {
return val === target
}
},
methods: {
onSubmit: function (e) {
// validate manually
var self = this
this.$validate(true, function () {
if (self.$validation.invalid) {
e.preventDefault()
}
})
}
}
})
异步验证
当在需要进行服务器端验证，可以使用异步验【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】证，如下例：
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】<template>
<validator name="validation">
<form novalidate>
<h1>user registration</h1>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" detect-change="off" v-validate:username="{
required: { rule: true, message: 'required your name !!' },
exist: { rule: true, initial: 'off' }
}" />
<span v-if="checking">checking ...</span>
</div>
<div class="errors">
<validator-errors :validation="$validation"></validator-errors>
</div>
<input type="submit" value="register" :disabled="!$validation.valid" />
</form>
</validator>
</template>
function copyOwnFrom(target, source) {
Object.getOwnPropertyNames(source).forEach(function (propName) {
Object.defineProperty(target, propName, Object.getOwnPropertyDescriptor(source, propName))
})
return target
}
function ValidationError() {
copyOwnFrom(this, Error.apply(null, arguments))
}
ValidationError.prototype = Object.create(Error.prototype)
ValidationError.prototype.constructor = ValidationError
// exmpale with ES2015
export default {
data () {
return { checking: false }
},
validators: {
exist (val) {
this.vm.checking = true // spinner on
return fetch('/validations/exist', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: val
})
}).then((res) => {
this.vm.checking = false // spinner off
return res.json()
}).then((json) => {
return Object.keys(json).length > 0 ? Promise.reject(new ValidationError(json.message)) : Promise.resolve()
}).catch((error) => {
if (error instanceof ValidationError) {
return Promise.reject(error.message)
} else {
return Promise.reject('unexpected error')
}
})
}
}
}
异步验证接口
在异步验证时，可以使用如下两类接口：
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】1. 函数
需要实现一个返回签名为 function【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。 (resolve, reject) 如著作权归作者所有，禁止商业用途转载。【转载请注明来源】同 promise 一样的函数的自定义验未经授权，禁止复制转载。原创内容，盗版必究。证器。函数参数解释如下：
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net- 验证结果
- 成功时: resolve 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【本文受版权保护】著作权归作者所有，禁止商业用途转载。
- 失败时: reject 【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net
2. promise
需要实现一个返回 promise 的自定【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】义验证器。根据验证结果来 resolve【版权所有，侵权必究】转载请注明出处：www.tangshuang.net 或 reject。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】使用错误消息
如上例所示，在服务器端验证错误发生时，可转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】以使用服务器端返回的错误消息。
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】验证器函数 context
验证器函数 context 是绑定到 V未经授权，禁止复制转载。【原创内容，转载请注明出处】alidation 对象上的。Valid未经授权，禁止复制转载。【未经授权禁止转载】ation 对象提供了一些属性，这些属性本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】在实现特定的验证器时有用。
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【本文受版权保护】vm 属性
暴露了当前验证所在的 vue 实例。
本文作者：唐霜，转载请注明出处。
the following ES201本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net5 example:
new Vue({
data () {
return { checking: false }
},
validators: {
exist (val) {
this.vm.checking = true // spinner on
return fetch('/validations/exist', {
// ...
}).then((res) => { // done
this.vm.checking = false // spinner off
return res.json()
}).then((json) => {
return Promise.resolve()
}).catch((error) => {
return Promise.reject(error.message)
})
}
}
})
el 属性
暴露了当前验证器的目标 DOM 元素。下本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net面展示了结合 International Teleph【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netone Input jQuery 插件使用的例子：
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】new Vue({
validators: {
phone: function (val) {
return $(this.el).intlTelInput('isValidNumber')
}
}
})
全局 API
Vue.validator( id, [definition] )
- 参数:
- {String} id 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net
- {Function | Object} 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】[definition] 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
【转载请注明来源】【原创内容，转载请注明出处】
- 返回: validator defini本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。tion function or obj本文作者：唐霜，转载请注明出处。【本文受版权保护】ect 【作者：唐霜】【未经授权禁止转载】【未经授权禁止转载】
注册或获取全局验证器。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。/*
* Register custom validator
*
* Arguments:
* - first argument: field value
* - second argument: rule value (optional). this argument is being passed from specified validator rule with v-validate
* Return:
* `true` if valid, else return `false`
*/
Vue.validator('zip', function (val, rule) {
return /^\d{3}-\d{4}$/.test(val)
})
/*
* Register custom validator for async
*
* You can use the `Promise` or promise like `function (resolve, reject)`
*/
Vue.validator('exist', function (val) {
return fetch('/validations/exist', {
method: 'post',
// ...
}).then(function (json) {
return Promise.resolve() // valid
}).catch(function (error) {
return Promise.reject(error.message) // invalid
})
})
/*
* Register validator definition object
*
* You need to specify the `check` custom validator function.
* If you need to error message, you can specify the `message` string or function together.
*/
Vue.validator('email', {
message: 'invalid email address', // error message
check: function (val) { // custome validator
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
}
})
构造器选项
validators
- 类型: Object 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】未经授权，禁止复制转载。
- 详细: 一个只对当前 Vue 实例可见的【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】验证器定义对象。 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
实例元方法
$activateValidator()
- 参数: 无 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】
- 用法: 激活使用 validator 元【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。素的 lazy 属性延迟初始化的验证器 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【作者：唐霜】
Vue.component('comment', {
props: {
id: Number,
},
data: function () {
return { comment: '' }
},
activate: function (done) {
var resource = this.$resource('/comments/:id');
resource.get({ id: this.id }, function (comment, stat, req) {
this.comment = comment.body
// activate validator
this.$activateValidator()
done()
}.bind(this)).error(function (data, stat, req) {
// handle error ...
done()
})
},
methods: {
onSave: function () {
var resource = this.$resource('/comments/:id');
resource.save({ id: this.id }, { body: this.comment }, function (data, stat, req) {
// handle success
}).error(function (data, sta, req) {
// handle error
})
}
}
})
$resetValidation( [cb] )
- 参数: {Function} [cb] 【原创不易，请尊重版权】【作者：唐霜】【本文受版权保护】
- 用法: 重置验证结果。 【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。
new Vue({
el: '#app',
methods: {
onClickReset: function () {
this.$resetValidation(function () {
console.log('reset done')
})
}
}
})
$setValidationErrors( errors )
- 参数:
- Array<Object> 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。errors
- {String} field 指定错误字【作者：唐霜】本文版权归作者所有，未经授权不得转载。段名。 本文版权归作者所有，未经授权不得转载。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net
- {String} message 指定错著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】误消息。 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】
- {String} validator [本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】optional] 指定错误所在的验证器【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net。 【本文受版权保护】【原创内容，转载请注明出处】
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
【作者：唐霜】【作者：唐霜】
- Array<Object> 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。errors
- 用法: 用来设置验证错误结果。这在手动设【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。置服务器端验证产生的错误时有用。 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【原创不易，请尊重版权】
new Vue({
el: '#app',
data: {
id: 1,
username: '',
password: {
old: '',
new: ''
}
},
validators: {
confirm: function (val, target) {
return val === target
}
},
methods: {
onSubmit: function () {
var self = this
var resource = this.$resource('/user/:id')
resource.save({ id: this.id }, {
username: this.username,
passowrd: this.new
}, function (data, stat, req) {
// something handle success ...
// ...
}).error(function (data, stat, req) {
// handle server error
self.$setValidationErrors([
{ field: data.field, message: data.message }
])
})
}
}
})
$validate( [field], [touched], [cb] )
- 参数:
- {String} [field] 原创内容，盗版必究。【作者：唐霜】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net
- {Boolean} [touched] 【原创内容，转载请注明出处】【未经授权禁止转载】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】
- {Function} [cb] 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【转载请注明来源】
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】
- 用法: Validate the tar著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】get formalable eleme本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】nt fields. 验证目标表单元素。
- 如果未设置 field 参数，验证所有字【未经授权禁止转载】原创内容，盗版必究。段； 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- 如果 touched 参数为 true，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】那么验证结果的 touched 值会被设【作者：唐霜】转载请注明出处：www.tangshuang.net置为 true； 【版权所有，侵权必究】【原创内容，转载请注明出处】
未经授权，禁止复制转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】
new Vue({
el: '#app',
data: { password: '' },
validators: {
confirm: function (val, target) {
return val === target
}
},
methods: {
onSubmit: function (e) {
// validate the all fields manually with touched
var self = this
this.$validate(true, function () {
console.log('validate done !!')
if (self.$validation.invalid) {
e.preventDefault()
}
})
}
}
})
指令
v-validate
- 类型: Array | Object 【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】
- Param Attributes:
- group 原创内容，盗版必究。【转载请注明来源】未经授权，禁止复制转载。
- field 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- detect-blur 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
- detect-change 本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- initial 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【原创不易，请尊重版权】
- 用法: 自定需要验证的表单元素。可参见下【本文受版权保护】【作者：唐霜】面的示例。 未经授权，禁止复制转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
- 另见:
- 验证器语法 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- 分组 【转载请注明来源】【本文受版权保护】【本文受版权保护】【转载请注明来源】
- 事件 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net
- 结合 v-model 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【转载请注明来源】
- 自定义验证时机<!– array s转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netyntax –> 【原创内容，转载请注明出处】【本文首发于唐霜的博客】
【版权所有，侵权必究】【原创内容，转载请注明出处】原创内容，盗版必究。
<input type="text" v-validate:username="['required']">
<!-- object syntax -->
<input type="text" v-validate:zip="{ required: true, pattern: { rule: '/^\d{3}-\d{4}$/', message: 'invalid zip pattern' }}">
<!-- binding -->
<input type="text" v-validate:zip="zipRule">
<!-- grouping -->
<input type="text" group="profile" v-validate:user="['required']">
<!-- field -->
<input type="text" field="field1" v-validate="['required']">
<!-- disable validation with DOM event -->
<input type="password" detect-blur="off" detect-change="off" v-validate:password="['required']">
<!-- disable initial auto-validation -->
<input type="text" initial="off" v-validate:message="['required']">
特殊元素
validator
- 属性:
- name (required) 转载请注明出处：www.tangshuang.net【未经授权禁止转载】
- groups 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】
- lazy 【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
【未经授权禁止转载】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- 用法: <validator>原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。; 元素用来在表单元素(input, s【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。elect, textarea等)上引入【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net验证器。<validator>【关注微信公众号：wwwtangshuangnet】【作者：唐霜】; 元素本身会被替换。验证结果会关联到验【原创内容，转载请注明出处】【版权所有，侵权必究】证器元素上，字段名是由 validato转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】r 元素的 name 属性值加 $ 前缀转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net组成。小心: 验证器名称不要与 Vue.【关注微信公众号：wwwtangshuangnet】【作者：唐霜】js 中的自带属性重复，如 $event【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】 等。 【原创内容，转载请注明出处】【原创内容，转载请注明出处】
- 另见: 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net
<!-- basic -->
<validator name="validation">
<input type="text" v-validate:username="['required']">
<p v-if="$validation.invalid">invalid !!<p>
</validator>
<!-- validation grouping -->
<validator name="validation" :groups="['user', 'password']">
<label for="username">username:</label>
<input type="text" group="user" v-validate:username="['required']">
<label for="password">password:</label>
<input type="password" group="password" v-validate:password1="{ minlength: 8, required: true }"/>
<label for="confirm">password (confirm):</label>
<input type="password" group="password" v-validate:password2="{ minlength: 8, required: true }"/>
<p v-if="$validation.user.invalid">Invalid yourname !!</p>
<p v-if="$validation.password.invalid">Invalid password input !!</p>
</validator>
<!-- lazy initialization -->
<validator lazy name="validation">
<input type="text" :value="comment" v-validate:comment="{ required: true, maxlength: 256 }"/>
<span v-if="$validation.comment.required">Required your comment</span>
<span v-if="$validation.comment.maxlength">Too long comment !!</span>
<button type="button" value="save" @click="onSave" v-if="valid">
</validator>
validator-errors
- 属性:
- validation (required【本文受版权保护】本文作者：唐霜，转载请注明出处。 with v-bind) 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- component 著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【转载请注明来源】【转载请注明来源】
- partial 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】
- group 【原创不易，请尊重版权】原创内容，盗版必究。原创内容，盗版必究。
- field 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】
- 用法: <validator-er【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】rors> 可以作为错误消息的出口未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。。<validator-error本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。s> 元素会被替换成默认的错误消息【原创内容，转载请注明出处】【原创不易，请尊重版权】模板。可以通过 component 和 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。partial 属性来自定义错误消息的显【原创不易，请尊重版权】未经授权，禁止复制转载。示方式。 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】
<!-- basic -->
<validator name="validation">
...
<div class="errors">
<validator-errors :validation="$validation"></validator-errors>
</div>
</validator>
<!-- render validation error message with component -->
<validator name="validation">
...
<div class="errors">
<validator-errors :component="'custom-error'" :validation="$validation">
</validator-errors>
</div>
</validator>
<!-- render validation error message with partial -->
<validator name="validation">
...
<div class="errors">
<validator-errors partial="myErrorTemplate" :validation="$validation">
</validator-errors>
</div>
</validator>
<!-- error message filter with group -->
<validator :groups="['profile', 'password']" name="validation1">
...
<input id="username" type="text" group="profile" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
...
<input id="old" type="password" group="password" v-validate:old="{
required: { rule: true, message: 'required you old password !!' },
minlength: { rule: 8, message: 'your old password short too !!' }
}"/>
...
<div class="errors">
<validator-errors group="profile" :validation="$validation1">
</validator-errors>
</div>
</validator>
事件绑定
在前端领域，事件绑定你应该不陌生，比如c本文作者：唐霜，转载请注明出处。【本文受版权保护】lick, hover，已经熟的不能再熟本文版权归作者所有，未经授权不得转载。【转载请注明来源】悉了。本章就来介绍在vue里面怎么快速实【未经授权禁止转载】【原创内容，转载请注明出处】现事件绑定。
未经授权，禁止复制转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。<button @click.prevent="say('A word!', $event)">ok</button>
上面这短短一段代码，有4个东西要介绍，下【未经授权禁止转载】【转载请注明来源】面一一介绍：
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。使用v-on:绑定事件
前面已经对v-on指令讲过了，不讲了。
【转载请注明来源】未经授权，禁止复制转载。方法函数
事件的回调函数可以直接写在methods【本文首发于唐霜的博客】【原创不易，请尊重版权】里面：
转载请注明出处：www.tangshuang.net【转载请注明来源】new Vue({
methods: {
say(word, e) { alert(word) },
},
})
$event变量
它是直接被绑定到vue的实例上的属性。相【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】当于this.$event，也是事件信息【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，比如$event.target等信息。原创内容，盗版必究。【作者：唐霜】它和DOM原生事件的event是一样的。
【版权所有，侵权必究】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。修饰符
事件修饰符比较多，前文已经提到了，也不讲【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】了。
【作者：唐霜】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。自定义事件
vue提供了四个和事件相关的实例方法，分原创内容，盗版必究。【原创内容，转载请注明出处】别是$on, $once, $off, 【本文受版权保护】转载请注明出处：www.tangshuang.net$emit，用过jquery的同学应该非本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】常熟悉了。我们来看下具体怎么用：
原创内容，盗版必究。【版权所有，侵权必究】转载请注明出处：www.tangshuang.netvar app = new Vue({...})
app.$on('myEvent', (e, value) => console.log(value))
....
app.$emit('myEvent', 'changed')
上面的$on和$emit都是vue实例的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net方法，所以说，对于事件绑定而言，vue内【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】部直接提供了非指令的事件系统，跟jque转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ry的用法几乎一样，v-on主要是在模板未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。中绑定DOM原生的一些事件，而$on, 著作权归作者所有，禁止商业用途转载。【本文受版权保护】$once可以绑定自定义的事件，两者互不【本文受版权保护】【作者：唐霜】干扰，$emit能否触发原生的DOM事件【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。呢？请注意阅读下文。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net$on
监听当前实例上的自定义事件。事件可以由v著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】m.$emit触发。回调函数会接收所有传转载请注明出处：www.tangshuang.net【版权所有，侵权必究】入事件触发函数的额外参数。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')// -> "hi"
$once
监听一个自定义事件，但是只触发一次，在第转载请注明出处：www.tangshuang.net【转载请注明来源】一次触发之后移除监听器。
【转载请注明来源】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')// -> "hi"，同时移除test事件
vm.$emit('test', 'again') // test事件被移除了，所以这个触发不会有任何结果
$on和$once绑定的事件是在实例上，【本文受版权保护】著作权归作者所有，禁止商业用途转载。而非DOM元素上，所以它们跟DOM原生的未经授权，禁止复制转载。未经授权，禁止复制转载。事件是两回事。DOM原生事件是在触发DO【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。M元素特定事件时被触发的，比如click【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】。但是对于这里的实例vm而言，click【作者：唐霜】转载请注明出处：www.tangshuang.net没有来源，实例根本不存在被click之说【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。，所以$on和$once跟DOM原生事件【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。扯不上任何关系。同理，$emit也是作用著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。于实例之上，既然实例跟原生的DOM事件扯【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】不上关系，那么$emit也就跟原生DOM【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】事件扯不上关系了。这就回答了上文提出的那本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。个问题。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net所以说，$on和$once绑定的是一个自【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。定义事件，这些事件是存储在vue内部的事著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。件管理器中，跟DOM事件是两码事，既然如未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net此，跟v-on事件绑定也就是两回事。
【本文首发于唐霜的博客】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】$off
移除事件监听器。
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】- 如果没有提供参数，则移除所有的事件监听器【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】； 【转载请注明来源】未经授权，禁止复制转载。
- 如果只提供了事件，则移除该事件所有的监听【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】器； 原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】
- 如果同时提供了事件与回调，则只移除这个回原创内容，盗版必究。【本文受版权保护】调的监听器。 原创内容，盗版必究。【作者：唐霜】
$emit
触发当前实例上的事件。附加参数都会传给监原创内容，盗版必究。【原创内容，转载请注明出处】听器回调。参数怎么传前面的代码已经演示过【本文受版权保护】转载请注明出处：www.tangshuang.net了。
【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】Class和Style的绑定
数据绑定一个常见需求是操作元素的 cla【版权所有，侵权必究】【作者：唐霜】ss 列表和它的内联样式。因为它们都是属【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】性 ，我们可以用v-bind 处理它们：本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】只需要计算出表达式最终的字符串。不过，字本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。符串拼接麻烦又易错。因此，在 v-bin【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netd 用于 class 和 style 时本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。， Vue.js 专门增强了它。表达式的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。结果类型除了字符串之外，还可以是对象或数【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。组。
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创不易，请尊重版权】绑定 HTML Class
对象语法
我们可以传给 v-bind:class 【本文首发于唐霜的博客】原创内容，盗版必究。一个对象，以动态地切换 class 。
【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【本文受版权保护】<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net的更新将取决于数据属性 isActive【未经授权禁止转载】【原创内容，转载请注明出处】 是否为真值 。
【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【本文受版权保护】我们也可以在对象中传入更多属性用来动态切【版权所有】唐霜 www.tangshuang.net【转载请注明来源】换多个 class 。此外， v-bin【本文受版权保护】未经授权，禁止复制转载。d:class 指令可以与普通的 cla【转载请注明来源】【作者：唐霜】ss 属性共存。如下模板:
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
如下 data:
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。data: {
isActive: true,
hasError: false
}
渲染为:
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【原创不易，请尊重版权】<div class="static active"></div>
当 isActive 或者 hasErr【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netor 变化时，class 列表将相应地更转载请注明出处：www.tangshuang.net【未经授权禁止转载】新。例如，如果 hasError 的值为【作者：唐霜】【关注微信公众号：wwwtangshuangnet】 true ， class列表将变为 &【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。#8220;static active 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。text-danger”。
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】你也可以直接绑定数据里的一个对象：
【本文首发于唐霜的博客】【本文首发于唐霜的博客】【本文受版权保护】<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
渲染的结果和上面一样。我们也可以在这里绑转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。定返回对象的计算属性。这是一个常用且强大【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net的模式：
【本文受版权保护】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
数组语法
我们可以把一个数组传给 v-bind:c【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】lass ，以应用一个 class 列表【本文受版权保护】未经授权，禁止复制转载。：
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】<div v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为:
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】原创内容，盗版必究。<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 clas著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】s ，可以用三元表达式：
【本文受版权保护】著作权归作者所有，禁止商业用途转载。<div v-bind:class="[isActive ? activeClass : '', errorClass]">
此例始终添加 errorClass ，但本文作者：唐霜，转载请注明出处。【转载请注明来源】是只有在 isActive 是 true著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。 时添加 activeClass 。
【原创不易，请尊重版权】
不过，当有多个条件 class 时这样【本文受版权保护】原创内容，盗版必究。写有些繁琐。可以在数组语法中使用对象语法未经授权，禁止复制转载。原创内容，盗版必究。：
<div v-bind:class="[{ active: isActive }, errorClass]">
用在组件上
这个章节假设你已经对 Vue 组件 有一【本文受版权保护】【转载请注明来源】定的了解。当然你也可以跳过这里，稍后再回【转载请注明来源】【关注微信公众号：wwwtangshuangnet】过头来看。当你在一个定制的组件上用到 c【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】lass 属性的时候，这些类将被添加到根【转载请注明来源】【作者：唐霜】元素上面，这个元素上已经存在的类不会被覆【未经授权禁止转载】【本文受版权保护】盖。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。例如，如果你声明了这个组件:
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【原创不易，请尊重版权】【转载请注明来源】Vue.component('my-component', { template: '<p class="foo bar">Hi</p>'})
然后在使用它的时候添加一些 class：
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net<my-component class="baz boo"></my-component>
HTML 最终将被渲染成为:
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net【作者：唐霜】<p class="foo bar baz boo">Hi</p>
同样的适用于绑定 HTML class 【版权所有，侵权必究】【本文首发于唐霜的博客】:
【本文受版权保护】【转载请注明来源】<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 true 的时【作者：唐霜】【版权所有，侵权必究】候，HTML 将被渲染成为:
【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】<p class="foo bar active">Hi</p>
绑定内联样式
对象语法
v-bind:style 的对象语法十分转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net直观——看着非常像 CSS ，其实它是一【原创内容，转载请注明出处】【转载请注明来源】个 JavaScript 对象。 CSS【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 属性名可以用驼峰式（camelCase【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】）或短横分隔命名（kebab-case）【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。：
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，让模板更本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】清晰：
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
同样的，对象语法常常结合返回对象的计算属【版权所有，侵权必究】转载请注明出处：www.tangshuang.net性使用。
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文首发于唐霜的博客】数组语法
v-bind:style 的数组语法可以【本文受版权保护】【作者：唐霜】将多个样式对象应用到一个元素上：
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文受版权保护】<div v-bind:style="[baseStyles, overridingStyles]">
自动添加前缀
当 v-bind:style 使用需要特【转载请注明来源】著作权归作者所有，禁止商业用途转载。定前缀的 CSS 属性时，如 trans【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。form ，Vue.js 会自动侦测并添【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。加相应的前缀。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【未经授权禁止转载】修饰符
前面两处提到了修饰符，这一章其实主要是要转载请注明出处：www.tangshuang.net【版权所有，侵权必究】总结一下，内容是跟前面一样的，如果你已经【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。理解了，就不用看。
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【版权所有，侵权必究】原创内容，盗版必究。事件修饰符
在事件处理程序中调用 event.pre【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ventDefault() 或 even【作者：唐霜】【未经授权禁止转载】t.stopPropagation() 原创内容，盗版必究。未经授权，禁止复制转载。是非常常见的需求。尽管我们可以在 met转载请注明出处：www.tangshuang.net【本文受版权保护】hods 中轻松实现这点，但更好的方式是【原创不易，请尊重版权】【作者：唐霜】：methods 只有纯粹的数据逻辑，而转载请注明出处：www.tangshuang.net【本文受版权保护】不是去处理 DOM 事件细节。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】为了解决这个问题， Vue.js 为 v【作者：唐霜】本文版权归作者所有，未经授权不得转载。-on 提供了 事件修饰符。通过由点(.原创内容，盗版必究。【未经授权禁止转载】)表示的指令后缀来调用修饰符。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】- .stop 【版权所有】唐霜 www.tangshuang.net【作者：唐霜】
- .prevent 【本文受版权保护】【未经授权禁止转载】【原创不易，请尊重版权】
- .capture 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net
- .self 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
- .once 【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。
按键修饰符
在监听键盘事件时，我们经常需要监测常见的原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。键值。 Vue 允许为 v-on 在监听【转载请注明来源】【版权所有，侵权必究】键盘事件时添加按键修饰符。记住所有的 k【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。eyCode 比较困难，所以 Vue 为【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。最常用的按键提供了别名。
【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】全部的按键别名：
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】- .enter 【本文受版权保护】【未经授权禁止转载】【转载请注明来源】转载请注明出处：www.tangshuang.net
- .tab 【转载请注明来源】本文作者：唐霜，转载请注明出处。
- .delete (捕获 “删除” 和 “【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】退格” 键) 【未经授权禁止转载】【本文受版权保护】【转载请注明来源】
- .esc 【版权所有，侵权必究】【版权所有，侵权必究】【原创不易，请尊重版权】
- .space 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- .up 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
- .down 【本文受版权保护】未经授权，禁止复制转载。【原创内容，转载请注明出处】
- .left 【原创不易，请尊重版权】原创内容，盗版必究。
- .right 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】
可以通过全局 config.keyCod【本文首发于唐霜的博客】【本文受版权保护】es 对象自定义按键修饰符别名。
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】Vue.config.keyCodes.f1 = 112 // 这样用 <input v-on:keyup.112="submit">
可以用如下修饰符开启鼠标或键盘事件监听，【转载请注明来源】【本文受版权保护】使在按键按下时发生响应。
【转载请注明来源】【未经授权禁止转载】- .ctrl 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】
- .alt 未经授权，禁止复制转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。
- .shift 本文版权归作者所有，未经授权不得转载。【转载请注明来源】
- .meta 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net
组件
终于进入组件这一章。前文多次提到组件是v【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ue里面非常核心的概念。但是实际上，组件转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。在本书中，更多的是提倡作为一种思想，具体转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net使用的时候跟本书最前面的“vue实例”差【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】别不会太大，除了data()的地方需要着【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。重强调，如果不涉及其他，组件实例和app【作者：唐霜】原创内容，盗版必究。级别实例差距不会有太大理解上的鸿沟。
【原创内容，转载请注明出处】【原创内容，转载请注明出处】未经授权，禁止复制转载。既然是一种思想，那么组件涉及的问题就不单【作者：唐霜】【关注微信公众号：wwwtangshuangnet】单是编程问题。比如组件之间如何通信，父子本文作者：唐霜，转载请注明出处。【作者：唐霜】组件之间的问题，数据流等问题。这些只有当原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net我们探讨组件才会提出来的问题，需要你更多本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】的进行思考，想通之后，这些问题在实践中怎【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】么处理就迎刃而解了。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【转载请注明来源】转载请注明出处：www.tangshuang.net这一章也是所有入门级别知识的最后一章，从【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】这一章之后，就要进入到更加深入的学习，这【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。些深入学习是必须的，不然无法认识vue的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】原貌。但是深入学习之前，前面几章的基础学【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。习可以帮助你快速理解vue的基本使用方法转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，掌握之后，算是入门了。
【未经授权禁止转载】原创内容，盗版必究。什么是组件？
组件（Component）是 Vue.j【关注微信公众号：wwwtangshuangnet】【作者：唐霜】s 最强大的功能之一。组件可以扩展 HT转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ML 元素，封装可重用的代码。在较高层面【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】上，组件是自定义元素， Vue.js 的【本文受版权保护】未经授权，禁止复制转载。编译器为它添加特殊功能。在有些情况下，组【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】件也可以是原生 HTML 元素的形式，以【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。 is 特性扩展。
【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net简单的说，vue组件就是一个js类，使用【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。的时候new一下，得到一个组件的实例，组本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】件实例有很多接口，app层面就可以调用这著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net些接口来把组件的功能集成到app中。
【转载请注明来源】【作者：唐霜】【原创不易，请尊重版权】在开发层面上，你只需要使用Vue.ext【本文受版权保护】【版权所有】唐霜 www.tangshuang.netend({…})就可以得到一【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】个组件。而开发的大部分工作，就是写好大括【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】号里面的内容。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】创建一个组件
上面说过了，开发层面上，创建一个组件只需【未经授权禁止转载】【作者：唐霜】要使用Vue.extend，如下：
转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】var MyComponent = Vue.extend({
template: '<div>OK</div>',
})
这样就创建了一个组件构造器MyCompo【本文受版权保护】【版权所有，侵权必究】nent。实际上，Vue.extend的【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net结果是Vue的一个子类。既然是一个类，就【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】可以被实例化，通过实例化得到一个组件实例原创内容，盗版必究。原创内容，盗版必究。，“组件实例”这个称呼在前面已经提到过了【原创内容，转载请注明出处】【本文受版权保护】。组件构造器是一个类，可以被实例化为组件转载请注明出处：www.tangshuang.net原创内容，盗版必究。实例。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netvar component1 = new MyComponent()
关于Vue.extend，我们会在后文继原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。续深入，这里就不赘述了。组件实例有一些方【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。法可以用，例如$mount方法，这也在后转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。面的Vue.extend部分去解释。本章【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。主要是要让你学会组件的思想和主要开发方式本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net。
【原创内容，转载请注明出处】【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】注册一个组件
创建好了组件，接下来要在vue中注册它。本文版权归作者所有，未经授权不得转载。【本文受版权保护】注册组件也有全局和局部两种。注册是什么概【作者：唐霜】【转载请注明来源】念呢？其实注册是创建一个组件构造器的引用本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。，并可以形式化的进行实例化。所谓形式化，【转载请注明来源】【原创内容，转载请注明出处】简单的说，就是把组件注册成一个html元未经授权，禁止复制转载。【原创内容，转载请注明出处】素，这样可以直接在模板中使用这个跟组件等转载请注明出处：www.tangshuang.net【作者：唐霜】价的元素来实例化组件。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。// 局部注册
new Vue({
el: '#app',
template: '<div><my-component></my-component></div>',
components: {
'my-component': MyComponent,
},
})
// 全局注册Vue.component('my-component', MyComponent)
全局注册有一个好处，就是可以在任何一个v【未经授权禁止转载】【原创不易，请尊重版权】ue实例中去使用。
【原创不易，请尊重版权】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。使用一个注册好的组件
组件注册好之后，就可以在模板中使用注册的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。组件名称，像一个html元素一样调用它，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】而且这个元素还支持指令，比如v-for之转载请注明出处：www.tangshuang.net【作者：唐霜】类的。基本的使用方法是在app的模板中使【原创内容，转载请注明出处】【本文首发于唐霜的博客】用它：
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net<div> <my-component></my-component> </div>
因为在创建组件的时候，传入了templa【转载请注明来源】本文版权归作者所有，未经授权不得转载。te值，所以<my-compone【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。nt>的地方就会替换为组件的模板编原创内容，盗版必究。【原创内容，转载请注明出处】译后的html，所以最终看到的结果是：
转载请注明出处：www.tangshuang.net【作者：唐霜】<div> <div>OK</div> </div>
这是最简单的情况，就是模板替换一下而已。未经授权，禁止复制转载。【原创内容，转载请注明出处】如果再把指令加进来，把数据绑定加进来，组【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】件和app的互动就非常复杂了。
本文作者：唐霜，转载请注明出处。
使用一个组件（比如在模板中插入<【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】my-component>元素）的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】本质，是创建一个组件实例。也就是说，一个【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。<my-component>著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】就是一个组件实例，它们共享一个组件构造器本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】（一个js类）。
简易注册
上面我的做法是先创建一个组件构造器，然后【版权所有】唐霜 www.tangshuang.net【本文受版权保护】把组件构造器传入实例构造器。实际上，在实【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】践开发中，我们基本不会这样干，我们大部分原创内容，盗版必究。原创内容，盗版必究。都会使用简易方式直接注册，跳过创建步骤：
【转载请注明来源】原创内容，盗版必究。Vue.component('my-component', {
template: '<div>OK</div>',
})
包括在创建vue实例的时候也是这样，直接本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】传对象字面量进去即可。相当于注册过程会自【原创不易，请尊重版权】【转载请注明来源】动创建一个匿名的组件构造器。
【作者：唐霜】
在开发中，如果不涉及组件实例复用问题，原创内容，盗版必究。【未经授权禁止转载】这个方法非常好。也是最推荐的做法。
data必须是函数
在创建或注册模板的时候，传入一个data【版权所有】唐霜 www.tangshuang.net【本文受版权保护】属性作为用来绑定的数据。但是在组件中，d【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ata必须是一个函数，而不能直接把一个对未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。象赋值给它。
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。Vue.component('my-component', {
template: '<div>OK</div>',
data() {
return {} // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
},
})
你在前面看到，在new Vue()的时候未经授权，禁止复制转载。【原创不易，请尊重版权】，是可以给data直接赋值为一个对象的。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】这是怎么回事，为什么到了组件这里就不行了【转载请注明来源】【作者：唐霜】。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】你要理解，上面这个操作是一个简易操作，实本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】际上，它首先需要创建一个组件构造器，然后【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】注册组件。注册组件的本质其实就是建立一个未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。组件构造器的引用。使用组件才是真正创建一著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】个组件实例。所以，注册组件其实并不产生新【原创内容，转载请注明出处】【原创内容，转载请注明出处】的组件类，但会产生一个可以用来实例化的新【作者：唐霜】【关注微信公众号：wwwtangshuangnet】方式。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】理解这点之后，再理解js的原型链：
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。var MyComponent = function() {}MyComponent.prototype.data = {
a: 1,
b: 2,
}// 上面是一个虚拟的组件构造器，真实的组件构造器方法很多
var component1 = new MyComponent()
var component2 = new MyComponent()// 上面实例化出来两个组件实例，也就是通过<my-component>调用，创建的两个实例
component1.data.a === component2.data.a // true
component1.data.b = 5component2.data.b // 5
可以看到上面代码中最后三句，这就比较坑爹【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。了，如果两个实例同时引用一个对象，那么当【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】你修改其中一个属性的时候，另外一个实例也【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】会跟着改。这怎么可以，两个实例应该有自己未经授权，禁止复制转载。【版权所有，侵权必究】各自的域才对。所以，需要通过下面方法来进【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net行处理：
本文作者：唐霜，转载请注明出处。【作者：唐霜】var MyComponent = function() {
this.data = this.data()}MyComponent.prototype.data = function() {
return {
a: 1,
b: 2,
}
}
这样每一个实例的data属性都是独立的，转载请注明出处：www.tangshuang.net【作者：唐霜】不会相互影响了。所以，你现在知道为什么v【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netue组件的data必须是函数了吧。这都是本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】因为js本身的特性带来的，跟vue本身设转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】计无关。其实vue不应该把这个方法名取为转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netdata()，应该叫setData或其他著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】更容易立即的方法名。
【转载请注明来源】【未经授权禁止转载】prop
什么是prop?
首先，什么是prop？prop也是属性，转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。但是它和attribution不一样，a【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ttribution往往是固定的值属性，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。而prop更多的是动态的状态值属性，最简转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。单的例子就是input checkbox【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】的checked属性，checked属性【未经授权禁止转载】【未经授权禁止转载】的attr值是它的初始值，而prop值是【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net它的当前值，这对于熟悉jquery的同学【本文受版权保护】未经授权，禁止复制转载。而已应该比较好理解。
原创内容，盗版必究。【作者：唐霜】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】为组件声明props属性
vue里面，组件实例的作用域是孤立的。这【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。意味着不能(也不应该)在子组件的模板内直【本文首发于唐霜的博客】【本文受版权保护】接引用父组件的数据。要让子组件使用父组件【未经授权禁止转载】【原创不易，请尊重版权】的数据，我们需要通过子组件的props选本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】项。
【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。子组件要显式地用 props 选项声明它期待获得的数据：
转载请注明出处：www.tangshuang.net【作者：唐霜】Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
使用prop属性
这样之后，message就变成了一个pr【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】op属性，在模板中，你使用child这个【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。元素时，就可以给这个元素传一个messa原创内容，盗版必究。【本文首发于唐霜的博客】ge属性进去：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】<child message="hello!"></child>
如果在创建组件的时候没有声明props，本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】那么<child>的mess原创内容，盗版必究。未经授权，禁止复制转载。age就没用。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】prop属性命名注意点
如果你在声明props的时候，属性名是多原创内容，盗版必究。转载请注明出处：www.tangshuang.net个单词构成的怎么办？在注册组件的时候使用【转载请注明来源】【版权所有】唐霜 www.tangshuang.net驼峰命名方式：
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【作者：唐霜】Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
但是在使用组件的时候，传入的属性名得是短本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。横线隔开的：
本文版权归作者所有，未经授权不得转载。【作者：唐霜】<child my-message="hello!"></child>
这是因为html不区分大小写，你写成<child myMessage="hello!"></child>的话，假如有一个属性名是mymessage怎么办？所以，一定要注意这一点。
动态绑定prop属性值
既然是当做html元素的属性，那么就跟前转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net面讲的模板语法想通，你可以在prop属性【关注微信公众号：wwwtangshuangnet】【本文受版权保护】上尝试使用一些指令，比如v-bind，例转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。如：
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。<child :my-message="msg"></child>
注意，这里的<child>是【作者：唐霜】【转载请注明来源】在父组件，或者app层面的vue实例的模【转载请注明来源】【关注微信公众号：wwwtangshuangnet】板中使用的，所以这里的msg这个变量也是本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。来自父组件或app。
【原创内容，转载请注明出处】
这里有一个注意点，如果是普通的传值，不转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。使用v-bind，那么值的内容是一个字符原创内容，盗版必究。原创内容，盗版必究。串，即使你给了一个数字，它传进去还是个字【原创不易，请尊重版权】【原创内容，转载请注明出处】符串。想要传数字或其他类型的数据，应该用【本文首发于唐霜的博客】原创内容，盗版必究。v-bind，比如：
<child :my-message="1"></child>
这个时候组件内获取的才是number，而本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】不是string。
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。单向数据绑定
prop 是单向绑定的：当父组件的属性变原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】化时，将传导给子组件，但是不会反过来。这【未经授权禁止转载】未经授权，禁止复制转载。是为了防止子组件无意修改了父组件的状态。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【本文受版权保护】【版权所有，侵权必究】另外，每次父组件更新时，子组件的所有 p【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。rop 都会更新为最新值。这意味着你不应著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net该在子组件内部改变 prop 。如果你这【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net么做了，Vue 会在控制台给出警告。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】这一点非常好理解：JavaScript的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】对象是引用类型数据，它的每一个属性都指向本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。同一个内存空间，所以不同的变量引用同一个【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】对象的话，其中一个的属性一改，另一个也会【原创不易，请尊重版权】【本文首发于唐霜的博客】跟着改。父组件和子组件之间的prop也是【作者：唐霜】未经授权，禁止复制转载。一样，你修改子组件里面的prop，那么父转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net组件里面的对应的属性也该了，这会让父组件转载请注明出处：www.tangshuang.net原创内容，盗版必究。或app层面产生混乱，一定会出bug。
【版权所有，侵权必究】未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net正确的处理方法是，在创建组件时，保证组件著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net只是接收prop数据，接收到以后马上放在【本文首发于唐霜的博客】【转载请注明来源】自己的私有属性中去：
著作权归作者所有，禁止商业用途转载。【作者：唐霜】props: ['initialCounter'],data: function () {
return { counter: this.initialCounter }
}
props: ['size'],computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
上面一个是通过data直接挂在一个属性上【原创不易，请尊重版权】【未经授权禁止转载】，一个是通过计算属性，把prop只当做计原创内容，盗版必究。【本文首发于唐霜的博客】算的一个依赖。总之，这两种方式都可以解决【作者：唐霜】【版权所有】唐霜 www.tangshuang.net上面说的不允许子组件修改prop原始值的转载请注明出处：www.tangshuang.net【转载请注明来源】问题。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】如果你使用data，你在组件内修改了这个转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net属性值，那就跟prop没关系了，后期父组转载请注明出处：www.tangshuang.net【本文受版权保护】件的prop值改变，也不会影响data了【转载请注明来源】【原创内容，转载请注明出处】。
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】原创内容，盗版必究。Prop 验证
我们可以为组件的 props 指定验证规原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net格。如果传入的数据不符合规格，Vue 会【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。发出警告。当组件给其他人使用时，这很有用【原创内容，转载请注明出处】【作者：唐霜】。
本文版权归作者所有，未经授权不得转载。
要指定验证规格，需要用对象的形式，而不【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】能用字符串数组：
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type 可以是下面原生构造器：
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。- String 原创内容，盗版必究。【转载请注明来源】原创内容，盗版必究。
- Number 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- Boolean 本文作者：唐霜，转载请注明出处。【作者：唐霜】本文作者：唐霜，转载请注明出处。
- Function 【原创内容，转载请注明出处】【版权所有，侵权必究】
- Object 【转载请注明来源】【版权所有，侵权必究】
- Array 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
type 也可以是一个自定义构造器函数，【本文受版权保护】未经授权，禁止复制转载。使用 instanceof 检测。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。当 prop 验证失败，Vue会在抛出警【原创内容，转载请注明出处】【未经授权禁止转载】告 (如果使用的是开发版本)。
【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【未经授权禁止转载】【本文受版权保护】事件反馈
前面一节指出，子组件不能自己主动修改pr【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netop，以防改变了父组件或app的值导致b未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ug。那么如果子组件确实需要上级应用修改【本文受版权保护】【作者：唐霜】这些变量，让自己更好的适应新情况怎么办？著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。那就让父组件或app自己来改。可是父组件【本文受版权保护】【原创内容，转载请注明出处】怎么知道自己要改？通过子组件的事件就可以转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。做到了。
【原创不易，请尊重版权】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。前文我们已经学过事件绑定的知识了，组件的【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】实例也具有事件绑定的能力。所以我们可以在本文版权归作者所有，未经授权不得转载。【作者：唐霜】子组件里面触发事件，在父组件里面监听这个著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】事件，当事件被触发时，父组件通过绑定的回【原创不易，请尊重版权】【本文首发于唐霜的博客】调函数来执行prop的更改。当然除了更改【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。prop，还可以做其他的事情。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】只能使用v-on绑定自定义事件
前文我们指出，直接用实例的$on方法来绑【未经授权禁止转载】【本文首发于唐霜的博客】定自定义事件。但是在这里不行，不能直接在【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】父组件里面直接用$on，因为我们使用&l【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。t;my-component>实例转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】化组件时，没有得到一个变量用来存储实例化【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。对象，它相当于是匿名的，所以我们找不到它本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，当然也找不到它的$on。
未经授权，禁止复制转载。【版权所有，侵权必究】那怎么办？只能使用v-on来进行事件绑定转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<child @clicked="showSomething"></child>
这里的clicked是事件名，在子组件里【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】面，通过this.$emit(̵转载请注明出处：www.tangshuang.net【未经授权禁止转载】6;clicked’)触发事【转载请注明来源】【版权所有，侵权必究】件。父组件里面，通过上面代码中的@cli本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。cked=”showSome未经授权，禁止复制转载。【本文首发于唐霜的博客】thing”监听这个事件，而著作权归作者所有，禁止商业用途转载。【转载请注明来源】showSomething就是事件回调函原创内容，盗版必究。【原创内容，转载请注明出处】数，是父组件methods方法之一。
【转载请注明来源】【原创不易，请尊重版权】【原创不易，请尊重版权】原创内容，盗版必究。使用v-model实现input双向绑定
上面不是说只能使用v-on绑定事件吗？是原创内容，盗版必究。【原创内容，转载请注明出处】的，但是你是否还记得前文提到过v-mod著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】el其实是v-bind和v-on的语法糖著作权归作者所有，禁止商业用途转载。【作者：唐霜】？上一节我们说过了，<child&【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】gt;可以使用v-bind，而这里又说可未经授权，禁止复制转载。未经授权，禁止复制转载。以使用v-on，所以只要情况允许，就可以著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。使用v-model。
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net所谓情况允许，是指符合下面条件：
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】- 接受一个 value 属性 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】
- 在有新的 value 时触发 input本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】 事件 【原创不易，请尊重版权】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】
所以，只有下面这种<child&g【未经授权禁止转载】本文作者：唐霜，转载请注明出处。t;才可以使用v-model实现双向绑定【本文首发于唐霜的博客】未经授权，禁止复制转载。：
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】Vue.component('child', {
template: '<input :value="value" @keyup="update($event.target.value)">', //
props: ['value'],
methods: {
update(value) {
this.$emit('input', value)
},
},
})
这样，在父组件中才可以这样使用：
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net<child v-model="someData"></child> // 等价于： <child :value="someData" @input="someData = $event.target.value"></child>
蓝色部分表示的是v-bind部分，红褐色【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。部分表示v-on部分。组件内部，绿色的k【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。eyup是input元素的DOM原生事件【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，红色的udpate是回调函数，当key【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】up的时候执行update()，而upd【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ate()的时候就$emit(̵【作者：唐霜】【原创内容，转载请注明出处】6;input’)，触发了父原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。组件的v-on:input。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】基于这种原理，不一定要使用在input输著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。入框上，实际上，任何元素都可以模拟这种方本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】式实现数据双向绑定。当然，如果没有输入，本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】双向绑定的说法就很奇怪。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】使用 Slot 分发内容
在使用组件时，我们常常要像这样组合它们：
【转载请注明来源】【原创不易，请尊重版权】【转载请注明来源】<app> <app-header></app-header> <app-footer></app-footer> </app>
注意两点：
【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】- <app> 组件不知道它的挂未经授权，禁止复制转载。【原创内容，转载请注明出处】载点会有什么内容。挂载点的内容是由<【原创内容，转载请注明出处】未经授权，禁止复制转载。;app>的父组件决定的。 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
- <app> 组件很可能有它自【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。己的模版。 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】
为了让组件可以组合，我们需要一种方式来混【原创内容，转载请注明出处】【本文受版权保护】合父组件的内容与子组件自己的模板。这个过【作者：唐霜】本文版权归作者所有，未经授权不得转载。程被称为 内容分发 (或 “transc【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netlusion” 如果你熟悉 Angula【转载请注明来源】本文作者：唐霜，转载请注明出处。r)。Vue.js 实现了一个内容分发 著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】API ，参照了当前 Web 组件规范草案，使用特殊的 <slot> 【作者：唐霜】本文版权归作者所有，未经授权不得转载。元素作为原始内容的插槽。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。编译作用域
在深入内容分发 API 之前，我们先明确原创内容，盗版必究。【本文受版权保护】内容在哪个作用域里编译。假定模板为：
【原创内容，转载请注明出处】【版权所有，侵权必究】<child-component>{{ message }}</child-component>
message应该绑定到父组件的数据，还【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。是绑定到子组件的数据？答案是父组件。组件未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。作用域简单地说是：
未经授权，禁止复制转载。
父组件模板的内容在父组件作用域内编译；原创内容，盗版必究。【本文首发于唐霜的博客】子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。令绑定到子组件的属性/方法：
【本文受版权保护】【未经授权禁止转载】<!-- 无效 --><child-component v-show="someChildProperty"></child-component>
假定 someChildProperty【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。 是子组件的属性，上例不会如预期那样工作【转载请注明来源】【关注微信公众号：wwwtangshuangnet】。父组件模板不应该知道子组件的状态。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】如果要绑定作用域内的指令到一个组件的根节【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。点，你应当在组件自己的模板上做：
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】Vue.component('child-component', { // 有效，因为是在正确的作用域内 template: '<div v-show="someChildProperty">Child</div>', data: function () { return { someChildProperty: true } }})
类似地，分发内容是在父作用域内编译。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】原创内容，盗版必究。【未经授权禁止转载】单个 Slot
除非子组件模板包含至少一个 <sl原创内容，盗版必究。【作者：唐霜】ot> 插口，否则父组件的内容将会【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。被丢弃。当子组件模板只有一个没有属性的 【转载请注明来源】本文版权归作者所有，未经授权不得转载。slot 时，父组件整个内容片段将插入到【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net slot 所在的 DOM 位置，并替换原创内容，盗版必究。【本文首发于唐霜的博客】掉 slot 标签本身。
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。最初在 <slot> 标签中【未经授权禁止转载】【转载请注明来源】的任何内容都被视为备用内容。备用内容在子【转载请注明来源】未经授权，禁止复制转载。组件的作用域内编译，并且只有在宿主元素为著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。空，且没有要插入的内容时才显示备用内容。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。假定 my-component 组件有下本文版权归作者所有，未经授权不得转载。【本文受版权保护】面模板：
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】<div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div>
父组件模版：
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net<div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div>
渲染结果：
转载请注明出处：www.tangshuang.net【作者：唐霜】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。<div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div> </div>
具名 Slot
<slot> 元素可以用一个【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。特殊的属性 name 来配置如何分发内容【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。。多个 slot 可以有不同的名字。具名【未经授权禁止转载】未经授权，禁止复制转载。 slot 将匹配内容片段中有对应 sl原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ot 特性的元素。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。仍然可以有一个匿名 slot ，它是默认【本文首发于唐霜的博客】原创内容，盗版必究。 slot ，作为找不到匹配的内容片段的【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。备用插槽。如果没有默认的 slot ，这【原创不易，请尊重版权】未经授权，禁止复制转载。些找不到匹配的内容片段将被抛弃。
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创不易，请尊重版权】例如，假定我们有一个 app-layou【原创内容，转载请注明出处】【原创内容，转载请注明出处】t 组件，它的模板为：
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
父组件模版：
【本文受版权保护】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p> </app-layout>
渲染结果为：
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】<div class="container"> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>
在组合组件时，内容分发 API 是非常有【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。用的机制。
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用【本文受版权保护】【版权所有】唐霜 www.tangshuang.net一个（能够传递数据到）可重用模板替换已渲本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】染元素。2.1.0才新增的，因此，如果你著作权归作者所有，禁止商业用途转载。【转载请注明来源】只是使用2.0版本，还是使用不了。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net在子组件中，只需将数据传递到插槽，就像你【原创内容，转载请注明出处】【版权所有，侵权必究】将 prop 传递给组件一样：
转载请注明出处：www.tangshuang.net【作者：唐霜】【转载请注明来源】著作权归作者所有，禁止商业用途转载。<div class="child"> <slot text="hello from child"></slot> </div>
在父级中，具有特殊属性 scope 的 著作权归作者所有，禁止商业用途转载。【转载请注明来源】<template> 元素，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】表示它是作用域插槽的模板。scope 的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net值对应一个临时变量名，此变量接收从子组件本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。中传递的 prop 对象：
原创内容，盗版必究。【原创不易，请尊重版权】<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
如果我们渲染以上结果，得到的输出会是：
【作者：唐霜】【版权所有，侵权必究】【本文首发于唐霜的博客】<div class="parent"> <div class="child"> <span>hello from parent</span> <span>hello from child</span> </div> </div>
作用域插槽更具代表性的用例是列表组件，允转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】许组件自定义应该如何渲染列表每一项：
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【本文首发于唐霜的博客】<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
列表组件的模板：
转载请注明出处：www.tangshuang.net【本文受版权保护】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。<ul> <slot name="item" v-for="item in items" :text="item.text" > <!-- 这里写入备用内容 --> </slot> </ul>
内联模板
如果子组件有 inline-templa转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】te 特性，组件将把它的内容当作它的模板本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，而不是把它当作分发内容。这让模板更灵活【版权所有，侵权必究】原创内容，盗版必究。。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net<my-component inline-template> <div> <p>These are compiled as the component's own template.</p> <p>Not parent's transclusion content.</p> </div> </my-component>
但是 inline-template 让著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】模板的作用域难以理解。最佳实践是使用 t【未经授权禁止转载】【本文首发于唐霜的博客】emplate 选项在组件内定义模板或者原创内容，盗版必究。【本文首发于唐霜的博客】在 .vue 文件中使用 templat原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。e 元素。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】编者按：关于.vue文件，会在后文详细讲本文作者：唐霜，转载请注明出处。【本文受版权保护】解。
【作者：唐霜】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】动态组件
通过使用保留的 <componen本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】t> 元素，动态地绑定到它的 is本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。 特性，我们让多个组件可以使用同一个挂载著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net点，并动态切换：
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变！ -->
</component>
也可以直接绑定到组件对象上：
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
在动态组件模式下，你可以使用keep-a【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。live指令实现一个缓存效果：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文受版权保护】<keep-alive> <component :is="currentView"> <!-- 非活动组件将被缓存！ --> </component> </keep-alive>
在API 参考查看更多 <keep-alive&转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】gt; 的细节。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。异步创建组件
在大型应用中，我们可能需要将应用拆分为多著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。个小模块，按需从服务器下载。为了让事情更著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。简单， Vue.js 允许将组件定义为一【作者：唐霜】【转载请注明来源】个工厂函数，动态地解析组件的定义。Vue【作者：唐霜】【原创不易，请尊重版权】.js 只在组件需要渲染时触发工厂函数，【作者：唐霜】【作者：唐霜】并且把结果缓存起来，用于后面的再次渲染。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【转载请注明来源】这里的工厂函数和promise的工厂函数【作者：唐霜】本文版权归作者所有，未经授权不得转载。是一样的，接受resolve, reje本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ct两个参数。resolve的时候，将创【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net建数组所要用到的对象返回即可。
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【未经授权禁止转载】【本文受版权保护】Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// Pass the component definition to the resolve callback
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
工厂函数接收一个 resolve 回调，未经授权，禁止复制转载。【作者：唐霜】在收到从服务器下载的组件定义时调用。也可【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。以调用 reject(reason) 指转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。示加载失败。
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。递归和循环引用
递归组件
组件在它的模板内可以递归地调用自己，不过未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。，只有当它有 name 选项时才可以：
本文作者：唐霜，转载请注明出处。【作者：唐霜】name: 'unique-name-of-my-component'
当你利用Vue.component全局注【原创内容，转载请注明出处】【原创内容，转载请注明出处】册了一个组件, 全局的ID作为组件的 n【原创内容，转载请注明出处】原创内容，盗版必究。ame 选项，被自动设置.
未经授权，禁止复制转载。【未经授权禁止转载】Vue.component('unique-name-of-my-component', {
// ...
})
如果你不谨慎, 递归组件可能导致死循环:
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。name: 'stack-overflow', template: '<div><stack-overflow></stack-overflow></div>'
上面组件会导致一个错误 “max sta原创内容，盗版必究。【转载请注明来源】ck size exceeded” ，所转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。以要确保递归调用有终止条件 (比如递归调【原创内容，转载请注明出处】【版权所有，侵权必究】用时使用 v-if 并让他最终返回 fa【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。lse )。
【转载请注明来源】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。组件间的循环引用
假设你正在构建一个文件目录树，像在Fin【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netder或文件资源管理器中。你可能有一个 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】tree-folder组件:
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>
然后 一个tree-folder-con本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。tents组件：
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>
当你仔细看时，会发现在渲染树上这两个组件转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。同时为对方的父节点和子节点–这点是矛盾的未经授权，禁止复制转载。【原创不易，请尊重版权】。当使用Vue.component将这两【本文受版权保护】【作者：唐霜】个组件注册为全局组件的时候，框架会自动为【转载请注明来源】【本文受版权保护】你解决这个矛盾，如果你是这样做的，就不用【原创内容，转载请注明出处】【本文受版权保护】继续往下看了。
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【作者：唐霜】然而，如果你使用诸如Webpack或者B【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。rowserify之类的模块化管理工具来未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】requiring/importing组转载请注明出处：www.tangshuang.net原创内容，盗版必究。件的话，就会报错了：
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】Failed to mount comp【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】onent: template or r【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netender function not d【作者：唐霜】【关注微信公众号：wwwtangshuangnet】efined.
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】
为了解释为什么会报错，简单的将上面两个组本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net件称为 A 和 B ，模块系统看到它需要【本文受版权保护】未经授权，禁止复制转载。 A ，但是首先 A 需要 B ，但是 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】B 需要 A， 而 A 需要 B，陷入了转载请注明出处：www.tangshuang.net原创内容，盗版必究。一个无限循环，因此不知道到底应该先解决哪【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。个。要解决这个问题，我们需要在其中一个组【作者：唐霜】本文作者：唐霜，转载请注明出处。件中（比如 A ）告诉模块化管理系统，“本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。A 虽然需要 B ，但是不需要优先导入 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】B”。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。在我们的例子中，我们选择在tree-fo【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】lder 组件中来告诉模块化管理系统循环转载请注明出处：www.tangshuang.net【转载请注明来源】引用的组件间的处理优先级，我们知道引起矛著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。盾的子组件是tree-folder-co【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ntents，所以我们在beforeCr本文作者：唐霜，转载请注明出处。【转载请注明来源】eate 生命周期钩子中去注册它：
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
}
问题解决了。
【原创不易，请尊重版权】原创内容，盗版必究。X-Templates
另一种定义模版的方式是在 JavaScr【转载请注明来源】【未经授权禁止转载】ipt 标签里使用 text/x-tem【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】plate 类型，并且指定一个id。例如【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】：
【原创不易，请尊重版权】未经授权，禁止复制转载。【作者：唐霜】<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
这在有很多模版或者小的应用中有用，否则应【原创内容，转载请注明出处】【本文受版权保护】该避免使用，因为它将模版和组件的其他定义【本文受版权保护】原创内容，盗版必究。隔离了。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。未经授权，禁止复制转载。对低开销的静态组件使用v-once
尽管在 Vue 中渲染 HTML 很快，本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】不过当组件中包含大量静态内容时，可以考虑本文作者：唐霜，转载请注明出处。原创内容，盗版必究。使用 v-once 将渲染结果缓存起来，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。就像这样：
【未经授权禁止转载】原创内容，盗版必究。【转载请注明来源】Vue.component('terms-of-service', {
template: `<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>`
})
小结
这一章介绍了vue的核心理念之一——组件本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。。组件的概念并没有想象的那么复杂，简单的【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。说就是一个相对隔离的vue子类的实例化对转载请注明出处：www.tangshuang.net【作者：唐霜】象。怎么来理解这里的“隔离”呢？主要是两原创内容，盗版必究。【未经授权禁止转载】个方面：
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】- 组件通过props属性获取父组件或app原创内容，盗版必究。本文作者：唐霜，转载请注明出处。层面传来的数据，这些数据不应该被直接修改未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，也就是说这些数据仅属于组件的上一层，而【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。不属于当前组件，组件不能通过修改这些数据转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。来影响上一层； 【未经授权禁止转载】原创内容，盗版必究。
- 组件不能直接对父组件或app层产生影响，【原创内容，转载请注明出处】【本文首发于唐霜的博客】但是可以通过事件绑定对上一层进行事件通知未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net，上一层接收到这些通知时，自己决定是否要【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】进行变化。 未经授权，禁止复制转载。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
组件的另一个话题就是复用性。基于上面两个【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net方面的特性，组件应该是具备高可复用性的，【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。当一个地方需要使用这个组件时，只需要实例【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】化，并给适合的props即可。只要pro【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ps给的符合要求，组件就可以根据自己的逻【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net辑运行，既不受外界影响，也不影响外界。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】原创内容，盗版必究。【版权所有，侵权必究】全局和局部
在前文我多次提到了全局和局部的问题，可以【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。看到，好几个操作，其实都存在全局和局部的本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】相同操作。但前文我们大部分时间更专注局部【本文受版权保护】原创内容，盗版必究。，本章其实更多从全局角度出发，把之前从来【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net没提过的全局方法，都提一遍。这样可以帮助【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】你更好的全面了解vue的api。
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【作者：唐霜】全局配置
Vue.config 是一个对象，包含 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】Vue 的全局配置。可以在启动应用之前修【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】改下列属性：
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。silent
- 类型： boolean 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
- 默认值： false 【作者：唐霜】未经授权，禁止复制转载。
- 作用：取消 Vue 所有的日志与警告。 转载请注明出处：www.tangshuang.net【版权所有，侵权必究】原创内容，盗版必究。
Vue.config.silent = true
optionMergeStrategies
- 类型： { [key: string]:本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net Function } 【本文首发于唐霜的博客】未经授权，禁止复制转载。【作者：唐霜】
- 默认值： {}
本文作者：唐霜，转载请注明出处。 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】
- 作用：自定义合并策略的选项。合并策略选项转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net分别接受第一个参数作为父实例，第二个参数【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】为子实例，Vue实例上下文被作为第三个参【本文受版权保护】本文作者：唐霜，转载请注明出处。数传入。 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。
- 参考 自定义选项的混合策略 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
}) // Profile.options._my_option = 2
devtools
- 类型： boolean 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 默认值： true (生产版为 fals【原创不易，请尊重版权】【原创不易，请尊重版权】e) 【本文受版权保护】原创内容，盗版必究。
- 作用：配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】产版本默认为 false。生产版本设为 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.nettrue 可以启用检查。 原创内容，盗版必究。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
// 务必在加载 Vue 之后，立即同步设置以下内容 Vue.config.devtools = true
errorHandler
- 类型： Function 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- 默认值： 默认抛出错误 转载请注明出处：www.tangshuang.net【未经授权禁止转载】【作者：唐霜】【原创不易，请尊重版权】
- 作用：指定组件的渲染和观察期间未捕获错误【本文受版权保护】未经授权，禁止复制转载。的处理函数。这个处理函数被调用时，可获取未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。错误信息和 Vue 实例。
【版权所有】唐霜 www.tangshuang.net
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】Sentry, 一个错误追踪服务, 通过此选项提供官方集成。
原创内容，盗版必究。原创内容，盗版必究。【原创内容，转载请注明出处】 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【转载请注明来源】
Vue.config.errorHandler = function (err, vm) {
// handle error
}
ignoredElements
- 类型: Array<string&【作者：唐霜】未经授权，禁止复制转载。gt; 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】
- 默认值: [] 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
- 作用： 须使 Vue 忽略在 Vue 之本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。外的自定义元素 (e.g., 使用了 W【作者：唐霜】【作者：唐霜】eb Components APIs)。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net否则，它会假设你忘记注册全局组件或者拼错【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】了组件名称，从而抛出一个关于 Unkno本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】wn custom element 的警【转载请注明来源】【版权所有】唐霜 www.tangshuang.net告。 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【原创不易，请尊重版权】
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ]
keyCodes
- 类型： { [key: string]:【本文受版权保护】本文版权归作者所有，未经授权不得转载。 number | Array<n原创内容，盗版必究。未经授权，禁止复制转载。umber> } 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- 默认值： {} 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】
- 作用：给 v-on 自定义键位别名。 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}
全局 API
Vue.extend( options )
- 参数：{Object} options 【作者：唐霜】【本文首发于唐霜的博客】
- 作用：使用基础 Vue 构造器，创建一个【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net“子类”。参数是一个包含组件选项的对象。未经授权，禁止复制转载。原创内容，盗版必究。data 选项是特例，需要注意 R【版权所有，侵权必究】【未经授权禁止转载】11; 在 Vue.extend() 中转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。它必须是函数。 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。
- 参考： 组件 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下：
【原创内容，转载请注明出处】未经授权，禁止复制转载。<p>Walter White aka Heisenberg</p>
Vue.nextTick([callback, context])
- 参数：
- {Function} [callback本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】] 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。
- {Object} [context] 转载请注明出处：www.tangshuang.net【作者：唐霜】
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文首发于唐霜的博客】
- 作用：在下次 DOM 更新循环结束之后执著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。行延迟回调。在修改数据之后立即使用这个方转载请注明出处：www.tangshuang.net【本文受版权保护】法，获取更新后的 DOM。
【转载请注明来源】
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net2.1.0新增：如果没有提供回调且支持 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。promise 的环境中返回 promi【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。se。
【作者：唐霜】【未经授权禁止转载】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】 本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- 参考： 异步更新队列 原创内容，盗版必究。【本文首发于唐霜的博客】未经授权，禁止复制转载。【未经授权禁止转载】
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
Vue.set( object, key, value )
- 参数：
- {Object} object 【转载请注明来源】本文版权归作者所有，未经授权不得转载。
- {string} key 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net
- {any} value 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。
- 返回值： 设置的值. 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- 作用：设置对象的属性。如果对象是响应式的【原创不易，请尊重版权】【版权所有，侵权必究】，确保属性被创建后也是响应式的，同时触发【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net视图更新。这个方法主要用于避开 Vue 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】不能检测属性被添加的限制。注意对象不能是【版权所有，侵权必究】未经授权，禁止复制转载。 Vue 实例，或者 Vue 实例的根数原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】据对象。 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net
- 参考： 深入响应式原理 【转载请注明来源】本文作者：唐霜，转载请注明出处。
Vue.delete( object, key )
- 参数：
- {Object} object 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
- {string} key 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创不易，请尊重版权】
- 作用：删除对象的属性。如果对象是响应式的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，确保删除能触发更新视图。这个方法主要用【原创不易，请尊重版权】【原创不易，请尊重版权】于避开 Vue 不能检测到属性被删除的限【原创内容，转载请注明出处】【原创不易，请尊重版权】制，但是你应该很少会使用它。注意对象不能【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。是 Vue 实例，或者 Vue 实例的根著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。数据对象。 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【转载请注明来源】原创内容，盗版必究。
- 参考： 深入响应式原理 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
Vue.directive( id, [definition] )
- 参数：
- {string} id 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
- {Function | Object} 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。[definition] 【转载请注明来源】【本文受版权保护】未经授权，禁止复制转载。
【未经授权禁止转载】原创内容，盗版必究。
- 作用：注册或获取全局指令。 【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【原创不易，请尊重版权】
- 参考： 自定义指令 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册（传入一个简单的指令函数）
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')
Vue.filter( id, [definition] )
- 参数：
- {string} id 【本文受版权保护】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- {Function} [definiti【本文受版权保护】未经授权，禁止复制转载。on] 原创内容，盗版必究。【本文受版权保护】【未经授权禁止转载】
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创内容，转载请注明出处】
- 作用：注册或获取全局过滤器。 【转载请注明来源】【本文受版权保护】转载请注明出处：www.tangshuang.net
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
Vue.component( id, [definition] )
- 参数：
- {string} id 【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
- {Function | Object} 原创内容，盗版必究。【本文受版权保护】[definition] 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net
【版权所有，侵权必究】【本文受版权保护】著作权归作者所有，禁止商业用途转载。
- 作用：注册或获取全局组件。注册还会自动使原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。用给定的id设置组件的名称。 【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】
- 参考： 组件 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【未经授权禁止转载】
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')
Vue.use( plugin )
- 参数：{Object | Functio【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netn} plugin 【作者：唐霜】【本文首发于唐霜的博客】
- 作用：安装 Vue.js 插件。如果插件著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】是一个对象，必须提供 install 方本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】法。如果插件是一个函数，它会被作为 in【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】stall 方法。install 方法将著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】被作为 Vue 的参数调用。当 inst【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。all 方法被同一个插件多次调用，插件将【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】只会被安装一次。 【作者：唐霜】【未经授权禁止转载】
- 参考： 插件 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】
编者按：关于如何开发一个插件，读者应该要未经授权，禁止复制转载。【转载请注明来源】学习一下，因为有的时候你确实需要全局实现本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。某些功能。通过插件，可以给Vue这个全局【作者：唐霜】本文版权归作者所有，未经授权不得转载。变量加入一些全局方法，也可以给每一个实例【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】加入原型链方法，在组件内使用this.$未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。yourmethod这种方式来执行某些功【版权所有，侵权必究】【未经授权禁止转载】能。点击上面的参考链接去学习如何写插件。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】Vue.mixin( mixin )
- 参数：{Object} mixin 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。
- 作用：全局注册一个混合，影响注册之后所有未经授权，禁止复制转载。未经授权，禁止复制转载。创建的每个 Vue 实例。插件作者可以使【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net用混合，向组件注入自定义的行为。不推荐在本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。应用代码中使用。 【未经授权禁止转载】【未经授权禁止转载】
- 参考： 全局混合 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net
编者按：关于混入，如果你学过react应转载请注明出处：www.tangshuang.net原创内容，盗版必究。该知道。简单的说就是把几个类合并为一个类【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net，这样，继承这个混合的类的子类就拥有了多原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。个父类的方法。在vue里面，组件也可以使转载请注明出处：www.tangshuang.net【本文受版权保护】用混入来继承组件，在创建组件的时候就可以【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。使用一个mixin参数，这在前面的组件一本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net章没有介绍过：
本文作者：唐霜，转载请注明出处。【本文受版权保护】// 定义一个混合对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"
Vue.compile( template )
- 参数：{string} template 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
- 作用：在render函数中编译模板字符串【本文受版权保护】【原创内容，转载请注明出处】。只在独立构建时有效。 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】
- 参考： Render 函数 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
全局注册
全局注册函数直接挂在Vue这个全局对象上本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net。注意下面的方法，都是复数形式。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。Vue.directives
全局注册一个指令。这样你就可以在任何的V原创内容，盗版必究。原创内容，盗版必究。ue实例上使用这个指令。
未经授权，禁止复制转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
Vue.filters
注册或获取全局过滤器。
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。原创内容，盗版必究。// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
Vue.components
全局注册一个组件。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
局部配置
所谓局部配置，就是在实例化的时候的配置。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】parent
指定实例的父实例，例如：
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】var parent = new Vue({...})
var child = new Vue({
parent,
})
这样，就指定了child的父实例是par本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ent。当child被实例化出来之后，c【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nethild.$parent就引用paren本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nett，而parent.$children是【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】一个数组，里面就包含了child，可以用【未经授权禁止转载】【作者：唐霜】parent.$children.ind转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】exOf(child) > -1来【本文受版权保护】【作者：唐霜】判断是否是否包含了某个实例。
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】mixin
前面已经讲过全局的mixin，其实它也可【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】以在实例化配置时传入：
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。var mixin = {
created: function () {
console.log(1)
}
}
var vm = new Vue({
created: function () {
console.log(2)
},
mixins: [mixin]
})
// -> 1
// -> 2
mixins 选项接受一个混合对象的数组本文作者：唐霜，转载请注明出处。【本文受版权保护】。这些混合实例对象可以像正常的实例对象一【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】样包含选项,他们将在 Vue.exten【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。d() 里最终选择使用相同的选项合并逻辑【作者：唐霜】转载请注明出处：www.tangshuang.net合并。举例：如果你混合包含一个钩子而创建本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】组件本身也有一个,两个函数将被调用。Mi【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。xin钩子按照传入顺序依次调用,并在调用【转载请注明来源】原创内容，盗版必究。组件自身的钩子之前被调用。
未经授权，禁止复制转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】name
注意，这个选项只对组件的创建起作用。
本文作者：唐霜，转载请注明出处。【作者：唐霜】var MyComponent = Vue.extend({
name: 'my-component',
})
允许组件模板递归地调用自身。注意，组件在本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】全局用 Vue.component() 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】注册时，全局 ID 自动作为组件的 na【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。me。
【原创内容，转载请注明出处】【转载请注明来源】指定 name 选项的另一个好处是便于调原创内容，盗版必究。【转载请注明来源】试。有名字的组件有更友好的警告信息。另外【原创内容，转载请注明出处】【未经授权禁止转载】，当在有 vue-devtools, 未命名组件将显示成 <Anon【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ymousComponent>, 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】这很没有语义。通过提供 name 选项，原创内容，盗版必究。转载请注明出处：www.tangshuang.net可以获得更有语义信息的组件树。
【本文首发于唐霜的博客】【原创不易，请尊重版权】【原创不易，请尊重版权】extend
允许声明扩展另一个组件(可以是一个简单的原创内容，盗版必究。【原创内容，转载请注明出处】选项对象或构造函数),而无需使用 Vue本文作者：唐霜，转载请注明出处。原创内容，盗版必究。.extend。这主要是为了便于扩展单文转载请注明出处：www.tangshuang.net【版权所有，侵权必究】件组件。
【版权所有】唐霜 www.tangshuang.net
这和 mixins 类似，区别在于，组【关注微信公众号：wwwtangshuangnet】【作者：唐霜】件自身的选项会比要扩展的源组件具有更高的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】优先级。
var CompA = { ... }
// 在没有调用 Vue.extend 时候继承 CompA
var CompB = { extends: CompA, ...}
delimiters
改变纯文本插入分隔符。 这个选择只有在独原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。立构建时才有用。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。默认值: [“{{̶【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。0;, “}}”原创内容，盗版必究。【原创内容，转载请注明出处】]
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创内容，转载请注明出处】new Vue({ delimiters: ['${', '}']})
// 分隔符变成了 ES6 模板字符串的风格
functional
使组件无状态（没有 data ）和无实例【版权所有，侵权必究】原创内容，盗版必究。（没有 this 上下文）。他们用一个简本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】单的 render 函数返回虚拟节点使他【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。们更容易渲染。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】参考： 函数式组件
【未经授权禁止转载】原创内容，盗版必究。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】实例属性
vm.$data
- 类型: Object 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】
- 详细: Vue 实例观察的数据对象。Vu本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。e 实例代理了对其 data 对象属性的【作者：唐霜】【本文受版权保护】访问。 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- 另见: 选项 – data 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net
vm.$el
- 类型: HTMLElement 【未经授权禁止转载】【作者：唐霜】【本文受版权保护】
- 只读 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文首发于唐霜的博客】
- 详细: Vue 实例使用的根 DOM 元【未经授权禁止转载】未经授权，禁止复制转载。素。 【版权所有，侵权必究】【版权所有，侵权必究】
vm.$options
- 类型: Object 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。
- 只读 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
- 详细: 用于当前 Vue 实例的初始化选本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。项。需要在选项中包含自定义属性时会有用处本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。： 【本文受版权保护】本文版权归作者所有，未经授权不得转载。
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // -> 'foo'
}
})
vm.$parent
- 类型: Vue instance 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。
- 只读 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
- 详细: 父实例，如果当前实例有的话。 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
vm.$root
- 类型: Vue instance 著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- 只读 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。
- 详细: 当前组件树的根 Vue 实例。如【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】果当前实例没有父实例，此实例将会是其自已【版权所有，侵权必究】【版权所有，侵权必究】。 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【原创不易，请尊重版权】
vm.$children
- 类型: Array<Vue ins【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】tance> 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 只读 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- 详细: 当前实例的直接子组件。需要注意 本文版权归作者所有，未经授权不得转载。【本文受版权保护】$children 并不保证顺序，也不是转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】响应式的。如果你发现自己正在尝试使用 $【转载请注明来源】未经授权，禁止复制转载。children 来进行数据绑定，考虑使【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】用一个数组配合 v-for 来生成子组件【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，并且使用 Array 作为真正的来源。 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】未经授权，禁止复制转载。
vm.$slots
- 类型： { [name: string]未经授权，禁止复制转载。原创内容，盗版必究。: ?Array<VNode>【原创内容，转载请注明出处】未经授权，禁止复制转载。; } 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】
- 只读 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】
- 详细: 用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot=【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。221;foo” 中的内容将【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】会在 vm.$slots.foo 中被找【本文受版权保护】【版权所有】唐霜 www.tangshuang.net到）。default 属性包括了所有没有【转载请注明来源】【版权所有】唐霜 www.tangshuang.net被包含在具名 slot 中的节点。在使用 render 函数书写一个组件时，访问 vm.$slots【转载请注明来源】【本文受版权保护】 最有帮助。 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
- 参考：
- <slot> 组件 【未经授权禁止转载】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
- 使用 Slots 进行内容分发 【未经授权禁止转载】原创内容，盗版必究。【本文受版权保护】本文作者：唐霜，转载请注明出处。
- Render 函数 未经授权，禁止复制转载。【原创不易，请尊重版权】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net
【未经授权禁止转载】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
vm.$scopedSlots
【作者：唐霜】原创内容，盗版必究。2.1.0新增
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。
- 类型： { [name: string]【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】: props => VNode 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net| Array<VNode>原创内容，盗版必究。【转载请注明来源】 } 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】
- 只读 【版权所有，侵权必究】【本文受版权保护】
- 详细：用来访问 scoped slots。对于包括 默认 slot 在内的每一个【本文受版权保护】【版权所有，侵权必究】 slot， 该对象都包含一个返回相应 【本文受版权保护】【原创不易，请尊重版权】VNode 的函数。在使用 render 函数 书写一个组件时，访问 vm.$scop转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netedSlots 最有帮助。 【本文受版权保护】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net
- 参考：
- <slot> 组件 【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【作者：唐霜】
- Scoped Slots 【转载请注明来源】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
- Render 函数 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
vm.$refs
- 类型： Object 本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
- 只读 【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】
- 详细：一个对象，其中包含了所有拥有 re【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。f 注册的子组件。 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net
- 另见： 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net
vm.$isServer
- 类型： boolean 【作者：唐霜】【未经授权禁止转载】
- 只读 【转载请注明来源】【作者：唐霜】【作者：唐霜】
- 详细：当前 Vue 实例是否运行于服务器本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。。 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- 参考： 服务端渲染 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】
实例的数据方法
vm.$watch( expOrFn, callback, [options] )
- 参数：
- {string | Function} 【原创内容，转载请注明出处】【本文受版权保护】expOrFn 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- {Function} callback 【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- {Object} [options]
- {boolean} deep 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】
- {boolean} immediate 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【版权所有，侵权必究】
本文作者：唐霜，转载请注明出处。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】
- 返回值： {Function} unwa未经授权，禁止复制转载。未经授权，禁止复制转载。tch 【原创不易，请尊重版权】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】
- 用法：观察 Vue 实例变化的一个表达式【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。或计算属性函数。回调函数得到的参数为新值【作者：唐霜】【作者：唐霜】和旧值。表达式只接受监督的键路径。对于更本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。复杂的表达式，用一个函数取代。注意：在变【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】异（不是替换）对象或数组时，旧值将与新值【版权所有，侵权必究】【原创不易，请尊重版权】相同，因为它们的引用指向同一个对象/数组【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】。Vue 不会保留变异之前值的副本。 【原创内容，转载请注明出处】原创内容，盗版必究。【原创内容，转载请注明出处】
- 示例：vm.$watch 返回一个取消观转载请注明出处：www.tangshuang.net【转载请注明来源】察函数，用来停止触发回调： 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
// 函数
vm.$watch(
function () {
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
// vm.$watch 返回一个取消观察函数，用来停止触发回调：
var unwatch = vm.$watch('a', cb)
// 之后取消观察unwatch()
- 选项：deep为了发现对象内部值的变化，【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】可以在选项参数中指定 deep: tru【作者：唐霜】著作权归作者所有，禁止商业用途转载。e 。注意监听数组的变动不需要这么做。 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
- 选项：immediate在选项参数中指定未经授权，禁止复制转载。【本文受版权保护】 immediate: true 将立即本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】以表达式的当前值触发回调： 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发回调
vm.$set( object, key, value )
- 参数：
- {Object} object 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】
- {string} key 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
- {any} value 【作者：唐霜】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】
- 返回值： 设置的值. 【作者：唐霜】【转载请注明来源】【未经授权禁止转载】【未经授权禁止转载】
- 用法：这是全局 Vue.set 的别名。 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【转载请注明来源】【本文受版权保护】
- 另见： Vue.set 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
vm.$delete( object, key )
- 参数：
- {Object} object 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
- {string} key 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- 用法：这是全局 Vue.delete 的【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。别名。 原创内容，盗版必究。【未经授权禁止转载】【转载请注明来源】
- 另见： Vue.delete 【版权所有，侵权必究】原创内容，盗版必究。
Render 函数
Vue 推荐在绝大多数情况下使用 tem【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】plate 来创建你的 HTML。然而在【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net一些场景中，你真的需要 JavaScri转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。pt 的完全编程的能力，这就是 rend【原创不易，请尊重版权】【原创内容，转载请注明出处】er 函数，它比 template 更接【版权所有，侵权必究】【原创内容，转载请注明出处】近编译器。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】特别是在一些通过v-if来确定使用哪一块【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】内容的时候，你要写很多个v-if来决定使原创内容，盗版必究。【本文受版权保护】用哪一块内容。但是如果使用render函转载请注明出处：www.tangshuang.net【转载请注明来源】数，就可以避免这种重复的工作。
原创内容，盗版必究。原创内容，盗版必究。什么是render函数？
如果你使用过react，那么应该完全不陌【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。生。render函数是在模板的编译阶段，【版权所有】唐霜 www.tangshuang.net【作者：唐霜】用来编译模板的。在template和re【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。nder同时存在的时候，render具有【作者：唐霜】著作权归作者所有，禁止商业用途转载。更高的优先级。也就是说，vue实例化的时【未经授权禁止转载】【未经授权禁止转载】候，如果你有render函数，那么当实例转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。化进行渲染DOM的时候，render函数本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net是一个决定性的元素，render的返回结本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】果，就是最终的DOM渲染结果。
【未经授权禁止转载】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】简单的说，render函数，就是使用ja【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。vascript编程的方式来创建模板（代未经授权，禁止复制转载。原创内容，盗版必究。替template参数），用render【原创不易，请尊重版权】【作者：唐霜】函数的返回值作为模板编译的基础。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】如何使用？
先来看段例子：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level,
// tag name 标签名称
this.$slots.default
// 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
直接给一个render参数，并且赋予的值原创内容，盗版必究。【本文受版权保护】是函数即可。
【原创内容，转载请注明出处】原创内容，盗版必究。【转载请注明来源】createElement
createElement函数
从上面的例子你可以看到，render函数【转载请注明来源】未经授权，禁止复制转载。接收一个参数createElement。【原创内容，转载请注明出处】未经授权，禁止复制转载。它本身就是一个函数，是用来生成真正的模板【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的。
【本文首发于唐霜的博客】【本文首发于唐霜的博客】// @returns {VNode}createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数，必要参数
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性.可选参数.
{
// data Object，下面再述
},
// {String | Array}
// 子节点(VNodes)，可以是一个字符串或者一个数组. 可选参数.
[
createElement('h1', 'hello world'),
createElement(MyComponent, {
props: {
someProp: 'foo'
}
}),
'bar'
]
)
它的返回值是一个Virtual DOM 转载请注明出处：www.tangshuang.net【转载请注明来源】Node，它只存在于vue的虚拟DOM系【作者：唐霜】本文作者：唐霜，转载请注明出处。统中，并且和实例是对应的，只有当渲染DO未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。M发生之后，它才会转换为真是的DOM节点【版权所有】唐霜 www.tangshuang.net【作者：唐霜】。
【转载请注明来源】【转载请注明来源】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。data Object
上面代码中，第二个参数是一个object本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】，但是可以有哪些内容可以配置呢？
【本文受版权保护】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 "on"
// 所以不再支持如 v-on:keyup.enter 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件，用于监听原生事件，而不是组件内部使用 vm.$emit 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令. 注意事项：不能对绑定的旧值设值
// Vue 会为您持续追踪
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => h('span', props.text)
},
// 如果组件是其他组件的子组件，需为slot指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
VNodes 必须唯一
组件树中的所有 VNodes 必须是唯一【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。的。这意味着，下面的 render fu【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。nction 是无效的：
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 错误-重复的VNodes
myParagraphVNode, myParagraphVNode
])
}
如果你真的需要重复很多次的元素/组件，你【作者：唐霜】【版权所有】唐霜 www.tangshuang.net可以使用工厂函数来实现。例如，下面这个例【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。子 render 函数完美有效地渲染了 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。20 个重复的段落：
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
一旦你开始使用render函数，你就可以著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net使用createElement函数完全代【版权所有，侵权必究】【转载请注明来源】替模板，通过javascript逻辑来创【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】建复杂的模板逻辑。当然，这样做会让模板可【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net读性变得很差，于是，你可以使用jsx。
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】JSX
如果你写了很多 render 函数，可能原创内容，盗版必究。【版权所有，侵权必究】会觉得痛苦。特别是模板极其简单的情况下。
【转载请注明来源】
这就是会有一个 Babel plugin 插件，用于在 Vue 中使用 JSX 【转载请注明来源】【作者：唐霜】语法的原因，它可以让我们回到于更接近模板【转载请注明来源】本文作者：唐霜，转载请注明出处。的语法上。
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
将 h 作为 createElement【未经授权禁止转载】本文作者：唐霜，转载请注明出处。 的别名是 Vue 生态系统中的一个通用本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。惯例，实际上也是 JSX 所要求的，如果未经授权，禁止复制转载。【作者：唐霜】在作用域中 h 失去作用， 在应用中会触【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。发报错。
【本文受版权保护】原创内容，盗版必究。更多关于 JSX 映射到 JavaScr原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ipt，阅读 使用文档。
【版权所有，侵权必究】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。特殊属性
Vue里面使用了DOM模板，也就是说，所【未经授权禁止转载】原创内容，盗版必究。有元素的属性（attr或prop）首先可未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】以被HTML解析识别。而如果不是HTML【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本身内置的属性的话，vue可以自己在编译【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。模板的时候对这些属性进行解析，主要包括下【作者：唐霜】【本文受版权保护】列属性：
转载请注明出处：www.tangshuang.net【作者：唐霜】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net- vue的指令，内置指令或自定义指令 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
- 子组件的props属性 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】
- 本章将要讲到的特殊属性 转载请注明出处：www.tangshuang.net【本文受版权保护】【未经授权禁止转载】
除了上述这些属性之外，比如，我们给一个元转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。素添加了go属性<div go="-1"></div>，这个属性不会起到任何作用，当然，你可以【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。用css来改变它的样式，但是在元素本身层【本文受版权保护】【版权所有】唐霜 www.tangshuang.net面上，真没用。回到主题，本章要讲vue的【本文受版权保护】【作者：唐霜】内置的特殊属性。
key
key 的特殊属性主要用在 Vue的虚拟未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。DOM算法，在新旧nodes对比时辨识V【本文受版权保护】原创内容，盗版必究。Nodes。如果不使用key，Vue会使未经授权，禁止复制转载。【转载请注明来源】用一种最大限度减少动态元素并且尽可能的尝【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net试修复/再利用相同类型元素的算法。使用k转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netey，它会基于key的变化重新排列元素顺【本文受版权保护】原创内容，盗版必究。序，并且会移除key不存在的元素。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。有相同父元素的子元素必须有独特的key。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】重复的key会造成渲染错误。
原创内容，盗版必究。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net最常见的用例是结合 v-for:
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
它也可以用于强制替换元素/组件而不是重复原创内容，盗版必究。本文作者：唐霜，转载请注明出处。使用它。当你遇到如下场景时它可能会很有用【版权所有，侵权必究】原创内容，盗版必究。:
【未经授权禁止转载】【本文首发于唐霜的博客】【转载请注明来源】- 完整地触发组件的生命周期钩子 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- 触发过渡 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net
例如:
【本文受版权保护】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时，<spa著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。n> 会随时被更新，因此会触发过渡【版权所有，侵权必究】【原创内容，转载请注明出处】。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ref
ref 被用来给元素或子组件注册引用信息本文作者：唐霜，转载请注明出处。【作者：唐霜】。引用信息将会注册在父组件的 $refs【未经授权禁止转载】【未经授权禁止转载】 对象上。如果在普通的 DOM 元素上使【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net用，引用指向的就是 DOM 元素; 如果【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。用在子组件上，引用就指向组件实例:
【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp instance --> <child-comp ref="child"></child-comp>
当 v-for 用于元素或组件的时候，引著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】用信息将是包含 DOM 节点或组件实例的转载请注明出处：www.tangshuang.net【转载请注明来源】数组。
未经授权，禁止复制转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。关于ref注册时间的重要说明: 因为re未经授权，禁止复制转载。未经授权，禁止复制转载。f本身是作为渲染结果被创建的，在初始渲染【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net的时候你不能访问它们 – 它著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。们还不存在！$refs 也不是响应式的，本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。因此你不应该试图用它在模版中做数据绑定。
【版权所有，侵权必究】【转载请注明来源】- 参考： 子组件 Refs 【转载请注明来源】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net
slot
用于标记往哪个slot中插入子组件内容。【作者：唐霜】转载请注明出处：www.tangshuang.net详细用法，请参考下面指南部分的链接。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】- 参考： 具名 Slots 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。
内置组件
我们新注册一个组件之后，就可以用这个组件本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】的名称作为一个html元素插入到你的模板未经授权，禁止复制转载。【作者：唐霜】中去。但是，vue保留了几个组件名，而这【版权所有】唐霜 www.tangshuang.net【本文受版权保护】几个组件可以直接调用，是vue的内置组件【本文受版权保护】【转载请注明来源】，实现对应的功能。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】component
- Props：
- is – string | 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ComponentDefinition 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。| ComponentConstruct【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】or 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
- inline-template R转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net11; boolean 【原创不易，请尊重版权】【版权所有，侵权必究】【转载请注明来源】
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【转载请注明来源】
- 用法：渲染一个“元组件”为动态组件。依 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】is 的值，来决定哪个组件被渲染。 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
- 参考： 动态组件 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
transition
- Props：
- name – string,原创内容，盗版必究。【原创内容，转载请注明出处】 用于自动生成 CSS 过渡类名。例如：【转载请注明来源】【原创不易，请尊重版权】name: ‘fade原创内容，盗版必究。转载请注明出处：www.tangshuang.net217; 将自动拓展为.fade-ent转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】er，.fade-enter-activ著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nete等。默认类名为 “v【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。221; 【本文首发于唐霜的博客】【作者：唐霜】【本文受版权保护】
- appear – boole原创内容，盗版必究。原创内容，盗版必究。an, 是否在初始渲染时使用过渡。默认为【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】 false。 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net
- css – boolean,【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】 是否使用 CSS 过渡类。默认为 tr本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netue。如果设置为 false，将只通过组【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。件事件触发注册的 JavaScript 原创内容，盗版必究。原创内容，盗版必究。钩子。 转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- type – string,【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】 指定过渡事件类型，侦听过渡何时结束。有【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】效值为 “transitio本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netn” 和 “an转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】imation”。默认 Vu原创内容，盗版必究。【原创内容，转载请注明出处】e.js 将自动检测出持续时间长的为过渡原创内容，盗版必究。原创内容，盗版必究。事件类型。 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- mode – string,【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net 控制离开/进入的过渡时间序列。有效的模【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】式有 “out-inR【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】21; 和 “in-out&【本文首发于唐霜的博客】【本文受版权保护】#8221;；默认同时生效。 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- enter-class – 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。string 【原创内容，转载请注明出处】原创内容，盗版必究。【本文首发于唐霜的博客】
- leave-class – 【转载请注明来源】【作者：唐霜】string 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【作者：唐霜】
- enter-active-class &【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。#8211; string 未经授权，禁止复制转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】
- leave-active-class &本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】#8211; string 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【转载请注明来源】
- appear-class –转载请注明出处：www.tangshuang.net【本文受版权保护】 string 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
- appear-active-class 【关注微信公众号：wwwtangshuangnet】【本文受版权保护】– string 【转载请注明来源】【转载请注明来源】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- 事件：
- before-enter 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
- enter 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net
- after-enter 【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
- before-leave 【本文受版权保护】本文版权归作者所有，未经授权不得转载。
- leave 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】
- after-leave 【版权所有，侵权必究】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
- before-appear 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
- appear 【版权所有，侵权必究】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。
- after-appear 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】
- 作用：<transition>【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。; 元素作为单个元素/组件的过渡效果。&【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netlt;transition> 不会【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。渲染额外的 DOM 元素，也不会出现在检未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net测过的组件层级中。它只是将内容包裹在其中转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，简单的运用过渡行为。 【版权所有，侵权必究】【原创内容，转载请注明出处】
- 参考： 过渡：进入，离开和列表 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
<!-- 简单元素 -->
<transition>
<div v-if="ok">toggled content</div>
</transition>
<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
<component :is="view"></component>
</transition>
<!-- 事件钩子 -->
<div id="transition-demo">
<transition @after-enter="transitionComplete">
<div v-show="ok">toggled content</div>
</transition>
</div>
new Vue({
...
methods: {
transitionComplete: function (el) {
// 传入 'el' 这个 DOM 元素作为参数。
}
}
...
}).$mount('#transition-demo')
transition-group
- Props：
- tag – string, 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。默认为 span 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】未经授权，禁止复制转载。
- move-class – 覆转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。盖移动过渡期间应用的 CSS 类。 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- 除了 mode，其他特性和 <tr【原创不易，请尊重版权】原创内容，盗版必究。ansition> 相同。 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
- 事件：
- 事件和 <transition&g本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。t; 相同. 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
【原创不易，请尊重版权】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 作用：<transition-gr著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】oup> 元素作为多个元素/组件的【版权所有，侵权必究】【未经授权禁止转载】过渡效果。<transition-【版权所有，侵权必究】【转载请注明来源】group> 渲染一个真实的 DO【未经授权禁止转载】【未经授权禁止转载】M 元素。默认渲染 <span&g转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett;，可以通过 tag 属性配置哪个元素【原创内容，转载请注明出处】【原创不易，请尊重版权】应该被渲染。注意，每个 <tran著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netsition-group> 的子节【原创不易，请尊重版权】未经授权，禁止复制转载。点必须有 独立的key ，动画才能正常工原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】作<transition-grou【本文受版权保护】【版权所有】唐霜 www.tangshuang.netp> 支持通过 CSS trans【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netform 过渡移动。当一个子节点被更新，【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】从屏幕上的位置发生变化，它将会获取应用 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】CSS 移动类（通过 name 属性或配著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】置 move-class 属性自动生成）【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】。如果 CSS transform 属性【原创不易，请尊重版权】未经授权，禁止复制转载。是“可过渡”属性，当应用移动类时，将会使本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。用 FLIP 技术 使元素流畅地到达动画终点。 【原创内容，转载请注明出处】【未经授权禁止转载】原创内容，盗版必究。
- 参考： 过渡：进入，离开和列表 【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【转载请注明来源】
<transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>
keep-alive
- Props:
- include – 字符串或【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】正则表达式。只有匹配的组件会被缓存。 本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
- exclude – 字符串或【转载请注明来源】著作权归作者所有，禁止商业用途转载。正则表达式。任何匹配的组件都不会被缓存。 【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【转载请注明来源】
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- 作用：<keep-alive>著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】; 包裹动态组件时，会缓存不活动的组件实本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】例，而不是销毁它们。和 <tran【本文受版权保护】本文作者：唐霜，转载请注明出处。sition> 相似，<ke【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ep-alive> 是一个抽象组件原创内容，盗版必究。本文作者：唐霜，转载请注明出处。：它自身不会渲染一个 DOM 元素，也不著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】会出现在父组件链中。当组件在 <k【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。eep-alive> 内被切换，它【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】的 activated 和 deacti本文版权归作者所有，未经授权不得转载。【本文受版权保护】vated 这两个生命周期钩子函数将会被【原创不易，请尊重版权】【转载请注明来源】对应执行。主要用于保留组件状态或避免重新【关注微信公众号：wwwtangshuangnet】【作者：唐霜】渲染。 【转载请注明来源】【作者：唐霜】
- include and exclude 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。（2.1.0 新增）include 和 【原创内容，转载请注明出处】原创内容，盗版必究。exclude 属性允许组件有条件地缓存本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】。二者都可以用逗号分隔字符串或正则表达式【版权所有，侵权必究】原创内容，盗版必究。来表示。匹配首先检查组件自身的 name【本文受版权保护】【转载请注明来源】 选项，如果 name 选项不可用，则匹原创内容，盗版必究。原创内容，盗版必究。配它的局部注册名称（父组件 compon转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netents 选项的键值）。匿名组件不能被匹【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。配。 【原创不易，请尊重版权】未经授权，禁止复制转载。
- <keep-alive> 不【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。会在函数式组件中正常工作，因为它们没有缓【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】存实例。 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【作者：唐霜】
- 参考： 动态组件 – keep-al【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ive 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive> <!-- 多个条件判断的子组件 --> <keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive> <!-- 和 <transition> 一起使用 --> <transition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>
<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 v-bind) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive>
slot
- Props：name – s【原创不易，请尊重版权】【作者：唐霜】tring, 用于命名插槽。 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net
- Usage:<slot> 元本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。素作为组件模板之中的内容分发插槽。 &l转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett;slot> 元素自身将被替换。【未经授权禁止转载】【原创不易，请尊重版权】详细用法，请参考下面教程的链接。 【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- 参考： 使用Slots分发内容 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
Ajax请求：vue-resource
写前端应用，不可能绕过ajax请求数据。【原创内容，转载请注明出处】原创内容，盗版必究。现在已经有比较多专门处理数据请求的模块，著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】比如axio，以及近期火起来的fetch【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。。vue官方也提供了一个插件（后面会有专【转载请注明来源】本文作者：唐霜，转载请注明出处。门的章节讲插件）vue-resource本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，它是专门用来为vue提供数据请求的。当【原创内容，转载请注明出处】【未经授权禁止转载】然，其实你也可以不用，而使用其他的aja【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netx请求模块，甚至在vue里面混合使用jq【原创内容，转载请注明出处】【原创不易，请尊重版权】uery。anyway，我们这一章主要介【转载请注明来源】未经授权，禁止复制转载。绍vue-resource。
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】这里有个小故事，vue-resource【本文受版权保护】【本文首发于唐霜的博客】不是官方开发的，而是vue的一个早期用户【版权所有，侵权必究】【原创内容，转载请注明出处】开发的，后来官方觉得很好，就作为了官方推【关注微信公众号：wwwtangshuangnet】【作者：唐霜】荐插件。因为插件的使用非常方便，使用文档【转载请注明来源】【关注微信公众号：wwwtangshuangnet】太少，以至于都没有专门的一个网站来介绍它转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】，你可以直接在github上看它的文档和源码。如果你想看中文快速入门的资料，可以看这位作者写的教程，非常简单，但很容易入门。
本文作者：唐霜，转载请注明出处。【转载请注明来源】【本文首发于唐霜的博客】安装
如果是用<script>引入【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】vue-resource，那就很简单了，原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】不用说，但是它需要在vue.js引入之后原创内容，盗版必究。未经授权，禁止复制转载。，你的代码开始之前引入vue-resou【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netrce.js，这样才能正常使用。
【原创内容，转载请注明出处】
如果使用npm安装，并且使用模块化方式著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】引入，那么应该这样：
import Vue from 'vue'import VueResource from 'vue-resource' Vue.use(VueResource)
Vue.use就是使用插件的一个方法，使【版权所有】唐霜 www.tangshuang.net【本文受版权保护】用之后，全局支持VueResource。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。下面的一切介绍，都基于这个use，这得你【转载请注明来源】著作权归作者所有，禁止商业用途转载。读到后文的插件一章才能完全理解，目前来讲【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，你只需要这样去操作即可。
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】配置方式
使用全局配置设置默认值
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。Vue.http.options.root = '/root'; Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';
在你的Vue组件配置中设置默认值
未经授权，禁止复制转载。【未经授权禁止转载】new Vue({
http: {
root: '/root',
headers: {
Authorization: 'Basic YXBpOnBhc3N3b3Jk'
}
}
})
调用方式
全局调用
未经授权，禁止复制转载。【作者：唐霜】Vue.http(options)
实例内调用
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【本文首发于唐霜的博客】this.$http(options)
便捷方法
- get(url, [options]) 【转载请注明来源】原创内容，盗版必究。【版权所有，侵权必究】【本文受版权保护】
- head(url, [options]) 【未经授权禁止转载】未经授权，禁止复制转载。
- delete(url, [options未经授权，禁止复制转载。【本文受版权保护】]) 原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【转载请注明来源】
- jsonp(url, [options]转载请注明出处：www.tangshuang.net【作者：唐霜】) 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】
- post(url, [body], [o【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ptions]) 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】未经授权，禁止复制转载。
- put(url, [body], [op【版权所有】唐霜 www.tangshuang.net【转载请注明来源】tions]) 【原创内容，转载请注明出处】【本文受版权保护】【转载请注明来源】未经授权，禁止复制转载。
- patch(url, [body], [著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。options]) 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
选项
| 参数 | 类型 | 描述 |
|---|---|---|
| url | string | 请求的目标URL |
| body | Object, FormData, string | 作为请求体发送的数据 |
| headers | Object | 作为请求头部发送的头部对象 |
| params | Object | 作为URL参数的参数对象 |
| method | string | HTTP方法 (例如GET，POST，…) |
| timeout | number | 请求超时（单位：毫秒） (0表示永不超时) |
| before | function(request) | 在请求发送之前修改请求的回调函数 |
| progress | function(event) | 用于处理上传进度的回调函数 ProgressEvent |
| credentials | boolean | 是否需要出示用于跨站点请求的凭据 |
| emulateHTTP | boolean | 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。 |
| emulateJSON | boolean | 设置请求体的类型为application/x-www-form-urlencoded |
响应
vue-resource的请求实际是一个【本文受版权保护】【作者：唐霜】promise，响应的时候就可以通过.t【未经授权禁止转载】【本文受版权保护】hen来获取响应结果。
【本文受版权保护】【未经授权禁止转载】【作者：唐霜】【本文首发于唐霜的博客】通过如下属性和方法处理一个请求获取到的响本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】应对象：
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【版权所有，侵权必究】| 属性 | 类型 | 描述 |
|---|---|---|
| url | string | 响应的URL源 |
| body | Object, Blob, string | 响应体数据 |
| headers | Header | 请求头部对象 |
| ok | boolean | 当HTTP响应码为200到299之间的数值时该值为true |
| status | number | HTTP响应吗 |
| statusText | string | HTTP响应状态 |
| 方法 | 类型 | 描述 |
| text() | 约定值 | 以字符串方式返回响应体 |
| json() | 约定值 | 以格式化后的json对象方式返回响应体 |
| blob() | 约定值 | 以二进制Blob对象方式返回响应体 |
举个栗子：
【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then((response) => {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// set data on vm
this.$set('someData', response.body);
// 下面这句厉害了，它让你的下一个then可以得到返回的json数据
return response.json()
}, (response) => {
// error callback
})
.then(data => {
// 因为上面return response.json()，所以这里的data就是服务端返回的json数据
})
使用blob()方法从响应中获取一副图像本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。的内容。你甚至可以用这个blob来直接显【作者：唐霜】著作权归作者所有，禁止商业用途转载。示图片，而不是通过图片的src。
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。拦截器
全局定义拦截器后，它可用于前置和后置处理【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】请求。
【未经授权禁止转载】【原创内容，转载请注明出处】请求处理
Vue.http.interceptors.push((request, next) => {
// modify request
request.method = 'POST';
// continue to next interceptor
next();
});
请求与响应处理
Vue.http.interceptors.push((request, next) => {
// modify request
request.method = 'POST';
// continue to next interceptor
next((response) => {
// modify response
response.body = '...';
});
});
返回一个响应并且停止处理
Vue.http.interceptors.push((request, next) => {
// modify request ...
// stop and return response
next(request.respondWith(body, {
status: 404,
statusText: 'Not found'
}));
});
资源方式
如果你和restful接口交换数据，那么【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】就有一个“资源”的概念，资源对应一个ur转载请注明出处：www.tangshuang.net【作者：唐霜】l，所以vue-resource有一个更【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】加抽象的方法：Vue.resource或【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。this.$resource。
【原创内容，转载请注明出处】【转载请注明来源】转载请注明出处：www.tangshuang.net【作者：唐霜】方法
let rsrc = this.$resource(url, [params], [actions], [options])
这里的rsrc就是建立的一个资源实例，你【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net可以对它进行restful的操作，操作方本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】法如下。来说一下参数：
未经授权，禁止复制转载。【原创内容，转载请注明出处】【转载请注明来源】- url: 请求的资源路径，应该不用解释吧 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】
- params: url模板参数，下面会讲【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。什么是url模板 【未经授权禁止转载】【本文首发于唐霜的博客】
- actions: 自定义操作，除了下面的著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】get, save, query等操作，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。你还可以自定义一些操作，通过action未经授权，禁止复制转载。【原创不易，请尊重版权】s来增加，这个也下面讲 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
- options: 跟$https的opt【转载请注明来源】【原创不易，请尊重版权】ions是一样的 【本文受版权保护】未经授权，禁止复制转载。【转载请注明来源】
url模板
vue-resource使用了url-t著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】emplate来解析url模板，有兴趣的【版权所有，侵权必究】【转载请注明来源】同学可以去研究一下url-templat原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。e。具体来说，就是下面这种用法：
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】let rsrc = this.$resource('/book/{id}', {id: 12})
上面说了第二个参数prams是url模板本文作者：唐霜，转载请注明出处。【作者：唐霜】的参数。按照上面这个代码，resourc【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。e的url会指向：/book/12，这个【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】应该非常好理解。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。默认操作
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'},
怎么用呢？
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】rsrc.get(options).then(..)..
操作只有一个参数options，opti【转载请注明来源】本文作者：唐霜，转载请注明出处。ons里面就可以放headers了。它的原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】返回值就是上面$http的响应了。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net自定义操作
上面说道，actions这个参数可以让你原创内容，盗版必究。【未经授权禁止转载】自己自定义自己的操作。比如：
【转载请注明来源】【本文首发于唐霜的博客】let actions = {
patch: {
method: 'PATCH',
},
}
let rsrc = this.$srouce('/book/{id}', {id: 12}, actions)
rsrc.patch().then(..)..
相当于你自己新增一个方法，它的参数也是o转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netptions。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。头部对象
{
// Constructor
constructor(object: headers)
// Properties
map (object)
// Methods
has(string: name) (boolean)
get(string: name) (string)
getAll() (string[])
set(string: name, string: value) (void)
append(string: name, string: value) (void)
delete(string: name) (void)
forEach(function: callback, any: thisArg) (void)
}
怎么用头部呢？比如要要请求一个资源的时候本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】，必须通过头部来进行验证：
【原创不易，请尊重版权】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】var headers = {
'User-Token': 'xxx',
}
var options = {
headers,
}
var rsrc = this.$resource(url, options)rsrc.get().then(..)...
但是有个点需要注意一下，发送header【版权所有，侵权必究】【作者：唐霜】s只需要传入一个对象字面量，而返回的re转载请注明出处：www.tangshuang.net【版权所有，侵权必究】sponse里面的headers是一个h本文版权归作者所有，未经授权不得转载。【转载请注明来源】ttp Header对象。Header对本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。象就有本节上述的这些属性和方法。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】发送表单数据
使用FormData发送表单。
未经授权，禁止复制转载。【版权所有，侵权必究】{
var formData = new FormData();
// append string
formData.append('foo', 'bar');
// append Blob/File object
formData.append('pic', fileInput, 'mypic.jpg');
// POST /someUrl
this.$http.post('/someUrl', formData).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
终止请求
当一个新的请求被发送的时候请终止上一个请【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。求。例如在一个自动完成的输入框中输入的时原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。候。
【作者：唐霜】【版权所有，侵权必究】{
// GET /someUrl
this.$http.get('/someUrl', {
// use before callback
before(request) {
// abort previous request, if exists
if (this.previousRequest) {
this.previousRequest.abort();
}
// set previous request on Vue instance
this.previousRequest = request;
}
}).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
插件
本章教你怎么给vue写插件。但是，在写插转载请注明出处：www.tangshuang.net【未经授权禁止转载】件之前，你应该回忆一下，前面我们说过，用【转载请注明来源】本文作者：唐霜，转载请注明出处。Vue.use安装插件。知道怎么用之后，本文版权归作者所有，未经授权不得转载。【本文受版权保护】在来看怎么开发一个插件就比较容易理解一些著作权归作者所有，禁止商业用途转载。【本文受版权保护】。
【本文受版权保护】转载请注明出处：www.tangshuang.net【本文受版权保护】开发插件
插件通常会为Vue添加全局功能。插件的范原创内容，盗版必究。未经授权，禁止复制转载。围没有限制——一般有下面几种：
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。- 添加全局方法或者属性，如: vue-element 【作者：唐霜】【作者：唐霜】【未经授权禁止转载】
- 添加全局资源：指令/过滤器/过渡（过渡也【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】是vue里面的一项功能，会在下面的章节详【原创不易，请尊重版权】【原创不易，请尊重版权】细阐述）等，如 vue-touch 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
- 通过全局 mixin方法添加一些组件选项著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，如: vuex 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。
- 添加 Vue 实例方法，通过把它们添加到【原创不易，请尊重版权】【本文首发于唐霜的博客】 Vue.prototype 上实现。 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【本文首发于唐霜的博客】
- 一个库，提供自己的 API，同时提供上面本文作者：唐霜，转载请注明出处。原创内容，盗版必究。提到的一个或多个功能，如 vue-router 【版权所有，侵权必究】未经授权，禁止复制转载。原创内容，盗版必究。【原创内容，转载请注明出处】
Vue.js 的插件应当有一个公开方法 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。install 。这个方法的第一个参数是【原创内容，转载请注明出处】【原创内容，转载请注明出处】 Vue 构造器 , 第二个参数是一个可著作权归作者所有，禁止商业用途转载。【作者：唐霜】选的选项对象:
【原创内容，转载请注明出处】【作者：唐霜】MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例属性或方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}
}
利用上面四种方式，你就可以更好的控制你的【版权所有，侵权必究】【作者：唐霜】组件或应用了。而除了第4种，前面三种你在【作者：唐霜】【关注微信公众号：wwwtangshuangnet】前面其实已经阅读到过了，有兴趣可以回到对【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net应的章节复习一下。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【转载请注明来源】使用插件
通过全局方法 Vue.use() 使用插未经授权，禁止复制转载。【原创内容，转载请注明出处】件:
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)
也可以传入一个选项对象:
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文受版权保护】著作权归作者所有，禁止商业用途转载。Vue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止注册相同插件多【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】次，届时只会注册一次该插件。
【原创不易，请尊重版权】
一些插件，如 vue-router 如【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】果 Vue 是全局变量则自动调用 Vue原创内容，盗版必究。【转载请注明来源】.use() 。不过在模块环境中应当始终【原创内容，转载请注明出处】【作者：唐霜】显式调用 Vue.use() :
// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)
生命周期
生命周期，是组件思想中非常重要的一个环节【本文受版权保护】【本文首发于唐霜的博客】。简单的说就是一个组件从一个类，被实例化本文作者：唐霜，转载请注明出处。【作者：唐霜】之后执行的一系列操作，到最后这个实例被销【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net毁的整个过程。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。什么是生命周期？
每个 Vue 实例在被创建之前都要经过一未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net系列的初始化过程。例如，实例需要配置数据转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。观测(data observer)、编译【本文受版权保护】原创内容，盗版必究。模版、挂载实例到 DOM ，然后在数据变原创内容，盗版必究。【本文首发于唐霜的博客】化时更新 DOM 。在这个过程中，实例也本文作者：唐霜，转载请注明出处。【转载请注明来源】会调用一些 生命周期钩子 ，这就给我们提本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net供了执行自定义逻辑的机会。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。我们只需要在实例中使用这些钩子函数，那么【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】当生命周期进行到特定位置时，就会调用这些【本文首发于唐霜的博客】未经授权，禁止复制转载。函数，从而进行函数中规定的操作，这样就可【转载请注明来源】【作者：唐霜】以在一个实例的不同生命阶段执行一些你想要转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】执行的操作。
【原创不易，请尊重版权】【本文首发于唐霜的博客】【原创不易，请尊重版权】钩子的 this 指向调用它的 Vue 【作者：唐霜】著作权归作者所有，禁止商业用途转载。实例。一些用户可能会问 Vue.js 是【未经授权禁止转载】【原创不易，请尊重版权】否有“控制器”的概念？答案是，没有。组件【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】的自定义逻辑可以分布在这些钩子中。
【本文受版权保护】【作者：唐霜】生命周期示意图
本文版权归作者所有，未经授权不得转载。
不用牢牢记住这张图，你需要的时候，打开【原创内容，转载请注明出处】【本文受版权保护】本书，找到这里即可。这张图将来会在你的开未经授权，禁止复制转载。【作者：唐霜】发中经常用到。
生命周期钩子函数
所有的生命周期钩子自动绑定 this 上未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net下文到实例中，因此你可以访问数据，对属性【转载请注明来源】【本文受版权保护】和方法进行运算。这意味着 你不能使用箭头本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】函数来定义一个生命周期方法 (例如 cr【关注微信公众号：wwwtangshuangnet】【作者：唐霜】eated: () => this未经授权，禁止复制转载。【本文受版权保护】.fetchTodos())。这是因为箭本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】头函数绑定了父上下文，因此 this 与本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。你期待的 Vue 实例不同， this.著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。fetchTodos 的行为未定义。
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。原创内容，盗版必究。beforeCreate
在实例初始化之后，数据观测(data o著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】bserver) 和 event/wat【作者：唐霜】未经授权，禁止复制转载。cher 事件配置之前被调用。
【转载请注明来源】未经授权，禁止复制转载。created
实例已经创建完成之后被调用。在这一步，实【转载请注明来源】【未经授权禁止转载】例已完成以下的配置：数据观测(data 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】observer)，属性和方法的运算， 【原创内容，转载请注明出处】【未经授权禁止转载】watch/event 事件回调。然而，【作者：唐霜】【关注微信公众号：wwwtangshuangnet】挂载阶段还没开始，$el 属性目前不可见【版权所有，侵权必究】【版权所有，侵权必究】。
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【关注微信公众号：wwwtangshuangnet】beforeMount
在挂载开始之前被调用：相关的 rende【转载请注明来源】著作权归作者所有，禁止商业用途转载。r 函数首次被调用。
【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】该钩子在服务器端渲染期间不被调用。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】【转载请注明来源】mounted
el 被新创建的 vm.$el 替换，并【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】挂载到实例上去之后调用该钩子。如果 ro本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ot 实例挂载了一个文档内元素，当 mo本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】unted 被调用时 vm.$el 也在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。文档内。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】该钩子在服务器端渲染期间不被调用。
【本文受版权保护】未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新【版权所有，侵权必究】【原创内容，转载请注明出处】渲染和打补丁之前。
原创内容，盗版必究。【版权所有，侵权必究】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。你可以在这个钩子中进一步地更改状态，这不【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。会触发附加的重渲染过程。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。该钩子在服务器端渲染期间不被调用。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。updated
由于数据更改导致的虚拟 DOM 重新渲染【未经授权禁止转载】【本文首发于唐霜的博客】和打补丁，在这之后会调用该钩子。
【作者：唐霜】【转载请注明来源】本文版权归作者所有，未经授权不得转载。当这个钩子被调用时，组件 DOM 已经更【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。新，所以你现在可以执行依赖于 DOM 的本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。操作。然而在大多数情况下，你应该避免在此【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】期间更改状态，因为这可能会导致更新无限循本文作者：唐霜，转载请注明出处。原创内容，盗版必究。环。
转载请注明出处：www.tangshuang.net【作者：唐霜】转载请注明出处：www.tangshuang.net原创内容，盗版必究。该钩子在服务器端渲染期间不被调用。
【作者：唐霜】本文作者：唐霜，转载请注明出处。activated
keep-alive 组件激活时调用。
本文版权归作者所有，未经授权不得转载。
该钩子在服务器端渲染期间不被调用。
参考：构建组件 – keep-al【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ive动态组件 – keep-al【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ive
【本文受版权保护】【作者：唐霜】本文作者：唐霜，转载请注明出处。deactivated
keep-alive 组件停用时调用。
未经授权，禁止复制转载。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。可用。
【作者：唐霜】
该钩子在服务器端渲染期间不被调用。
destroyed
Vue 实例销毁后调用。调用后，Vue 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net实例指示的所有东西都会解绑定，所有的事件【作者：唐霜】【本文受版权保护】监听器会被移除，所有的子实例也会被销毁。
著作权归作者所有，禁止商业用途转载。
该钩子在服务器端渲染期间不被调用。
Virtual DOM 虚拟DOM
终于写（copy）了那么多章之后，要来谈【本文首发于唐霜的博客】未经授权，禁止复制转载。一谈Virtual DOM。相信很多人对著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。这项技术早都垂涎三尺，想要对它的原理进行原创内容，盗版必究。【本文首发于唐霜的博客】窥探。本章将结合vue简单梳理Virtu【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netal DOM的原理。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】vue2.0之后才支持Virtual D【本文首发于唐霜的博客】【未经授权禁止转载】OM，它介于编译template和渲染界【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net面之间。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。Virtual DOM的灵感来源
DOM是一个很昂贵的对象，之所以昂贵，是【原创不易，请尊重版权】【转载请注明来源】因为它内部的方法太多，而且相互联系。DO转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。M本质也是一个对象，但是这个对象首先有非【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】常多的属性和方法，一个DOM节点对象就会【版权所有】唐霜 www.tangshuang.net【本文受版权保护】占用非常多的内存，其次，当你操作DOM节转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】点的时候，DOM对象会不断操作自己，同时未经授权，禁止复制转载。【版权所有，侵权必究】还会操作和自己相关的其他DOM节点对象，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】所以整个DOM树是牵一发而动全身，操作D【转载请注明来源】【版权所有，侵权必究】OM就会消耗很多资源。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。既然DOM是一个对象，跟javascri【本文受版权保护】原创内容，盗版必究。pt的其他对象并没有本质上的不同，那么，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】可以不可以在另一个空间复制一个和DOM结【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net构相同的对象，但是，这个新的对象会删除很本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。多方法或属性，只保留几个必要的，而操作这未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】些对象的时候，不会有那么高消耗的连带操作【作者：唐霜】【原创内容，转载请注明出处】，这样操作这个对象和操作DOM就完全是两【转载请注明来源】【作者：唐霜】回事，性能上肯定快很多。最后，就是当操作原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。完之后，怎么把这个对象跟真实的DOM映射【转载请注明来源】【原创内容，转载请注明出处】起来？你可能还记得前面提到过一个key属【作者：唐霜】著作权归作者所有，禁止商业用途转载。性，通过一个唯一标记来确定哪些位置改变了【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，针对这些改变的对象，找到对应的DOM节转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net点，进行重新渲染。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netvue2.0中的Virtual DOM
在前面的阅读中，你已经见过VNode了，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。它是vue2里面加入的一种新对象，用来实【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】现Virtual DOM。在vue渲染真【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。实的DOM之前，内部的响应式系统改变的都原创内容，盗版必究。【本文受版权保护】是VNode。响应式系统在下一章讲。
本文版权归作者所有，未经授权不得转载。【本文受版权保护】VNode模拟DOM树
在vue中Virtual DOM是通过V【本文受版权保护】本文作者：唐霜，转载请注明出处。Node类来表达的，每个DOM元素或vu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete组件都对应一个VNode对象。VNod本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。e结构如下（图来自《vue.js权威指南【未经授权禁止转载】【原创内容，转载请注明出处】》）：
【本文首发于唐霜的博客】
VNode
它包含了tag, text, elm, 【作者：唐霜】【版权所有】唐霜 www.tangshuang.netdata, parent, childr转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。en等属性。它可以由真实的DOM生成，也【转载请注明来源】【原创不易，请尊重版权】可以由组件生成。如果由组件生成的话，VN【本文受版权保护】著作权归作者所有，禁止商业用途转载。ode的componentOptions原创内容，盗版必究。本文作者：唐霜，转载请注明出处。有值，而如果由DOM生成，则该值空。
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】那么有什么方法获取一个元素的VNode呢【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。？没有。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net原创内容，盗版必究。VNodeComponentOptions
如果VNode是由组件生成的，所有的组件【转载请注明来源】【版权所有，侵权必究】相关信息都在这个对象里面。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】VNodeData
VNode中的节点数据data属性的详细【原创内容，转载请注明出处】原创内容，盗版必究。描述，包括slot, ref, stat【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】icClass, style, clas未经授权，禁止复制转载。【原创内容，转载请注明出处】s, props, attrs, tra本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。nsition, directives等【本文受版权保护】本文作者：唐霜，转载请注明出处。信息。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。VNodeDirective
VNodeData中的directive【转载请注明来源】转载请注明出处：www.tangshuang.nets属性的详细信息，包括name, val原创内容，盗版必究。未经授权，禁止复制转载。ue, oldValue, arg, m【原创内容，转载请注明出处】【本文首发于唐霜的博客】odifiers等。
【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】如何生成VNode？
前面我们提到过render函数的参数cr【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.neteateElement，其实你再回头去看【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。createElement这个函数，就大【作者：唐霜】【版权所有，侵权必究】概清楚是怎么回事，它实际上就生成了VNo【版权所有，侵权必究】【版权所有，侵权必究】de（一个对象）。但是如果我们传入了te未经授权，禁止复制转载。原创内容，盗版必究。mplate而没有传入render函数呢本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net？vue会通过一个ast语法优化，对我们【原创不易，请尊重版权】【未经授权禁止转载】传入的template经过HTML解析器【原创不易，请尊重版权】【转载请注明来源】之后的对象转化为给createEleme【转载请注明来源】【版权所有，侵权必究】nt的参数。
未经授权，禁止复制转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】总之，你会发现，vue的render函数【转载请注明来源】本文版权归作者所有，未经授权不得转载。实际上是要生成VNode，它到真实的DO原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。M，还有一个过程。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【本文首发于唐霜的博客】VNode patch生成DOM
Virtual DOM之所以快，是因为在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。生成真实的DOM之前，通过内部的一个简单转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的多的对象的对比，判断是否有变化，具体的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。变化在哪里，这个对比的过程比直接操作DO【作者：唐霜】【本文首发于唐霜的博客】M要快非常多。
【本文首发于唐霜的博客】原创内容，盗版必究。vue还有一个特点，VNode还具有队列【版权所有，侵权必究】【本文首发于唐霜的博客】，当VNode发生变化时，会放在一个队列转载请注明出处：www.tangshuang.net【未经授权禁止转载】里，并不会马上去更新DOM，而是在遍历完【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。整个队列之后才更新DOM。所以性能上又好原创内容，盗版必究。本文作者：唐霜，转载请注明出处。了一些。
【本文受版权保护】原创内容，盗版必究。vue里对比新旧DOM的方法是patch【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netVnode这个方法，当它决定是否要更新D本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。OM之前，会比较DOM节点对应的新旧VN原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ode，只有不同时，才进行更新，这个对比转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】是在VNode内部，因此比对比DOM快很【作者：唐霜】【原创内容，转载请注明出处】多。patchValue这个方法是vue【转载请注明来源】著作权归作者所有，禁止商业用途转载。里面非常出色，可以说是vue里面使得Vi【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】rtual DOM可行的核心部分。它的实著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】现比较复杂，本书也说不清楚，你要是有兴趣【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，可以阅读源码，细心研究。
【作者：唐霜】【原创内容，转载请注明出处】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。vue生成真正的DOM靠createEl【原创不易，请尊重版权】【原创内容，转载请注明出处】m方法，它把一个VNode真正转化为真实【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net的DOM。
【原创内容，转载请注明出处】原创内容，盗版必究。响应式原理
我们已经涵盖了大部分的基础知识 R【转载请注明来源】未经授权，禁止复制转载。11; 现在是时候深入底层原理了！Vue【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net 最显著的特性之一便是不太引人注意的响应【本文受版权保护】著作权归作者所有，禁止商业用途转载。式系统(reactivity syste原创内容，盗版必究。【本文受版权保护】m)。模型层(model)只是普通 Ja【本文首发于唐霜的博客】未经授权，禁止复制转载。vaScript 对象，修改它则更新视图【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。(view)。这会让状态管理变得非常简单【版权所有，侵权必究】【版权所有，侵权必究】且直观，不过理解它的工作原理以避免一些常【作者：唐霜】未经授权，禁止复制转载。见的问题也是很重要的。在本章中，我们将开【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】始深入挖掘 Vue 响应式系统的底层细节【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net如何追踪变化
把一个普通 JavaScript 对象传原创内容，盗版必究。本文作者：唐霜，转载请注明出处。给 Vue 实例的 data 选项，Vu转载请注明出处：www.tangshuang.net【转载请注明来源】e 将遍历此对象所有的属性，并使用 Object.definePropert未经授权，禁止复制转载。未经授权，禁止复制转载。y 把这些属性全部转为 getter/se【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。tter。Object.definePr【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。operty 是仅 ES5 支持，且无法本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net shim 的特性，这也就是为什么 Vu【转载请注明来源】著作权归作者所有，禁止商业用途转载。e 不支持 IE8 以及更低版本浏览器的【转载请注明来源】本文作者：唐霜，转载请注明出处。原因。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】用户看不到 getter/setter，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。但是在内部它们让 Vue 追踪依赖，在属【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。性被访问和修改时通知变化。这里需要注意的【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net问题是浏览器控制台在打印数据对象时 ge本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】tter/setter 的格式化并不同，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。每个组件实例都有相应的 watcher 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】实例对象，它会在组件渲染的过程中把属性记【作者：唐霜】著作权归作者所有，禁止商业用途转载。录为依赖，之后当依赖项的 setter 原创内容，盗版必究。转载请注明出处：www.tangshuang.net被调用时，会通知 watcher 重新计未经授权，禁止复制转载。【本文首发于唐霜的博客】算，从而致使它关联的组件得以更新。
【未经授权禁止转载】
变化检测问题
受现代 JavaScript 的限制（以著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。及废弃 Object.observe），本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。Vue 不能检测到对象属性的添加或删除。【版权所有，侵权必究】【版权所有，侵权必究】由于 Vue 会在初始化实例时对属性执行转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。 getter/setter 转化过程，转载请注明出处：www.tangshuang.net【转载请注明来源】所以属性必须在 data 对象上存在才能【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net让 Vue 转换它，这样才能让它是响应的【本文受版权保护】【未经授权禁止转载】。例如：
未经授权，禁止复制转载。【作者：唐霜】var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应的vm.b = 2
// `vm.b` 是非响应的
Vue 不允许在已经创建的实例上动态添加【本文首发于唐霜的博客】【未经授权禁止转载】新的根级响应式属性(root-level【原创内容，转载请注明出处】【转载请注明来源】 reactive property)。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。然而它可以使用 Vue.set(obje本文版权归作者所有，未经授权不得转载。【作者：唐霜】ct, key, value) 方法将响著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。应属性添加到嵌套的对象上：
【本文首发于唐霜的博客】【本文受版权保护】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netVue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set 实例方法，未经授权，禁止复制转载。【版权所有，侵权必究】这也是全局 Vue.set 方法的别名：
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。this.$set(this.someObject,'b',2)
有时你想向已有对象上添加一些属性，例如使原创内容，盗版必究。【本文首发于唐霜的博客】用 Object.assign() 或 【原创不易，请尊重版权】【原创内容，转载请注明出处】_.extend() 方法来添加属性。但【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。是，添加到对象上的新属性不会触发更新。在【作者：唐霜】未经授权，禁止复制转载。这种情况下可以创建一个新的对象，让它包含【本文受版权保护】转载请注明出处：www.tangshuang.net原对象的属性和新的属性：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文受版权保护】未经授权，禁止复制转载。// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
声明响应式属性
由于 Vue 不允许动态添加根级响应式属本文作者：唐霜，转载请注明出处。【未经授权禁止转载】性，所以你必须在初始化实例前声明根级响应【作者：唐霜】【本文受版权保护】式属性，哪怕只是一个空值:
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你在 data 选项中未声明 mes未经授权，禁止复制转载。【原创不易，请尊重版权】sage，Vue 将警告你渲染函数在试图【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。访问的属性不存在。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net这样的限制在背后是有其技术原因的，它消除原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net了在依赖项跟踪系统中的一类边界情况，也使【未经授权禁止转载】【未经授权禁止转载】 Vue 实例在类型检查系统的帮助下运行转载请注明出处：www.tangshuang.net【作者：唐霜】的更高效。而且在代码可维护性方面也有一点【本文受版权保护】本文作者：唐霜，转载请注明出处。重要的考虑：data 对象就像组件状态的【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】概要，提前声明所有的响应式属性，可以让组【版权所有，侵权必究】【原创不易，请尊重版权】件代码在以后重新阅读或其他开发人员阅读时【原创内容，转载请注明出处】【作者：唐霜】更易于被理解。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】异步更新队列
可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。Vue 将开启一个队列，并缓冲在同一事件【作者：唐霜】本文版权归作者所有，未经授权不得转载。循环中发生的所有数据改变。如果同一个 w【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】atcher 被多次触发，只会一次推入到【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。队列中。这种在缓冲时去除重复数据对于避免本文作者：唐霜，转载请注明出处。【未经授权禁止转载】不必要的计算和 DOM 操作上非常重要。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】然后，在下一个的事件循环“tick”中，未经授权，禁止复制转载。【未经授权禁止转载】Vue 刷新队列并执行实际（已去重的）工【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】作。Vue 在内部尝试对异步队列使用原生【版权所有，侵权必究】转载请注明出处：www.tangshuang.net的 Promise.then 和 Mut本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ationObserver，如果执行环境【本文受版权保护】原创内容，盗版必究。不支持，会采用 setTimeout(f【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。n, 0) 代替。
【本文受版权保护】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】例如，当你设置 vm.someData 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。= ‘new value&#【原创不易，请尊重版权】【转载请注明来源】8217; ，该组件不会立即重新渲染。当【未经授权禁止转载】本文作者：唐霜，转载请注明出处。刷新队列时，组件会在事件循环队列清空时的【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net下一个“tick”更新。多数情况我们不需【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。要关心这个过程，但是如果你想在 DOM 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。状态更新后做点什么，这就可能会有些棘手。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。虽然 Vue.js 通常鼓励开发人员沿着【作者：唐霜】原创内容，盗版必究。“数据驱动”的方式思考，避免直接接触 D未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。OM，但是有时我们确实要这么做。为了在数【作者：唐霜】本文版权归作者所有，未经授权不得转载。据变化之后等待 Vue 完成更新 DOM本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】 ，可以在数据变化之后立即使用 Vue.【转载请注明来源】【版权所有，侵权必究】nextTick(callback) 。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】这样回调函数在 DOM 更新完成后就会调【转载请注明来源】著作权归作者所有，禁止商业用途转载。用。例如：
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick(本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】) 实例方法特别方便，因为它不需要全局 【原创不易，请尊重版权】【作者：唐霜】Vue ，并且回调函数中的 this 将本文作者：唐霜，转载请注明出处。【作者：唐霜】自动绑定到当前的 Vue 实例上：
原创内容，盗版必究。【原创内容，转载请注明出处】Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => '没有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})
路由：vue-router
当我们开始打算用vue来写app的时候，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net一定会考虑路由的问题。vue官方出品了v本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ue-router，它可以实现改变url本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】来切换视图，它有完整的中文文档，而且内容【转载请注明来源】【版权所有，侵权必究】不多，很快就可以看完，所以本书就不完完全【原创内容，转载请注明出处】【转载请注明来源】全的copy过来了，你可以进入官方的中文文档阅读。
【原创内容，转载请注明出处】
本章主要是想让你能够使用vue-rou未经授权，禁止复制转载。未经授权，禁止复制转载。ter进行开发，对于深层的机制就不予阐述【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。了。
安装和代码结构
和VueResource的安装一样，vu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete-router的安装也非常简单：
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【原创内容，转载请注明出处】【本文受版权保护】import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
接下来，打算使用它来进行路由了：
【转载请注明来源】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】// 1. 定义（路由）组件。// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes, // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
template: '<router-view></router-view>', router,
})
// 现在，应用已经启动了！
我们来观察一下上面的代码。只需要将Vue【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。Router的一个实例传给Vue实例。而【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。实例化VueRouter的时候，传入一个【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】routes，routes是一个数组，数【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。组的每个元素是一个组件（构造器参数）。
本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。其实，我们也可以传一个组件构造器进去，路【本文首发于唐霜的博客】【原创不易，请尊重版权】由实例创建时，会自动创建这个组件的实例。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】当这样的代码运行之后。当你访问/foo的【本文受版权保护】【本文受版权保护】时候，就会在<router-vie【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netw></router-vie【作者：唐霜】【作者：唐霜】w>这个地方替换为Foo这个组件的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】渲染结果。当你切换url为/bar的时候【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】，渲染的就是Bar这个组件的渲染结果。也未经授权，禁止复制转载。原创内容，盗版必究。就是视图随着url改变而改变。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。实例化参数配置
上面的new VueRouter的时候，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。需要传入参数，对路由实例进行配置，那么有【原创内容，转载请注明出处】【转载请注明来源】哪些配置项可选呢？
【关注微信公众号：wwwtangshuangnet】【本文受版权保护】原创内容，盗版必究。【本文首发于唐霜的博客】routes
- 类型: Array<RouteCo未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。nfig> 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- RouteConfig 的类型定义： 【本文受版权保护】原创内容，盗版必究。【原创内容，转载请注明出处】
declare type RouteConfig = {
path: string;
component?: Component;
name?: string; // for named routes (命名路由)
components?: { [name: string]: Component }; // for named views (命名视图组件)
redirect?: string | Location | Function;
alias?: string | Array<string>;
children?: Array<RouteConfig>; // for nested routes
beforeEnter?: (to: Route, from: Route, next: Function) => void;
meta?: any;
}
上面的红色字段可能是我们使用的最多的字段本文版权归作者所有，未经授权不得转载。【作者：唐霜】。
原创内容，盗版必究。【原创不易，请尊重版权】【转载请注明来源】【原创内容，转载请注明出处】mode
- 类型: string 【转载请注明来源】原创内容，盗版必究。
- 默认值: “hashR著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。21; (浏览器环境) | “【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。;abstract” (No未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。de.js 环境) 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
- 可选值: “hashR本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】21; | “history【作者：唐霜】著作权归作者所有，禁止商业用途转载。” | “abs转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】tract”配置路由模式:
- hash: 使用 URL hash 值来原创内容，盗版必究。【原创内容，转载请注明出处】作路由。支持所有浏览器，包括不支持 HT【本文首发于唐霜的博客】原创内容，盗版必究。ML5 History Api 的浏览器【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。。 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。
- history: 依赖 HTML5 Hi著作权归作者所有，禁止商业用途转载。【作者：唐霜】story API 和服务器配置。查看 HTML5 History 模式. 【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- abstract: 支持所有 JavaS本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】cript 运行环境，如 Node.js【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】 服务器端。如果发现没有浏览器的 API本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，路由会自动强制进入这个模式。 著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。
base
- 类型: string 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【转载请注明来源】
- 默认值: “/”【本文首发于唐霜的博客】【本文受版权保护】。应用的基路径。例如，如果整个单页应用服著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】务在 /app/ 下，然后 base 就【作者：唐霜】本文作者：唐霜，转载请注明出处。应该设为 “/app/著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net221;。 原创内容，盗版必究。【原创内容，转载请注明出处】【转载请注明来源】本文版权归作者所有，未经授权不得转载。
linkActiveClass
- 类型: string 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】
- 默认值: “router-l转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netink-active”。全局著作权归作者所有，禁止商业用途转载。【转载请注明来源】配置 <router-link&g转载请注明出处：www.tangshuang.net【版权所有，侵权必究】t; 的默认『激活 class 类名』。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net参考 router-link. 原创内容，盗版必究。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
scrollBehavior
- 类型: Function 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】
- 更多详情参考 滚动行为. 【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
(
to: Route,
from: Route,
savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}
router-view
<router-view>&【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。lt;/router-view>就【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。是用来显示VueRouter实例的渲染位【转载请注明来源】【转载请注明来源】置。<router-view>本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net; 组件是一个 functional 组著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net件，渲染路径匹配到的视图组件。<r著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netouter-view> 渲染的组件著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。还可以内嵌自己的 <router-本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。view>，根据嵌套路径，渲染嵌套【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】组件。
【原创内容，转载请注明出处】
有时候想同时（同级）展示多个视图，而不未经授权，禁止复制转载。【版权所有，侵权必究】是嵌套展示，例如创建一个布局，有 sid本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ebar（侧导航） 和 main（主内容【作者：唐霜】本文作者：唐霜，转载请注明出处。） 两个视图，这个时候命名视图就派上用场【本文受版权保护】【版权所有】唐霜 www.tangshuang.net了。你可以在界面中拥有多个单独命名的视图原创内容，盗版必究。原创内容，盗版必究。，而不是只有一个单独的出口。如果 rou原创内容，盗版必究。【作者：唐霜】ter-view 没有设置名字，那么默认转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。为 default。
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染，因此对于同个路【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net由，多个视图就需要多个组件。确保正确使用【作者：唐霜】本文作者：唐霜，转载请注明出处。 components 配置（带上 s）【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net：
原创内容，盗版必究。【转载请注明来源】const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
这个时候在实例化VueRouter的时候本文版权归作者所有，未经授权不得转载。【转载请注明来源】，就不是传component了，而是传给本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。components这个参数了。在com【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ponents里面，就要使用键值对的形式【作者：唐霜】原创内容，盗版必究。，传入不同的组件构造器给不同的name。
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。Router 实例
属性
router.app
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。- 类型: Vue instance 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net
- 配置了 router 的 Vue 根实例本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。。 【未经授权禁止转载】转载请注明出处：www.tangshuang.net
router.mode
原创内容，盗版必究。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net- 类型: string 【本文首发于唐霜的博客】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- 路由使用的 模式。 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。
router.currentRoute
【版权所有，侵权必究】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】- 类型: Route 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。
- 当前路由对应的 路由信息对象. 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。
方法
router.beforeEach(gu未经授权，禁止复制转载。原创内容，盗版必究。ard)
【本文受版权保护】
router.afterEach(ho原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ok)
- 增加全局的导航钩子。参考 导航钩子. 【本文受版权保护】【原创内容，转载请注明出处】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
router.push(location未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。)
本文版权归作者所有，未经授权不得转载。
router.replace(loca本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】tion)
【版权所有，侵权必究】
router.go(n)
本文版权归作者所有，未经授权不得转载。
router.back()
【版权所有】唐霜 www.tangshuang.net
router.forward()
- 动态的导航到一个新 url。参考 编程式导航. 【转载请注明来源】【版权所有，侵权必究】
router.getMatchedCom【作者：唐霜】【转载请注明来源】ponents(location?)
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【本文受版权保护】- 返回目标位置或是当前路由匹配的组件数组（【本文受版权保护】【原创不易，请尊重版权】是数组的定义/构造类，不是实例）。通常在原创内容，盗版必究。原创内容，盗版必究。服务端渲染的数据预加载时时候。 【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】
router.resolve(locat【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ion, current?, appen本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】d?)
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】- 2.1.0+ 原创内容，盗版必究。【版权所有，侵权必究】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】
- 解析目标位置（格式和 <route【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】r-link> 的 to prop【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。 一样），返回包含如下属性的对象： 【原创不易，请尊重版权】【版权所有，侵权必究】
{
location: Location;
route: Route;
href: string;
}
router.addRoutes(rou本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】tes)
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。- 2.2.0+ 【作者：唐霜】【转载请注明来源】【未经授权禁止转载】原创内容，盗版必究。
- 动态添加更多的路由规则。参数必须是一个符【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。合 routes 选项要求的数组。 本文版权归作者所有，未经授权不得转载。【作者：唐霜】转载请注明出处：www.tangshuang.net
router.onReady(callb【作者：唐霜】【版权所有】唐霜 www.tangshuang.netack)
【作者：唐霜】【本文受版权保护】- 2.2.0+ 【原创不易，请尊重版权】未经授权，禁止复制转载。原创内容，盗版必究。原创内容，盗版必究。
- 添加一个会在第一次路由跳转完成时被调用的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】回调函数。此方法通常用于等待异步的导航钩转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】子完成，比如在进行服务端渲染的时候。 【原创不易，请尊重版权】【本文首发于唐霜的博客】【未经授权禁止转载】【转载请注明来源】
动态路由匹配
参数匹配
我们经常需要把某种模式匹配到的所有路由，著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】全都映射到同个组件。例如，我们有一个 U【本文首发于唐霜的博客】原创内容，盗版必究。ser 组件，对于所有 ID 各不相同的【作者：唐霜】本文作者：唐霜，转载请注明出处。用户，都要使用这个组件来渲染。那么，我们转载请注明出处：www.tangshuang.net【未经授权禁止转载】可以在 vue-router 的路由路径【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】中使用『动态路径参数』（dynamic 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】segment）来达到这个效果：
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像 /user/foo 和 /u未经授权，禁止复制转载。原创内容，盗版必究。ser/bar 都将映射到相同的路由。
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】一个『路径参数』使用冒号 : 标记。当匹【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net配到一个路由时，参数值会被设置到 thi【本文受版权保护】【本文受版权保护】s.$route.params，可以在每【作者：唐霜】著作权归作者所有，禁止商业用途转载。个组件内使用。于是，我们可以更新 Use【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。r 的模板，输出当前用户的 ID：
【原创不易，请尊重版权】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
你可以在一个路由中设置多段『路径参数』，【版权所有，侵权必究】原创内容，盗版必究。对应的值都会设置到 $route.par原创内容，盗版必究。【版权所有，侵权必究】ams 中。例如：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【本文受版权保护】原创内容，盗版必究。| 模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: ‘evan’ } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: ‘evan’, post_id: 123 } |
除了 $route.params 外，$【转载请注明来源】原创内容，盗版必究。route 对象还提供了其它有用的信息，原创内容，盗版必究。转载请注明出处：www.tangshuang.net例如，$route.query（如果 U本文作者：唐霜，转载请注明出处。原创内容，盗版必究。RL 中有查询参数）、$route.ha本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。sh 等等。你可以查看 API 文档 的详细说明。
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /u【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ser/foo 导航到 user/bar未经授权，禁止复制转载。【转载请注明来源】，原来的组件实例会被复用。因为两个路由都【作者：唐霜】【版权所有】唐霜 www.tangshuang.net渲染同个组件，比起销毁再创建，复用则显得【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。更加高效。不过，这也意味着组件的生命周期转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。钩子不会再被调用。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net复用组件时，想对路由参数的变化作出响应的【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。话，你可以简单地 watch（监测变化）【本文受版权保护】原创内容，盗版必究。 $route 对象：
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
高级匹配模式
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹【本文首发于唐霜的博客】原创内容，盗版必究。配模式，例如：可选的动态路径参数、匹配零【本文首发于唐霜的博客】【作者：唐霜】个或多个、一个或多个，甚至是自定义正则匹原创内容，盗版必究。【原创不易，请尊重版权】配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。匹配。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创不易，请尊重版权】匹配优先级
有时候，同一个路径可以匹配多个路由，此时未经授权，禁止复制转载。未经授权，禁止复制转载。，匹配的优先级就按照路由的定义顺序：谁先【未经授权禁止转载】原创内容，盗版必究。定义的，谁的优先级就最高。
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。原创内容，盗版必究。嵌套路由
实际生活中的应用界面，通常由多层嵌套的组【版权所有，侵权必究】【原创不易，请尊重版权】件组合而成。同样地，URL 中各段动态路【本文受版权保护】【版权所有，侵权必究】径也按某种结构对应嵌套的各层组件。
未经授权，禁止复制转载。【原创内容，转载请注明出处】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】借助 vue-router，使用嵌套路由【版权所有，侵权必究】转载请注明出处：www.tangshuang.net配置，就可以很简单地表达这种关系。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】接着上节创建的 app：
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。<div id="app"> <router-view></router-view> </div>
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的 <router-view&本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。gt; 是最顶层的出口，渲染最高级路由匹【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】配到的组件。同样地，一个被渲染组件同样可【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net以包含自己的嵌套 <router-著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netview>。例如，在 User 组著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。件的模板添加一个 <router-未经授权，禁止复制转载。原创内容，盗版必究。view>：
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netconst User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件，需要在 Vue本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】Router 的参数中使用 childr未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。en 配置：
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net原创内容，盗版必究。const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}]
}
]
})
要注意，以 / 开头的嵌套路径会被当作根【本文受版权保护】【转载请注明来源】路径。 这让你充分的使用嵌套组件而无须设【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】置嵌套的路径。
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】你会发现，children 配置就是像 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。routes 配置一样的路由配置数组，所【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。以呢，你可以嵌套多层路由。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。此时，基于上面的配置，当你访问 /use【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。r/foo 时，User 的出口是不会渲转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net染任何东西，这是因为没有匹配到合适的子路【转载请注明来源】本文作者：唐霜，转载请注明出处。由。如果你想要渲染点什么，可以提供一个 【本文首发于唐霜的博客】【未经授权禁止转载】空的 子路由：
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】const router = new VueRouter({
routes: [{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}]
})
router-link
<router-link> 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】组件支持用户在具有路由功能的应用中（点击【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】）导航。 通过 to 属性指定目标地址，【本文受版权保护】【版权所有】唐霜 www.tangshuang.net默认渲染成带有正确链接的 <a&g转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett; 标签，可以通过配置 tag 属性生【转载请注明来源】原创内容，盗版必究。成别的标签.。另外，当目标路由成功激活时转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，链接元素自动设置一个表示激活的 CSS【本文首发于唐霜的博客】【作者：唐霜】 类名。
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。<router-link> 【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。比起写死的 <a href=本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】221;…”&g本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】t; 会好一些，理由如下：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net- 无论是 HTML5 history 模式【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】还是 hash 模式，它的表现行为一致，【转载请注明来源】【未经授权禁止转载】所以，当你要切换路由模式，或者在 IE9著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】 降级使用 hash 模式，无须作任何变【版权所有】唐霜 www.tangshuang.net【作者：唐霜】动。 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
- 在 HTML5 history 模式下，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。router-link 会拦截点击事件，【本文受版权保护】【版权所有】唐霜 www.tangshuang.net让浏览器不在重新加载页面。 【作者：唐霜】【转载请注明来源】
- 当你在 HTML5 history 模式【原创内容，转载请注明出处】【原创内容，转载请注明出处】下使用 base 选项之后，所有的 to【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 属性都不需要写（基路径）了。 著作权归作者所有，禁止商业用途转载。【本文受版权保护】
Props
to
- 类型: string | Locatio【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。n 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。
- required 【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】
表示目标路由的链接。当被点击后，内部会立【转载请注明来源】【本文首发于唐霜的博客】刻把 to 的值传到 router.pu【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。sh()，所以这个值可以是一个字符串或者【版权所有，侵权必究】【转载请注明来源】是描述目标位置的对象。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net <!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace
- 类型: boolean 【本文受版权保护】【原创内容，转载请注明出处】
- 默认值: false 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
设置 replace 属性的话，当点击时【作者：唐霜】【转载请注明来源】，会调用 router.replace(【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】) 而不是 router.push()，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。于是导航后不会留下 history 记录本文作者：唐霜，转载请注明出处。【未经授权禁止转载】。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 <router-link :to="{ path: '/abc'}" replace></router-link>
append
- 类型: boolean 【原创内容，转载请注明出处】【未经授权禁止转载】【转载请注明来源】
- 默认值: false 【版权所有，侵权必究】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】
设置 append 属性后，则在当前（相转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】对）路径前添加基路径。例如，我们从 /a本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。 导航到一个相对路径 b，如果没有配置 【本文受版权保护】【作者：唐霜】append，则路径为 /b，如果配了，【原创内容，转载请注明出处】【作者：唐霜】则为 /a/b
【未经授权禁止转载】【作者：唐霜】 <router-link :to="{ path: 'relative/path'}" append></router-link>
tag
- 类型: string 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
- 默认值: “a” 未经授权，禁止复制转载。【作者：唐霜】
有时候想要 <router-lin转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】k> 渲染成某种标签，例如 <【转载请注明来源】【原创不易，请尊重版权】;li>。 于是我们使用 tag 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。prop 类指定何种标签，同样它还是会监本文作者：唐霜，转载请注明出处。【本文受版权保护】听点击，触发导航。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --> <li>foo</li>
active-class
- 类型: string 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net
- 默认值: “router-l【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netink-active” 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】
设置 链接激活时使用的 CSS 类名。默转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。认值可以通过路由的构造选项 linkAc本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nettiveClass 来全局配置。
转载请注明出处：www.tangshuang.net【转载请注明来源】本文版权归作者所有，未经授权不得转载。exact
- 类型: boolean 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【未经授权禁止转载】
- 默认值: false 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】原创内容，盗版必究。
“是否激活” 默【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。认类名的依据是 inclusive ma【原创内容，转载请注明出处】【转载请注明来源】tch （全包含匹配）。 举个例子，如果【转载请注明来源】【版权所有】唐霜 www.tangshuang.net当前的路径是 /a 开头的，那么 <【未经授权禁止转载】【未经授权禁止转载】;router-link to=R未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。21;/a”> 也会被【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net设置 CSS 类名。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【转载请注明来源】按照这个规则，<router-li本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。nk to=”/”【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】;> 将会点亮各个路由！想要链接使【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net用 “exact 匹配模式&本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net#8221;，则使用 exact 属性：
【转载请注明来源】著作权归作者所有，禁止商业用途转载。<!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>
events
- 类型: string | Array&l【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。t;string> 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】
- 默认值: ‘click转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net217; 【本文受版权保护】【原创不易，请尊重版权】原创内容，盗版必究。【作者：唐霜】
2.1.0+才有。声明可以用来触发导航的本文作者：唐霜，转载请注明出处。原创内容，盗版必究。事件。可以是一个字符串或是一个包含字符串【未经授权禁止转载】【版权所有，侵权必究】的数组。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。将”激活时的CSS类名”应用在外层元素
有时候我们要让 “激活时的C未经授权，禁止复制转载。【本文首发于唐霜的博客】SS类名” 应用在外层元素，本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】而不是 <a> 标签本身，那【原创不易，请尊重版权】【版权所有，侵权必究】么可以用 <router-link【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】> 渲染外层元素，包裹着内层的原生【未经授权禁止转载】【未经授权禁止转载】 <a> 标签：
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【作者：唐霜】【版权所有，侵权必究】<router-link tag="li" to="/foo"> <a>/foo</a> </router-link>
在这种情况下，<a> 将作为著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。真实的链接（它会获得正确的 href 的本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】），而 “激活时的CSS类名【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net” 则设置到外层的 <转载请注明出处：www.tangshuang.net原创内容，盗版必究。li>。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】用代码切换URL
除了使用 <router-link未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。> 创建 a 标签来定义导航链接，【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。我们还可以借助 router 的实例方法未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，通过编写代码来实现。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【版权所有，侵权必究】router.push(location)
想要导航到不同的 URL，则使用 rou【未经授权禁止转载】未经授权，禁止复制转载。ter.push 方法。这个方法会向 h未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。istory 栈添加一个新的记录，所以，【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。当用户点击浏览器后退按钮时，则回到之前的未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 URL。
【本文受版权保护】【转载请注明来源】当你点击 <router-link未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。> 时，这个方法会在内部调用，所以著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。说，点击 <router-link【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net :to=”…&【本文受版权保护】【未经授权禁止转载】#8221;> 等同于调用 rou【本文首发于唐霜的博客】【转载请注明来源】ter.push(…)。
【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】| 声明式 | 编程式 |
|---|---|
| <router-link :to=”…”> | router.push(…) |
该方法的参数可以是一个字符串路径，或者一原创内容，盗版必究。【未经授权禁止转载】个描述地址的对象。例如：
未经授权，禁止复制转载。【转载请注明来源】【本文受版权保护】// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location)
跟 router.push 很像，唯一的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。不同就是，它不会向 history 添加【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】新记录，而是跟它的方法名一样 —— 替换【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。掉当前的 history 记录。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。| 声明式 | 编程式 |
|---|---|
| <router-link :to=”…” replace> | router.replace(…) |
router.go(n)
这个方法的参数是一个整数，意思是在 hi【未经授权禁止转载】转载请注明出处：www.tangshuang.netstory 记录中向前或者后退多少步，类未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。似 window.history.go(【作者：唐霜】转载请注明出处：www.tangshuang.netn)。
【原创不易，请尊重版权】
例子
// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100)
操作 History
你也许注意到 router.push、 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。router.replace 和 rou【本文受版权保护】【本文受版权保护】ter.go 跟 window.history.pushS【作者：唐霜】著作权归作者所有，禁止商业用途转载。tate、 window.history【转载请注明来源】本文作者：唐霜，转载请注明出处。.replaceState 和 wind【本文首发于唐霜的博客】【原创内容，转载请注明出处】ow.history.go好像， 实际上它们确实是效仿 windo【作者：唐霜】转载请注明出处：www.tangshuang.netw.history API 的。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】因此，如果你已经熟悉 Browser History APIs，那么在 vue-router 中操作 【作者：唐霜】本文作者：唐霜，转载请注明出处。history 就是超级简单的。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】还有值得提及的，vue-router 的【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。导航方法 （push、 replace、【版权所有】唐霜 www.tangshuang.net【作者：唐霜】 go） 在各类路由模式（history【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】、 hash 和 abstract）下表【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】现一致。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。重定向 和 别名
重定向
重定向也是通过 routes 配置来完成【原创不易，请尊重版权】【作者：唐霜】，下面例子是从 /a 重定向到 /b：
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netconst router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net原创内容，盗版必究。const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法，动态返回重定向目标：
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netconst router = new VueRouter({
routes: [
{
path: '/a',
redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}
}
]
})
别名
『重定向』的意思是，当用户访问 /a时，【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】URL 将会被替换成 /b，然后匹配路由原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。为 /b，那么『别名』又是什么呢？
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。/a 的别名是 /b，意味着，当用户访问【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。 /b 时，URL 会保持为 /b，但是原创内容，盗版必究。转载请注明出处：www.tangshuang.net路由匹配则为 /a，就像用户访问 /a 【原创不易，请尊重版权】【未经授权禁止转载】一样。
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】上面对应的路由配置为：
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
『别名』的功能让你可以自由地将 UI 结原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net构映射到任意的 URL，而不是受限于配置【作者：唐霜】原创内容，盗版必究。的嵌套路由结构。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。$router和$route
在组件内部可以通过this.$route本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。r和this.$route获取路由信息。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】this.$router
router这个实例化对象的引用。所以，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】上面说的Router实例里面的属性和方法著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，this.$router都有，于是就可本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】以用它来操作路由了，比如跳转路由之类的。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.netthis.$route
当前url对应的路由信息，主要包括下面信未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net息：
【版权所有，侵权必究】【本文首发于唐霜的博客】【转载请注明来源】$route.path
类型: string
【原创内容，转载请注明出处】
字符串，对应当前路由的路径，总是解析为原创内容，盗版必究。转载请注明出处：www.tangshuang.net绝对路径，如 “/foo/b【作者：唐霜】【本文首发于唐霜的博客】ar”。
$route.params
类型: Object
原创内容，盗版必究。
一个 key/value 对象，包含了【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】 动态片段 和 全匹配片段，如果没有路由著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】参数，就是一个空对象。
$route.query
类型: Object
本文版权归作者所有，未经授权不得转载。
一个 key/value 对象，表示 【原创不易，请尊重版权】【转载请注明来源】URL 查询参数。例如，对于路径 /fo【未经授权禁止转载】【作者：唐霜】o?user=1，则有 $route.q原创内容，盗版必究。转载请注明出处：www.tangshuang.netuery.user == 1，如果没有查著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】询参数，则是个空对象。
$route.hash
类型: string
【本文首发于唐霜的博客】
当前路由的 hash 值 (带 #) 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，如果没有 hash 值，则为空字符串。
$route.fullPath
类型: string
【关注微信公众号：wwwtangshuangnet】
完成解析后的 URL，包含查询参数和 【作者：唐霜】著作权归作者所有，禁止商业用途转载。hash 的完整路径。
$route.matched
类型: Array<RouteRe著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】cord>
【未经授权禁止转载】
一个数组，包含当前路由的所有嵌套路径片【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。段的 路由记录 。路由记录就是 rout【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】es 配置数组中的对象副本（还有在 ch本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netildren 数组）。
const router = new VueRouter({
routes: [
// 下面的对象就是 route record
{ path: '/foo', component: Foo,
children: [
// 这也是个 route record
{ path: 'bar', component: Bar }
]
}
]
})
当 URL 为 /foo/bar，$ro原创内容，盗版必究。【本文首发于唐霜的博客】ute.matched 将会是一个包含从著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。上到下的所有对象（副本）。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。$route.name
当前路由的名称，如果有的话。
原创内容，盗版必究。【本文受版权保护】【本文受版权保护】区别
$router是实例化对象，而$rout【作者：唐霜】【本文首发于唐霜的博客】e仅仅是当前的路由信息，两则完全不同。相【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net对来说，$router丰富的多，还提供了本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net很多方法来操作路由。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】钩子
我们可以通过一些钩子，来改变vue-ro【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netuter导航的默认行为。vue-rout【原创内容，转载请注明出处】【版权所有，侵权必究】er 提供的导航钩子主要用来拦截导航，让【本文受版权保护】【本文首发于唐霜的博客】它完成跳转或取消。有多种方式可以在路由导本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。航发生时执行钩子：全局的, 单个路由独享【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net的, 或者组件级的。
原创内容，盗版必究。原创内容，盗版必究。【原创内容，转载请注明出处】【转载请注明来源】全局钩子
你可以使用 router.beforeE【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ach 注册一个全局的 before 钩原创内容，盗版必究。【本文受版权保护】子：
【原创不易，请尊重版权】【原创内容，转载请注明出处】const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时，全局的 before 【原创内容，转载请注明出处】【未经授权禁止转载】钩子按照创建顺序调用。钩子是异步解析执行【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。，此时导航在所有钩子 resolve 完著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net之前一直处于 等待中。
原创内容，盗版必究。【原创不易，请尊重版权】每个钩子方法接收三个参数：
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net- to: Route: 即将要进入的目标 路由对象 【转载请注明来源】【作者：唐霜】未经授权，禁止复制转载。
- from: Route: 当前导航正要离原创内容，盗版必究。【原创不易，请尊重版权】开的路由 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net原创内容，盗版必究。【本文受版权保护】
- next: Function: 一定要调转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】用该方法来 resolve 这个钩子。执【转载请注明来源】【作者：唐霜】行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。如果全部钩子执行完了，则导航的状态就是 【原创内容，转载请注明出处】【本文首发于唐霜的博客】confirmed （确认的）。 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】
- next(false): 中断当前的导航【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】。如果浏览器的 URL 改变了（可能是用【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。户手动或者浏览器后退按钮），那么 URL【本文受版权保护】转载请注明出处：www.tangshuang.net 地址会重置到 from 路由对应的地址原创内容，盗版必究。转载请注明出处：www.tangshuang.net。 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net
- next(‘/’本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。) 或者 next({ path: &#【本文受版权保护】未经授权，禁止复制转载。8216;/’ }): 跳转【作者：唐霜】【原创不易，请尊重版权】到一个不同的地址。当前的导航被中断，然后未经授权，禁止复制转载。【版权所有，侵权必究】进行一个新的导航。 原创内容，盗版必究。【转载请注明来源】转载请注明出处：www.tangshuang.net
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
确保要调用 next 方法，否则钩子就不著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。会被 resolved。
【原创不易，请尊重版权】【原创不易，请尊重版权】同样可以注册一个全局的 after 钩子【作者：唐霜】原创内容，盗版必究。，不过它不像 before 钩子那样，a【未经授权禁止转载】【本文受版权保护】fter 钩子没有 next 方法，不能【本文首发于唐霜的博客】未经授权，禁止复制转载。改变导航：
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】router.afterEach(route => {
// ...
})
某个路由独享的钩子
你可以在路由配置上直接定义 before【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netEnter 钩子：
【版权所有，侵权必究】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些钩子与全局 before 钩子的方法【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】参数是一样的。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net组件内的钩子
最后，你可以在路由组件内直接定义以下路由【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。导航钩子：
【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net- beforeRouteEnter 【原创内容，转载请注明出处】原创内容，盗版必究。【作者：唐霜】
- beforeRouteUpdate (2【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】.2 新增) 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
- beforeRouteLeave 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
beforeRouteEnter 钩子 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net不能 访问 this，因为钩子在导航确认转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】前被调用,因此即将登场的新组件还没被创建【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。。
【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】不过，你可以通过传一个回调给 next来原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】访问组件实例。在导航被确认的时候执行回调【原创不易，请尊重版权】未经授权，禁止复制转载。，并且把组件实例作为回调方法的参数。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
你可以 在 beforeRouteLea未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netve 中直接访问 this。这个 lea【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ve 钩子通常用来禁止用户在还未保存修改【版权所有，侵权必究】【未经授权禁止转载】前突然离开。可以通过 next(fals未经授权，禁止复制转载。【作者：唐霜】e) 来取消导航。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。过渡
vue里面提供了过渡的一些基础操作，比如本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net通过切换元素的class属性，配合css本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。实现过渡效果，在vue-router中也转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】提供了过渡效果，让你在切换view时可以【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】更加酷炫。本章就来整体介绍vue里面的过本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】渡相关的知识。
【本文首发于唐霜的博客】【版权所有，侵权必究】过渡效果
概述
Vue 在插入、更新或者移除 DOM 时【本文首发于唐霜的博客】【本文首发于唐霜的博客】，提供多种不同方式的应用过渡效果。包括以【原创内容，转载请注明出处】【本文首发于唐霜的博客】下工具：
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。- 在 CSS 过渡和动画中自动应用 cla【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netss 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- 可以配合使用第三方 CSS 动画库，如 原创内容，盗版必究。【作者：唐霜】Animate.css 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】
- 在过渡钩子函数中使用 JavaScrip未经授权，禁止复制转载。【版权所有，侵权必究】t 直接操作 DOM 【转载请注明来源】转载请注明出处：www.tangshuang.net
- 可以配合使用第三方 JavaScript【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。 动画库，如 Velocity.js 【未经授权禁止转载】【转载请注明来源】
在这里，我们只会讲到进入、离开和列表的过【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】渡， 你也可以看下一节的 管理过渡状态.
【版权所有，侵权必究】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。单元素/组件的过渡
Vue 提供了 transition 的【原创内容，转载请注明出处】【作者：唐霜】封装组件，在下列情形中，可以给任何元素和【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net组件添加 entering/leavin【未经授权禁止转载】【版权所有，侵权必究】g 过渡
【转载请注明来源】本文版权归作者所有，未经授权不得转载。- 条件渲染 （使用 v-if） 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
- 条件展示 （使用 v-show） 转载请注明出处：www.tangshuang.net【转载请注明来源】
- 动态组件 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
- 组件根节点 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】
这里是一个典型的例子：
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
当插入或删除包含在 transition【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 组件中的元素时，Vue 将会做以下处理【版权所有，侵权必究】【本文首发于唐霜的博客】：
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】- 自动嗅探目标元素是否应用了 CSS 过渡著作权归作者所有，禁止商业用途转载。【本文受版权保护】或动画，如果是，在恰当的时机添加/删除 【转载请注明来源】【本文首发于唐霜的博客】CSS 类名。 原创内容，盗版必究。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【转载请注明来源】原创内容，盗版必究。
- 如果没有找到 JavaScript 钩子本文作者：唐霜，转载请注明出处。原创内容，盗版必究。并且也没有检测到 CSS 过渡/动画，D本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。OM 操作（插入/删除）在下一帧中立即执【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】行。(注意：此指浏览器逐帧动画机制，与 【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netVue，和Vue的 nextTick 概原创内容，盗版必究。原创内容，盗版必究。念不同) 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。
过渡的CSS类名
会有 4 个(CSS)类名在 enter本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net/leave 的过渡中切换
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net- v-enter: 定义进入过渡的开始状态本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。。在元素被插入时生效，在下一个帧移除。 本文作者：唐霜，转载请注明出处。【转载请注明来源】
- v-enter-active: 定义进入【作者：唐霜】著作权归作者所有，禁止商业用途转载。过渡的结束状态。在元素被插入时生效，在 【未经授权禁止转载】未经授权，禁止复制转载。transition/animation本文作者：唐霜，转载请注明出处。【本文受版权保护】 完成之后移除。 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- v-leave: 定义离开过渡的开始状态未经授权，禁止复制转载。【作者：唐霜】。在离开过渡被触发时生效，在下一个帧移除【版权所有，侵权必究】转载请注明出处：www.tangshuang.net。 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net
- v-leave-active: 定义离开【原创不易，请尊重版权】原创内容，盗版必究。过渡的结束状态。在离开过渡被触发时生效，【版权所有】唐霜 www.tangshuang.net【转载请注明来源】在 transition/animati【本文受版权保护】【版权所有，侵权必究】on 完成之后移除。 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【转载请注明来源】
【转载请注明来源】
对于这些在 enter/leave 过转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。渡中切换的类名，v- 是这些类名的前缀。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】使用 <transition na【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。me=”my-transit【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ion”> 可以重置前【转载请注明来源】原创内容，盗版必究。缀，比如 v-enter 替换为 my-未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】transition-enter。
v-enter-active 和 v-l【作者：唐霜】著作权归作者所有，禁止商业用途转载。eave-active 可以控制 进入/著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。离开 过渡的不同阶段，在下面章节会有个示【转载请注明来源】【关注微信公众号：wwwtangshuangnet】例说明。
【原创内容，转载请注明出处】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。CSS 过渡
常用的过渡都是使用 CSS 过渡。
【原创内容，转载请注明出处】【版权所有，侵权必究】原创内容，盗版必究。原创内容，盗版必究。下面是一个简单例子：
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-active {
transform: translateX(10px);
opacity: 0;
}
CSS 动画
CSS 动画用法同 CSS 过渡，区别是未经授权，禁止复制转载。【本文受版权保护】在动画中 v-enter 类名在节点插入【本文首发于唐霜的博客】【版权所有，侵权必究】 DOM 后不会立即删除，而是在 ani【原创内容，转载请注明出处】原创内容，盗版必究。mationend 事件触发时删除。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】示例： (省略了兼容性前缀)
【本文首发于唐霜的博客】【原创不易，请尊重版权】【原创不易，请尊重版权】<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Look at me!</p>
</transition>
</div>
new Vue({
el: '#example-2',
data: {
show: true
}
})
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
自定义过渡类名
我们可以通过以下特性来自定义过渡类名：
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net【未经授权禁止转载】- enter-class 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】
- enter-active-class 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【本文受版权保护】
- leave-class 【原创不易，请尊重版权】【作者：唐霜】原创内容，盗版必究。原创内容，盗版必究。
- leave-active-class 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
他们的优先级高于普通的类名，这对于 Vu【未经授权禁止转载】本文作者：唐霜，转载请注明出处。e 的过渡系统和其他第三方 CSS 动画【作者：唐霜】【版权所有】唐霜 www.tangshuang.net库，如 Animate.css 结合使用十分有用。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】示例：
【原创内容，转载请注明出处】【本文受版权保护】【原创内容，转载请注明出处】<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
Transitions 和 Animations
Vue 为了知道过渡的完成，必须设置相应【本文受版权保护】【版权所有，侵权必究】的事件监听器。它可以是 transiti【未经授权禁止转载】本文作者：唐霜，转载请注明出处。onend 或 animationend转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。 ，这取决于给元素应用的 CSS 规则。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。如果你使用其中任何一种，Vue 能自动识【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net别类型并设置监听。
【本文受版权保护】【转载请注明来源】未经授权，禁止复制转载。但是，在一些场景中，你需要给同一个元素同本文版权归作者所有，未经授权不得转载。【转载请注明来源】时设置两种过渡动效，比如 animati【原创内容，转载请注明出处】【转载请注明来源】on 很快的被触发并完成了，而 tran本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netsition 效果还没结束。在这种情况中【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。，你就需要使用 type 特性并设置 a原创内容，盗版必究。【本文受版权保护】nimation 或 transitio原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】n 来明确声明你需要 Vue 监听的类型著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。JavaScript 钩子
可以在属性中声明 JavaScript 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。钩子
【原创内容，转载请注明出处】【版权所有，侵权必究】原创内容，盗版必究。<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
这些钩子函数可以结合 CSS trans【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。itions/animations 使用本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，也可以单独使用。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】当只用 JavaScript 过渡的时候【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。， 在 enter 和 leave 中，未经授权，禁止复制转载。【本文首发于唐霜的博客】回调函数 done 是必须的 。 否则，【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】它们会被同步调用，过渡会立即完成。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。推荐对于仅使用 JavaScript 过【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】渡的元素添加 v-bind:css=&#原创内容，盗版必究。未经授权，禁止复制转载。8221;false”，Vu转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.nete 会跳过 CSS 的检测。这也可以避免【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。过渡过程中 CSS 的影响。
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【本文受版权保护】一个使用 Velocity.js 的简单转载请注明出处：www.tangshuang.net【作者：唐霜】例子：
【转载请注明来源】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】<!--Velocity works very much like jQuery.animate and isa great option for JavaScript animations-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
},
{ complete: done }
)
}
}
})
初始渲染的过渡
可以通过 appear 特性设置节点的在著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net初始渲染的过渡
【转载请注明来源】【未经授权禁止转载】<transition appear> <!-- ... --> </transition>
这里默认和进入和离开过渡一样，同样也可以【原创内容，转载请注明出处】【本文首发于唐霜的博客】自定义 CSS 类名。
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。<transition appear appear-class="custom-appear-class" appear-active-class="custom-appear-active-class"> <!-- ... --> </transition>
自定义 JavaScript 钩子：
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【本文首发于唐霜的博客】<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook"> <!-- ... --> </transition>
多个元素的过渡
我们之后讨论 多个组件的过渡, 对于原生标签可以使用 v-if/v-【作者：唐霜】转载请注明出处：www.tangshuang.netelse 。最常见的多标签过渡是一个列表【未经授权禁止转载】【作者：唐霜】和描述这个列表为空消息的元素：
【原创内容，转载请注明出处】【本文首发于唐霜的博客】<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items found.</p> </transition>
可以这样使用，但是有一点需要注意：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】当有相同标签名的元素切换时，需要通过 k【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netey 特性设置唯一的值来标记以让 Vue本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 区分它们，否则 Vue 为了效率只会替【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】换相同标签内部的内容。即使在技术上没有必原创内容，盗版必究。【原创内容，转载请注明出处】要，给在 <transition&【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。gt; 组件中的多个元素设置 key 是【作者：唐霜】本文版权归作者所有，未经授权不得转载。一个更好的实践。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】示例:
【转载请注明来源】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition>
在一些场景中，也可以给通过给同一个元素的著作权归作者所有，禁止商业用途转载。【转载请注明来源】 key 特性设置不同的状态来代替 v-【未经授权禁止转载】未经授权，禁止复制转载。if 和 v-else，上面的例子可以重【关注微信公众号：wwwtangshuangnet】【本文受版权保护】写为：
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>
使用多个 v-if 的多个元素的过渡可以【版权所有，侵权必究】【本文首发于唐霜的博客】重写为绑定了动态属性的单个元素过渡。 例未经授权，禁止复制转载。【本文首发于唐霜的博客】如：
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net<transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition>
可以重写为：
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net<transition>
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition>
// ...
computed: {
buttonMessage: function () {
switch (docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
}
过渡模式
在 “on” 按钮和 “off” 按钮的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。过渡中，两个按钮都被重绘了，一个离开过渡本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】的时候另一个开始进入过渡。这是 <【作者：唐霜】【版权所有】唐霜 www.tangshuang.nettransition> 的默认行为原创内容，盗版必究。【版权所有，侵权必究】 – 进入和离开同时发生。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。在元素绝对定位在彼此之上的时候运行正常。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】然后，我们加上 translate 让它【原创不易，请尊重版权】【原创内容，转载请注明出处】们运动像滑动过渡。
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】同时生效的进入和离开的过渡不能满足所有要【原创不易，请尊重版权】【本文首发于唐霜的博客】求，所以 Vue 提供了 过渡模式
【原创内容，转载请注明出处】【本文受版权保护】- in-out: 新元素先进行过渡，完成之【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。后当前元素过渡离开。 【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【原创内容，转载请注明出处】
- out-in: 当前元素先进行过渡，完成原创内容，盗版必究。本文作者：唐霜，转载请注明出处。之后新元素过渡进入。 【版权所有，侵权必究】【未经授权禁止转载】
用 out-in 重写之前的开关按钮过渡【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。：
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
只用添加一个简单的特性，就解决了之前的过【原创不易，请尊重版权】【版权所有，侵权必究】渡问题而无需任何额外的代码。
【本文受版权保护】【原创内容，转载请注明出处】in-out 模式不是经常用到，但对于一【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】些稍微不同的过渡效果还是有用的。将之前滑【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】动淡出的例子结合。
【转载请注明来源】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】多个组件的过渡
多个组件的过渡简单很多 – 原创内容，盗版必究。【未经授权禁止转载】我们不需要使用 key 特性。相反，我们【转载请注明来源】【转载请注明来源】只需要使用动态组件:
【转载请注明来源】【原创内容，转载请注明出处】<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active,
.component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter,
.component-fade-leave-active {
opacity: 0;
}
列表过渡
目前为止，关于过渡我们已经讲到：
【作者：唐霜】【作者：唐霜】- 单个节点 【版权所有，侵权必究】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
- 同一时间渲染多个节点中的一个 【作者：唐霜】原创内容，盗版必究。
那么怎么同时渲染整个列表，比如使用 v-【未经授权禁止转载】【版权所有，侵权必究】for ？在这种场景中，使用 <t转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ransition-group> 【原创内容，转载请注明出处】未经授权，禁止复制转载。组件。在我们深入例子之前，先了解关于这个未经授权，禁止复制转载。【版权所有，侵权必究】组件的几个特点：
转载请注明出处：www.tangshuang.net【本文受版权保护】【转载请注明来源】- 不同于 <transition&g未经授权，禁止复制转载。转载请注明出处：www.tangshuang.nett;， 它会以一个真实元素呈现：默认为一本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。个 <span>。你也可以通原创内容，盗版必究。未经授权，禁止复制转载。过 tag 特性更换为其他元素。 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net
- 内部元素 总是需要 提供唯一的 key 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。属性值 【本文受版权保护】【作者：唐霜】本文版权归作者所有，未经授权不得转载。
列表的进入和离开过渡
现在让我们由一个简单的例子深入，进入和离本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。开的过渡使用之前一样的 CSS 类名。
【作者：唐霜】未经授权，禁止复制转载。<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter,
.list-leave-active {
opacity: 0;
transform: translateY(30px);
}
这个例子有个问题，当添加和移除元素的时候【转载请注明来源】【原创内容，转载请注明出处】，周围的元素会瞬间移动到他们的新布局的位【作者：唐霜】原创内容，盗版必究。置，而不是平滑的过渡，我们下面会解决这个本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】问题。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。列表的位移过渡
<transition-group著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】> 组件还有一个特殊之处。不仅可以【转载请注明来源】转载请注明出处：www.tangshuang.net进入和离开动画，还可以改变定位。要使用这【未经授权禁止转载】【版权所有，侵权必究】个新功能只需了解新增的 v-move 特【原创不易，请尊重版权】【本文首发于唐霜的博客】性，它会在元素的改变定位的过程中应用。像【本文受版权保护】【转载请注明来源】之前的类名一样，可以通过 name 属性【本文首发于唐霜的博客】【版权所有，侵权必究】来自定义前缀，也可以通过 move-cl原创内容，盗版必究。【原创不易，请尊重版权】ass 属性手动设置。
【原创内容，转载请注明出处】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。v-move 对于设置过渡的切换时机和过著作权归作者所有，禁止商业用途转载。【作者：唐霜】渡曲线非常有用，你会看到如下的例子：
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.flip-list-move {
transition: transform 1s;
}
这个看起来很神奇，内部的实现，Vue 使原创内容，盗版必究。【本文受版权保护】用了一个叫 FLIP 简单的动画队列使用 transform未经授权，禁止复制转载。【原创内容，转载请注明出处】s 将元素从之前的位置平滑过渡新的位置。
【本文受版权保护】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】我们将之前实现的例子和这个技术结合，使我【作者：唐霜】【未经授权禁止转载】们列表的一切变动都会有动画过渡。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list-complete" tag="p">
<span
v-for="item in items"
v-bind:key="item"
class="list-complete-item"
>
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-complete-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.list-complete-item {
transition: all 1s;
display: inline-block;
margin-right: 10px;
}
.list-complete-enter,
.list-complete-leave-active {
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
需要注意的是使用 FLIP 过渡的元素不原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】能设置为 display: inline【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。 。作为替代方案，可以设置为 displ【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netay: inline-block 或者放本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。置于 flex 中。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】原创内容，盗版必究。列表的渐进过渡
通过 data 属性与 JavaScri【本文受版权保护】本文版权归作者所有，未经授权不得转载。pt 通信 ，就可以实现列表的渐进过渡：
【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="staggered-list-demo">
<input v-model="query">
<transition-group
name="staggered-fade"
tag="ul"
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<li
v-for="(item, index) in computedList"
v-bind:key="item.msg"
v-bind:data-index="index"
>{{ item.msg }}</li>
</transition-group>
</div>
new Vue({
el: '#staggered-list-demo',
data: {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
},
computed: {
computedList: function () {
var vm = this
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.height = 0
},
enter: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})
可复用的过渡
过渡可以通过 Vue 的组件系统实现复用未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】。要创建一个可复用过渡组件，你需要做的就【未经授权禁止转载】【未经授权禁止转载】是将 <transition>本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。; 或者 <transition-原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】group> 作为根组件，然后将任原创内容，盗版必究。转载请注明出处：www.tangshuang.net何子组件放置在其中就可以了。
【原创不易，请尊重版权】【作者：唐霜】使用 template 的简单例子：
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。Vue.component('my-special-transition', {
template: `
<transition
name="very-special-transition"
mode="out-in"
v-on:before-enter="beforeEnter"
v-on:after-enter="afterEnter"
>
<slot></slot>
</transition>
`,
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
函数组件更适合完成这个任务：
【本文受版权保护】【未经授权禁止转载】转载请注明出处：www.tangshuang.netVue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
动态过渡
在 Vue 中即使是过渡也是数据驱动的！本文作者：唐霜，转载请注明出处。原创内容，盗版必究。动态过渡最基本的例子是通过 name 特未经授权，禁止复制转载。【未经授权禁止转载】性来绑定动态值。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。<transition v-bind:name="transitionName"> <!-- ... --> </transition>
当你想用 Vue 的过渡系统来定义的 C【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。SS 过渡/动画 在不同过渡间切换会非常【未经授权禁止转载】【作者：唐霜】有用。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】所有的过渡特性都是动态绑定。它不仅是简单【原创内容，转载请注明出处】【原创内容，转载请注明出处】的特性，通过事件的钩子函数方法，可以在获【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net取到相应上下文数据。这意味着，可以根据组【本文受版权保护】原创内容，盗版必究。件的状态通过 JavaScript 过渡未经授权，禁止复制转载。【转载请注明来源】设置不同的过渡效果。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="dynamic-fade-demo">
Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
<transition
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<p v-if="show">hello</p>
</transition>
<button v-on:click="stop = true">Stop it!</button>
</div>
new Vue({
el: '#dynamic-fade-demo',
data: {
show: true,
fadeInDuration: 1000,
fadeOutDuration: 1000,
maxFadeDuration: 1500,
stop: false
},
mounted: function () {
this.show = false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
var vm = this
Velocity(el,
{ opacity: 1 },
{
duration: this.fadeInDuration,
complete: function () {
done()
if (!vm.stop) vm.show = false
}
}
)
},
leave: function (el, done) {
var vm = this
Velocity(el,
{ opacity: 0 },
{
duration: this.fadeOutDuration,
complete: function () {
done()
vm.show = true
}
}
)
}
}
})
最后，创建动态过渡的最终方案是组件通过接著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。受 props 来动态修改之前的过渡。一【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】句老话，唯一的限制是你的想象力。
【转载请注明来源】未经授权，禁止复制转载。【本文首发于唐霜的博客】过渡状态
Vue 的过渡系统提供了非常多简单的方法原创内容，盗版必究。原创内容，盗版必究。设置进入、离开和列表的动效。那么对于数据【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。元素本身的动效呢，比如：
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net- 数字和运算 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
- 颜色的显示 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net
- SVG 节点的位置 【本文受版权保护】转载请注明出处：www.tangshuang.net
- 元素的大小和其他的属性 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
所有的原始数字都被事先存储起来，可以直接【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。转换到数字。做到这一步，我们就可以结合 【转载请注明来源】【版权所有，侵权必究】Vue 的响应式和组件系统，使用第三方库未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net来实现切换元素的过渡状态。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】状态动画 与 watcher
通过 watcher 我们能监听到任何数【作者：唐霜】【版权所有】唐霜 www.tangshuang.net值属性的数值更新。可能听起来很抽象，所以未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。让我们先来看看使用Tweenjs一个例子原创内容，盗版必究。【本文首发于唐霜的博客】：
【原创不易，请尊重版权】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net<script src="https://unpkg.com/tween.js@16.3.4"></script>
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>
new Vue({
el: '#animated-number-demo',
data: {
number: 0,
animatedNumber: 0
},
watch: {
number: function(newValue, oldValue) {
var vm = this
function animate (time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningNumber: oldValue })
.easing(TWEEN.Easing.Quadratic.Out)
.to({ tweeningNumber: newValue }, 500)
.onUpdate(function () {
vm.animatedNumber = this.tweeningNumber.toFixed(0)
})
.start()
animate()
}
}
})
当你把数值更新时，就会触发动画。这个是一【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】个不错的演示，但是对于不能直接像数字一样【转载请注明来源】未经授权，禁止复制转载。存储的值，比如 CSS 中的 color转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 的值，通过下面的例子我们来通过 Col本文作者：唐霜，转载请注明出处。【转载请注明来源】or.js 实现一个例子：
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】<script src="https://unpkg.com/tween.js@16.3.4"></script>
<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>
<div id="example-7">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>
var Color = net.brehaut.Colornew Vue({
el: '#example-7',
data: {
colorQuery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
},
created: function () {
this.tweenedColor = Object.assign({}, this.color)
},
watch: {
color: function () {
function animate (time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween(this.tweenedColor)
.to(this.color, 750)
.start()
animate()
}
},
computed: {
tweenedCSSColor: function () {
return new Color({
red: this.tweenedColor.red,
green: this.tweenedColor.green,
blue: this.tweenedColor.blue,
alpha: this.tweenedColor.alpha
}).toCSS()
}
},
methods: {
updateColor: function () {
this.color = new Color(this.colorQuery).toRGB()
this.colorQuery = ''
}
}
})
.example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}
动态状态转换
就像 Vue 的过渡组件一样，数据背后状【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net态转换会实时更新，这对于原型设计十分有用【未经授权禁止转载】转载请注明出处：www.tangshuang.net。当你修改一些变量，即使是一个简单的 S【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。VG 多边形也可是实现很多难以想象的效果未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net。
原创内容，盗版必究。【本文首发于唐霜的博客】See this fiddle for the complete co转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】de behind the above 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】demo.
【原创内容，转载请注明出处】原创内容，盗版必究。【作者：唐霜】本文作者：唐霜，转载请注明出处。通过组件组织过渡
管理太多的状态转换会很快的增加 Vue 【作者：唐霜】【原创内容，转载请注明出处】实例或者组件的复杂性，幸好很多的动画可以【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。提取到专用的子组件。我们来将之前的示例改【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。写一下：
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net<script src="https://unpkg.com/tween.js@16.3.4"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>
// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// strategies.
Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue: 0
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate (time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, 500)
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})
.start()
animate()
}
}
})
// All complexity has now been removed from the main Vue instance!
new Vue({
el: '#example-8',
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})
我们能在组件中结合使用这一节讲到各种过渡【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。策略和 Vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。。
【原创不易，请尊重版权】【版权所有，侵权必究】vue-router过渡效果
<router-view> 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net是基本的动态组件，所以我们可以用 <原创内容，盗版必究。【未经授权禁止转载】;transition> 组件给它本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。添加一些过渡效果：
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。<transition> <router-view></router-view> </transition>
<transition> 的转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】所有功能 在这里同样适用。
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】单个路由的过渡
上面的用法会给所有路由设置一样的过渡效果未经授权，禁止复制转载。【原创不易，请尊重版权】，如果你想让每个路由组件有各自的过渡效果未经授权，禁止复制转载。未经授权，禁止复制转载。，可以在各路由组件内使用 <tra【原创不易，请尊重版权】未经授权，禁止复制转载。nsition> 并设置不同的 n【作者：唐霜】【版权所有】唐霜 www.tangshuang.netame。
【本文受版权保护】【原创不易，请尊重版权】const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
}
const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}
基于路由的动态过渡
还可以基于当前路由与目标路由的变化关系，【原创内容，转载请注明出处】【未经授权禁止转载】动态设置过渡效果：
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。<!-- 使用动态的 transition name --> <transition :name="transitionName"> <router-view></router-view> </transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
.vue文件
介绍
在很多Vue项目中，我们使用 Vue.c【版权所有】唐霜 www.tangshuang.net【转载请注明来源】omponent 来定义全局组件，紧接着【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。用 new Vue({ el: R著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net16;#container ‘【原创内容，转载请注明出处】【原创内容，转载请注明出处】;}) 在每个页面内指定一个容器元素。
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。这种方式在很多中小规模的项目中运作的很好【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net，在这些项目里 JavaScript 只本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。被用来加强特定的视图。但当在更复杂的项目未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】中，或者你的前端完全由 JavaScri【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。pt 驱动的时候，下面这些缺点将变得非常【本文首发于唐霜的博客】【原创内容，转载请注明出处】明显：
原创内容，盗版必究。【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。- 全局定义(Global definiti【版权所有，侵权必究】【未经授权禁止转载】ons) 强制要求每个 componen原创内容，盗版必究。【未经授权禁止转载】t 中的命名不得重复 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- 字符串模板(String templat【原创内容，转载请注明出处】未经授权，禁止复制转载。es) 缺乏语法高亮，在 HTML 有多【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】行的时候，需要用到丑陋的 \ 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
- 不支持CSS(No CSS suppor未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。t) 意味着当 HTML 和 JavaS【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netcript 组件化时，CSS 明显被遗漏 原创内容，盗版必究。【本文受版权保护】
- 没有构建步骤(No build step【作者：唐霜】【版权所有】唐霜 www.tangshuang.net) 限制只能使用 HTML 和 ES5 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。JavaScript, 而不能使用预处理【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】器，如 Pug (formerly Ja【原创内容，转载请注明出处】【未经授权禁止转载】de) 和 Babel 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
文件扩展名为 .vue 的 single本文作者：唐霜，转载请注明出处。【转载请注明来源】-file components(单文件【转载请注明来源】转载请注明出处：www.tangshuang.net组件) 为以上所有问题提供了解决方法，并【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。且还可以使用 Webpack 或 Bro本文版权归作者所有，未经授权不得转载。【作者：唐霜】wserify 等构建工具。
原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】现在我们获得：
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。- 完整语法高亮 【原创内容，转载请注明出处】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- CommonJS 模块 【原创不易，请尊重版权】【原创不易，请尊重版权】【作者：唐霜】
- 组件化的 CSS 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
正如我们说过的，我们可以使用预处理器来构【原创不易，请尊重版权】【未经授权禁止转载】建简洁和功能更丰富的组件，比如 Jade本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】，Babel (with ES2015 转载请注明出处：www.tangshuang.net原创内容，盗版必究。modules)，和 Stylus。
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。这些特定的语言只是例子，你可以只是简单地【原创不易，请尊重版权】【未经授权禁止转载】使用 Babel，TypeScript，【本文受版权保护】【原创不易，请尊重版权】SCSS，PostCSS –原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 或者其他任何能够帮助你提高生产力的预处【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。理器。
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】起步
针对刚接触 JavaScript 模块开发系统的用户
有了 .vue 组件，我们就进入了高级 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。JavaScript 应用领域。如果你没转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net有准备好的话，意味着还需要学会使用一些附【原创不易，请尊重版权】【本文受版权保护】加的工具：
未经授权，禁止复制转载。【作者：唐霜】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。- Node Package Manager本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】 (NPM): 阅读 Getting Started guid【未经授权禁止转载】【原创内容，转载请注明出处】e 直到 10: Uninstalling【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 global packages章节. 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】
- Modern JavaScript wi转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。th ES2015/16: 阅读 Bab【原创内容，转载请注明出处】未经授权，禁止复制转载。el 的 Learn ES2015 guide. 你不需要立刻记住每一个方法，但是你可本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net以保留这个页面以便后期参考。 【转载请注明来源】【转载请注明来源】
在你花一些时日了解这些资源之后，我们建议未经授权，禁止复制转载。【本文受版权保护】你参考 webpack-simple 。只要遵循指示，你就能很快的运行一个用本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。到 .vue 组件，ES2015 和 热本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】重载( hot-reloading ) 转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】的Vue项目!
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】原创内容，盗版必究。这个模板使用 Webpack，一个能将多个模块打包成最终应用的模块打【本文首发于唐霜的博客】【转载请注明来源】包工具。 这个视频 介绍了Webpack的更多相关信息。 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】学习了这些基础知识后， 你可能想看看 这个在 Egghead.io上的 高级 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。Webpack 课程.
【本文受版权保护】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。在 Webpack中，每个模块被打包到 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】bundle 之前都由一个相应的 “lo未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ader” 来转换，Vue 也提供 vue-loader 插件来执行 .vue 单文件组件 的转转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】换. 这个 webpack-simple 模板已经为你准备好了所有的东西，但是如【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】果你想了解更多关于 .vue组件和 We未经授权，禁止复制转载。【未经授权禁止转载】bpack 如何一起运转的信息，你可以阅转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。读 vue-loader 的文档。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】针对高级用户
无论你更钟情 Webpack 或是 Br【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netowserify，我们为简单的和更复杂的本文作者：唐霜，转载请注明出处。原创内容，盗版必究。项目都提供了一些文档模板。我们建议浏览 github.com/vuejs-tem【未经授权禁止转载】【作者：唐霜】plates，找到你需要的部分，然后参考 READM【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。E 中的说明，使用 vue-cli 工具生成新的项目。
本文作者：唐霜，转载请注明出处。【本文受版权保护】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net模板中使用 Webpack ，一个模块加载器加载多个模块然后构建成【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。最终应用。为了进一步了解 Webpack【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。, 可以看 官方介绍视频。如果你有基础，可以看 在 Egghead.io 上的 Webp【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ack 进阶教程。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netvue-loader
通过vue-loader对.vue进行预【原创不易，请尊重版权】【转载请注明来源】处理。vue-loader是webpac【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。k的一个插件，它可以对你的.vue文件进【未经授权禁止转载】【本文首发于唐霜的博客】行预处理，即它把你的style部分进行预【版权所有】唐霜 www.tangshuang.net【本文受版权保护】编译之后，处理成css，把templat本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.nete部分编译成vue需要的模板，把scri【本文受版权保护】著作权归作者所有，禁止商业用途转载。pt部分编译为es的javascript【原创内容，转载请注明出处】原创内容，盗版必究。。我们看下如何在webpack的conf【本文受版权保护】【原创内容，转载请注明出处】ig文件中进行配置：
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】{
module: {
loaders: [
{test: /\.vue$/, loader: 'vue-loader'},
],
},
}
.vue里面还支持预处理的其他语言来写，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。比如style用scss来写，templ未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ate用jade来写，script用co【本文受版权保护】本文版权归作者所有，未经授权不得转载。ffee来写。那么在对.vue进行编译时【本文受版权保护】著作权归作者所有，禁止商业用途转载。，就需要提前预编译这些语言。因此，你还得著作权归作者所有，禁止商业用途转载。【转载请注明来源】安装对应的预编译模块，比如scss，你得【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。安装编译scss要用的node-sass著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net：
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。npm install --save sass-loader node-sass
你必须在webpack的文件内配置一个v本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ue选项，vue-loader会自动调用【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】这个选项中的loaders来进行处理：
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net{
module: {
loaders: [
{test: /\.vue$/, loader: 'vue-loader'},
],
},
vue: {
loaders: {
html: 'vue-html-loader!jade-loader',
js: 'babel-loader',
css: 'vue-style-loader!sass-loader!css-loader',
},
},
}
因为我也没有深度实践过，所以这里只是给了【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。参考代码，如果你在使用中遇到什么问题，可著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】以在下方留言，让我们一起讨论你的问题。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。vuex
vuex和react的flux对应，借鉴【本文受版权保护】【关注微信公众号：wwwtangshuangnet】了Flux、Redux、和 The Elm Architecture。它是一个专为 Vue.js 应用程序开本文作者：唐霜，转载请注明出处。原创内容，盗版必究。发的状态管理模式，你可以通过这里深入阅读。
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【原创不易，请尊重版权】什么是vuex
Vuex 是一个专为 Vue.js 应用著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】态，并以相应的规则保证状态以一种可预测的【转载请注明来源】未经授权，禁止复制转载。方式发生变化。Vuex 也集成到 Vue【原创不易，请尊重版权】【作者：唐霜】 的官方调试工具 devtools extension，提供了诸如零配置的 time-trav【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。el 调试、状态快照导入导出等高级调试功本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。能。
【未经授权禁止转载】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。简单的说，vuex就是用一个全局单例模式【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】管理组件的共享状态，即用一个全局变量实现【原创不易，请尊重版权】【作者：唐霜】多个关联组件的状态管理，这样让组件之间发本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。生的事件可以更统一的在一个地方管理起来。
【未经授权禁止转载】【版权所有，侵权必究】说到底，vuex是vue的一个插件，实现【本文受版权保护】【关注微信公众号：wwwtangshuangnet】组件之间的状态管理。
【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。编者按：vue是渐进式框架，所谓“渐进式【作者：唐霜】【作者：唐霜】”就是说你需要的时候才用，不需要的时候不【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】用，所以，当你的应用足够复杂的时候，才用【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。vuex，小应用其实没必要使用。
转载请注明出处：www.tangshuang.net【作者：唐霜】【未经授权禁止转载】【原创不易，请尊重版权】vuex有一个概念叫“状态”，说白了，它【版权所有，侵权必究】转载请注明出处：www.tangshuang.net就是一个变量state，被挂在store【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。上面，所谓状态，其实也就是上面说的共享的原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net数据，只不过这些数据是统一由vuex来管【版权所有，侵权必究】【本文首发于唐霜的博客】理，在不同的组件内都可以使用，并且可以更本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。新，不过要用commit来更新，不可以直本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net接更新state。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。每一个 Vuex 应用的核心就是 sto本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】re（仓库）。”store&著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net#8221; 基本上就是一个容器，它包含著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不原创内容，盗版必究。【本文首发于唐霜的博客】同：
【作者：唐霜】【版权所有，侵权必究】- Vuex 的状态存储是响应式的。当 Vu【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。e 组件从 store 中读取状态的时候本文作者：唐霜，转载请注明出处。【未经授权禁止转载】，若 store 中的状态发生变化，那么转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。相应的组件也会相应地得到高效更新。 【未经授权禁止转载】【原创内容，转载请注明出处】
- 你不能直接改变 store 中的状态。改【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net变 store 中的状态的唯一途径就是显【本文首发于唐霜的博客】【本文首发于唐霜的博客】式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的【转载请注明来源】【版权所有】唐霜 www.tangshuang.net变化，从而让我们能够实现一些工具帮助我们原创内容，盗版必究。【原创不易，请尊重版权】更好地了解我们的应用。 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
State
state就是vuex里面的状态，说白了【版权所有，侵权必究】原创内容，盗版必究。，就是用来保存各个数据的挂载点。
【作者：唐霜】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】单一状态树
Vuex 使用 单一状态树 —— 是的，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】用一个对象就包含了全部的应用层级状态。至【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】此它便作为一个『唯一数据源(SSOT)』【未经授权禁止转载】【本文受版权保护】而存在。这也意味着，每个应用将仅仅包含一未经授权，禁止复制转载。【本文首发于唐霜的博客】个 store 实例。单一状态树让我们能原创内容，盗版必究。【转载请注明来源】够直接地定位任一特定的状态片段，在调试的【转载请注明来源】【原创内容，转载请注明出处】过程中也能轻易地取得整个当前应用状态的快原创内容，盗版必究。未经授权，禁止复制转载。照。
【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【作者：唐霜】单状态树和模块化并不冲突 —— 在后面的原创内容，盗版必究。【未经授权禁止转载】章节里我们会讨论如何将状态和状态变更事件著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。分布到各个子模块中。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。组件中获得状态
那么我们如何在 Vue 组件中展示状态呢【版权所有，侵权必究】原创内容，盗版必究。？由于 Vuex 的状态存储是响应式的，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。从 store 实例中读取状态最简单的方【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。法就是在计算属性中返回某个状态：
【本文受版权保护】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
之所以要放在计算属性中，是因为计算属性会著作权归作者所有，禁止商业用途转载。【转载请注明来源】追踪自己的依赖，当依赖发生变化时，计算属【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。性也跟着变化。每当 store.stat著作权归作者所有，禁止商业用途转载。【本文受版权保护】e.count 变化的时候, 都会重新求【原创不易，请尊重版权】【未经授权禁止转载】取计算属性，并且触发更新相关联的 DOM未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net。
【关注微信公众号：wwwtangshuangnet】【转载请注明来源】然而，这种模式导致组件依赖的全局状态单例【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】。在模块化的构建系统中，在每个需要使用 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】state 的组件中需要频繁地导入，并且【未经授权禁止转载】【原创不易，请尊重版权】在测试组件时需要模拟状态。
【原创不易，请尊重版权】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。Vuex 通过 store 选项，提供了【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net一种机制将状态从根组件『注入』到每一个子【转载请注明来源】本文作者：唐霜，转载请注明出处。组件中：
【本文受版权保护】转载请注明出处：www.tangshuang.net原创内容，盗版必究。Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: ` <div class="app"> <counter></counter> </div> ` })
通过在根实例中注册 store 选项，该转载请注明出处：www.tangshuang.net【未经授权禁止转载】 store 实例会注入到根组件下的所有【转载请注明来源】著作权归作者所有，禁止商业用途转载。子组件中，且子组件能通过 this.$s【作者：唐霜】【原创不易，请尊重版权】tore 访问到。让我们更新下 Coun【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ter 的实现：
【原创不易，请尊重版权】【原创内容，转载请注明出处】const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】态都声明为计算属性会有些重复和冗余。为了著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。解决这个问题，我们可以使用 mapSta【原创不易，请尊重版权】【未经授权禁止转载】te 辅助函数帮助我们生成计算属性，让你转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。少按几次键：
【作者：唐霜】本文作者：唐霜，转载请注明出处。// 在单独构建的版本中辅助函数为
Vuex.mapStateimport { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 或者，传字符串参数 'count' 等同于 `state => state.count`
count: 'count',
// 或者，可以直接写成：
'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
当映射的计算属性的名称与 state 的本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】子节点名称相同时，我们也可以给 mapS【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】tate 传一个字符串数组。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】转载请注明出处：www.tangshuang.netcomputed: mapState([ // 映射 this.count 为 store.state.count 'count' ])
组件仍保有局部状态
使用 Vuex 并不意味着你需要将所有的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。状态放入 Vuex。虽然将所有的状态放到【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】 Vuex 会使状态变化更显式和易调试，【转载请注明来源】原创内容，盗版必究。但也会使代码变得冗长和不直观。如果有些状【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。态严格属于单个组件，最好还是作为组件的局转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net部状态。你应该根据你的应用开发需要进行权【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】衡和确定。
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netGetters
有时候我们需要从 store 中的 st【版权所有，侵权必究】未经授权，禁止复制转载。ate 中派生出一些状态，例如对列表进行本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net过滤并计数：
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件需要用到此属性，我们要么复转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】制这个函数，或者抽取到一个共享函数然后在【作者：唐霜】【本文首发于唐霜的博客】多处导入它 —— 无论哪种方式都不是很理【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。想。
本文作者：唐霜，转载请注明出处。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】Vuex 允许我们在 store 中定义原创内容，盗版必究。【原创不易，请尊重版权】『getters』（可以认为是 stor本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】e 的计算属性）。Getters 接受 【转载请注明来源】本文作者：唐霜，转载请注明出处。state 作为其第一个参数：
【未经授权禁止转载】【本文首发于唐霜的博客】const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Getters 会暴露为 store.g【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netetters 对象：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getters 也可以接受其他 gett【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.neters 作为第二个参数：
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我们可以很容易地在任何组件中使用它
【转载请注明来源】未经授权，禁止复制转载。computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 【本文受版权保护】转载请注明出处：www.tangshuang.netstore 中的 getters 映射到原创内容，盗版必究。原创内容，盗版必究。局部计算属性
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一原创内容，盗版必究。【原创内容，转载请注明出处】个名字，使用对象形式：
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。原创内容，盗版必究。mapGetters({
// 映射 this.doneCount 为 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
Mutations
更改 Vuex 的 store 中的状态转载请注明出处：www.tangshuang.net原创内容，盗版必究。的唯一方法是提交 mutation。Vu【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ex 中的 mutations 非常类似【未经授权禁止转载】转载请注明出处：www.tangshuang.net于事件：每个 mutation 都有一个【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。字符串的 事件类型 (type) 和 一本文作者：唐霜，转载请注明出处。【未经授权禁止转载】个 回调函数 (handler)。这个回本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】调函数就是我们实际进行状态更改的地方，并本文作者：唐霜，转载请注明出处。原创内容，盗版必究。且它会接受 state 作为第一个参数：
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。【本文受版权保护】const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++ // 注意：在vuex中，只有mutations里面可以直接修改state
}
}
})
你不能直接调用一个 mutation h【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】andler。这个选项更像是事件注册：“转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】当触发一个类型为 increment 的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。 mutation 时，调用此函数。”要原创内容，盗版必究。【转载请注明来源】唤醒一个 mutation handle原创内容，盗版必究。转载请注明出处：www.tangshuang.netr，你需要以相应的 type 调用 st【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netore.commit 方法：
本文作者：唐霜，转载请注明出处。【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。store.commit('increment')
提交Payload
你可以向 store.commit 传入本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net额外的参数，即 mutation 的 载【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。荷（payload）：
【转载请注明来源】原创内容，盗版必究。原创内容，盗版必究。// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
在大多数情况下，载荷应该是一个对象，这样【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。可以包含多个字段并且记录的 mutati【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.neton 会更易读：
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【版权所有，侵权必究】【版权所有，侵权必究】// ...
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
对象风格的提交方式
提交 mutation 的另一种方式是直【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net接使用包含 type 属性的对象：
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【版权所有，侵权必究】store.commit({
type: 'increment',
amount: 10
})
当使用对象风格的提交方式，整个对象都作为【作者：唐霜】【版权所有，侵权必究】载荷传给 mutation 函数，因此 【原创不易，请尊重版权】【转载请注明来源】handler 保持不变：
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netmutations: {
increment (state, payload) {
state.count += payload.amount
}
}
Mutations需遵守Vue的响应规则
既然 Vuex 的 store 中的状态原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是响应式的，那么当我们变更状态时，监视状未经授权，禁止复制转载。【版权所有，侵权必究】态的 Vue 组件也会自动更新。这也意味转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。着 Vuex 中的 mutation 也【转载请注明来源】著作权归作者所有，禁止商业用途转载。需要与使用 Vue 一样遵守一些注意事项转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net：
【转载请注明来源】【本文受版权保护】原创内容，盗版必究。【版权所有，侵权必究】- 最好提前在你的 store 中初始化好所【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。有所需属性。 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。
- 当需要在对象上添加新属性时，你应该使用 【原创不易，请尊重版权】【转载请注明来源】Vue.set(obj, ‘本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】newProp’, 123) 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
使用常量替代Mutation事件类型
使用常量替代 mutation 事件类型【本文受版权保护】【关注微信公众号：wwwtangshuangnet】在各种 Flux 实现中是很常见的模式。【作者：唐霜】著作权归作者所有，禁止商业用途转载。这样可以使 linter 之类的工具发挥【版权所有，侵权必究】【作者：唐霜】作用，同时把这些常量放在单独的文件中可以【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。让你的代码合作者对整个 app 包含的 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】mutation 一目了然：
【原创不易，请尊重版权】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
用不用常量取决于你 —— 在需要多人协作【原创不易，请尊重版权】【本文受版权保护】的大型项目中，这会很有帮助。但如果你不喜著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。欢，你完全可以不这样做。
【本文首发于唐霜的博客】【本文受版权保护】转载请注明出处：www.tangshuang.netmutation必须是同步函数
一条重要的原则就是要记住 mutatio【版权所有】唐霜 www.tangshuang.net【本文受版权保护】n 必须是同步函数。为什么？请参考下面的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。例子：
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
现在想象，我们正在 debug 一个 a【转载请注明来源】【原创不易，请尊重版权】pp 并且观察 devtool 中的 m本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netutation 日志。每一条 mutat未经授权，禁止复制转载。【本文首发于唐霜的博客】ion 被记录，devtools 都需要【原创内容，转载请注明出处】【本文受版权保护】捕捉到前一状态和后一状态的快照。然而，在著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】上面的例子中 mutation 中的异步【本文受版权保护】原创内容，盗版必究。函数中的回调让这不可能完成：因为当 mu转载请注明出处：www.tangshuang.net【转载请注明来源】tation 触发的时候，回调函数还没有【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。被调用，devtools 不知道什么时候【版权所有】唐霜 www.tangshuang.net【作者：唐霜】回调函数实际上被调用 —— 实质上任何在【原创内容，转载请注明出处】未经授权，禁止复制转载。回调函数中进行的的状态的改变都是不可追踪转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。的。
【未经授权禁止转载】【本文首发于唐霜的博客】在组件中提交Mutations
你可以在组件中使用 this.$stor【版权所有，侵权必究】转载请注明出处：www.tangshuang.nete.commit(‘xxx&原创内容，盗版必究。【未经授权禁止转载】#8217;) 提交 mutation，【本文首发于唐霜的博客】未经授权，禁止复制转载。或者使用 mapMutations 辅助著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】函数将组件中的 methods 映射为 原创内容，盗版必究。【版权所有，侵权必究】store.commit 调用（需要在根【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】节点注入 store）。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netimport { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
})
}
}
Actions
Action 类似于 mutation，【本文受版权保护】本文作者：唐霜，转载请注明出处。不同在于：
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【转载请注明来源】【作者：唐霜】- Action提交mutation，而不是未经授权，禁止复制转载。【未经授权禁止转载】直接变更state 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
- Action可以包含异步操作 【本文受版权保护】原创内容，盗版必究。
让我们来注册一个简单的 action：
转载请注明出处：www.tangshuang.net原创内容，盗版必究。const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment') // 注意，须要先注册mutations
}
}
})
Action 函数接受一个与 store转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】 实例具有相同方法和属性的 contex【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。t 对象，因此你可以调用 context【转载请注明来源】著作权归作者所有，禁止商业用途转载。.commit 提交一个 mutatio【原创内容，转载请注明出处】原创内容，盗版必究。n，或者通过 context.state【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 和 context.getters 来【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】获取 state 和 getters。当转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。我们在之后介绍到 Modules 时，你本文版权归作者所有，未经授权不得转载。【本文受版权保护】就知道 context 对象为什么不是 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netstore 实例本身了。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】实践中，我们会经常会用到 ES2015 【本文受版权保护】【原创内容，转载请注明出处】的 参数解构 来简化代码（特别是我们需要未经授权，禁止复制转载。【作者：唐霜】调用 commit 很多次的时候）：
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】actions: {
increment ({ commit }) {
commit('increment')
}
}
分发Action
Action 通过 store.disp【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。atch 方法触发：
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。store.dispatch('increment')
乍一眼看上去感觉多此一举，我们直接分发 转载请注明出处：www.tangshuang.net【未经授权禁止转载】mutation 岂不更方便？实际上并非【本文受版权保护】【版权所有，侵权必究】如此，还记得 mutation 必须同步著作权归作者所有，禁止商业用途转载。【本文受版权保护】执行这个限制么？Action 就不受约束【未经授权禁止转载】【未经授权禁止转载】！我们可以在 action 内部执行异步转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。操作：
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
Actions 支持同样的载荷方式和对象【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】方式进行分发：
【转载请注明来源】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。// 以载荷形式分发
store.dispatch('incrementAsync', { amount: 10})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
来看一个更加实际的购物车示例，涉及到调用著作权归作者所有，禁止商业用途转载。【作者：唐霜】异步 API 和 分发多重 mutati未经授权，禁止复制转载。【转载请注明来源】ons：
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】actions: {
checkout ({ commit, state }, products) {
// 把当前购物车的物品备份起来
const savedCartItems = [...state.cart.added]
// 发出结账请求，然后乐观地清空购物车
commit(types.CHECKOUT_REQUEST)
// 购物 API 接受一个成功回调和一个失败回调
shop.buyProducts(
products,
// 成功操作
() => commit(types.CHECKOUT_SUCCESS),
// 失败操作
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
注意我们正在进行一系列的异步操作，并且通【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】过提交 mutation 来记录 act【作者：唐霜】【作者：唐霜】ion 产生的副作用（即状态变更）。
未经授权，禁止复制转载。【原创不易，请尊重版权】【本文受版权保护】在组件中分发Action
你在组件中使用 this.$store.【未经授权禁止转载】【作者：唐霜】dispatch(‘xxx&【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。#8217;) 分发 action，或者本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。使用 mapActions 辅助函数将组著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。件的 methods 映射为 store【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net.dispatch 调用（需要先在根节点【原创内容，转载请注明出处】【转载请注明来源】注入 store）：
【本文受版权保护】著作权归作者所有，禁止商业用途转载。import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
]),
...mapActions({
add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
})
}
}
Actions异步回调通知
Action 通常是异步的，那么如何知道原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。 action 什么时候结束呢？更重要的本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】是，我们如何才能组合多个 action，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net以处理更加复杂的异步流程？
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。首先，你需要明白 store.dispa【本文首发于唐霜的博客】【转载请注明来源】tch 可以处理被触发的action的回【原创不易，请尊重版权】【作者：唐霜】调函数返回的Promise，并且stor转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】e.dispatch仍旧返回Promis著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】e：
【本文首发于唐霜的博客】原创内容，盗版必究。【本文受版权保护】actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
现在你可以：
【作者：唐霜】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netstore.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以：
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
最后，如果我们利用 async / aw【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ait 这个 JavaScript 即将著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。到来的新特性，我们可以像这样组合 act【未经授权禁止转载】原创内容，盗版必究。ion：
【作者：唐霜】未经授权，禁止复制转载。【原创不易，请尊重版权】// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
一个 store.dispatch 在不【版权所有】唐霜 www.tangshuang.net【本文受版权保护】同模块中可以触发多个 action 函数【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】。在这种情况下，只有当所有触发函数完成后未经授权，禁止复制转载。【原创内容，转载请注明出处】，返回的 Promise 才会执行。
【原创不易，请尊重版权】【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。Modules
使用单一状态树，导致应用的所有状态集中到【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net一个很大的对象。但是，当应用变得很大时，未经授权，禁止复制转载。【原创不易，请尊重版权】store 对象会变得臃肿不堪。
【作者：唐霜】原创内容，盗版必究。未经授权，禁止复制转载。为了解决以上问题，Vuex 允许我们将 原创内容，盗版必究。【原创不易，请尊重版权】store 分割到模块（module）。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】每个模块拥有自己的 state、muta【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】tion、action、getters、【转载请注明来源】原创内容，盗版必究。甚至是嵌套子模块——从上至下进行类似的分【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net割：
未经授权，禁止复制转载。【原创内容，转载请注明出处】const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
模块的局部状态
对于模块内部的 mutation 和 g【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。etter，接收的第一个参数是模块的局部著作权归作者所有，禁止商业用途转载。【转载请注明来源】状态。
【本文首发于唐霜的博客】原创内容，盗版必究。const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// state 模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
同样，对于模块内部的 action，context.state 是局部状态，根节点的状态是 context.rootState:
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
对于模块内部的 getter，根节点状态【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net会作为第三个参数：
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
命名空间
模块内部的 action、mutatio未经授权，禁止复制转载。【本文受版权保护】n、和 getter 现在仍然注册在全局【作者：唐霜】【作者：唐霜】命名空间——这样保证了多个模块能够响应同本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。一 mutation 或 action。原创内容，盗版必究。【原创不易，请尊重版权】你可以通过添加前缀或后缀的方式隔离各模块【本文首发于唐霜的博客】【原创内容，转载请注明出处】，以避免名称冲突。你也可能希望写出一个可本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】复用的模块，其使用环境不可控。例如，我们未经授权，禁止复制转载。未经授权，禁止复制转载。想创建一个 todos 模块：
原创内容，盗版必究。原创内容，盗版必究。【原创内容，转载请注明出处】// types.js
// 定义 getter、action、和 mutation 的名称为常量，以模块名 `todos` 为前缀
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
// modules/todos.js
import * as types from '../types'
// 使用添加了前缀的名称定义 getter、action 和 mutation
const todosModule = {
state: { todos: [] },
getters: {
[types.DONE_COUNT] (state) {
// ...
}
},
actions: {
[types.FETCH_ALL] (context, payload) {
// ...
}
},
mutations: {
[types.TOGGLE_DONE] (state, payload) {
// ...
}
}
}
模块动态注册
在 store 创建之后，你可以使用 s【原创内容，转载请注明出处】【作者：唐霜】tore.registerModule 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。方法注册模块：
【作者：唐霜】【作者：唐霜】store.registerModule('myModule', {
// ...
})
模块的状态将是 store.state.【版权所有，侵权必究】【本文受版权保护】myModule。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。模块动态注册功能可以让其他 Vue 插件未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】为了应用的 store 附加新模块，以此【未经授权禁止转载】【本文首发于唐霜的博客】来分割 Vuex 的状态管理。例如，vu原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ex-router-sync 插件可以集本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。成 vue-router 与 vuex，原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。管理动态模块的路由状态。
未经授权，禁止复制转载。【本文首发于唐霜的博客】原创内容，盗版必究。【原创内容，转载请注明出处】你也可以使用 store.unregis【原创内容，转载请注明出处】【转载请注明来源】terModule(moduleName未经授权，禁止复制转载。【未经授权禁止转载】) 动态地卸载模块。注意，你不能使用此方未经授权，禁止复制转载。【原创不易，请尊重版权】法卸载静态模块（在创建 store 时声原创内容，盗版必究。转载请注明出处：www.tangshuang.net明的模块）。
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。小结
本章讲vue，其实就是一直在反复谈论如何本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。在组件之间共享数据。vuex通过一个中间【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的数据存储仓库store来实现组件之间的【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】数据交换。你可以使用一个全局变量保存这个【原创内容，转载请注明出处】原创内容，盗版必究。store，然后就可以在所有地方使用这个【转载请注明来源】【转载请注明来源】store。
【本文受版权保护】【原创不易，请尊重版权】【未经授权禁止转载】【本文受版权保护】如果要在组件中局部使用，你须要把这个st本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ore传入到根实例，这样在每一个组件里面【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】都可以使用this.$store.sta【作者：唐霜】【作者：唐霜】te来访问共享状态。这个状态和视图是联动原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。的，当状态在一个组件中被更改，那么其他组未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net件中如果使用到这个状态，那么视图也会跟着转载请注明出处：www.tangshuang.net【版权所有，侵权必究】更改。
转载请注明出处：www.tangshuang.net【本文受版权保护】【本文受版权保护】【版权所有，侵权必究】不过就像前面在探讨prop属性的时候一样【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，你不能直接通过修改this.$stor【转载请注明来源】著作权归作者所有，禁止商业用途转载。e.state上的某个值来修改状态，你必本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。须在store被创建的时候就先确定好要准【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】备哪些数据用来共享，并且写好对应的mut原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netations，在组件内使用this.$s著作权归作者所有，禁止商业用途转载。【作者：唐霜】tore.commit来提交mutati【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ons，达到修改state的目的。com著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。mit提交是修改state的唯一方法。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。未经授权，禁止复制转载。但是所有的mutations操作必须是同【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】步的，要异步操作，就必须使用action本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】s，和mutations使用方法一样，a本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netctions也必须在创建store时定义【版权所有，侵权必究】【版权所有，侵权必究】好，在组件内使用this.$store.【本文首发于唐霜的博客】【本文受版权保护】dispatch来分发某一个action本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。。而在action函数体内，也必须通过c【作者：唐霜】【作者：唐霜】ommit来修改state。
【作者：唐霜】【作者：唐霜】其他
vue-cli
vue官方提供了一个命令端工具vue-c转载请注明出处：www.tangshuang.net【版权所有，侵权必究】li来快速创建、编译你的组件，你可以通过这里深入阅读。
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。服务端渲染
vue2.0版本之后，开始支持服务端渲染本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net。简单的来说，服务端渲染就跟以前我们直接【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】用php输出html差不多，但是对于前后本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。端都是vue的node服务器环境而言，服【版权所有，侵权必究】【原创不易，请尊重版权】务端渲染可以实现后端渲染完之后，前端可以本文作者：唐霜，转载请注明出处。【作者：唐霜】获知哪里是由服务端渲染的，这样前端就不用原创内容，盗版必究。转载请注明出处：www.tangshuang.net自己渲染了。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。编者不是很看好服务端渲染，它使得开发的逻著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】辑变得很难理解，而且如果开发时考虑服务端【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。渲染，不得不考虑一些原本编程中不需要思考著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的问题，这其实也违背了编程本身的乐趣。如本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】果你看“生命周期”一章，就会发现，很多钩著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】子函数在服务端渲染的时候不被调用，这使得【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。你在编程的时候，原本对生命周期的理解会变本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net得被怀疑。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】后记
本书作为vue的中文教程，主要是为了帮助著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】那些想要尽快学会vue，使用vue进行编本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】程的同学准备的，所以里面涉及的内容更偏向【转载请注明来源】著作权归作者所有，禁止商业用途转载。于实用性和可理解性。大部分内容都是从官网本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】或对应的api文档中拷贝过来，同时加上自【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】己的话，使得对应的知识点更容易理解一些。原创内容，盗版必究。原创内容，盗版必究。但是毕竟不可能做到完美，肯定还会有不足之【作者：唐霜】本文版权归作者所有，未经授权不得转载。处，如果你在阅读中有什么疑问或不懂的地方【原创不易，请尊重版权】【未经授权禁止转载】，请在下方的留言框中留言，我会第一时间解【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。答你。
【作者：唐霜】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。
2017-05-04 | vue