vue.js中文教程（编）
前言
在阅读了《vue.js权威指南》之后，我【版权所有，侵权必究】转载请注明出处：www.tangshuang.net发现它基于1.0版本已经完全不适用当前的【转载请注明来源】【关注微信公众号：wwwtangshuangnet】2.0版本了，大部分介绍虽然很详尽，甚至本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。还分析了源码，但是实际上感觉是在浪费纸张【转载请注明来源】【本文受版权保护】，因为读者要看源码会到github上自己【原创内容，转载请注明出处】【原创内容，转载请注明出处】阅读，书里面只需要告诉读者项目的代码结构【本文受版权保护】【作者：唐霜】，让读者可以快速找到对应的源码即可。而且【本文首发于唐霜的博客】【未经授权禁止转载】权威指南版本落伍会带来一些使用上的困难，未经授权，禁止复制转载。未经授权，禁止复制转载。特别是一些api无法使用的时候，很苦恼。
转载请注明出处：www.tangshuang.net
所以，我只把这本书当做一本接触vue的【作者：唐霜】未经授权，禁止复制转载。入门书，省略了其中非常多的部分，从中大致【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。领略vue的使用方法和理念。我大部分时候本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，更多的是对照官网的文档进行开发，一边开【原创内容，转载请注明出处】【版权所有，侵权必究】发一边写代码，经常发现自己找不到对应的文原创内容，盗版必究。【本文首发于唐霜的博客】档，翻来翻去很久，才能找到自己需要的内容【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net。
而且官网的文档不是很详细，有些注意点并没【原创不易，请尊重版权】【版权所有，侵权必究】有说的很详细，导致开发的时候遇到一些坑，【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。或者不是很理解，使用的时候就乱用，多试几原创内容，盗版必究。【本文受版权保护】次就可以试出正确用法。当然这是笨蛋的方法转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】未经授权，禁止复制转载。另外，我认为vue-router和vue本文作者：唐霜，转载请注明出处。【未经授权禁止转载】-resource是两个必须讲清楚的插件【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，《权威指南》里面虽然也讲了，但是对照官未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。方文档，还是落伍了。不过《权威指南》的框著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】架结构很好，可以借鉴作为学习的大体框架。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。鉴于这些情况，我专门编这本书，用来帮助v【版权所有，侵权必究】原创内容，盗版必究。ue的学习者快速理清知识体系。注意，我用未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的是“编”，也就是说本书的内容基本上是复【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net制黏贴来的，只不过把知识结构重新梳理，以本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。便更好的学习这门框架。因此，对前人的努力【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。做出感谢。
未经授权，禁止复制转载。【未经授权禁止转载】【转载请注明来源】本文版权归作者所有，未经授权不得转载。之所以没有通过gitbook等方式开源本著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】书，是因为我觉得那样更难维护，而且不利于原创内容，盗版必究。转载请注明出处：www.tangshuang.net拷贝。最重要的是，那样没有一个直观的反馈【原创内容，转载请注明出处】原创内容，盗版必究。方式，如果你在阅读本书的时候遇到一些疑问转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，请在下方的留言框中进行留言，我会第一时【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】间进行回复。当然，如果本书有不足之处，也【转载请注明来源】转载请注明出处：www.tangshuang.net请你留言，我会完善它。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【转载请注明来源】背景了解
我在morningstar一直使用的都是【本文受版权保护】【关注微信公众号：wwwtangshuangnet】backbone，并且接触了compon【未经授权禁止转载】【作者：唐霜】ent的理念，但backbone对我来说【转载请注明来源】原创内容，盗版必究。还是太重了，于是我在寻找其他的compo【作者：唐霜】转载请注明出处：www.tangshuang.netnent替代方案，最早进入我的视线的是r著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。eact，但在接触之后，发现react门著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】槛稍微有点高，方法名太长，方式太复杂，可原创内容，盗版必究。本文作者：唐霜，转载请注明出处。以说“不符合我的审美”，当然，我还会继续【本文受版权保护】本文作者：唐霜，转载请注明出处。学习react，因为我在接触vue之后，本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】发现react在技术理念上，确实是一个未本文作者：唐霜，转载请注明出处。原创内容，盗版必究。来的产品，这并不是说vue不好，vue非【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】常好，所以我才会先花时间学习它，并且在我原创内容，盗版必究。【版权所有，侵权必究】的业余项目中直接使用它。未来react只【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】会作为我的一个工具，而vue则是我当下最原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】佳的选择。
【作者：唐霜】【本文首发于唐霜的博客】原创内容，盗版必究。vue是什么？
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。vue的英文意思就是“视图”，所以可以【本文受版权保护】【原创内容，转载请注明出处】知道，vue是一个偏视图的js框架，根据本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net官方的解释的理解，vue不属于MVC的范【版权所有，侵权必究】【未经授权禁止转载】畴，因为它只有MV，而且它的M是内置于框原创内容，盗版必究。【转载请注明来源】架内核中，对于开发者而言，可能基本上都是【作者：唐霜】本文版权归作者所有，未经授权不得转载。在处理V的东西。这也是为什么现在把vue【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】和react对比如此热门的原因之一。既然本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】是解决视图问题，那么不可避免的就会和DO未经授权，禁止复制转载。【作者：唐霜】M打交道，自然就会联想到react首创的【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netVirtual DOM理念，这在后文会详本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net细分析虚拟DOM是怎么回事。vue2.0未经授权，禁止复制转载。【本文首发于唐霜的博客】也使用了Virtual DOM，因此在视【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】图层面的渲染速度也非常快。
【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】总之，vue是一个关注视图层面的js框架【版权所有】唐霜 www.tangshuang.net【作者：唐霜】。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。既然是框架，而非库，那么就意味着它已经帮【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】你处理好了很多问题，当然，同时也限制了一【作者：唐霜】【版权所有】唐霜 www.tangshuang.net些方式。这和react不同，react实【本文受版权保护】【作者：唐霜】际上限制更少一些，内部封装更少一些，re【本文首发于唐霜的博客】【未经授权禁止转载】act官方把自己称为library（库）【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】。虽然是一个框架，但vue并不以构建ap原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netp为最终目标，实际上，组件思想在vue中【本文受版权保护】【原创内容，转载请注明出处】更加突出。因此，在基于vue的开发中，请【转载请注明来源】【转载请注明来源】更多思考组件，这和angular的时代可【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】能有些不同。
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】发展历史
Vue.js正式发布于2014年2月，对转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。于目前的Vue.js：
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net在开发人数上，覆盖70多贡献者。
著作权归作者所有，禁止商业用途转载。
在受关注度上，GitHub拥有 200【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。00 多 Star。
【未经授权禁止转载】
从脚手架、构建、插件化、组件化，到编辑本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net器工具、浏览器插件等，基本涵盖了从开发到【作者：唐霜】【转载请注明来源】测试等多个环节。
Vue.js的发展里程碑如下：
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net2013年12月24日，发布0.7.0。
转载请注明出处：www.tangshuang.net
2014年1月27日，发布0.8.0。
未经授权，禁止复制转载。
2014年2月25日，发布0.9.0。
【版权所有，侵权必究】
2014年3月24日，发布0.10.0【原创内容，转载请注明出处】未经授权，禁止复制转载。。
【作者：唐霜】
2015年10月27日，正式发布1.0【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】.0。
本文作者：唐霜，转载请注明出处。
2016年4月27日，发布2.0的pr【作者：唐霜】【关注微信公众号：wwwtangshuangnet】eview版本。
本文版权归作者所有，未经授权不得转载。
2016年10月，2.0正式版发布，整【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】个框架重新编写，性能提升，支持服务端渲染【转载请注明来源】著作权归作者所有，禁止商业用途转载。。
vue的作者
我是对国产框架比较鄙视的，特别是以前用t【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nethinkphp，但在前端领域，我接触过s【原创不易，请尊重版权】【作者：唐霜】eajs，原本觉得非常不错，可是后来也湮【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】灭了，就觉得国产开发框架没戏。看到vue【原创不易，请尊重版权】【作者：唐霜】之前，并不知道它的作者是中国人，觉得这个【本文受版权保护】【原创不易，请尊重版权】项目超有国际范儿。当后来知道vue的作者著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】竟然是中国人，就突然感觉不一样。当然，这本文作者：唐霜，转载请注明出处。原创内容，盗版必究。和框架创作者是哪国人没有太大关系，但能够未经授权，禁止复制转载。原创内容，盗版必究。如此优雅的写出vue，也不得不令人敬佩。
【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】尤雨溪，网名尤小右，英文名Evan，毕业【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】于上海复旦附中，在美国完成大学学业，本科【原创内容，转载请注明出处】【未经授权禁止转载】毕业于Colgate Universit【转载请注明来源】未经授权，禁止复制转载。y，后在Parsons设计学院获得Des【原创不易，请尊重版权】【原创内容，转载请注明出处】ign & Technology未经授权，禁止复制转载。【原创内容，转载请注明出处】艺术硕士学位，后职于纽约Google C【原创不易，请尊重版权】【版权所有，侵权必究】reative Lab，现在和阿里巴巴w本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】eex合作。
【本文首发于唐霜的博客】
这里是他的知乎主页，你可以follow他的twitter和他交流。
作为设计专业毕业的学生，即使有googl【本文受版权保护】著作权归作者所有，禁止商业用途转载。e工作经历，能够写出vue这样高审美的框原创内容，盗版必究。本文作者：唐霜，转载请注明出处。架，除了跪服也没有其他。这里是teahour对他的语言采访，你可以近转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net距离听听大牛的声音。
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netvue和其他框架或库的比较
原本应该把标题取名“我为什么选择vue”【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。，但是个人认为还是严肃点好。以下内容全部本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】来自官方文档，官方对vue和React、Angula【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。r、Ember、Knockout、Pol未经授权，禁止复制转载。【版权所有，侵权必究】ymer、Riot这些框架都进行了比较，著作权归作者所有，禁止商业用途转载。【作者：唐霜】虽然是官方，但并没有一味夸自己好，而是进转载请注明出处：www.tangshuang.net【版权所有，侵权必究】行较为客观的比较，值得一读，可以读到一些【本文受版权保护】本文作者：唐霜，转载请注明出处。vue团队对其他框架的优缺点如何吸取和摒【本文受版权保护】【版权所有，侵权必究】弃。本文进行了重点摘抄，如果想看完整版，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net请点链接进入。
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】react
React 和 Vue 有许多相似之处，【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】它们都有：
【本文受版权保护】【本文首发于唐霜的博客】【本文受版权保护】- 使用 Virtual DOM 【原创不易，请尊重版权】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
- 提供了响应式（Reactive）和组件化本文版权归作者所有，未经授权不得转载。【转载请注明来源】（Composable）的视图组件。 【本文受版权保护】【本文受版权保护】
- 将注意力集中保持在核心库，伴随于此，有配【作者：唐霜】【原创不易，请尊重版权】套的路由和负责处理全局状态管理的库。 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】
React 比 Vue 生态系统和丰富的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。自定义渲染器更好。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。在渲染用户界面的时候，DOM 的操作成本【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。是最高的，不幸的是没有库可以让这些原始操本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。作变得更快。我们能做到的最好效果就是：
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。- 把必须的 Dom 更新降到最小。Reac【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。t 和 Vue 都是通过 Virtual【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】 Dom 抽象层来实现这一要求，而且他们【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net都实现得一样赞。 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】转载请注明出处：www.tangshuang.net
- 在这些 Dom 操作之上，则尽可能少地添【作者：唐霜】本文版权归作者所有，未经授权不得转载。加额外性能开销（即：纯 JavaScri著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。pt 运算）。这是 Vue 和 Reac转载请注明出处：www.tangshuang.net【转载请注明来源】t 产生分歧之处。 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net
JavaScript 开销直接与求算必要本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。 DOM 操作的机制相关。尽管 Vue 【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。和 React 都使用了 Virtual未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net Dom 实现这一点，但 Vue 的 V【转载请注明来源】【原创不易，请尊重版权】irtual Dom 实现（复刻自 snabbdom）是更加轻量化的，因此也就比 React本文版权归作者所有，未经授权不得转载。【本文受版权保护】 的实现更高效。
【原创不易，请尊重版权】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。编者按：我的建议是vue和react都去原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。学，从职业角度讲，两者都有可能是未来几年原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net风靡一时的应用级产品，各大小公司都会上相【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。应的项目；从编程的角度讲，vue更代表时【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】代的集大成者，react更代表未来。学习著作权归作者所有，禁止商业用途转载。【作者：唐霜】而言，其实只要掌握了学习方法，其实学什么【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net都很快。谁先谁后？这取决于你当前的紧迫性【转载请注明来源】【作者：唐霜】，如果你的项目中马上要用react，那就【转载请注明来源】本文版权归作者所有，未经授权不得转载。先学react，但请尽量读完本书。
【本文受版权保护】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】angular
Vue 的一些语法和 Angular 的【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。很相似（例如 v-if vs ng-if）。因为 Angular 是 Vue 早本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】期开发的灵感来源。然而，Angular 【原创内容，转载请注明出处】【作者：唐霜】中存在的许多问题，在 Vue 中已经得到著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net解决。
在 Angular 1 中，当 watc【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】her 越来越多时会变得越来越慢，因为作著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】用域内的每一次变化，所有 watcher【作者：唐霜】【作者：唐霜】 都要重新计算。并且，如果一些 watc【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。her 触发另一个更新，脏检查循环（di【版权所有，侵权必究】【未经授权禁止转载】gest cycle）可能要运行多次。A【本文受版权保护】【本文受版权保护】ngular 用户常常要使用深奥的技术，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。以解决脏检查循环的问题。有时没有简单的办本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net法来优化有大量 watcher 的作用域未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net。
【转载请注明来源】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netVue 则根本没有这个问题，因为它使用基著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】于依赖追踪的观察系统并且异步队列更新，所【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。有的数据变化都是独立触发，除非它们之间有【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。明确的依赖关系。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】有意思的是，Angular 2 和 Vu转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nete 用相似的设计解决了一些 Angula【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】r 1 中存在的问题。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】原创内容，盗版必究。Angular 1 面向的是较小的应用程【转载请注明来源】著作权归作者所有，禁止商业用途转载。序，Angular 2 已转移焦点，面向【未经授权禁止转载】【未经授权禁止转载】的是大型企业应用。在这一点上 TypeS【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。cript 经常会被引用，它对那些喜欢用未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 Java 或者 C# 等类型安全的语言【转载请注明来源】【关注微信公众号：wwwtangshuangnet】的人是非常有用的。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】编者按：总之，如果你以前学过使用过ang【未经授权禁止转载】【原创不易，请尊重版权】ular，那么学vue会很快，并且觉得v【本文首发于唐霜的博客】【转载请注明来源】ue非常简单。如果你以前没有学过angu原创内容，盗版必究。【作者：唐霜】lar，直接跳过，马上学vue，等你使用【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】vue开发半年之后再去理解angular著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，会轻松很多。
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netEmber
编者按：不用学了，既复杂，又死板。虽然它【原创不易，请尊重版权】原创内容，盗版必究。是一个齐备的框架，里面什么都有了，但是正【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net是因为它这样，导致它很难跟上时代。
原创内容，盗版必究。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。Knockout
Knockout 是 MVVM 领域内的原创内容，盗版必究。【本文首发于唐霜的博客】先驱，并且追踪依赖。它的响应系统和 Vu本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。e 也很相似。它在浏览器支持以及其他方面的表现也是让人印象深刻的。它【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。最低能支持到 IE6，而 Vue 最低只【作者：唐霜】【原创内容，转载请注明出处】能支持到 IE9。
【原创内容，转载请注明出处】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】随着时间的推移，Knockout 的发展本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】已有所放缓，并且略显有点老旧了。比如，它【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。的组件系统缺少完备的生命周期事件方法，尽未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net管这些在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。
【版权所有，侵权必究】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。Polymer
Polymer 是另一个由谷歌赞助的项目著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，事实上也是 Vue 的一个灵感来源。V【本文受版权保护】本文作者：唐霜，转载请注明出处。ue 的组件可以粗略的类比于 Polym原创内容，盗版必究。原创内容，盗版必究。er 的自定义元素，并且两者具有相似的开【作者：唐霜】原创内容，盗版必究。发风格。最大的不同之处在于，Polyme【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】r 是基于最新版的 Web Compon本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ents 标准之上，并且需要重量级的 p【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】olyfills 来帮助工作（性能下降）著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】，浏览器本身并不支持这些功能。相比而言，原创内容，盗版必究。未经授权，禁止复制转载。Vue 在支持到 IE9 的情况下并不需原创内容，盗版必究。【原创内容，转载请注明出处】要依赖 polyfills 来工作。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。Polymer 自定义的元素是用 HTM【未经授权禁止转载】原创内容，盗版必究。L 文件来创建的，这会限制使用 Java【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。Script/CSS（和被现代浏览器普遍著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。支持的语言特性）。相比之下，Vue 的单【转载请注明来源】【版权所有】唐霜 www.tangshuang.net文件组件允许你非常容易的使用 ES201【本文首发于唐霜的博客】未经授权，禁止复制转载。5 和你想用的 CSS 预编译处理器。
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。而 Vue 和 Web Componen转载请注明出处：www.tangshuang.net原创内容，盗版必究。t 标准进行深层次的整合也是完全可行的，本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。比如使用 Custom Elements【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。、Shadow DOM 的样式封装。然而【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。在我们做出严肃的实现承诺之前，我们目前仍【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。在等待相关标准成熟，进而再广泛应用于主流【原创不易，请尊重版权】【转载请注明来源】的浏览器中。
【作者：唐霜】未经授权，禁止复制转载。【未经授权禁止转载】编者按：读者应该学习一下polymer，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。主要学习它的思想，如果没有必要，可以不深未经授权，禁止复制转载。原创内容，盗版必究。入学习进行开发。
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。Riot
Riot 2.0 提供了一个类似于基于组【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】件的开发模型（在 Riot 中称之为 T【版权所有，侵权必究】原创内容，盗版必究。ag），它提供了小巧精美的 API。Ri【转载请注明来源】本文作者：唐霜，转载请注明出处。ot 和 Vue 在设计理念上可能有许多【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】相似处。尽管相比 Riot ，Vue 要著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。显得重一点。
未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net编者按：按照尤小右的说法，riot是很不【版权所有，侵权必究】【未经授权禁止转载】错的，但是因为它用的技术不够fashio转载请注明出处：www.tangshuang.net【转载请注明来源】n，我也不建议花太多时间学习，除非你有一本文作者：唐霜，转载请注明出处。原创内容，盗版必究。个东西很需要一个更小的框架，你想更有个性转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net一点。
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】Vue实例
首先，你必须掌握一个概念，就是“vue实著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。例”。什么意思呢？所有的vue程序都需要【作者：唐霜】原创内容，盗版必究。实例化之后使用，实例主要有两种，一个是V【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ue实例，一个是组件实例。当然，如果你把【本文受版权保护】【作者：唐霜】router和resource加进来，它未经授权，禁止复制转载。【转载请注明来源】们也有实例，我们可以称之为插件实例。
【本文首发于唐霜的博客】原创内容，盗版必究。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】构造器
每个 Vue.js 应用都是通过构造函数【原创内容，转载请注明出处】原创内容，盗版必究。 Vue 创建一个 Vue 的根实例 启动的：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。var vm = new Vue({
// 选项
})
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。生命周期钩子等选项。全部的选项可以在 API 文档中查看。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【未经授权禁止转载】组件构造器
可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器。所谓组件构造器，就是创建一个组件的原型未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net类。
var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent()
尽管可以命令式地创建扩展实例，不过在多数【原创不易，请尊重版权】【本文受版权保护】情况下建议将组件构造器注册为一个自定义元【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】素，然后声明式地用在模板中。我们将在后面【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】详细说明组件系统。现在你只需知道所有的 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。Vue.js 组件其实都是被扩展的 Vu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete 实例。
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net编者按：组件是vue里面重要的话题。但是未经授权，禁止复制转载。【本文首发于唐霜的博客】对于开发者而言，其实只需要关心上面那个红【未经授权禁止转载】【本文首发于唐霜的博客】色的大括号里面的开发即可。组件的使用有好本文版权归作者所有，未经授权不得转载。【本文受版权保护】几种，但是开发者要写的，都在这个大括号身著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】上。另外，Vue.extend之后，就是本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net一个组件构造器，实例化以后，就是一个组件原创内容，盗版必究。转载请注明出处：www.tangshuang.net，下文会有一章详细介绍组件，这里暂且跳过【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。。
【作者：唐霜】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】实例属性（数据代理和响应）
每个 Vue 实例都会代理其 data 对象里所有的属性：
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netvar 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【原创内容，转载请注明出处】编者按：也就是说，你得在new之前，就把转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。所有的data都传进去。实例创建之后，其【原创不易，请尊重版权】【未经授权禁止转载】实可以使用$set来加入属性，也可以实现【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。响应功能。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。除了 data 属性， Vue 实例暴露原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】了一些有用的实例属性与方法。这些属性与方【本文受版权保护】【本文首发于唐霜的博客】法都有前缀 $，以便与代理的 data 属性区分。例如【版权所有，侵权必究】【原创不易，请尊重版权】：
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 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。var app = new Vue({
methods: {
myMethod() {},
otherMethod() {
// 这里就可以使用this.myMethod()了
},
},
})
app.otherMethod() // 可以在外面调用
和this.$data一样，vue也有一本文版权归作者所有，未经授权不得转载。【转载请注明来源】些以$开头的方法，比如app.$watc本文版权归作者所有，未经授权不得转载。【作者：唐霜】h等，这些都是vue内置的方法。
未经授权，禁止复制转载。未经授权，禁止复制转载。【转载请注明来源】实例属性和方法的完整列表中查阅 API 参考。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。模板和数据绑定
Vue的模板语法
Vue.js 使用了基于 HTML 的模原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。版语法，允许开发者声明式地将 DOM 绑【原创不易，请尊重版权】【原创内容，转载请注明出处】定至底层 Vue 实例的数据。所有 Vu未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nete.js 的模板都是合法的 HTML ，转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。所以能被遵循规范的浏览器和 HTML 解转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。析器解析。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。在底层的实现上， Vue 将模板编译成虚本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。拟 DOM 渲染函数。结合响应系统，在应【作者：唐霜】【本文受版权保护】用状态改变时， Vue 能够智能地计算出原创内容，盗版必究。【原创内容，转载请注明出处】重新渲染组件的最小代价并应用到 DOM 【作者：唐霜】【版权所有，侵权必究】操作上。
【原创内容，转载请注明出处】【转载请注明来源】如果你熟悉虚拟 DOM 并且偏爱 Jav【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。aScript 的原始力量，你也可以不用【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】模板，直接写渲染（render）函数，使用可选的 JSX 语法。
【版权所有，侵权必究】【版权所有，侵权必究】编者按：这里说的render函数和rea【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ct里面是一模一样的。在上面实例化vue未经授权，禁止复制转载。【转载请注明来源】的时候，如果你传入了一个template【本文受版权保护】转载请注明出处：www.tangshuang.net参数，就会使用template，如果你传【版权所有，侵权必究】【作者：唐霜】入了一个render参数（函数），则会使未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】用这个函数来作为模板的渲染。
【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】插值
文本
数据绑定最常见的形式就是使用 “Must原创内容，盗版必究。【作者：唐霜】ache” 语法（双大括号）的文本插值：
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
msg和你传入的data.msg是绑定的【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】，当你在操作实例的时候，把实例的data【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】.msg改变了，那么视图上的这个msg也转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】会改变。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【作者：唐霜】var app = new Vue({
template: '<span>Message: {{msg}}</span>',
data: {
msg: 'Welcome!',
},
})
setTimeout(() => app.msg = 'Let us go!', 1000)
上面你要知道一个事实：app.$data本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】.msg === app.msg，而且由转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net于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 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net字符串的模板引擎。组件更适合担任 UI 本文作者：唐霜，转载请注明出处。【作者：唐霜】重用与复合的基本单元。
你的站点上动态渲染的任意 HTML 可能本文版权归作者所有，未经授权不得转载。【转载请注明来源】会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
【原创不易，请尊重版权】原创内容，盗版必究。属性
Mustache 不能在 HTML 属性【原创不易，请尊重版权】原创内容，盗版必究。中使用，应使用 v-bind 指令（下文【版权所有，侵权必究】【本文受版权保护】指令一章详细说）：
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被【版权所有】唐霜 www.tangshuang.net【本文受版权保护】求值为 false 的话该属性会被移除：
【原创不易，请尊重版权】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net<button v-bind:disabled="someDynamicCondition">Button</button>
使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。定简单的属性键值。但实际上，对于所有的数本文作者：唐霜，转载请注明出处。【本文受版权保护】据绑定， Vue.js 都提供了完全的 【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netJavaScript 表达式支持。
【版权所有，侵权必究】【本文受版权保护】{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。用域下作为 JavaScript 被解析【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
【转载请注明来源】转载请注明出处：www.tangshuang.net<!-- 这是语句，不是表达式 -->{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->{{ if (ok) { return message } }}
模板表达式都被放在沙盒中，只能访问全局变著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定【原创不易，请尊重版权】【本文受版权保护】义的全局变量。
计算属性
什么是计算属性
模板内的表达式是非常便利的，但是它们实际【本文首发于唐霜的博客】未经授权，禁止复制转载。上只用于简单的运算。在模板中放入太多的逻【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】辑会让模板过重且难以维护。例如：
【作者：唐霜】未经授权，禁止复制转载。<div id="example">{{ message.split('').reverse().join('') }}</div>
在这种情况下，模板不再简单和清晰。在意识著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】到这是反向显示 message 之前，你【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。不得不再次确认第二遍。当你想要在模板中多本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。次反向显示 message 的时候，问题【本文受版权保护】【关注微信公众号：wwwtangshuangnet】会变得更糟糕。
【转载请注明来源】原创内容，盗版必究。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。这就是对于任何复杂逻辑，你都应当使用计算属性的原因。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。所谓计算属性，就是跟ES5的getter【关注微信公众号：wwwtangshuangnet】【作者：唐霜】一样的，用function来定义个属性，本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】当你获取这个属性的时候，实际上是要执行这【本文首发于唐霜的博客】【版权所有，侵权必究】个function，执行function【作者：唐霜】【原创内容，转载请注明出处】的过程就是计算过程，所以也就叫计算属性。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net所有的计算属性被放在computed里面本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】，computed和data, meth【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ods同级，如下：
【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】原创内容，盗版必究。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【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。p.message，还记得上面的数据代理【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。吗？app.message === ap【版权所有】唐霜 www.tangshuang.net【作者：唐霜】p.$data.message === 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】传入的data.message。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】你可以像绑定普通属性一样在模板中绑定计算【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了未经授权，禁止复制转载。【原创不易，请尊重版权】这种依赖关系：计算属性的 getter 【未经授权禁止转载】未经授权，禁止复制转载。是没有副作用，这使得它易于测试和推理。
计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。的 method 来达到同样的效果：
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net<p>Reversed message: "{{ reversedMessage() }}"</p>
// in component -------------------------------------
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个 metho未经授权，禁止复制转载。【原创不易，请尊重版权】d 而不是一个计算属性。对于最终的结果，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。两种方式确实是相同的。然而，不同的是计算未经授权，禁止复制转载。原创内容，盗版必究。属性是基于它们的依赖进行缓存的。计算属性原创内容，盗版必究。未经授权，禁止复制转载。只有在它的相关依赖发生改变时才会重新求值原创内容，盗版必究。本文作者：唐霜，转载请注明出处。。这就意味着只要 message 还没有【原创内容，转载请注明出处】【本文首发于唐霜的博客】发生改变，多次访问 reversedMe【原创不易，请尊重版权】原创内容，盗版必究。ssage 计算属性会立即返回之前的计算本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net结果，而不必再次执行函数。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】这也同样意味着下面的计算属性将不再更新，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。因为 Date.now() 不是响应式依著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】赖：
未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netcomputed: {
now: function () {
return Date.now()
}
}
相比而言，只要发生重新渲染，method【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】 调用总会执行该函数。
【转载请注明来源】【本文受版权保护】我们为什么需要缓存？假设我们有一个性能开本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。销比较大的的计算属性 A ，它需要遍历一本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net个极大的数组和做大量的计算。然后我们可能原创内容，盗版必究。【作者：唐霜】有其他的计算属性依赖于 A 。如果没有缓【本文受版权保护】【原创不易，请尊重版权】存，我们将不可避免的多次执行 A 的 g转载请注明出处：www.tangshuang.net原创内容，盗版必究。etter！如果你不希望有缓存，请用 m【版权所有，侵权必究】【未经授权禁止转载】ethod 替代。
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】计算 setter
计算属性默认只有 getter ，不过在【转载请注明来源】【作者：唐霜】需要时你也可以提供一个 setter ：
【本文受版权保护】本文作者：唐霜，转载请注明出处。// ...
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 = 【本文受版权保护】本文版权归作者所有，未经授权不得转载。‘John Doe̵转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net7; 时， setter 会被调用， v原创内容，盗版必究。【转载请注明来源】m.firstName 和 vm.las【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nettName 也相应地会被更新。
【本文受版权保护】【本文受版权保护】观察 Watchers
在Vue里面有个方法，可以用来监听实例属【未经授权禁止转载】未经授权，禁止复制转载。性的变化，就是watcher，如果你用过【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netangular的话，肯定知道watche【本文受版权保护】【未经授权禁止转载】r是什么。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。什么是watch
watch是和data, methods【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】, computed同级的一个参数，你可【未经授权禁止转载】【转载请注明来源】以在watch里面规定你要watch的属【作者：唐霜】原创内容，盗版必究。性，当这些属性发生变化的时候，它会执行对【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】应的那个函数。栗子：
【作者：唐霜】原创内容，盗版必究。var app = new Vue({
data: {
message: '',
msg: '',
},
watch: {
message: function() { // 当app.$data.message发生变化的时候，执行这个函数
this.msg = 'Changed!'
},
},
})
虽然计算属性在大多数情况下更合适，但有时【原创不易，请尊重版权】原创内容，盗版必究。也需要一个自定义的 watcher 。这原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。是为什么 Vue 提供一个更通用的方法通【原创不易，请尊重版权】【原创内容，转载请注明出处】过 watch 选项，来响应数据的变化。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。当你想要在数据变化响应时，执行异步操作或【版权所有】唐霜 www.tangshuang.net【作者：唐霜】开销较大的操作，这是很有用的。
【本文首发于唐霜的博客】【本文受版权保护】例如：
【版权所有】唐霜 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 选项允许【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net我们执行异步操作（访问一个 API），限著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。制我们执行该操作的频率，并在我们得到最终转载请注明出处：www.tangshuang.net【转载请注明来源】结果前，设置中间状态。这是计算属性无法做【作者：唐霜】原创内容，盗版必究。到的。
原创内容，盗版必究。未经授权，禁止复制转载。【转载请注明来源】除了 watch 选项之外，您还可以使用 vm.$watch API 命令。
【未经授权禁止转载】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netComputed 属性 vs Watched 属性
Vue 确实提供了一种更通用的方式来观察著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。和响应 Vue 实例上的数据变动：wat原创内容，盗版必究。【版权所有，侵权必究】ch 属性。当你有一些数据需要随着其它数【作者：唐霜】【关注微信公众号：wwwtangshuangnet】据变动而变动时，你很容易滥用 watch本文版权归作者所有，未经授权不得转载。【作者：唐霜】——特别是如果你之前使用过 Angula【转载请注明来源】转载请注明出处：www.tangshuang.netrJS。然而，通常更好的想法是使用 co【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。mputed 属性而不是命令式的 wat本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ch 回调。细想一下这个例子：
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 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著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】mputed 属性的版本进行比较：
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
好得多了，不是吗？
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】指令
什么是指令？
指令（Directives）是带有 v-原创内容，盗版必究。原创内容，盗版必究。 前缀的特殊属性。指令属性的值预期是单一【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net JavaScript 表达式（除了 v【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。-for，之后再讨论）。指令的职责就是当【未经授权禁止转载】转载请注明出处：www.tangshuang.net其表达式的值改变时相应地将某些行为应用到转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。 DOM 上。让我们回顾一下在介绍里的例本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net子：
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【作者：唐霜】未经授权，禁止复制转载。<p v-if="seen">Now you see me</p>
这里， v-if 指令将根据表达式 se未经授权，禁止复制转载。【未经授权禁止转载】en 的值的真假来移除/插入 <p本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】> 元素。而v-if就是指令。vu【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】e里面有很多内置的指令，你还可以自定义指【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。令。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】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【作者：唐霜】【未经授权禁止转载】指令怎么用？
只需要直接将指令作为html元素的属性来转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。使用就可以了，例如<div v-if="hasChild"></div>。指令只对当前所在的这个元素起作用，它在【未经授权禁止转载】原创内容，盗版必究。哪个元素上，就哪个元素做出对应的动作。
该属性的值被称为指令的“表达式”，例如v【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。-if=”isExists&【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net#8221;，isExists对应thi【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。s.isExists，既然是表达式，就有未经授权，禁止复制转载。未经授权，禁止复制转载。返回值，它的值被传给指令，指令根据表达式著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。的返回结果来决定所在的元素进行怎样的操作转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net。表达式里面的变量，都是来自vue实例的【作者：唐霜】【关注微信公众号：wwwtangshuangnet】属性。
转载请注明出处：www.tangshuang.net【转载请注明来源】【转载请注明来源】指令也可以有参数，主要是指v-on和v-【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netbind这两个指令，它们后面跟上一个冒号未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，冒号和等号之间的内容就是参数，例如v-【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netbind:src=”src”，红著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】色的src就是参数。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一些指令还有修饰符，用.符号连接，主要是【作者：唐霜】本文版权归作者所有，未经授权不得转载。绑定型指令会有。
【转载请注明来源】未经授权，禁止复制转载。【原创不易，请尊重版权】【未经授权禁止转载】内容型指令
v-text
<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>
v-html
<div v-html="html"></div>
和v-text不一样，v-html真的是【本文首发于唐霜的博客】【本文受版权保护】完完全全innerHTML。为了安全起见原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，不要用。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。条件判断型指令
v-if
<div v-if="is"></div>
如果this.is值为真，则当前元素会被【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。插入到dom中，如果is为假，当前元素会原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。被从dom中移除。因此，v-if是有do【版权所有，侵权必究】【转载请注明来源】m消耗的，使用时不应该反复更改is值。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.netv-show
<div v-show="is"></div>
v-show和v-if是一样的用法，但是本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。相对于v-if不一样。v-if是会把这个未经授权，禁止复制转载。【原创不易，请尊重版权】元素从dom中移走或者插入的，但是v-s著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】how是不会的，is为false的时候，【作者：唐霜】【未经授权禁止转载】会给这个元素加一个display:non【作者：唐霜】著作权归作者所有，禁止商业用途转载。e，仅仅是隐藏这个元素，所以不会有dom【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。的消耗。
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】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版本原创内容，盗版必究。【未经授权禁止转载】是没有的，使用的时候注意。前一兄弟元素必著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。须有 v-if 或 v-else-if。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。表示 v-if 的 “else if 块【本文受版权保护】未经授权，禁止复制转载。”。可以链式调用。
【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】<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
基于源数据多次渲染元素或模板块。也就是说【转载请注明来源】【关注微信公众号：wwwtangshuangnet】，跟前面的指令不一样，上面的指令当前元素【原创不易，请尊重版权】【版权所有，侵权必究】只会出现0次或1次，而v-for可以让当未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】前元素重复渲染。此指令之值，必须使用特定未经授权，禁止复制转载。【本文受版权保护】语法 alias in expressi著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。on ，为当前遍历的元素提供别名：
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net<div v-for="item in items">{{ item.text }}</div>
另外也可以为数组索引指定别名（或者用于对【转载请注明来源】著作权归作者所有，禁止商业用途转载。象的键）：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<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 默认行为试着不改变整体，而是【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】替换元素。迫使其重新排序的元素,您需要提本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】供一个 key 的特殊属性:
【版权所有，侵权必究】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net<div v-for="item in items" :key="item.id">{{ item.text }}</div>
关于这个key，Vue为了确保在virt著作权归作者所有，禁止商业用途转载。【作者：唐霜】ual dom里面，更新的时候用来做对比本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net用的。如果不使用key，Vue会使用一种【版权所有，侵权必究】【原创内容，转载请注明出处】最大限度减少动态元素并且尽可能的尝试修复【转载请注明来源】【作者：唐霜】/再利用相同类型元素的算法。使用key，【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】它会基于key的变化重新排列元素顺序，并【本文受版权保护】【未经授权禁止转载】且会移除key不存在的元素。具体可以阅读这里。下文“特殊属性”一节会讲到。
【作者：唐霜】【未经授权禁止转载】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net绑定型指令
绑定型指令会有参数，也就是有冒号，参数是原创内容，盗版必究。【转载请注明来源】绑定的属性或事件。绑定型指令还有修饰符。
【原创不易，请尊重版权】未经授权，禁止复制转载。v-bind
动态地绑定一个或多个attr或prop属【作者：唐霜】【原创内容，转载请注明出处】性。简单的说就是，通过v-bind绑定一【未经授权禁止转载】未经授权，禁止复制转载。个属性，这个属性可以是html原本有的，【原创内容，转载请注明出处】【本文首发于唐霜的博客】也可以是某些特殊的，绑定的表达式的值赋值转载请注明出处：www.tangshuang.net【转载请注明来源】给这个属性。例如：<img v-bind:src="imgSrc">，imgSrc是实例的imgSrc属性t【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。his.imgSrc，它的值将会作为字符【原创不易，请尊重版权】未经授权，禁止复制转载。串作为属性src的值。绑定之后，如果th未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。is.imgSrc更改，那么src的值也【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net随着更改，图片也就会换成另外一幅。
在绑定 class 或 style 特性本文版权归作者所有，未经授权不得转载。【本文受版权保护】时，支持其它类型的值，如数组或对象。下文著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】会详细讲class和style属性的问题【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】。
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net在绑定 prop 时，prop 必须在子【原创内容，转载请注明出处】【未经授权禁止转载】组件中声明，这你得读到组件那一章才会了解【本文受版权保护】本文作者：唐霜，转载请注明出处。什么是自组件，以及自组件的props。
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。没有参数时，可以绑定到一个包含键值对的对【版权所有，侵权必究】转载请注明出处：www.tangshuang.net象。注意此时 class 和 style本文作者：唐霜，转载请注明出处。原创内容，盗版必究。 绑定不支持数组和对象。
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【原创内容，转载请注明出处】v-bind:可以缩写成单独的一个冒号:转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】修饰符：
原创内容，盗版必究。【作者：唐霜】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net- .prop – 被用于绑定 【版权所有，侵权必究】转载请注明出处：www.tangshuang.netDOM 属性。(what’s the differenc【原创内容，转载请注明出处】【本文首发于唐霜的博客】e?)。编者按：prop和attr是不同的，【版权所有】唐霜 www.tangshuang.net【转载请注明来源】熟悉jquery的同学应该知道，比如ch原创内容，盗版必究。【未经授权禁止转载】eckbox的checked属性。 【作者：唐霜】【作者：唐霜】
- .camel – trans【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。form the kebab-case 【原创内容，转载请注明出处】【未经授权禁止转载】attribute name into 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】camelCase. (supporte【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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 【未经授权禁止转载】未经授权，禁止复制转载。模板时将 v-bind 属性名称驼峰化，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net例如 SVG 的 viewBox 属性：
【作者：唐霜】著作权归作者所有，禁止商业用途转载。<svg :view-box.camel="viewBox"></svg>
v-on
绑定事件监听器。事件类型由参数指定。表达【转载请注明来源】【未经授权禁止转载】式可以是一个方法的名字或一个内联语句，如本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。果没有修饰符也可以省略。
【原创不易，请尊重版权】
用在普通元素上时，只能监听 原生 DO【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。M 事件。用在自定义元素组件上时，也可以著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。监听子组件触发的自定义事件。关于这个“子【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。组件的自定义事件”也可以在下文的“组件”原创内容，盗版必究。【原创不易，请尊重版权】一章学到。
在监听原生 DOM 事件时，方法以事件为【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。唯一的参数。如果使用内联语句，语句可以访本文作者：唐霜，转载请注明出处。【未经授权禁止转载】问一个 $event 属性： v-on:转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】click=”handle(【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】‘ok’, $e本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。vent)”。
原创内容，盗版必究。【本文受版权保护】著作权归作者所有，禁止商业用途转载。v-on:可以缩写成@。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。修饰符：
【作者：唐霜】本文版权归作者所有，未经授权不得转载。- .stop – 调用 eve【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。nt.stopPropagation()【本文首发于唐霜的博客】【版权所有，侵权必究】。 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
- .prevent – 调用 未经授权，禁止复制转载。【本文首发于唐霜的博客】event.preventDefault【版权所有，侵权必究】【本文受版权保护】()。 著作权归作者所有，禁止商业用途转载。【转载请注明来源】未经授权，禁止复制转载。
- .capture – 添加事未经授权，禁止复制转载。【本文首发于唐霜的博客】件侦听器时使用 capture 模式。 本文作者：唐霜，转载请注明出处。【转载请注明来源】
- .self – 只当事件是从未经授权，禁止复制转载。【原创不易，请尊重版权】侦听器绑定的元素本身触发时才触发回调。 本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- .{keyCode | keyAlias【作者：唐霜】未经授权，禁止复制转载。} – 只当事件是从特定键触原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。发时才触发回调。 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
- .native – 监听组件原创内容，盗版必究。【转载请注明来源】根元素的原生事件。 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- .once – 只触发一次回【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net调。 【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【转载请注明来源】
- .left – (2.2.0【原创不易，请尊重版权】【本文首发于唐霜的博客】) 只当点击鼠标左键时触发。 【原创内容，转载请注明出处】未经授权，禁止复制转载。
- .right – (2.2.未经授权，禁止复制转载。【本文首发于唐霜的博客】0) 只当点击鼠标右键时触发。 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。
- .middle – (2.2未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。.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>
还有更多的修饰符：
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。- .enter 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- .tab 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
- .delete (捕获 “删除” 和 “【作者：唐霜】未经授权，禁止复制转载。退格” 键) 本文作者：唐霜，转载请注明出处。【作者：唐霜】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】
- .esc 【本文受版权保护】未经授权，禁止复制转载。原创内容，盗版必究。
- .space 转载请注明出处：www.tangshuang.net【本文受版权保护】【原创内容，转载请注明出处】未经授权，禁止复制转载。
- .up 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【原创不易，请尊重版权】
- .down 转载请注明出处：www.tangshuang.net【作者：唐霜】原创内容，盗版必究。
- .left 原创内容，盗版必究。【本文首发于唐霜的博客】
- .right 未经授权，禁止复制转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
- .ctrl 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】
- .alt 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
- .shift 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【作者：唐霜】
- .meta 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
这些修饰符是跟键盘相关的，主要是在一些输【本文受版权保护】【本文受版权保护】入相关的元素上可以使用。
【本文受版权保护】【本文首发于唐霜的博客】v-model
在表单控件或者组件上创建双向绑定。它会根【原创内容，转载请注明出处】【作者：唐霜】据控件类型自动选取正确的方法来更新元素。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。尽管有些神奇，但 v-model 本质上著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】不过是语法糖，它负责监听用户的输入事件以【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】更新数据，并特别处理一些极端的例子。
【原创不易，请尊重版权】【转载请注明来源】【作者：唐霜】【原创内容，转载请注明出处】v-model 并不关心表单控件初始化所本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】生成的值。因为它会选择 Vue 实例数据【原创不易，请尊重版权】原创内容，盗版必究。来作为具体的值。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net对于要求 IME （如中文、 日语、 韩本文作者：唐霜，转载请注明出处。【转载请注明来源】语等） 的语言，你会发现那v-model本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net不会在 ime 构成中得到更新。如果你也本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。想实现更新，请使用 input事件。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【本文首发于唐霜的博客】编者按：这个指令超级复杂，它一定会跟表单【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。控件联系在一起。所以要事先认真解释一下。【本文受版权保护】著作权归作者所有，禁止商业用途转载。首先，要理解双向绑定的概念。非常简单的说【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，就是包含了两种绑定。第一种就是v-bi著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】nd的绑定，v-bind绑定之后，如果v原创内容，盗版必究。【转载请注明来源】ue实例对应的属性变化了，视图也会跟着改【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net变。第二种是反过来的，是视图上的改变会导【本文首发于唐霜的博客】【转载请注明来源】致vue实例对应的属性的变化。视图怎么变原创内容，盗版必究。【原创不易，请尊重版权】呢？比如在input, textarea【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net中输入内容，通过点击，切换radio, 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netcheckbox, select的选项。【原创不易，请尊重版权】原创内容，盗版必究。这就是双向绑定。
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netv-model因为只会用在表单控件上，所【作者：唐霜】【原创不易，请尊重版权】以有关内容都在下面的《表单控件绑定》一章【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】中详解。
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】为了区别v-bind和v-model，我原创内容，盗版必究。本文作者：唐霜，转载请注明出处。还专门写了一篇文章，你可以在看完这里之后再读一下。
【转载请注明来源】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net补充：<input v-model【未经授权禁止转载】【原创内容，转载请注明出处】=”something转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】221;>其实是<input【版权所有，侵权必究】【本文首发于唐霜的博客】 v-bind:value=”【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net;something” v-原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。on:input=”some著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。thing = $event.targe【本文首发于唐霜的博客】【原创不易，请尊重版权】t.value”>的语【关注微信公众号：wwwtangshuangnet】【转载请注明来源】法糖，也就是说v-model本身就已经包未经授权，禁止复制转载。【版权所有，侵权必究】含了v-bind，所以当v-bind:v【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】alue, v-on:input和v-m【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】odel同时出现在一个input上时，这原创内容，盗版必究。【原创内容，转载请注明出处】个v-bind, v-on会失效。这在下【作者：唐霜】【版权所有】唐霜 www.tangshuang.net文会反复出现，如果你此刻没有理解，可以等原创内容，盗版必究。【未经授权禁止转载】到下面阅读到相关内容之后再反过来思考。
【作者：唐霜】【版权所有，侵权必究】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net
控制型指令
还有内置指令可以实现在渲染过程中暂时挂起未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。当前指令所在的元素，或者改变vue默认的转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】渲染机制。
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】v-pre
不进行模板编译的部分。
【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】<span v-pre>{{ this will not be compiled }}</span>
里面的{{}}不会被认为是js表达式编译【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】成html，而是原模原样的展示出来。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】未经授权，禁止复制转载。v-once
只渲染元素和组件一次。随后的重新渲染,元本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】素/组件及其所有的子节点将被视为静态内容本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。并跳过。这可以用于优化更新性能。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【未经授权禁止转载】【未经授权禁止转载】<!-- 单个元素 -->
<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这个指令有的时候非常有用。比如一些组件并【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。不需要跟着数据变化而变化的时候。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netv-cloak
这个指令保持在元素上直到关联实例结束编译【未经授权禁止转载】转载请注明出处：www.tangshuang.net。和 CSS 规则如 [v-cloak]本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net { display: none } 一转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】起用时，这个指令可以隐藏未编译的 Mus【作者：唐霜】【版权所有】唐霜 www.tangshuang.nettache 标签直到实例准备完毕。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】[v-cloak] { display: none;}
<div v-cloak>
{{ message }}
</div>
其实也就是一个普通的属性，当编译结束的时本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】候，就把这个属性移除掉。所以上面那个cs【转载请注明来源】本文作者：唐霜，转载请注明出处。s，使得这些有v-cloak属性的元素全【关注微信公众号：wwwtangshuangnet】【本文受版权保护】部先隐藏起来，最后当v-cloak被移除著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。的时候，这些元素就显示出来了。为什么要有【作者：唐霜】【关注微信公众号：wwwtangshuangnet】这么一个奇怪的属性呢？因为你要知道，{{【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】message}}在原始的html中是字本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。符串，是会显示在界面中的。如果你的浏览器【作者：唐霜】本文作者：唐霜，转载请注明出处。编译模板速度慢，或者用户网速慢，vue代【作者：唐霜】未经授权，禁止复制转载。码半天没加载完，那么用户就会看到这些奇怪本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。的{{}}，而如果使用一个v-cloak著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。属性，就可以把这些内容事先隐藏起来，不让未经授权，禁止复制转载。【原创不易，请尊重版权】用户看到。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net自定义指令
vue里你还可以自定义指令，它们和内置指【版权所有，侵权必究】【本文首发于唐霜的博客】令一样，以v-开头。开发自己的指令之前，著作权归作者所有，禁止商业用途转载。【本文受版权保护】你需要理解指令到底是拿来干什么的，而不要转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net把所有的功能都开发成指令来用。
【本文受版权保护】原创内容，盗版必究。创建指令
让我们来创建一个指令：当页面加载时，元素【版权所有，侵权必究】【原创不易，请尊重版权】将获得焦点。事实上，你访问后还没点击任何【未经授权禁止转载】【本文受版权保护】内容，input 就获得了焦点。我们希望本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。使用的时候用v-focus来作为标识符。
【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】new Vue({
directives: {
focus: {
inserted(el) {
el.focus()
},
},
},
})
这样我们我们就创建了v-focus指令，【转载请注明来源】【关注微信公众号：wwwtangshuangnet】在模板中，就可以这样使用：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】<input v-focus>
这样当页面打开的时候，这个input就会【本文首发于唐霜的博客】未经授权，禁止复制转载。自动获取焦点。
本文作者：唐霜，转载请注明出处。【转载请注明来源】转载请注明出处：www.tangshuang.net钩子函数
你可以看到上面的定义一个指令的结构：在实【未经授权禁止转载】【转载请注明来源】力参数中传入directives，在di未经授权，禁止复制转载。【转载请注明来源】rectives里面就是所有的自定义指令著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，focus就是指令的名称，focus里转载请注明出处：www.tangshuang.net【本文受版权保护】面会加入多个方法函数，这些函数就是钩子函【原创不易，请尊重版权】【作者：唐霜】数，每一个钩子函数都会在不同的时刻执行，【本文受版权保护】【版权所有，侵权必究】从而实现你想要的功能。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】指令定义函数提供了几个钩子函数（可选）：
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文受版权保护】【作者：唐霜】- bind: 只调用一次，指令第一次绑定到【原创内容，转载请注明出处】未经授权，禁止复制转载。元素时调用，用这个钩子函数可以定义一个在著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】绑定时执行一次的初始化动作。 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- inserted: 被绑定元素插入父节点【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】时调用（父节点存在即可调用，不必存在于 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】document 中）。 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
- update: 被绑定元素所在的模板更新著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】时调用，而不论绑定值是否变化。通过比较更【转载请注明来源】未经授权，禁止复制转载。新前后的绑定值，可以忽略不必要的模板更新【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。（详细的钩子函数参数见下）。 【作者：唐霜】转载请注明出处：www.tangshuang.net
- componentUpdated: 被绑【转载请注明来源】【本文首发于唐霜的博客】定元素所在模板完成一次更新周期时调用。 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
- unbind: 只调用一次， 指令与元素【未经授权禁止转载】【本文首发于唐霜的博客】解绑时调用。 本文版权归作者所有，未经授权不得转载。【转载请注明来源】转载请注明出处：www.tangshuang.net
钩子函数的参数
钩子函数被赋予了以下参数：
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】- el: 指令所绑定的元素，可以用来直接操未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】作 DOM 。 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。
- binding: 一个对象，包含以下属性【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】：
- name: 指令名，不包括 v- 前缀。 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】
- value: 指令的绑定值， 例如： v【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。-my-directive=”著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。;1 + 1″, value【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】 的值是 2。 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- oldValue: 指令绑定的前一个值，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。仅在 update 和 componen【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】tUpdated 钩子中可用。无论值是否本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。改变都可用。 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
- expression: 绑定值的字符串形未经授权，禁止复制转载。【版权所有，侵权必究】式。 例如 v-my-directive本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】=”1 + 1″本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】 ， expression 的值是 &#本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】8220;1 + 1″。 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
- arg: 传给指令的参数。例如 v-my本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。-directive:foo， arg 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。的值是 “foo”【转载请注明来源】转载请注明出处：www.tangshuang.net;。 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- modifiers: 一个包含修饰符的对【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】象。 例如： v-my-directiv【本文受版权保护】转载请注明出处：www.tangshuang.nete.foo.bar, 修饰符对象 mod【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ifiers 的值是 { foo: tr著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ue, bar: true }。 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【原创不易，请尊重版权】
【转载请注明来源】本文作者：唐霜，转载请注明出处。
- vnode: Vue 编译生成的虚拟节点【转载请注明来源】原创内容，盗版必究。，查阅 VNode API 了解更多详情。 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【转载请注明来源】
- oldVnode: 上一个虚拟节点，仅在【原创不易，请尊重版权】【未经授权禁止转载】 update 和 componentU【作者：唐霜】本文作者：唐霜，转载请注明出处。pdated 钩子中可用。 未经授权，禁止复制转载。【版权所有，侵权必究】【本文首发于唐霜的博客】
除了 el 之外，其它参数都应该是只读的【转载请注明来源】【原创不易，请尊重版权】，尽量不要修改他们。如果需要在钩子之间共【原创不易，请尊重版权】原创内容，盗版必究。享数据，建议通过元素的 dataset 来进行。
【本文首发于唐霜的博客】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】<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 钩子上做重复动作，并且不原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。想关心其它的钩子函数。可以这样写:
【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value})
对象字面量
如果指令需要多个值，可以传入一个 Jav【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。aScript 对象字面量。记住，指令函转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。数能够接受所有合法类型的 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 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】编者按：
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】
【原创内容，转载请注明出处】 本书到目前为止，所有的方法都是在局部进【原创不易，请尊重版权】【原创内容，转载请注明出处】行定义，而没有进行全局定义，在vue里面原创内容，盗版必究。【本文首发于唐霜的博客】，指令可以通过全局方法Vue.direc【版权所有，侵权必究】未经授权，禁止复制转载。tives()来定义，也可以在实例参数、【作者：唐霜】【本文首发于唐霜的博客】组件参数中加入directives来进行本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】局部定义。局部定义就是说只有在当前这个实【本文受版权保护】【关注微信公众号：wwwtangshuangnet】例的模板内可以使用指令，而全局定义则可以【原创内容，转载请注明出处】【原创不易，请尊重版权】让所有模板都可以使用这个指令。除了指令，【作者：唐霜】【未经授权禁止转载】还有下文要提的过滤器也有这两种定义方式。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】但为了增加学习曲线的平滑度，在前面几章都【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。是主要提到局部定义。后面会有专门的章节来【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】阐述全局和局部问题。
过滤器
什么是过滤器？
什么是过滤器呢？你用过一些模板引擎的话可【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。能知道，比如{{name | toUpp未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。erCase}}，通过一个管道符号，后面【未经授权禁止转载】【原创内容，转载请注明出处】跟上一个函数，对前面的变量进行输出前的处原创内容，盗版必究。转载请注明出处：www.tangshuang.net理。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】Vue 2.x 中，过滤器只能在 mus【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】tache 绑定和 v-bind 表达式原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net（从 2.1.0 开始支持）中使用，因为著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。过滤器设计目的就是用于文本转换。为了在其【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。他指令中实现更复杂的数据变换，你应该使用【原创不易，请尊重版权】【本文首发于唐霜的博客】计算属性。
【转载请注明来源】未经授权，禁止复制转载。<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
过滤器可以串联：
【未经授权禁止转载】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因【转载请注明来源】未经授权，禁止复制转载。此可以接受参数：
【版权所有，侵权必究】【本文首发于唐霜的博客】{{ message | filterA('arg1', arg2) }}
这里，字符串 ‘arg1&#【本文首发于唐霜的博客】未经授权，禁止复制转载。8217; 将传给过滤器作为第二个参数，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net arg2 表达式的值将被求值然后传给过【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net滤器作为第三个参数。
【转载请注明来源】【版权所有，侵权必究】原创内容，盗版必究。原创内容，盗版必究。自定义过滤器
从vue2.0开始，vue不再内置过滤器【作者：唐霜】本文版权归作者所有，未经授权不得转载。，以前很多过滤器可以直接使用，比如upp原创内容，盗版必究。转载请注明出处：www.tangshuang.netercase等。现在不能直接用了，但是我【版权所有，侵权必究】【未经授权禁止转载】们可以自己自定义。过滤器函数总接受表达式【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。的值作为第一个参数。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。new Vue({
// ...
filters: {
capitalize: function (value) { // 注意，这里的参数上面说过了，可以新增其他参数的
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
使用很简单，和上面一样。
原创内容，盗版必究。【本文首发于唐霜的博客】{{userName | capitalize}}
总之，把你自己的过滤器放在filters转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】变量中。
【作者：唐霜】【原创内容，转载请注明出处】【未经授权禁止转载】【本文首发于唐霜的博客】Vue2.0把过滤器这块移除是有道理的，转载请注明出处：www.tangshuang.net【版权所有，侵权必究】他们希望你更多使用computed，而不【作者：唐霜】未经授权，禁止复制转载。是过滤器。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。表单控件绑定
在前面的v-model一节中已经说了，这【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】一章，其实就是对v-model的展开说明未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net。当然，也不完全就是v-model，这章本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】会全面的讲解跟表单相关的所有开发相关内容【未经授权禁止转载】转载请注明出处：www.tangshuang.net。
本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。数据的双向绑定
前面说了，v-model是双向绑定的秘诀著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。。那么到底怎么实现呢？
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】文本 input text
<input v-model="message">
<p>Message is: {{ message }}</p>
new Vue({
data: {
message: 'placeholder',
},
})
这里的双向绑定包括两个绑定，一个是dat【转载请注明来源】【原创内容，转载请注明出处】a.message被绑定到input控件【原创不易，请尊重版权】【作者：唐霜】上，被作为input的value值。当然本文版权归作者所有，未经授权不得转载。【作者：唐霜】，{{message}}也是被绑定好的。【原创不易，请尊重版权】【版权所有，侵权必究】当data.message发生变化的时候【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，视图里面会跟着变。
【版权所有，侵权必究】【未经授权禁止转载】【版权所有，侵权必究】现在，在input里面输入自己的字符串。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】由于v-model的作用，data.me【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ssage也随之发生变化，data.me【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ssage这次反过来等于输入的值。于此同未经授权，禁止复制转载。未经授权，禁止复制转载。时，由于data.message变了，{【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】{message}}也跟着变了。
原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。这个过程就是v-model的双向绑定的结著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。果。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。编者按：关于v-model是v-bind【转载请注明来源】本文作者：唐霜，转载请注明出处。和v-on的语法糖的问题，你此刻可能不是本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】很懂，因为你还没有阅读事件绑定这一章，下本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net一章会专门讲事件绑定，阅读完下一章你再回本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】头阅读这一章，就会有不一样的理解。
【本文受版权保护】原创内容，盗版必究。【转载请注明来源】
多行文本 textarea
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
在文本区域插值( <textare【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】a>{{message}}<【本文受版权保护】本文作者：唐霜，转载请注明出处。/textarea> ) 并不会生【未经授权禁止转载】原创内容，盗版必究。效，应用 v-model 来代替。
【未经授权禁止转载】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。textarea和上面的input te【本文受版权保护】【原创不易，请尊重版权】xt是一样的，效果也和我们想象的一样。
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】复选框 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【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netked值等于a，即app.checked本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net = app.a，否则app.check著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.neted = app.b。这样checked【本文受版权保护】原创内容，盗版必究。就不是boolean值了。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】未经授权，禁止复制转载。未经授权，禁止复制转载。注意：checkbox单个复选框的时候，【版权所有，侵权必究】转载请注明出处：www.tangshuang.net不能使用: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未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ckbox”是一定要有的，如本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】果没有type=”check未经授权，禁止复制转载。【未经授权禁止转载】box”，会报错，type值本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。必须是字符串，不能通过v-bind进行绑【作者：唐霜】转载请注明出处：www.tangshuang.net定使用动态值，否则vue会报错。
【作者：唐霜】【转载请注明来源】data.checkedNames一定要本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。是数组，当用户勾选了上面checkbox转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】的其中一个时，它的value值会被丢到d【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ata.checkedNames这个数组【转载请注明来源】未经授权，禁止复制转载。中来。而它的value值则可以通过v-b本文版权归作者所有，未经授权不得转载。【转载请注明来源】ind绑定一个动态数据。
【转载请注明来源】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。在HTML中，通过相同的一个name值来【本文受版权保护】【未经授权禁止转载】确定这组checkbox是一个组的，而在转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】这里，则是通过v-model的值是同一个著作权归作者所有，禁止商业用途转载。【转载请注明来源】值来确定是一个组的。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】这个时候就可以使用:value来动态绑定【本文受版权保护】【转载请注明来源】value值了，这和单个复选框不一样。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【未经授权禁止转载】转载请注明出处：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复选框组是本文作者：唐霜，转载请注明出处。【未经授权禁止转载】一样的。包括:value绑定。唯一不同的【本文首发于唐霜的博客】【本文受版权保护】是picked是一个单选值，所以是一个值【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，而不是数组。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。选择列表 select
单选列表
【未经授权禁止转载】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【原创不易，请尊重版权】<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【转载请注明来源】原创内容，盗版必究。【版权所有，侵权必究】<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是一个数组。
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】动态选项，用 v-for 渲染：
【未经授权禁止转载】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。<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本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net-bind 实现，并且这个属性的值可以不著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net是字符串。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net当我们通过v-bind:value对va本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。lue进行绑定时，应该要注意，v-bin【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。d就是一个单向绑定操作，你有没有必要对这【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】个value进行单向绑定？你应该怎么绑定【作者：唐霜】【本文首发于唐霜的博客】呢？准备写表单之前，先想好你的表单逻辑再【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】开始写代码。在这之前，一定要先读一下我的这篇文章。
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】补充：<input v-model【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net=”something【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。221;>其实是<input未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net v-bind:value=”【版权所有】唐霜 www.tangshuang.net【本文受版权保护】;something” v-本文作者：唐霜，转载请注明出处。【转载请注明来源】on:input=”some原创内容，盗版必究。原创内容，盗版必究。thing = $event.targe未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】t.value”>的语【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。法糖，也就是说v-model本身就已经包【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。含了v-bind，所以当v-bind和v著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。-model同时出现在一个input上时【版权所有，侵权必究】转载请注明出处：www.tangshuang.net，这个v-bind会失效。
【未经授权禁止转载】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
修饰符
.lazy
在默认情况下， v-model 在 in【本文受版权保护】【原创不易，请尊重版权】put 事件中同步输入框的值与数据 (除【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】了 上述 IME 部分)，但你可以添加一未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个修饰符 lazy ，从而转变为在 ch【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ange 事件中同步：
转载请注明出处：www.tangshuang.net【本文受版权保护】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Numbe著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】r 类型（如果原值的转换结果为 NaN 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。则返回原值），可以添加一个修饰符 num转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ber 给 v-model 来处理输入值【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。：
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。<input v-model.number="age" type="number">
这通常很有用，因为在 type=R【原创不易，请尊重版权】未经授权，禁止复制转载。21;number” 时 H著作权归作者所有，禁止商业用途转载。【转载请注明来源】TML 中输入的值也总是会返回字符串类型未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。。
本文作者：唐霜，转载请注明出处。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。.trim
如果要自动过滤用户输入的首尾空格，可以添【本文首发于唐霜的博客】【本文首发于唐霜的博客】加 trim 修饰符到 v-model 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。上过滤输入：
【转载请注明来源】【版权所有，侵权必究】<input v-model.trim="msg">
表单验证：vue-validator
这一章是插入的一章，在实际开发中，你不一【本文首发于唐霜的博客】【未经授权禁止转载】定需要vue-validator来验证你本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。的表单选项。但是本章可以给你一些启示，帮转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】助你设计自己的验证思路。vue-vali著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。dator也不是vue官方的插件，而是一【本文受版权保护】【版权所有，侵权必究】个个人项目。不过插件作者比较早的开发了完【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。善的验证机制，所以插件也得到广泛使用。v转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ue-validator目前对vue2.【作者：唐霜】【版权所有，侵权必究】2+是不支持的，v3版本支持vue2.0【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。。它也有自己的完整中文文档，你可以点击这里进入阅读。但是这个中文文档是v2.x的，原创内容，盗版必究。【本文首发于唐霜的博客】v2.x版本不支持vue2.0，但是大部【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。分接口都是一样的，所以也可以看。但是因为原创内容，盗版必究。【原创不易，请尊重版权】vue-validator对vue2.0【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】的支持还不稳定，所以，本书也更多的只介绍【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net一些常用功能，以及验证思路。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【版权所有，侵权必究】安装和开始
vue的插件都使用use方法来安装。我们未经授权，禁止复制转载。【作者：唐霜】使用npm来安装vue-validato【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】r：
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。npm install --save vue-validator
安装好之后，在你的项目中使用它：
【原创内容，转载请注明出处】【原创内容，转载请注明出处】import Vue from 'vue'import VueValidator form 'vue-validator' Vue.use(VueValidator)
在这之后，你就可以使用vue-valid【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ator进行表单验证了。
转载请注明出处：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">
</form>
</validator>
</div>
验证结果会关联到验证器元素上。在上例中，【转载请注明来源】【原创不易，请尊重版权】验证结果保存在 $validation1【作者：唐霜】原创内容，盗版必究。 下，$validation1 是由 v【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】alidator 元素的 name 属性未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。值加 $ 前缀组成。
【未经授权禁止转载】原创内容，盗版必究。验证结果结构
验证结果（也就是上面的$validati【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】on1）有如下结构:
【原创内容，转载请注明出处】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【本文受版权保护】{
// 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'
}]
},
}
全局结果可以直接从验证结果中获取到，字段本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net验证结果保存在以字段名命名的键下。
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。字段验证结果
- valid: 字段有效时返回 true,【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。否则返回 false。 【本文首发于唐霜的博客】未经授权，禁止复制转载。
- invalid: valid 的逆. 【原创不易，请尊重版权】原创内容，盗版必究。
- touched: 字段获得过焦点时返回 【本文首发于唐霜的博客】【本文受版权保护】true,否则返回 false。 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
- untouched: touched 的【转载请注明来源】【未经授权禁止转载】逆. 转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
- modified: 字段值与初始值不同时【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】返回 true,否则返回 false。 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- dirty: 字段值改变过至少一次时返回【作者：唐霜】原创内容，盗版必究。 true,否则返回 false。 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。
- pristine: dirty 的逆. 【作者：唐霜】本文作者：唐霜，转载请注明出处。
- errors: 字段无效时返回存有错误信著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】息的数据，否则返回 undefined。 【本文受版权保护】【本文首发于唐霜的博客】
全局结果
- valid: 所有字段都有效时返回 tr【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ue,否则返回 false。 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】原创内容，盗版必究。【作者：唐霜】
- invalid: 只要存在无效字段就返回【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】 true,否则返回 false。 【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- touched: 只要存在获得过焦点的字本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】段就返回 true,否则返回 false本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net。 【转载请注明来源】原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
- untouched: touched 的【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】逆。 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。
- modified: 只要存在与初始值不同【本文受版权保护】原创内容，盗版必究。的字段就返回 true,否则返回 fal【原创不易，请尊重版权】【原创内容，转载请注明出处】se。 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【原创不易，请尊重版权】
- dirty: 只要存在值改变过至少一次的【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】字段就返回 true,否则返回 fals本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete。 【原创内容，转载请注明出处】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
- pristine: 所有字段都没有发生过【原创不易，请尊重版权】原创内容，盗版必究。变化时返回 true,否则返回 fals原创内容，盗版必究。未经授权，禁止复制转载。e。 【转载请注明来源】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。
- errors: 有无效字段时返回所有无效【原创不易，请尊重版权】原创内容，盗版必究。字段的错误信息，否则返回 undefin【原创内容，转载请注明出处】【原创内容，转载请注明出处】ed。 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【未经授权禁止转载】
验证器语法
v-validate 指令用法如下:
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】v-validate[:field]="array literal | object literal | binding"
字段
2.0-alpha以前的版本中，验证器是著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】依赖于 v-model 的。从2.0-a转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。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后:
本文作者：唐霜，转载请注明出处。【本文受版权保护】【未经授权禁止转载】<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。蓝色的大括号里未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。面是规则，其中minlength的规则是本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。16，而当你输入内容之后，验证结果怎么样【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net呢？$validation.commen【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。t.minlength就可以得到验证的结【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net果。
【原创不易，请尊重版权】【未经授权禁止转载】未经授权，禁止复制转载。原创内容，盗版必究。Caml-case 属性
同 Vue.js一样, v-valida著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。te 指令中的字段名可以使用 kebab【版权所有，侵权必究】【未经授权禁止转载】-case:
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：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【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。注意: 当使用 field 属性指定字段转载请注明出处：www.tangshuang.net【本文受版权保护】名时不需要在 v-validate 指令【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。中再次指定。
本文版权归作者所有，未经授权不得转载。【访问 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 }
}]
}
})
数组
下例中使用了数组型字面量：
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】<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 验证器不要额外的【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net参数，这样写更简洁。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】对象
下例中使用了对象型字面量：
【版权所有，侵权必究】【原创内容，转载请注明出处】【转载请注明来源】【原创内容，转载请注明出处】<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>
使用对象型字面量允许你为验证器指定额外的【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net参数。对于 required，因为它不需【访问 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>
除数据属性外，也可以使用计算属性或事例方【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。法来指定验证规则。
【未经授权禁止转载】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netTerminal 指令问题
请注意，当你想要使用如 v-if 和 v【本文受版权保护】【原创内容，转载请注明出处】-for 这些 terminal 指令时【本文受版权保护】【版权所有】唐霜 www.tangshuang.net，应把可验证的目标元素包裹在 <t转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】emplate> 之类的不可见标签【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。内。因为 v-validate 指令不能【转载请注明来源】【未经授权禁止转载】与这些 terminal 指令使用在同一【本文受版权保护】著作权归作者所有，禁止商业用途转载。元素上。
著作权归作者所有，禁止商业用途转载。
下例中使用了 <div> 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】标签：
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
这个字段必须有值。举个例子：
【转载请注明来源】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net<input v-validate:fieldx="{required: true}">
那么当你在提交表单时，如果这个input【作者：唐霜】【版权所有】唐霜 www.tangshuang.net没有输入值，那么$validation.【作者：唐霜】【版权所有】唐霜 www.tangshuang.netfieldx.required就会返回f【本文受版权保护】【原创不易，请尊重版权】alse。
【版权所有，侵权必究】【本文受版权保护】本文作者：唐霜，转载请注明出处。pattern
正则匹配校验器，校验元素值是否跟patt【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ern所表示的正则表达式匹配。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】minlength
最小长度，如果元素的值的最小长度小于mi【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。nlength规定的值，就会返回fals【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】e。
【未经授权禁止转载】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】maxlength
最大长度，如果元素中输入的值大于这个设定原创内容，盗版必究。【转载请注明来源】值，就会返回false。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。min
最小值校验器，当你输入的值比这个值还小（【本文受版权保护】本文作者：唐霜，转载请注明出处。<=）的时候，返回false。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。max
最大值校验器，当你输入的值比这个值还大(【版权所有，侵权必究】【原创不易，请尊重版权】>=)，那返回false。
【本文受版权保护】【作者：唐霜】原创内容，盗版必究。转载请注明出处：www.tangshuang.net结合 v-model
可以验证通过 v-model 指令进行数转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net据绑定的字段：
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。<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() 方法重置验证结果【版权所有，侵权必究】未经授权，禁止复制转载。，该方法是由验证器安装时动态定义的。使用【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。方法见下例：
【本文受版权保护】转载请注明出处：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()
}
}
})
可验证的表单元素
复选框
支持复选框验证:
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。转载请注明出处：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="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 !!'
}
}
})
单选按钮
支持单选按钮验证:
未经授权，禁止复制转载。【未经授权禁止转载】<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 !!'
}
}
})
下拉列表
支持下拉列表验证:
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：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 获取更多精彩内容】未经授权，禁止复制转载。证结果显示不同的样式以达到更好的交互效果【本文受版权保护】本文作者：唐霜，转载请注明出处。。vue-validator 在验证完表【本文首发于唐霜的博客】【转载请注明来源】单元素后会自动插入相应的类来指示验证结果著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，如下例所示：
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【版权所有，侵权必究】<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
上例会输出如下 HTML：
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【关注微信公众号：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 时 |
使用自定义验证结果类
当默认的验证结果类名不方便使用时，你可以转载请注明出处：www.tangshuang.net原创内容，盗版必究。使用 classes 属性自定义相应的类【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。名，如下所示：
本文作者：唐霜，转载请注明出处。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net<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原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】lidate 或 validator 指未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net令上，值必须为对象。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net在非目标元素上使用验证结果类
通常情况下验证结果类会插入到定义 v-v【转载请注明来源】本文作者：唐霜，转载请注明出处。alidate 指令的元素上。然而有时候原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】我们需要把这些类插入到其他元素上。这时我本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。们可以使用 v-validate-cla转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ss 来实现，如下所示：
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。<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 中使用【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】错误消息：
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【访问 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 !!' }
}">
<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>
使用数据属性或计算属性来指定验证规则比使未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net用内联验证规则更简洁。
【原创不易，请尊重版权】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net错误消息枚举组件
在上例中，我们使用 v-for 指令来枚本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】举验证器的 errors。但是，我们可以【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net让它更简单。本验证器提供了非常易用的 v【未经授权禁止转载】【版权所有，侵权必究】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>
上例的代码渲染出的界面如下：
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创不易，请尊重版权】<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【本文首发于唐霜的博客】【未经授权禁止转载】ors 默认的错误消息格式，可以指定自定【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net义的组件或 partial 作为消息模版转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】自定义组件模版
下例中展示了使用组件作为模版：
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】<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 作为模【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】版：
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】<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: 指定组的错误消息 (例如 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net$validation.group1.e【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。rrors) 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- field: 指定字段的错误消息 (例如【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】 $validation.field1.著作权归作者所有，禁止商业用途转载。【作者：唐霜】errors) 未经授权，禁止复制转载。【版权所有，侵权必究】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
下例中展示了 group 属性的使用：
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【作者：唐霜】<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【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net字段验证事件
对于每一个字段，你都可以监听如下事件：
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net- valid: 当字段验证结果变为有效时触【转载请注明来源】著作权归作者所有，禁止商业用途转载。发 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
- invalid: 当字段验证结果变为无效【未经授权禁止转载】【原创不易，请尊重版权】时触发 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- touched: 当字段失去焦点时触发 【未经授权禁止转载】转载请注明出处：www.tangshuang.net
- dirty: 当字段值首次变化时触发 【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【原创内容，转载请注明出处】【本文首发于唐霜的博客】
- modified: 当字段值与初始值不同【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。时或变回初始值时触发 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【访问 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未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- invalid: 当全局验证结果变为无效著作权归作者所有，禁止商业用途转载。【本文受版权保护】时触发 著作权归作者所有，禁止商业用途转载。【本文受版权保护】【转载请注明来源】【原创内容，转载请注明出处】
- touched: 当任意验证字段失去焦点【本文首发于唐霜的博客】原创内容，盗版必究。时触发 原创内容，盗版必究。【转载请注明来源】【未经授权禁止转载】【未经授权禁止转载】
- 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
}
}
})
手动设置错误消息
有时候你需要手动设置验证错误的消息，如从【本文受版权保护】本文作者：唐霜，转载请注明出处。服务器端得到的验证错误消息。这时你可以通【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】过 $setValidationErro【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】rs 方法设置错误消息，如下例：
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【未经授权禁止转载】<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.nettivateValidator() 被调【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。用时才会进行初始化。这在待验证的数据需要【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。异步加载时有用，避免了在得到数据前出现错转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】误提示。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。下例中在得到评论内容后验证器才开始工作；【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。如果不设置 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著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。提示: Vue.validator as著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】set 继承自 Vue.js 的 ass【原创内容，转载请注明出处】【未经授权禁止转载】et 管理系统.
【原创不易，请尊重版权】【原创不易，请尊重版权】未经授权，禁止复制转载。【转载请注明来源】
通过下例中的 email 自定义验证器详【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】细了解 Vue.validator 的使未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。用方法：
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net// 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 选【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】项注册只能在组件内使用的自定义验证器。
【本文受版权保护】【原创内容，转载请注明出处】自定义验证器是通过在组件的 valida原创内容，盗版必究。【本文受版权保护】tors 下定义验证通过返回真不通过返回【关注微信公众号：wwwtangshuangnet】【作者：唐霜】假的回调函数来实现。
【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】下例中注册了 numeric 和 url【作者：唐霜】原创内容，盗版必究。 两个自定义验证器：
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。new 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 【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。会根据 validator 和 v-va【原创不易，请尊重版权】【版权所有，侵权必究】lidate 指令自动进行验证。然而有时【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。候我们需要关闭自动验证，在有需要时手动触【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。发验证。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【本文受版权保护】【转载请注明来源】initial
当 vue-validator 完成初始【转载请注明来源】转载请注明出处：www.tangshuang.net编译后，会根据每一条 v-validat【转载请注明来源】转载请注明出处：www.tangshuang.nete 指令自动进行验证。如果你不需要自动验转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】证，可以通过 initial 属性或 v【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】-validate 验证规则来关闭自动验未经授权，禁止复制转载。未经授权，禁止复制转载。证，如下所示：
【转载请注明来源】本文版权归作者所有，未经授权不得转载。<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>
这在使用服务器端验证等异步验证方式时有用本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。，具体可见后文例子。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。detect-blur and detect-change
vue-validator 会在检测到表【版权所有，侵权必究】【原创不易，请尊重版权】单元素(input, checkbox,【未经授权禁止转载】【作者：唐霜】 select 等)上的 DOM 事件(著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。input, blur, change)本文版权归作者所有，未经授权不得转载。【本文受版权保护】时自动验证。此时，可以使用 detect【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。-change 和 detect-blu转载请注明出处：www.tangshuang.net【转载请注明来源】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()
}
})
}
}
})
异步验证
当在需要进行服务器端验证，可以使用异步验【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】证，如下例：
【版权所有，侵权必究】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】<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')
}
})
}
}
}
异步验证接口
在异步验证时，可以使用如下两类接口：
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】1. 函数
需要实现一个返回签名为 function著作权归作者所有，禁止商业用途转载。【转载请注明来源】 (resolve, reject) 如转载请注明出处：www.tangshuang.net【转载请注明来源】同 promise 一样的函数的自定义验【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】证器。函数参数解释如下：
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net- 验证结果
- 成功时: resolve 【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- 失败时: reject 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】
2. promise
需要实现一个返回 promise 的自定【未经授权禁止转载】【未经授权禁止转载】义验证器。根据验证结果来 resolve【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。 或 reject。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】使用错误消息
如上例所示，在服务器端验证错误发生时，可未经授权，禁止复制转载。原创内容，盗版必究。以使用服务器端返回的错误消息。
【原创内容，转载请注明出处】【作者：唐霜】验证器函数 context
验证器函数 context 是绑定到 V转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】alidation 对象上的。Valid【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ation 对象提供了一些属性，这些属性【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net在实现特定的验证器时有用。
【原创不易，请尊重版权】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。vm 属性
暴露了当前验证所在的 vue 实例。
著作权归作者所有，禁止商业用途转载。
the following ES201【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。5 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本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。one Input jQuery 插件使用的例子：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。new Vue({
validators: {
phone: function (val) {
return $(this.el).intlTelInput('isValidNumber')
}
}
})
全局 API
Vue.validator( id, [definition] )
- 参数:
- {String} id 【本文受版权保护】【原创不易，请尊重版权】
- {Function | Object} 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】[definition] 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【转载请注明来源】
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】原创内容，盗版必究。【转载请注明来源】
- 返回: validator defini原创内容，盗版必究。【本文首发于唐霜的博客】tion function or obj【转载请注明来源】原创内容，盗版必究。ect 转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 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] 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】
- 用法: 重置验证结果。 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
new Vue({
el: '#app',
methods: {
onClickReset: function () {
this.$resetValidation(function () {
console.log('reset done')
})
}
}
})
$setValidationErrors( errors )
- 参数:
- Array<Object> 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】errors
- {String} field 指定错误字转载请注明出处：www.tangshuang.net原创内容，盗版必究。段名。 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。转载请注明出处：www.tangshuang.net
- {String} message 指定错未经授权，禁止复制转载。【原创不易，请尊重版权】误消息。 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。
- {String} validator [【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。optional] 指定错误所在的验证器【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。。 【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【本文首发于唐霜的博客】
【本文受版权保护】转载请注明出处：www.tangshuang.net
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】
- Array<Object> 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】errors
- 用法: 用来设置验证错误结果。这在手动设【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】置服务器端验证产生的错误时有用。 著作权归作者所有，禁止商业用途转载。转载请注明出处：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] 【原创内容，转载请注明出处】【版权所有，侵权必究】【转载请注明来源】未经授权，禁止复制转载。
- {Function} [cb] 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】
【原创内容，转载请注明出处】原创内容，盗版必究。【本文首发于唐霜的博客】
- 用法: Validate the tar本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】get formalable eleme【本文受版权保护】未经授权，禁止复制转载。nt fields. 验证目标表单元素。
- 如果未设置 field 参数，验证所有字【原创不易，请尊重版权】【转载请注明来源】段； 转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net
- 如果 touched 参数为 true，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。那么验证结果的 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 原创内容，盗版必究。【本文首发于唐霜的博客】
- Param Attributes:
- group 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。
- field 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【转载请注明来源】【原创不易，请尊重版权】
- detect-blur 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。转载请注明出处：www.tangshuang.net
- detect-change 【原创不易，请尊重版权】【本文受版权保护】【作者：唐霜】
- initial 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【未经授权禁止转载】
- 用法: 自定需要验证的表单元素。可参见下【未经授权禁止转载】【未经授权禁止转载】面的示例。 【本文受版权保护】【版权所有，侵权必究】
- 另见:
- 验证器语法 【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- 分组 本文版权归作者所有，未经授权不得转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】
- 事件 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。
- 结合 v-model 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】
- 自定义验证时机<!– array s【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】yntax –> 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【本文受版权保护】【原创不易，请尊重版权】
原创内容，盗版必究。【未经授权禁止转载】
<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 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】
- lazy 【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net
本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- 用法: <validator>【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】; 元素用来在表单元素(input, s【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netelect, textarea等)上引入未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net验证器。<validator>【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net; 元素本身会被替换。验证结果会关联到验著作权归作者所有，禁止商业用途转载。【作者：唐霜】证器元素上，字段名是由 validato转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】r 元素的 name 属性值加 $ 前缀【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】组成。小心: 验证器名称不要与 Vue.【转载请注明来源】本文版权归作者所有，未经授权不得转载。js 中的自带属性重复，如 $event著作权归作者所有，禁止商业用途转载。转载请注明出处：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) 本文版权归作者所有，未经授权不得转载。【转载请注明来源】【本文受版权保护】
- component 未经授权，禁止复制转载。【原创内容，转载请注明出处】
- partial 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- group 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net
- field 【作者：唐霜】【作者：唐霜】
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【作者：唐霜】【转载请注明来源】
- 用法: <validator-er【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netrors> 可以作为错误消息的出口本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。。<validator-error【原创不易，请尊重版权】转载请注明出处：www.tangshuang.nets> 元素会被替换成默认的错误消息著作权归作者所有，禁止商业用途转载。【本文受版权保护】模板。可以通过 component 和 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】partial 属性来自定义错误消息的显原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】示方式。 【访问 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【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】lick, hover，已经熟的不能再熟【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。悉了。本章就来介绍在vue里面怎么快速实本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。现事件绑定。
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。<button @click.prevent="say('A word!', $event)">ok</button>
上面这短短一段代码，有4个东西要介绍，下转载请注明出处：www.tangshuang.net【未经授权禁止转载】面一一介绍：
【本文受版权保护】【版权所有，侵权必究】原创内容，盗版必究。【本文首发于唐霜的博客】使用v-on:绑定事件
前面已经对v-on指令讲过了，不讲了。
【转载请注明来源】【本文首发于唐霜的博客】方法函数
事件的回调函数可以直接写在methods本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】里面：
原创内容，盗版必究。【本文受版权保护】new Vue({
methods: {
say(word, e) { alert(word) },
},
})
$event变量
它是直接被绑定到vue的实例上的属性。相【原创不易，请尊重版权】【版权所有，侵权必究】当于this.$event，也是事件信息【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】，比如$event.target等信息。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net它和DOM原生事件的event是一样的。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net修饰符
事件修饰符比较多，前文已经提到了，也不讲【本文受版权保护】未经授权，禁止复制转载。了。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。自定义事件
vue提供了四个和事件相关的实例方法，分【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net别是$on, $once, $off, 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net$emit，用过jquery的同学应该非【原创不易，请尊重版权】【原创内容，转载请注明出处】常熟悉了。我们来看下具体怎么用：
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。var 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【本文首发于唐霜的博客】【转载请注明来源】ry的用法几乎一样，v-on主要是在模板【本文受版权保护】原创内容，盗版必究。中绑定DOM原生的一些事件，而$on, 未经授权，禁止复制转载。【原创不易，请尊重版权】$once可以绑定自定义的事件，两者互不转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。干扰，$emit能否触发原生的DOM事件【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】呢？请注意阅读下文。
【本文受版权保护】【原创不易，请尊重版权】$on
监听当前实例上的自定义事件。事件可以由v未经授权，禁止复制转载。【作者：唐霜】m.$emit触发。回调函数会接收所有传【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】入事件触发函数的额外参数。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【作者：唐霜】【转载请注明来源】vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')// -> "hi"
$once
监听一个自定义事件，但是只触发一次，在第【未经授权禁止转载】【未经授权禁止转载】一次触发之后移除监听器。
原创内容，盗版必究。【本文受版权保护】转载请注明出处：www.tangshuang.netvm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')// -> "hi"，同时移除test事件
vm.$emit('test', 'again') // test事件被移除了，所以这个触发不会有任何结果
$on和$once绑定的事件是在实例上，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】而非DOM元素上，所以它们跟DOM原生的【转载请注明来源】转载请注明出处：www.tangshuang.net事件是两回事。DOM原生事件是在触发DO著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】M元素特定事件时被触发的，比如click【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】。但是对于这里的实例vm而言，click原创内容，盗版必究。原创内容，盗版必究。没有来源，实例根本不存在被click之说【本文首发于唐霜的博客】【原创不易，请尊重版权】，所以$on和$once跟DOM原生事件【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】扯不上任何关系。同理，$emit也是作用【原创内容，转载请注明出处】【作者：唐霜】于实例之上，既然实例跟原生的DOM事件扯【作者：唐霜】本文作者：唐霜，转载请注明出处。不上关系，那么$emit也就跟原生DOM著作权归作者所有，禁止商业用途转载。【作者：唐霜】事件扯不上关系了。这就回答了上文提出的那【关注微信公众号：wwwtangshuangnet】【转载请注明来源】个问题。
【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。所以说，$on和$once绑定的是一个自【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。定义事件，这些事件是存储在vue内部的事【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。件管理器中，跟DOM事件是两码事，既然如【作者：唐霜】转载请注明出处：www.tangshuang.net此，跟v-on事件绑定也就是两回事。
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】$off
移除事件监听器。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。- 如果没有提供参数，则移除所有的事件监听器【作者：唐霜】【转载请注明来源】； 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】
- 如果只提供了事件，则移除该事件所有的监听【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net器； 【未经授权禁止转载】原创内容，盗版必究。
- 如果同时提供了事件与回调，则只移除这个回【未经授权禁止转载】转载请注明出处：www.tangshuang.net调的监听器。 未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net
$emit
触发当前实例上的事件。附加参数都会传给监【原创不易，请尊重版权】【本文受版权保护】听器回调。参数怎么传前面的代码已经演示过【版权所有，侵权必究】原创内容，盗版必究。了。
【未经授权禁止转载】未经授权，禁止复制转载。原创内容，盗版必究。Class和Style的绑定
数据绑定一个常见需求是操作元素的 cla【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ss 列表和它的内联样式。因为它们都是属未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。性 ，我们可以用v-bind 处理它们：著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net只需要计算出表达式最终的字符串。不过，字著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。符串拼接麻烦又易错。因此，在 v-bin著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。d 用于 class 和 style 时本文版权归作者所有，未经授权不得转载。【本文受版权保护】， Vue.js 专门增强了它。表达式的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】结果类型除了字符串之外，还可以是对象或数【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。组。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】绑定 HTML Class
对象语法
我们可以传给 v-bind:class 本文作者：唐霜，转载请注明出处。【本文受版权保护】一个对象，以动态地切换 class 。
原创内容，盗版必究。【本文受版权保护】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】的更新将取决于数据属性 isActive本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 是否为真值 。
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】我们也可以在对象中传入更多属性用来动态切【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。换多个 class 。此外， v-bin【本文首发于唐霜的博客】原创内容，盗版必究。d:class 指令可以与普通的 cla【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ss 属性共存。如下模板:
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【转载请注明来源】本文版权归作者所有，未经授权不得转载。<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
如下 data:
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】data: {
isActive: true,
hasError: false
}
渲染为:
【本文首发于唐霜的博客】【未经授权禁止转载】【转载请注明来源】本文版权归作者所有，未经授权不得转载。<div class="static active"></div>
当 isActive 或者 hasErr本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netor 变化时，class 列表将相应地更未经授权，禁止复制转载。【作者：唐霜】新。例如，如果 hasError 的值为【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net true ， class列表将变为 &【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】#8220;static active 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nettext-danger”。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】你也可以直接绑定数据里的一个对象：
本文作者：唐霜，转载请注明出处。【本文受版权保护】<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
渲染的结果和上面一样。我们也可以在这里绑本文作者：唐霜，转载请注明出处。原创内容，盗版必究。定返回对象的计算属性。这是一个常用且强大【版权所有，侵权必究】【原创不易，请尊重版权】的模式：
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【版权所有，侵权必究】【访问 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【作者：唐霜】未经授权，禁止复制转载。lass ，以应用一个 class 列表【转载请注明来源】【原创不易，请尊重版权】：
【版权所有，侵权必究】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】<div v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为:
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 clas著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】s ，可以用三元表达式：
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net<div v-bind:class="[isActive ? activeClass : '', errorClass]">
此例始终添加 errorClass ，但著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。是只有在 isActive 是 true【本文首发于唐霜的博客】【转载请注明来源】 时添加 activeClass 。
转载请注明出处：www.tangshuang.net
不过，当有多个条件 class 时这样【本文受版权保护】【原创不易，请尊重版权】写有些繁琐。可以在数组语法中使用对象语法著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。：
<div v-bind:class="[{ active: isActive }, errorClass]">
用在组件上
这个章节假设你已经对 Vue 组件 有一未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。定的了解。当然你也可以跳过这里，稍后再回【作者：唐霜】【关注微信公众号：wwwtangshuangnet】过头来看。当你在一个定制的组件上用到 c【未经授权禁止转载】原创内容，盗版必究。lass 属性的时候，这些类将被添加到根【作者：唐霜】著作权归作者所有，禁止商业用途转载。元素上面，这个元素上已经存在的类不会被覆【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。盖。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】【原创内容，转载请注明出处】【作者：唐霜】例如，如果你声明了这个组件:
转载请注明出处：www.tangshuang.net【本文受版权保护】Vue.component('my-component', { template: '<p class="foo bar">Hi</p>'})
然后在使用它的时候添加一些 class：
原创内容，盗版必究。转载请注明出处：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 的时未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】候，HTML 将被渲染成为:
本文作者：唐霜，转载请注明出处。【本文受版权保护】<p class="foo bar active">Hi</p>
绑定内联样式
对象语法
v-bind:style 的对象语法十分本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】直观——看着非常像 CSS ，其实它是一【本文首发于唐霜的博客】【版权所有，侵权必究】个 JavaScript 对象。 CSS本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】 属性名可以用驼峰式（camelCase【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。）或短横分隔命名（kebab-case）【原创不易，请尊重版权】【未经授权禁止转载】：
【作者：唐霜】未经授权，禁止复制转载。<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转载请注明出处：www.tangshuang.net性使用。
【作者：唐霜】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net数组语法
v-bind:style 的数组语法可以转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】将多个样式对象应用到一个元素上：
【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。<div v-bind:style="[baseStyles, overridingStyles]">
自动添加前缀
当 v-bind:style 使用需要特【原创不易，请尊重版权】原创内容，盗版必究。定前缀的 CSS 属性时，如 trans【关注微信公众号：wwwtangshuangnet】【转载请注明来源】form ，Vue.js 会自动侦测并添本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。加相应的前缀。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】原创内容，盗版必究。修饰符
前面两处提到了修饰符，这一章其实主要是要【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】总结一下，内容是跟前面一样的，如果你已经转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。理解了，就不用看。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。事件修饰符
在事件处理程序中调用 event.pre【原创不易，请尊重版权】【原创内容，转载请注明出处】ventDefault() 或 even原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.nett.stopPropagation() 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。是非常常见的需求。尽管我们可以在 met【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】hods 中轻松实现这点，但更好的方式是本文版权归作者所有，未经授权不得转载。【作者：唐霜】：methods 只有纯粹的数据逻辑，而【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net不是去处理 DOM 事件细节。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】为了解决这个问题， Vue.js 为 v【本文受版权保护】著作权归作者所有，禁止商业用途转载。-on 提供了 事件修饰符。通过由点(.转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。)表示的指令后缀来调用修饰符。
【转载请注明来源】【本文首发于唐霜的博客】- .stop 【原创不易，请尊重版权】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net
- .prevent 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。
- .capture 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
- .self 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
- .once 原创内容，盗版必究。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。
按键修饰符
在监听键盘事件时，我们经常需要监测常见的【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。键值。 Vue 允许为 v-on 在监听【未经授权禁止转载】【本文首发于唐霜的博客】键盘事件时添加按键修饰符。记住所有的 k未经授权，禁止复制转载。【本文首发于唐霜的博客】eyCode 比较困难，所以 Vue 为【本文首发于唐霜的博客】【未经授权禁止转载】最常用的按键提供了别名。
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。全部的按键别名：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。- .enter 原创内容，盗版必究。【原创内容，转载请注明出处】【转载请注明来源】
- .tab 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】
- .delete (捕获 “删除” 和 “【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net退格” 键) 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- .esc 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
- .space 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】
- .up 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【本文首发于唐霜的博客】
- .down 转载请注明出处：www.tangshuang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
- .left 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- .right 【本文受版权保护】【作者：唐霜】本文作者：唐霜，转载请注明出处。
可以通过全局 config.keyCod【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netes 对象自定义按键修饰符别名。
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netVue.config.keyCodes.f1 = 112 // 这样用 <input v-on:keyup.112="submit">
可以用如下修饰符开启鼠标或键盘事件监听，著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】使在按键按下时发生响应。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】- .ctrl 【原创不易，请尊重版权】原创内容，盗版必究。
- .alt 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。
- .shift 【转载请注明来源】【本文受版权保护】【本文首发于唐霜的博客】
- .meta 【原创不易，请尊重版权】【作者：唐霜】【转载请注明来源】
组件
终于进入组件这一章。前文多次提到组件是v【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ue里面非常核心的概念。但是实际上，组件【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】在本书中，更多的是提倡作为一种思想，具体本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net使用的时候跟本书最前面的“vue实例”差【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】别不会太大，除了data()的地方需要着【本文首发于唐霜的博客】【原创不易，请尊重版权】重强调，如果不涉及其他，组件实例和app【转载请注明来源】原创内容，盗版必究。级别实例差距不会有太大理解上的鸿沟。
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【转载请注明来源】既然是一种思想，那么组件涉及的问题就不单未经授权，禁止复制转载。未经授权，禁止复制转载。单是编程问题。比如组件之间如何通信，父子本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。组件之间的问题，数据流等问题。这些只有当【原创内容，转载请注明出处】原创内容，盗版必究。我们探讨组件才会提出来的问题，需要你更多【本文首发于唐霜的博客】【原创不易，请尊重版权】的进行思考，想通之后，这些问题在实践中怎原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】么处理就迎刃而解了。
原创内容，盗版必究。【原创内容，转载请注明出处】这一章也是所有入门级别知识的最后一章，从未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。这一章之后，就要进入到更加深入的学习，这【作者：唐霜】【未经授权禁止转载】些深入学习是必须的，不然无法认识vue的本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。原貌。但是深入学习之前，前面几章的基础学本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net习可以帮助你快速理解vue的基本使用方法【原创不易，请尊重版权】【版权所有，侵权必究】，掌握之后，算是入门了。
【作者：唐霜】未经授权，禁止复制转载。【转载请注明来源】什么是组件？
组件（Component）是 Vue.j【原创不易，请尊重版权】【版权所有，侵权必究】s 最强大的功能之一。组件可以扩展 HT未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ML 元素，封装可重用的代码。在较高层面转载请注明出处：www.tangshuang.net【未经授权禁止转载】上，组件是自定义元素， Vue.js 的著作权归作者所有，禁止商业用途转载。【本文受版权保护】编译器为它添加特殊功能。在有些情况下，组【未经授权禁止转载】原创内容，盗版必究。件也可以是原生 HTML 元素的形式，以转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net is 特性扩展。
【版权所有，侵权必究】未经授权，禁止复制转载。未经授权，禁止复制转载。简单的说，vue组件就是一个js类，使用转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。的时候new一下，得到一个组件的实例，组【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】件实例有很多接口，app层面就可以调用这未经授权，禁止复制转载。【转载请注明来源】些接口来把组件的功能集成到app中。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net在开发层面上，你只需要使用Vue.ext转载请注明出处：www.tangshuang.net【本文受版权保护】end({…})就可以得到一【未经授权禁止转载】转载请注明出处：www.tangshuang.net个组件。而开发的大部分工作，就是写好大括【原创不易，请尊重版权】【本文受版权保护】号里面的内容。
【未经授权禁止转载】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。创建一个组件
上面说过了，开发层面上，创建一个组件只需【原创不易，请尊重版权】【作者：唐霜】要使用Vue.extend，如下：
未经授权，禁止复制转载。原创内容，盗版必究。原创内容，盗版必究。var MyComponent = Vue.extend({
template: '<div>OK</div>',
})
这样就创建了一个组件构造器MyCompo【原创内容，转载请注明出处】未经授权，禁止复制转载。nent。实际上，Vue.extend的【版权所有，侵权必究】【版权所有，侵权必究】结果是Vue的一个子类。既然是一个类，就【原创不易，请尊重版权】【原创内容，转载请注明出处】可以被实例化，通过实例化得到一个组件实例本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，“组件实例”这个称呼在前面已经提到过了原创内容，盗版必究。【转载请注明来源】。组件构造器是一个类，可以被实例化为组件【本文首发于唐霜的博客】未经授权，禁止复制转载。实例。
未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】var component1 = new MyComponent()
关于Vue.extend，我们会在后文继【本文首发于唐霜的博客】【转载请注明来源】续深入，这里就不赘述了。组件实例有一些方【本文首发于唐霜的博客】【未经授权禁止转载】法可以用，例如$mount方法，这也在后本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net面的Vue.extend部分去解释。本章本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】主要是要让你学会组件的思想和主要开发方式【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。注册一个组件
创建好了组件，接下来要在vue中注册它。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】注册组件也有全局和局部两种。注册是什么概【原创内容，转载请注明出处】【作者：唐霜】念呢？其实注册是创建一个组件构造器的引用【本文首发于唐霜的博客】【作者：唐霜】，并可以形式化的进行实例化。所谓形式化，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】简单的说，就是把组件注册成一个html元【版权所有，侵权必究】【原创内容，转载请注明出处】素，这样可以直接在模板中使用这个跟组件等著作权归作者所有，禁止商业用途转载。【转载请注明来源】价的元素来实例化组件。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。// 局部注册
new Vue({
el: '#app',
template: '<div><my-component></my-component></div>',
components: {
'my-component': MyComponent,
},
})
// 全局注册Vue.component('my-component', MyComponent)
全局注册有一个好处，就是可以在任何一个v【未经授权禁止转载】【原创不易，请尊重版权】ue实例中去使用。
【转载请注明来源】【原创不易，请尊重版权】【未经授权禁止转载】使用一个注册好的组件
组件注册好之后，就可以在模板中使用注册的【未经授权禁止转载】本文作者：唐霜，转载请注明出处。组件名称，像一个html元素一样调用它，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。而且这个元素还支持指令，比如v-for之著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。类的。基本的使用方法是在app的模板中使原创内容，盗版必究。【转载请注明来源】用它：
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】<div> <my-component></my-component> </div>
因为在创建组件的时候，传入了templa本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】te值，所以<my-compone【作者：唐霜】原创内容，盗版必究。nt>的地方就会替换为组件的模板编本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。译后的html，所以最终看到的结果是：
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】<div> <div>OK</div> </div>
这是最简单的情况，就是模板替换一下而已。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】如果再把指令加进来，把数据绑定加进来，组本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】件和app的互动就非常复杂了。
【未经授权禁止转载】
使用一个组件（比如在模板中插入<原创内容，盗版必究。【未经授权禁止转载】my-component>元素）的【本文首发于唐霜的博客】【版权所有，侵权必究】本质，是创建一个组件实例。也就是说，一个转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】<my-component>【作者：唐霜】本文作者：唐霜，转载请注明出处。就是一个组件实例，它们共享一个组件构造器【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。（一个js类）。
简易注册
上面我的做法是先创建一个组件构造器，然后【原创内容，转载请注明出处】未经授权，禁止复制转载。把组件构造器传入实例构造器。实际上，在实【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net践开发中，我们基本不会这样干，我们大部分本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】都会使用简易方式直接注册，跳过创建步骤：
【本文受版权保护】【未经授权禁止转载】【版权所有，侵权必究】Vue.component('my-component', {
template: '<div>OK</div>',
})
包括在创建vue实例的时候也是这样，直接本文版权归作者所有，未经授权不得转载。【作者：唐霜】传对象字面量进去即可。相当于注册过程会自本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。动创建一个匿名的组件构造器。
原创内容，盗版必究。
在开发中，如果不涉及组件实例复用问题，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。这个方法非常好。也是最推荐的做法。
data必须是函数
在创建或注册模板的时候，传入一个data原创内容，盗版必究。【本文首发于唐霜的博客】属性作为用来绑定的数据。但是在组件中，d【转载请注明来源】【未经授权禁止转载】ata必须是一个函数，而不能直接把一个对未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】象赋值给它。
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netVue.component('my-component', {
template: '<div>OK</div>',
data() {
return {} // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
},
})
你在前面看到，在new Vue()的时候【原创不易，请尊重版权】【本文首发于唐霜的博客】，是可以给data直接赋值为一个对象的。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net这是怎么回事，为什么到了组件这里就不行了【版权所有，侵权必究】【本文受版权保护】。
【作者：唐霜】转载请注明出处：www.tangshuang.net你要理解，上面这个操作是一个简易操作，实本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】际上，它首先需要创建一个组件构造器，然后本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。注册组件。注册组件的本质其实就是建立一个转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。组件构造器的引用。使用组件才是真正创建一未经授权，禁止复制转载。【转载请注明来源】个组件实例。所以，注册组件其实并不产生新【原创不易，请尊重版权】未经授权，禁止复制转载。的组件类，但会产生一个可以用来实例化的新著作权归作者所有，禁止商业用途转载。【本文受版权保护】方式。
【原创不易，请尊重版权】原创内容，盗版必究。【作者：唐霜】理解这点之后，再理解js的原型链：
本文版权归作者所有，未经授权不得转载。【转载请注明来源】【原创不易，请尊重版权】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
可以看到上面代码中最后三句，这就比较坑爹【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。了，如果两个实例同时引用一个对象，那么当未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。你修改其中一个属性的时候，另外一个实例也本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】会跟着改。这怎么可以，两个实例应该有自己转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】各自的域才对。所以，需要通过下面方法来进转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net行处理：
【本文受版权保护】【原创内容，转载请注明出处】未经授权，禁止复制转载。var MyComponent = function() {
this.data = this.data()}MyComponent.prototype.data = function() {
return {
a: 1,
b: 2,
}
}
这样每一个实例的data属性都是独立的，未经授权，禁止复制转载。【转载请注明来源】不会相互影响了。所以，你现在知道为什么v【转载请注明来源】【未经授权禁止转载】ue组件的data必须是函数了吧。这都是原创内容，盗版必究。转载请注明出处：www.tangshuang.net因为js本身的特性带来的，跟vue本身设转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】计无关。其实vue不应该把这个方法名取为本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。data()，应该叫setData或其他本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】更容易立即的方法名。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。prop
什么是prop?
首先，什么是prop？prop也是属性，未经授权，禁止复制转载。【作者：唐霜】但是它和attribution不一样，a著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ttribution往往是固定的值属性，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。而prop更多的是动态的状态值属性，最简【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net单的例子就是input checkbox著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】的checked属性，checked属性【转载请注明来源】著作权归作者所有，禁止商业用途转载。的attr值是它的初始值，而prop值是原创内容，盗版必究。未经授权，禁止复制转载。它的当前值，这对于熟悉jquery的同学著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。而已应该比较好理解。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。为组件声明props属性
vue里面，组件实例的作用域是孤立的。这【版权所有，侵权必究】【转载请注明来源】意味着不能(也不应该)在子组件的模板内直【作者：唐霜】【作者：唐霜】接引用父组件的数据。要让子组件使用父组件【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的数据，我们需要通过子组件的props选【本文首发于唐霜的博客】【原创内容，转载请注明出处】项。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【本文首发于唐霜的博客】子组件要显式地用 props 选项声明它期待获得的数据：
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【版权所有，侵权必究】Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
使用prop属性
这样之后，message就变成了一个pr原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。op属性，在模板中，你使用child这个【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。元素时，就可以给这个元素传一个messa原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ge属性进去：
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】<child message="hello!"></child>
如果在创建组件的时候没有声明props，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。那么<child>的mess【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。age就没用。
本文作者：唐霜，转载请注明出处。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。prop属性命名注意点
如果你在声明props的时候，属性名是多【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net个单词构成的怎么办？在注册组件的时候使用原创内容，盗版必究。【转载请注明来源】驼峰命名方式：
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netVue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
但是在使用组件的时候，传入的属性名得是短未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net横线隔开的：
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。<child my-message="hello!"></child>
这是因为html不区分大小写，你写成<child myMessage="hello!"></child>的话，假如有一个属性名是mymessage怎么办？所以，一定要注意这一点。
动态绑定prop属性值
既然是当做html元素的属性，那么就跟前【本文受版权保护】本文版权归作者所有，未经授权不得转载。面讲的模板语法想通，你可以在prop属性【原创内容，转载请注明出处】原创内容，盗版必究。上尝试使用一些指令，比如v-bind，例本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。如：
【原创不易，请尊重版权】原创内容，盗版必究。【版权所有，侵权必究】【原创不易，请尊重版权】<child :my-message="msg"></child>
注意，这里的<child>是【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。在父组件，或者app层面的vue实例的模【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】板中使用的，所以这里的msg这个变量也是【原创不易，请尊重版权】原创内容，盗版必究。来自父组件或app。
【关注微信公众号：wwwtangshuangnet】
这里有一个注意点，如果是普通的传值，不【转载请注明来源】转载请注明出处：www.tangshuang.net使用v-bind，那么值的内容是一个字符未经授权，禁止复制转载。【本文受版权保护】串，即使你给了一个数字，它传进去还是个字【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】符串。想要传数字或其他类型的数据，应该用【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netv-bind，比如：
<child :my-message="1"></child>
这个时候组件内获取的才是number，而未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】不是string。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net单向数据绑定
prop 是单向绑定的：当父组件的属性变【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net化时，将传导给子组件，但是不会反过来。这【未经授权禁止转载】【转载请注明来源】是为了防止子组件无意修改了父组件的状态。
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】另外，每次父组件更新时，子组件的所有 p【作者：唐霜】【本文受版权保护】rop 都会更新为最新值。这意味着你不应【作者：唐霜】转载请注明出处：www.tangshuang.net该在子组件内部改变 prop 。如果你这【版权所有，侵权必究】【本文首发于唐霜的博客】么做了，Vue 会在控制台给出警告。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net这一点非常好理解：JavaScript的转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。对象是引用类型数据，它的每一个属性都指向未经授权，禁止复制转载。【版权所有，侵权必究】同一个内存空间，所以不同的变量引用同一个【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】对象的话，其中一个的属性一改，另一个也会本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net跟着改。父组件和子组件之间的prop也是本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】一样，你修改子组件里面的prop，那么父本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。组件里面的对应的属性也该了，这会让父组件转载请注明出处：www.tangshuang.net原创内容，盗版必究。或app层面产生混乱，一定会出bug。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。正确的处理方法是，在创建组件时，保证组件著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。只是接收prop数据，接收到以后马上放在【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。自己的私有属性中去：
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。props: ['initialCounter'],data: function () {
return { counter: this.initialCounter }
}
props: ['size'],computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
上面一个是通过data直接挂在一个属性上【未经授权禁止转载】未经授权，禁止复制转载。，一个是通过计算属性，把prop只当做计未经授权，禁止复制转载。未经授权，禁止复制转载。算的一个依赖。总之，这两种方式都可以解决著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】上面说的不允许子组件修改prop原始值的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】问题。
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】如果你使用data，你在组件内修改了这个本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。属性值，那就跟prop没关系了，后期父组【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。件的prop值改变，也不会影响data了【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。Prop 验证
我们可以为组件的 props 指定验证规【原创不易，请尊重版权】【未经授权禁止转载】格。如果传入的数据不符合规格，Vue 会著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net发出警告。当组件给其他人使用时，这很有用转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】。
【原创不易，请尊重版权】
要指定验证规格，需要用对象的形式，而不【版权所有，侵权必究】【访问 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 可以是下面原生构造器：
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net- String 【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】
- Number 【本文首发于唐霜的博客】【转载请注明来源】
- Boolean 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】转载请注明出处：www.tangshuang.net
- Function 【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】
- Object 【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】本文作者：唐霜，转载请注明出处。
- Array 【本文受版权保护】【未经授权禁止转载】原创内容，盗版必究。原创内容，盗版必究。
type 也可以是一个自定义构造器函数，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】使用 instanceof 检测。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。当 prop 验证失败，Vue会在抛出警本文作者：唐霜，转载请注明出处。【未经授权禁止转载】告 (如果使用的是开发版本)。
原创内容，盗版必究。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】事件反馈
前面一节指出，子组件不能自己主动修改pr【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。op，以防改变了父组件或app的值导致b本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ug。那么如果子组件确实需要上级应用修改转载请注明出处：www.tangshuang.net【作者：唐霜】这些变量，让自己更好的适应新情况怎么办？【原创内容，转载请注明出处】【本文首发于唐霜的博客】那就让父组件或app自己来改。可是父组件转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】怎么知道自己要改？通过子组件的事件就可以【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】做到了。
【转载请注明来源】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。前文我们已经学过事件绑定的知识了，组件的【原创不易，请尊重版权】【原创不易，请尊重版权】实例也具有事件绑定的能力。所以我们可以在著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net子组件里面触发事件，在父组件里面监听这个【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。事件，当事件被触发时，父组件通过绑定的回本文作者：唐霜，转载请注明出处。【未经授权禁止转载】调函数来执行prop的更改。当然除了更改本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。prop，还可以做其他的事情。
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【原创不易，请尊重版权】未经授权，禁止复制转载。只能使用v-on绑定自定义事件
前文我们指出，直接用实例的$on方法来绑【转载请注明来源】【版权所有，侵权必究】定自定义事件。但是在这里不行，不能直接在著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。父组件里面直接用$on，因为我们使用&l【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】t;my-component>实例本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】化组件时，没有得到一个变量用来存储实例化著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】对象，它相当于是匿名的，所以我们找不到它著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，当然也找不到它的$on。
【作者：唐霜】【版权所有，侵权必究】未经授权，禁止复制转载。那怎么办？只能使用v-on来进行事件绑定【原创不易，请尊重版权】【本文首发于唐霜的博客】。
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】<child @clicked="showSomething"></child>
这里的clicked是事件名，在子组件里【本文受版权保护】著作权归作者所有，禁止商业用途转载。面，通过this.$emit(̵【未经授权禁止转载】原创内容，盗版必究。6;clicked’)触发事【作者：唐霜】【转载请注明来源】件。父组件里面，通过上面代码中的@cli【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。cked=”showSome【本文受版权保护】【版权所有】唐霜 www.tangshuang.netthing”监听这个事件，而【未经授权禁止转载】转载请注明出处：www.tangshuang.netshowSomething就是事件回调函本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】数，是父组件methods方法之一。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】未经授权，禁止复制转载。使用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 获取更多精彩内容】所谓情况允许，是指符合下面条件：
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net- 接受一个 value 属性 本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】
- 在有新的 value 时触发 input【转载请注明来源】【本文首发于唐霜的博客】 事件 转载请注明出处：www.tangshuang.net【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】
所以，只有下面这种<child&g【转载请注明来源】本文作者：唐霜，转载请注明出处。t;才可以使用v-model实现双向绑定著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】：
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netVue.component('child', {
template: '<input :value="value" @keyup="update($event.target.value)">', //
props: ['value'],
methods: {
update(value) {
this.$emit('input', value)
},
},
})
这样，在父组件中才可以这样使用：
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】<child v-model="someData"></child> // 等价于： <child :value="someData" @input="someData = $event.target.value"></child>
蓝色部分表示的是v-bind部分，红褐色本文作者：唐霜，转载请注明出处。【作者：唐霜】部分表示v-on部分。组件内部，绿色的k【转载请注明来源】未经授权，禁止复制转载。eyup是input元素的DOM原生事件【版权所有，侵权必究】【未经授权禁止转载】，红色的udpate是回调函数，当key【本文首发于唐霜的博客】【转载请注明来源】up的时候执行update()，而upd【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】ate()的时候就$emit(̵【本文受版权保护】【转载请注明来源】6;input’)，触发了父【版权所有，侵权必究】【未经授权禁止转载】组件的v-on:input。
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net基于这种原理，不一定要使用在input输【版权所有】唐霜 www.tangshuang.net【转载请注明来源】入框上，实际上，任何元素都可以模拟这种方转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net式实现数据双向绑定。当然，如果没有输入，【转载请注明来源】【原创不易，请尊重版权】双向绑定的说法就很奇怪。
【作者：唐霜】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】使用 Slot 分发内容
在使用组件时，我们常常要像这样组合它们：
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【转载请注明来源】【版权所有，侵权必究】<app> <app-header></app-header> <app-footer></app-footer> </app>
注意两点：
【转载请注明来源】【未经授权禁止转载】- <app> 组件不知道它的挂未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net载点会有什么内容。挂载点的内容是由<【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。;app>的父组件决定的。 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
- <app> 组件很可能有它自未经授权，禁止复制转载。【本文受版权保护】己的模版。 【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文受版权保护】
为了让组件可以组合，我们需要一种方式来混著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】合父组件的内容与子组件自己的模板。这个过【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】程被称为 内容分发 (或 “transc【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】lusion” 如果你熟悉 Angula原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。r)。Vue.js 实现了一个内容分发 【作者：唐霜】【版权所有，侵权必究】API ，参照了当前 Web 组件规范草案，使用特殊的 <slot> 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】元素作为原始内容的插槽。
【作者：唐霜】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】编译作用域
在深入内容分发 API 之前，我们先明确【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。内容在哪个作用域里编译。假定模板为：
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。<child-component>{{ message }}</child-component>
message应该绑定到父组件的数据，还原创内容，盗版必究。【本文受版权保护】是绑定到子组件的数据？答案是父组件。组件转载请注明出处：www.tangshuang.net原创内容，盗版必究。作用域简单地说是：
转载请注明出处：www.tangshuang.net
父组件模板的内容在父组件作用域内编译；【本文受版权保护】著作权归作者所有，禁止商业用途转载。子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指【未经授权禁止转载】未经授权，禁止复制转载。令绑定到子组件的属性/方法：
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net<!-- 无效 --><child-component v-show="someChildProperty"></child-component>
假定 someChildProperty未经授权，禁止复制转载。【作者：唐霜】 是子组件的属性，上例不会如预期那样工作转载请注明出处：www.tangshuang.net【访问 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【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ot> 插口，否则父组件的内容将会本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。被丢弃。当子组件模板只有一个没有属性的 【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】slot 时，父组件整个内容片段将插入到【未经授权禁止转载】【版权所有，侵权必究】 slot 所在的 DOM 位置，并替换【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】掉 slot 标签本身。
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【版权所有，侵权必究】最初在 <slot> 标签中本文作者：唐霜，转载请注明出处。【作者：唐霜】的任何内容都被视为备用内容。备用内容在子【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】组件的作用域内编译，并且只有在宿主元素为【原创不易，请尊重版权】【转载请注明来源】空，且没有要插入的内容时才显示备用内容。
未经授权，禁止复制转载。未经授权，禁止复制转载。假定 my-component 组件有下原创内容，盗版必究。【原创内容，转载请注明出处】面模板：
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net<div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div>
父组件模版：
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。<div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div>
渲染结果：
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。<div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div> </div>
具名 Slot
<slot> 元素可以用一个【本文受版权保护】【版权所有】唐霜 www.tangshuang.net特殊的属性 name 来配置如何分发内容【未经授权禁止转载】【原创不易，请尊重版权】。多个 slot 可以有不同的名字。具名【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】 slot 将匹配内容片段中有对应 sl【版权所有，侵权必究】转载请注明出处：www.tangshuang.netot 特性的元素。
【原创不易，请尊重版权】原创内容，盗版必究。【版权所有，侵权必究】仍然可以有一个匿名 slot ，它是默认未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。 slot ，作为找不到匹配的内容片段的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net备用插槽。如果没有默认的 slot ，这【作者：唐霜】本文版权归作者所有，未经授权不得转载。些找不到匹配的内容片段将被抛弃。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。例如，假定我们有一个 app-layou【本文首发于唐霜的博客】未经授权，禁止复制转载。t 组件，它的模板为：
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
父组件模版：
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p> </app-layout>
渲染结果为：
未经授权，禁止复制转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<div class="container"> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>
在组合组件时，内容分发 API 是非常有【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。用的机制。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net一个（能够传递数据到）可重用模板替换已渲【本文受版权保护】【未经授权禁止转载】染元素。2.1.0才新增的，因此，如果你原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。只是使用2.0版本，还是使用不了。
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。在子组件中，只需将数据传递到插槽，就像你【关注微信公众号：wwwtangshuangnet】【作者：唐霜】将 prop 传递给组件一样：
未经授权，禁止复制转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net<div class="child"> <slot text="hello from child"></slot> </div>
在父级中，具有特殊属性 scope 的 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。<template> 元素，本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net表示它是作用域插槽的模板。scope 的【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。值对应一个临时变量名，此变量接收从子组件【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。中传递的 prop 对象：
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【本文受版权保护】<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
如果我们渲染以上结果，得到的输出会是：
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net<div class="parent"> <div class="child"> <span>hello from parent</span> <span>hello from child</span> </div> </div>
作用域插槽更具代表性的用例是列表组件，允未经授权，禁止复制转载。未经授权，禁止复制转载。许组件自定义应该如何渲染列表每一项：
【作者：唐霜】【版权所有，侵权必究】<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【访问 www.tangshuang.net 获取更多精彩内容】<ul> <slot name="item" v-for="item in items" :text="item.text" > <!-- 这里写入备用内容 --> </slot> </ul>
内联模板
如果子组件有 inline-templa【本文首发于唐霜的博客】【版权所有，侵权必究】te 特性，组件将把它的内容当作它的模板【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。，而不是把它当作分发内容。这让模板更灵活转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】。
【未经授权禁止转载】【访问 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 让著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】模板的作用域难以理解。最佳实践是使用 t【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。emplate 选项在组件内定义模板或者本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net在 .vue 文件中使用 templat著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。e 元素。
本文作者：唐霜，转载请注明出处。【本文受版权保护】编者按：关于.vue文件，会在后文详细讲本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】解。
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。动态组件
通过使用保留的 <componen原创内容，盗版必究。【原创内容，转载请注明出处】t> 元素，动态地绑定到它的 is【转载请注明来源】【本文受版权保护】 特性，我们让多个组件可以使用同一个挂载本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。点，并动态切换：
【转载请注明来源】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变！ -->
</component>
也可以直接绑定到组件对象上：
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
在动态组件模式下，你可以使用keep-a【作者：唐霜】【原创不易，请尊重版权】live指令实现一个缓存效果：
原创内容，盗版必究。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】<keep-alive> <component :is="currentView"> <!-- 非活动组件将被缓存！ --> </component> </keep-alive>
在API 参考查看更多 <keep-alive&【关注微信公众号：wwwtangshuangnet】【本文受版权保护】gt; 的细节。
【未经授权禁止转载】未经授权，禁止复制转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】异步创建组件
在大型应用中，我们可能需要将应用拆分为多原创内容，盗版必究。【作者：唐霜】个小模块，按需从服务器下载。为了让事情更未经授权，禁止复制转载。未经授权，禁止复制转载。简单， Vue.js 允许将组件定义为一【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。个工厂函数，动态地解析组件的定义。Vue本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】.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 回调，【转载请注明来源】【原创内容，转载请注明出处】在收到从服务器下载的组件定义时调用。也可本文版权归作者所有，未经授权不得转载。【作者：唐霜】以调用 reject(reason) 指未经授权，禁止复制转载。【版权所有，侵权必究】示加载失败。
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。递归和循环引用
递归组件
组件在它的模板内可以递归地调用自己，不过【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，只有当它有 name 选项时才可以：
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。name: 'unique-name-of-my-component'
当你利用Vue.component全局注【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。册了一个组件, 全局的ID作为组件的 n转载请注明出处：www.tangshuang.net【本文受版权保护】ame 选项，被自动设置.
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】Vue.component('unique-name-of-my-component', {
// ...
})
如果你不谨慎, 递归组件可能导致死循环:
转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netname: 'stack-overflow', template: '<div><stack-overflow></stack-overflow></div>'
上面组件会导致一个错误 “max sta【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】ck size exceeded” ，所【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】以要确保递归调用有终止条件 (比如递归调【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】用时使用 v-if 并让他最终返回 fa原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netlse )。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。未经授权，禁止复制转载。组件间的循环引用
假设你正在构建一个文件目录树，像在Fin【转载请注明来源】未经授权，禁止复制转载。der或文件资源管理器中。你可能有一个 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。tree-folder组件:
原创内容，盗版必究。【转载请注明来源】转载请注明出处：www.tangshuang.net<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>
然后 一个tree-folder-con【本文受版权保护】【版权所有，侵权必究】tents组件：
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。<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【关注微信公众号：wwwtangshuangnet】同时为对方的父节点和子节点–这点是矛盾的【未经授权禁止转载】【本文受版权保护】。当使用Vue.component将这两【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net个组件注册为全局组件的时候，框架会自动为原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。你解决这个矛盾，如果你是这样做的，就不用【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】继续往下看了。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【版权所有，侵权必究】然而，如果你使用诸如Webpack或者B本文作者：唐霜，转载请注明出处。原创内容，盗版必究。rowserify之类的模块化管理工具来【原创不易，请尊重版权】原创内容，盗版必究。requiring/importing组转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net件的话，就会报错了：
原创内容，盗版必究。【本文受版权保护】【本文受版权保护】著作权归作者所有，禁止商业用途转载。Failed to mount comp【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。onent: template or r【本文受版权保护】转载请注明出处：www.tangshuang.netender function not d【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。efined.
【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】
为了解释为什么会报错，简单的将上面两个组【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net件称为 A 和 B ，模块系统看到它需要本文作者：唐霜，转载请注明出处。【作者：唐霜】 A ，但是首先 A 需要 B ，但是 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netB 需要 A， 而 A 需要 B，陷入了【本文受版权保护】未经授权，禁止复制转载。一个无限循环，因此不知道到底应该先解决哪【转载请注明来源】本文作者：唐霜，转载请注明出处。个。要解决这个问题，我们需要在其中一个组转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】件中（比如 A ）告诉模块化管理系统，“未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。A 虽然需要 B ，但是不需要优先导入 【未经授权禁止转载】【本文首发于唐霜的博客】B”。
【作者：唐霜】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】在我们的例子中，我们选择在tree-fo【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】lder 组件中来告诉模块化管理系统循环未经授权，禁止复制转载。原创内容，盗版必究。引用的组件间的处理优先级，我们知道引起矛本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。盾的子组件是tree-folder-co【原创不易，请尊重版权】【转载请注明来源】ntents，所以我们在beforeCr【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。eate 生命周期钩子中去注册它：
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】未经授权，禁止复制转载。beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
}
问题解决了。
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netX-Templates
另一种定义模版的方式是在 JavaScr【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ipt 标签里使用 text/x-tem本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】plate 类型，并且指定一个id。例如【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。：
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
这在有很多模版或者小的应用中有用，否则应【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。该避免使用，因为它将模版和组件的其他定义【本文首发于唐霜的博客】【未经授权禁止转载】隔离了。
未经授权，禁止复制转载。【转载请注明来源】【未经授权禁止转载】对低开销的静态组件使用v-once
尽管在 Vue 中渲染 HTML 很快，【原创不易，请尊重版权】原创内容，盗版必究。不过当组件中包含大量静态内容时，可以考虑【原创不易，请尊重版权】【转载请注明来源】使用 v-once 将渲染结果缓存起来，【本文受版权保护】【版权所有】唐霜 www.tangshuang.net就像这样：
【作者：唐霜】【原创内容，转载请注明出处】Vue.component('terms-of-service', {
template: `<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>`
})
小结
这一章介绍了vue的核心理念之一——组件【关注微信公众号：wwwtangshuangnet】【作者：唐霜】。组件的概念并没有想象的那么复杂，简单的本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net说就是一个相对隔离的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方面的特性，组件应该是具备高可复用性的，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。当一个地方需要使用这个组件时，只需要实例【版权所有，侵权必究】【本文首发于唐霜的博客】化，并给适合的props即可。只要pro【作者：唐霜】原创内容，盗版必究。ps给的符合要求，组件就可以根据自己的逻原创内容，盗版必究。【本文受版权保护】辑运行，既不受外界影响，也不影响外界。
未经授权，禁止复制转载。未经授权，禁止复制转载。全局和局部
在前文我多次提到了全局和局部的问题，可以【本文受版权保护】本文版权归作者所有，未经授权不得转载。看到，好几个操作，其实都存在全局和局部的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】相同操作。但前文我们大部分时间更专注局部【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，本章其实更多从全局角度出发，把之前从来【未经授权禁止转载】转载请注明出处：www.tangshuang.net没提过的全局方法，都提一遍。这样可以帮助著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。你更好的全面了解vue的api。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【作者：唐霜】【转载请注明来源】全局配置
Vue.config 是一个对象，包含 【作者：唐霜】【本文首发于唐霜的博客】Vue 的全局配置。可以在启动应用之前修原创内容，盗版必究。【本文首发于唐霜的博客】改下列属性：
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。silent
- 类型： boolean 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
- 默认值： false 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有，侵权必究】
- 作用：取消 Vue 所有的日志与警告。 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】
Vue.config.silent = true
optionMergeStrategies
- 类型： { [key: string]:原创内容，盗版必究。【转载请注明来源】 Function } 【作者：唐霜】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】
- 默认值： {}
转载请注明出处：www.tangshuang.net 原创内容，盗版必究。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net
- 作用：自定义合并策略的选项。合并策略选项本文作者：唐霜，转载请注明出处。原创内容，盗版必究。分别接受第一个参数作为父实例，第二个参数著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】为子实例，Vue实例上下文被作为第三个参未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。数传入。 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net
- 参考 自定义选项的混合策略 【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
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 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- 默认值： true (生产版为 fals未经授权，禁止复制转载。【转载请注明来源】e) 【未经授权禁止转载】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- 作用：配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net产版本默认为 false。生产版本设为 未经授权，禁止复制转载。【转载请注明来源】true 可以启用检查。 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
// 务必在加载 Vue 之后，立即同步设置以下内容 Vue.config.devtools = true
errorHandler
- 类型： Function 【转载请注明来源】【转载请注明来源】
- 默认值： 默认抛出错误 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。
- 作用：指定组件的渲染和观察期间未捕获错误【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。的处理函数。这个处理函数被调用时，可获取本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】错误信息和 Vue 实例。
著作权归作者所有，禁止商业用途转载。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】Sentry, 一个错误追踪服务, 通过此选项提供官方集成。
原创内容，盗版必究。【作者：唐霜】转载请注明出处：www.tangshuang.net 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。
Vue.config.errorHandler = function (err, vm) {
// handle error
}
ignoredElements
- 类型: Array<string&【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。gt; 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- 默认值: [] 未经授权，禁止复制转载。【版权所有，侵权必究】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- 作用： 须使 Vue 忽略在 Vue 之【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】外的自定义元素 (e.g., 使用了 W本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】eb Components APIs)。【未经授权禁止转载】原创内容，盗版必究。否则，它会假设你忘记注册全局组件或者拼错【关注微信公众号：wwwtangshuangnet】【转载请注明来源】了组件名称，从而抛出一个关于 Unkno【转载请注明来源】【原创不易，请尊重版权】wn custom element 的警【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】告。 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ]
keyCodes
- 类型： { [key: string]:未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】 number | Array<n【本文首发于唐霜的博客】未经授权，禁止复制转载。umber> } 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net
- 默认值： {} 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 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【版权所有，侵权必究】转载请注明出处：www.tangshuang.net11; 在 Vue.extend() 中【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】它必须是函数。 未经授权，禁止复制转载。原创内容，盗版必究。
- 参考： 组件 转载请注明出处：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')
结果如下：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】<p>Walter White aka Heisenberg</p>
Vue.nextTick([callback, context])
- 参数：
- {Function} [callback【原创不易，请尊重版权】【原创不易，请尊重版权】] 【转载请注明来源】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】
- {Object} [context] 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【本文受版权保护】
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】
- 作用：在下次 DOM 更新循环结束之后执未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。行延迟回调。在修改数据之后立即使用这个方【转载请注明来源】【本文受版权保护】法，获取更新后的 DOM。
【本文首发于唐霜的博客】
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】2.1.0新增：如果没有提供回调且支持 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。promise 的环境中返回 promi【未经授权禁止转载】【未经授权禁止转载】se。
【转载请注明来源】原创内容，盗版必究。 本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
- 参考： 异步更新队列 【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
Vue.set( object, key, value )
- 参数：
- {Object} object 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。
- {string} key 未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- {any} value 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。未经授权，禁止复制转载。
- 返回值： 设置的值. 【本文受版权保护】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】
- 作用：设置对象的属性。如果对象是响应式的原创内容，盗版必究。【本文受版权保护】，确保属性被创建后也是响应式的，同时触发转载请注明出处：www.tangshuang.net【作者：唐霜】视图更新。这个方法主要用于避开 Vue 本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】不能检测属性被添加的限制。注意对象不能是【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】 Vue 实例，或者 Vue 实例的根数本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】据对象。 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
- 参考： 深入响应式原理 【原创内容，转载请注明出处】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
Vue.delete( object, key )
- 参数：
- {Object} object 【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- {string} key 【原创内容，转载请注明出处】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。
【版权所有，侵权必究】【本文受版权保护】未经授权，禁止复制转载。
- 作用：删除对象的属性。如果对象是响应式的【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，确保删除能触发更新视图。这个方法主要用【本文受版权保护】著作权归作者所有，禁止商业用途转载。于避开 Vue 不能检测到属性被删除的限本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】制，但是你应该很少会使用它。注意对象不能【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】是 Vue 实例，或者 Vue 实例的根【版权所有，侵权必究】未经授权，禁止复制转载。数据对象。 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
- 参考： 深入响应式原理 【版权所有，侵权必究】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
Vue.directive( id, [definition] )
- 参数：
- {string} id 【转载请注明来源】【原创内容，转载请注明出处】
- {Function | Object} 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】[definition] 未经授权，禁止复制转载。【原创不易，请尊重版权】【版权所有，侵权必究】【原创内容，转载请注明出处】
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- 作用：注册或获取全局指令。 本文作者：唐霜，转载请注明出处。【本文受版权保护】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
- 参考： 自定义指令 【未经授权禁止转载】转载请注明出处：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 原创内容，盗版必究。【本文受版权保护】
- {Function} [definiti【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】on] 【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【访问 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] 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
- 作用：注册或获取全局组件。注册还会自动使【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。用给定的id设置组件的名称。 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
- 参考： 组件 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】
// 注册组件，传入一个扩展过的构造器
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未经授权，禁止复制转载。n} plugin 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】
- 作用：安装 Vue.js 插件。如果插件【本文受版权保护】【版权所有】唐霜 www.tangshuang.net是一个对象，必须提供 install 方本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】法。如果插件是一个函数，它会被作为 in【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】stall 方法。install 方法将【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。被作为 Vue 的参数调用。当 inst【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。all 方法被同一个插件多次调用，插件将原创内容，盗版必究。【未经授权禁止转载】只会被安装一次。 【本文受版权保护】原创内容，盗版必究。未经授权，禁止复制转载。【未经授权禁止转载】
- 参考： 插件 【转载请注明来源】本文作者：唐霜，转载请注明出处。【转载请注明来源】本文作者：唐霜，转载请注明出处。
编者按：关于如何开发一个插件，读者应该要【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。学习一下，因为有的时候你确实需要全局实现【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】某些功能。通过插件，可以给Vue这个全局【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。变量加入一些全局方法，也可以给每一个实例【版权所有，侵权必究】【原创内容，转载请注明出处】加入原型链方法，在组件内使用this.$【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】yourmethod这种方式来执行某些功【未经授权禁止转载】【版权所有，侵权必究】能。点击上面的参考链接去学习如何写插件。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。Vue.mixin( mixin )
- 参数：{Object} mixin 【作者：唐霜】【版权所有，侵权必究】
- 作用：全局注册一个混合，影响注册之后所有【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。创建的每个 Vue 实例。插件作者可以使未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。用混合，向组件注入自定义的行为。不推荐在转载请注明出处：www.tangshuang.net【作者：唐霜】应用代码中使用。 【本文首发于唐霜的博客】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- 参考： 全局混合 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【转载请注明来源】【关注微信公众号：wwwtangshuangnet】
编者按：关于混入，如果你学过react应【作者：唐霜】原创内容，盗版必究。该知道。简单的说就是把几个类合并为一个类本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】，这样，继承这个混合的类的子类就拥有了多【原创不易，请尊重版权】原创内容，盗版必究。个父类的方法。在vue里面，组件也可以使【转载请注明来源】转载请注明出处：www.tangshuang.net用混入来继承组件，在创建组件的时候就可以【原创不易，请尊重版权】【作者：唐霜】使用一个mixin参数，这在前面的组件一【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。章没有介绍过：
未经授权，禁止复制转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。// 定义一个混合对象
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 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- 作用：在render函数中编译模板字符串本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。。只在独立构建时有效。 未经授权，禁止复制转载。【本文首发于唐霜的博客】【关注微信公众号：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【关注微信公众号：wwwtangshuangnet】。注意下面的方法，都是复数形式。
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。Vue.directives
全局注册一个指令。这样你就可以在任何的V【作者：唐霜】【原创内容，转载请注明出处】ue实例上使用这个指令。
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
Vue.filters
注册或获取全局过滤器。
【本文首发于唐霜的博客】【关注微信公众号：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【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ent。当child被实例化出来之后，c转载请注明出处：www.tangshuang.net【未经授权禁止转载】hild.$parent就引用paren【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。t，而parent.$children是本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net一个数组，里面就包含了child，可以用原创内容，盗版必究。【版权所有，侵权必究】parent.$children.ind【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。exOf(child) > -1来本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】判断是否是否包含了某个实例。
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。mixin
前面已经讲过全局的mixin，其实它也可转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net以在实例化配置时传入：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】var mixin = {
created: function () {
console.log(1)
}
}
var vm = new Vue({
created: function () {
console.log(2)
},
mixins: [mixin]
})
// -> 1
// -> 2
mixins 选项接受一个混合对象的数组本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】。这些混合实例对象可以像正常的实例对象一【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。样包含选项,他们将在 Vue.exten【未经授权禁止转载】转载请注明出处：www.tangshuang.netd() 里最终选择使用相同的选项合并逻辑【作者：唐霜】【本文受版权保护】合并。举例：如果你混合包含一个钩子而创建著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net组件本身也有一个,两个函数将被调用。Mi【未经授权禁止转载】【原创内容，转载请注明出处】xin钩子按照传入顺序依次调用,并在调用转载请注明出处：www.tangshuang.net【未经授权禁止转载】组件自身的钩子之前被调用。
【转载请注明来源】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】name
注意，这个选项只对组件的创建起作用。
未经授权，禁止复制转载。未经授权，禁止复制转载。【版权所有，侵权必究】var MyComponent = Vue.extend({
name: 'my-component',
})
允许组件模板递归地调用自身。注意，组件在【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。全局用 Vue.component() 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。注册时，全局 ID 自动作为组件的 na本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】me。
【转载请注明来源】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】指定 name 选项的另一个好处是便于调【版权所有，侵权必究】【作者：唐霜】试。有名字的组件有更友好的警告信息。另外【原创内容，转载请注明出处】【转载请注明来源】，当在有 vue-devtools, 未命名组件将显示成 <Anon【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ymousComponent>, 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net这很没有语义。通过提供 name 选项，【本文受版权保护】未经授权，禁止复制转载。可以获得更有语义信息的组件树。
【版权所有，侵权必究】【本文首发于唐霜的博客】【本文受版权保护】extend
允许声明扩展另一个组件(可以是一个简单的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】选项对象或构造函数),而无需使用 Vue【本文首发于唐霜的博客】【未经授权禁止转载】.extend。这主要是为了便于扩展单文未经授权，禁止复制转载。【原创不易，请尊重版权】件组件。
【未经授权禁止转载】
这和 mixins 类似，区别在于，组【版权所有，侵权必究】【未经授权禁止转载】件自身的选项会比要扩展的源组件具有更高的【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】优先级。
var CompA = { ... }
// 在没有调用 Vue.extend 时候继承 CompA
var CompB = { extends: CompA, ...}
delimiters
改变纯文本插入分隔符。 这个选择只有在独本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net立构建时才有用。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】默认值: [“{{̶原创内容，盗版必究。【未经授权禁止转载】0;, “}}”【原创不易，请尊重版权】【本文首发于唐霜的博客】]
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】new Vue({ delimiters: ['${', '}']})
// 分隔符变成了 ES6 模板字符串的风格
functional
使组件无状态（没有 data ）和无实例【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。（没有 this 上下文）。他们用一个简【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net单的 render 函数返回虚拟节点使他【原创不易，请尊重版权】【本文受版权保护】们更容易渲染。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net参考： 函数式组件
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。实例属性
vm.$data
- 类型: Object 【未经授权禁止转载】【版权所有，侵权必究】【作者：唐霜】
- 详细: Vue 实例观察的数据对象。Vu【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。e 实例代理了对其 data 对象属性的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。访问。 未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net
- 另见: 选项 – data 【版权所有，侵权必究】【未经授权禁止转载】
vm.$el
- 类型: HTMLElement 【本文首发于唐霜的博客】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
- 只读 【原创不易，请尊重版权】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- 详细: Vue 实例使用的根 DOM 元【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。素。 【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
vm.$options
- 类型: Object 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
- 只读 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。
- 详细: 用于当前 Vue 实例的初始化选【转载请注明来源】【未经授权禁止转载】项。需要在选项中包含自定义属性时会有用处著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】： 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】转载请注明出处：www.tangshuang.net
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
- 只读 【原创内容，转载请注明出处】原创内容，盗版必究。【本文首发于唐霜的博客】【本文受版权保护】
- 详细: 父实例，如果当前实例有的话。 未经授权，禁止复制转载。未经授权，禁止复制转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】
vm.$root
- 类型: Vue instance 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net
- 只读 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
- 详细: 当前组件树的根 Vue 实例。如【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】果当前实例没有父实例，此实例将会是其自已著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】。 未经授权，禁止复制转载。【本文受版权保护】【转载请注明来源】
vm.$children
- 类型: Array<Vue ins未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。tance> 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【作者：唐霜】
- 只读 转载请注明出处：www.tangshuang.net【转载请注明来源】原创内容，盗版必究。
- 详细: 当前实例的直接子组件。需要注意 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】$children 并不保证顺序，也不是【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。响应式的。如果你发现自己正在尝试使用 $【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。children 来进行数据绑定，考虑使【未经授权禁止转载】【作者：唐霜】用一个数组配合 v-for 来生成子组件著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，并且使用 Array 作为真正的来源。 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
vm.$slots
- 类型： { [name: string]【版权所有，侵权必究】转载请注明出处：www.tangshuang.net: ?Array<VNode>【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】; } 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- 只读 【本文首发于唐霜的博客】【原创不易，请尊重版权】原创内容，盗版必究。
- 详细: 用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot=【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。221;foo” 中的内容将【本文受版权保护】本文版权归作者所有，未经授权不得转载。会在 vm.$slots.foo 中被找转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。到）。default 属性包括了所有没有原创内容，盗版必究。转载请注明出处：www.tangshuang.net被包含在具名 slot 中的节点。在使用 render 函数书写一个组件时，访问 vm.$slots【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net 最有帮助。 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- 参考：
- <slot> 组件 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】
- 使用 Slots 进行内容分发 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net
- Render 函数 【原创不易，请尊重版权】未经授权，禁止复制转载。【未经授权禁止转载】未经授权，禁止复制转载。
原创内容，盗版必究。【版权所有，侵权必究】【转载请注明来源】【本文首发于唐霜的博客】
vm.$scopedSlots
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】2.1.0新增
【转载请注明来源】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。
- 类型： { [name: string]本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】: props => VNode 【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】| Array<VNode>【本文首发于唐霜的博客】原创内容，盗版必究。 } 【原创内容，转载请注明出处】【原创不易，请尊重版权】
- 只读 【版权所有，侵权必究】【原创内容，转载请注明出处】【未经授权禁止转载】【原创不易，请尊重版权】
- 详细：用来访问 scoped slots。对于包括 默认 slot 在内的每一个本文作者：唐霜，转载请注明出处。【未经授权禁止转载】 slot， 该对象都包含一个返回相应 著作权归作者所有，禁止商业用途转载。【本文受版权保护】VNode 的函数。在使用 render 函数 书写一个组件时，访问 vm.$scop【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。edSlots 最有帮助。 【本文受版权保护】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】
- 参考：
- <slot> 组件 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
- Scoped Slots 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【未经授权禁止转载】
- Render 函数 转载请注明出处：www.tangshuang.net【本文受版权保护】
【本文受版权保护】原创内容，盗版必究。【本文受版权保护】
vm.$refs
- 类型： Object 【转载请注明来源】【未经授权禁止转载】
- 只读 【未经授权禁止转载】【本文首发于唐霜的博客】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
- 详细：一个对象，其中包含了所有拥有 re本文版权归作者所有，未经授权不得转载。【转载请注明来源】f 注册的子组件。 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【原创不易，请尊重版权】【转载请注明来源】
- 另见： 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
vm.$isServer
- 类型： boolean 【版权所有，侵权必究】【作者：唐霜】【原创内容，转载请注明出处】
- 只读 未经授权，禁止复制转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】
- 详细：当前 Vue 实例是否运行于服务器原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。。 【未经授权禁止转载】【作者：唐霜】
- 参考： 服务端渲染 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
实例的数据方法
vm.$watch( expOrFn, callback, [options] )
- 参数：
- {string | Function} 原创内容，盗版必究。【作者：唐霜】expOrFn 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
- {Function} callback 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
- {Object} [options]
- {boolean} deep 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。
- {boolean} immediate 未经授权，禁止复制转载。【原创内容，转载请注明出处】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【本文受版权保护】
- 返回值： {Function} unwa本文版权归作者所有，未经授权不得转载。【转载请注明来源】tch 未经授权，禁止复制转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】
- 用法：观察 Vue 实例变化的一个表达式【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】或计算属性函数。回调函数得到的参数为新值【未经授权禁止转载】【本文首发于唐霜的博客】和旧值。表达式只接受监督的键路径。对于更【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。复杂的表达式，用一个函数取代。注意：在变未经授权，禁止复制转载。原创内容，盗版必究。异（不是替换）对象或数组时，旧值将与新值本文作者：唐霜，转载请注明出处。【作者：唐霜】相同，因为它们的引用指向同一个对象/数组【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。Vue 不会保留变异之前值的副本。 【未经授权禁止转载】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net
- 示例：vm.$watch 返回一个取消观本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。察函数，用来停止触发回调： 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】
// 键路径
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为了发现对象内部值的变化，【转载请注明来源】著作权归作者所有，禁止商业用途转载。可以在选项参数中指定 deep: tru【未经授权禁止转载】【版权所有，侵权必究】e 。注意监听数组的变动不需要这么做。 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】未经授权，禁止复制转载。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
- 选项：immediate在选项参数中指定【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 immediate: true 将立即【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】以表达式的当前值触发回调： 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
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
【本文首发于唐霜的博客】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】
- 返回值： 设置的值. 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【原创不易，请尊重版权】【转载请注明来源】
- 用法：这是全局 Vue.set 的别名。 【转载请注明来源】【本文受版权保护】【本文受版权保护】
- 另见： Vue.set 【原创内容，转载请注明出处】【未经授权禁止转载】
vm.$delete( object, key )
- 参数：
- {Object} object 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【版权所有，侵权必究】
- {string} key 原创内容，盗版必究。【作者：唐霜】
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】
- 用法：这是全局 Vue.delete 的【版权所有，侵权必究】【本文首发于唐霜的博客】别名。 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
- 另见： Vue.delete 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【版权所有，侵权必究】
Render 函数
Vue 推荐在绝大多数情况下使用 tem本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。plate 来创建你的 HTML。然而在【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】一些场景中，你真的需要 JavaScri【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。pt 的完全编程的能力，这就是 rend【转载请注明来源】【原创内容，转载请注明出处】er 函数，它比 template 更接【原创不易，请尊重版权】【原创内容，转载请注明出处】近编译器。
【作者：唐霜】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【转载请注明来源】特别是在一些通过v-if来确定使用哪一块【原创内容，转载请注明出处】【未经授权禁止转载】内容的时候，你要写很多个v-if来决定使【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。用哪一块内容。但是如果使用render函【未经授权禁止转载】【转载请注明来源】数，就可以避免这种重复的工作。
【本文首发于唐霜的博客】原创内容，盗版必究。【版权所有，侵权必究】什么是render函数？
如果你使用过react，那么应该完全不陌【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net生。render函数是在模板的编译阶段，【原创不易，请尊重版权】【未经授权禁止转载】用来编译模板的。在template和re【作者：唐霜】著作权归作者所有，禁止商业用途转载。nder同时存在的时候，render具有本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。更高的优先级。也就是说，vue实例化的时【关注微信公众号：wwwtangshuangnet】【转载请注明来源】候，如果你有render函数，那么当实例【版权所有，侵权必究】【转载请注明来源】化进行渲染DOM的时候，render函数【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net是一个决定性的元素，render的返回结【版权所有，侵权必究】【转载请注明来源】果，就是最终的DOM渲染结果。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】简单的说，render函数，就是使用ja著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netvascript编程的方式来创建模板（代【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net替template参数），用render【本文首发于唐霜的博客】【本文首发于唐霜的博客】函数的返回值作为模板编译的基础。
原创内容，盗版必究。【本文受版权保护】如何使用？
先来看段例子：
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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【访问 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【关注微信公众号：wwwtangshuangnet】【转载请注明来源】M发生之后，它才会转换为真是的DOM节点【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】。
【转载请注明来源】转载请注明出处：www.tangshuang.netdata Object
上面代码中，第二个参数是一个object转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，但是可以有哪些内容可以配置呢？
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 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 必须是唯一【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】的。这意味着，下面的 render fu未经授权，禁止复制转载。【作者：唐霜】nction 是无效的：
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 错误-重复的VNodes
myParagraphVNode, myParagraphVNode
])
}
如果你真的需要重复很多次的元素/组件，你转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net可以使用工厂函数来实现。例如，下面这个例本文作者：唐霜，转载请注明出处。【转载请注明来源】子 render 函数完美有效地渲染了 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】20 个重复的段落：
未经授权，禁止复制转载。原创内容，盗版必究。【原创不易，请尊重版权】【本文首发于唐霜的博客】render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
一旦你开始使用render函数，你就可以【本文受版权保护】本文作者：唐霜，转载请注明出处。使用createElement函数完全代【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。替模板，通过javascript逻辑来创【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。建复杂的模板逻辑。当然，这样做会让模板可【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。读性变得很差，于是，你可以使用jsx。
【本文受版权保护】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。JSX
如果你写了很多 render 函数，可能本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】会觉得痛苦。特别是模板极其简单的情况下。
转载请注明出处：www.tangshuang.net
这就是会有一个 Babel plugin 插件，用于在 Vue 中使用 JSX 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】语法的原因，它可以让我们回到于更接近模板本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net的语法上。
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
将 h 作为 createElement【原创内容，转载请注明出处】【作者：唐霜】 的别名是 Vue 生态系统中的一个通用转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。惯例，实际上也是 JSX 所要求的，如果著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】在作用域中 h 失去作用， 在应用中会触【原创不易，请尊重版权】原创内容，盗版必究。发报错。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。更多关于 JSX 映射到 JavaScr【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ipt，阅读 使用文档。
【本文受版权保护】原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。特殊属性
Vue里面使用了DOM模板，也就是说，所【本文受版权保护】【原创不易，请尊重版权】有元素的属性（attr或prop）首先可【本文受版权保护】【关注微信公众号：wwwtangshuangnet】以被HTML解析识别。而如果不是HTML本文版权归作者所有，未经授权不得转载。【本文受版权保护】本身内置的属性的话，vue可以自己在编译【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。模板的时候对这些属性进行解析，主要包括下【版权所有】唐霜 www.tangshuang.net【本文受版权保护】列属性：
未经授权，禁止复制转载。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net- vue的指令，内置指令或自定义指令 【版权所有，侵权必究】【作者：唐霜】
- 子组件的props属性 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
- 本章将要讲到的特殊属性 【本文受版权保护】未经授权，禁止复制转载。原创内容，盗版必究。未经授权，禁止复制转载。
除了上述这些属性之外，比如，我们给一个元转载请注明出处：www.tangshuang.net原创内容，盗版必究。素添加了go属性<div go="-1"></div>，这个属性不会起到任何作用，当然，你可以本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】用css来改变它的样式，但是在元素本身层本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net面上，真没用。回到主题，本章要讲vue的【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】内置的特殊属性。
key
key 的特殊属性主要用在 Vue的虚拟【作者：唐霜】【作者：唐霜】DOM算法，在新旧nodes对比时辨识V原创内容，盗版必究。【未经授权禁止转载】Nodes。如果不使用key，Vue会使【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net用一种最大限度减少动态元素并且尽可能的尝【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net试修复/再利用相同类型元素的算法。使用k本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netey，它会基于key的变化重新排列元素顺未经授权，禁止复制转载。【本文首发于唐霜的博客】序，并且会移除key不存在的元素。
【版权所有，侵权必究】【版权所有，侵权必究】有相同父元素的子元素必须有独特的key。【作者：唐霜】原创内容，盗版必究。重复的key会造成渲染错误。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net最常见的用例是结合 v-for:
【本文首发于唐霜的博客】【本文受版权保护】转载请注明出处：www.tangshuang.net原创内容，盗版必究。<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
它也可以用于强制替换元素/组件而不是重复【原创不易，请尊重版权】【未经授权禁止转载】使用它。当你遇到如下场景时它可能会很有用【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】:
【版权所有，侵权必究】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。- 完整地触发组件的生命周期钩子 本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- 触发过渡 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
例如:
【版权所有，侵权必究】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时，<spa【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netn> 会随时被更新，因此会触发过渡未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netref
ref 被用来给元素或子组件注册引用信息未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。。引用信息将会注册在父组件的 $refs【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 对象上。如果在普通的 DOM 元素上使未经授权，禁止复制转载。【转载请注明来源】用，引用指向的就是 DOM 元素; 如果【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net用在子组件上，引用就指向组件实例:
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】<!-- 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本文作者：唐霜，转载请注明出处。数组。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】关于ref注册时间的重要说明: 因为re【转载请注明来源】【版权所有，侵权必究】f本身是作为渲染结果被创建的，在初始渲染【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net的时候你不能访问它们 – 它【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】们还不存在！$refs 也不是响应式的，未经授权，禁止复制转载。【原创不易，请尊重版权】因此你不应该试图用它在模版中做数据绑定。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】- 参考： 子组件 Refs 未经授权，禁止复制转载。【版权所有，侵权必究】
slot
用于标记往哪个slot中插入子组件内容。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。详细用法，请参考下面指南部分的链接。
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。- 参考： 具名 Slots 【原创内容，转载请注明出处】【本文首发于唐霜的博客】
内置组件
我们新注册一个组件之后，就可以用这个组件【本文受版权保护】未经授权，禁止复制转载。的名称作为一个html元素插入到你的模板未经授权，禁止复制转载。【本文首发于唐霜的博客】中去。但是，vue保留了几个组件名，而这本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net几个组件可以直接调用，是vue的内置组件转载请注明出处：www.tangshuang.net【作者：唐霜】，实现对应的功能。
【本文首发于唐霜的博客】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。component
- Props：
- is – string | 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ComponentDefinition 转载请注明出处：www.tangshuang.net【作者：唐霜】| ComponentConstruct未经授权，禁止复制转载。【版权所有，侵权必究】or 【原创内容，转载请注明出处】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
- inline-template R未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net11; boolean 【转载请注明来源】【原创不易，请尊重版权】【转载请注明来源】
【作者：唐霜】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- 用法：渲染一个“元组件”为动态组件。依 本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】is 的值，来决定哪个组件被渲染。 【未经授权禁止转载】未经授权，禁止复制转载。【转载请注明来源】【转载请注明来源】
- 参考： 动态组件 本文版权归作者所有，未经授权不得转载。【转载请注明来源】
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
transition
- Props：
- name – string,【版权所有，侵权必究】【转载请注明来源】 用于自动生成 CSS 过渡类名。例如：本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netname: ‘fade本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net217; 将自动拓展为.fade-ent本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.neter，.fade-enter-activ【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】e等。默认类名为 “v【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net221; 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。未经授权，禁止复制转载。
- appear – boole【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netan, 是否在初始渲染时使用过渡。默认为【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】 false。 原创内容，盗版必究。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【本文首发于唐霜的博客】
- css – boolean,转载请注明出处：www.tangshuang.net【本文受版权保护】 是否使用 CSS 过渡类。默认为 tr【原创不易，请尊重版权】【原创不易，请尊重版权】ue。如果设置为 false，将只通过组【转载请注明来源】本文作者：唐霜，转载请注明出处。件事件触发注册的 JavaScript 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】钩子。 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- type – string,【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】 指定过渡事件类型，侦听过渡何时结束。有本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。效值为 “transitio【原创不易，请尊重版权】【转载请注明来源】n” 和 “an原创内容，盗版必究。【本文首发于唐霜的博客】imation”。默认 Vu【转载请注明来源】【本文首发于唐霜的博客】e.js 将自动检测出持续时间长的为过渡【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net事件类型。 原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net
- mode – string,原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 控制离开/进入的过渡时间序列。有效的模【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。式有 “out-inR【原创内容，转载请注明出处】未经授权，禁止复制转载。21; 和 “in-out&转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。#8221;；默认同时生效。 【作者：唐霜】转载请注明出处：www.tangshuang.net【转载请注明来源】
- enter-class – 原创内容，盗版必究。转载请注明出处：www.tangshuang.netstring 未经授权，禁止复制转载。【本文首发于唐霜的博客】原创内容，盗版必究。
- leave-class – 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。string 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net
- enter-active-class &转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。#8211; string 【作者：唐霜】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
- leave-active-class &著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】#8211; string 【版权所有，侵权必究】【作者：唐霜】转载请注明出处：www.tangshuang.net
- appear-class –转载请注明出处：www.tangshuang.net【版权所有，侵权必究】 string 【作者：唐霜】【作者：唐霜】
- appear-active-class 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】– string 未经授权，禁止复制转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
本文作者：唐霜，转载请注明出处。【转载请注明来源】原创内容，盗版必究。
- 事件：
- before-enter 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】
- enter 【本文受版权保护】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】未经授权，禁止复制转载。
- after-enter 【本文首发于唐霜的博客】【本文首发于唐霜的博客】【转载请注明来源】
- before-leave 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
- leave 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net
- after-leave 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。
- before-appear 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创不易，请尊重版权】
- appear 【本文首发于唐霜的博客】【未经授权禁止转载】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。
- after-appear 【本文受版权保护】【作者：唐霜】
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net
- 作用：<transition>【原创内容，转载请注明出处】【未经授权禁止转载】; 元素作为单个元素/组件的过渡效果。&原创内容，盗版必究。【作者：唐霜】lt;transition> 不会转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】渲染额外的 DOM 元素，也不会出现在检转载请注明出处：www.tangshuang.net原创内容，盗版必究。测过的组件层级中。它只是将内容包裹在其中本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】，简单的运用过渡行为。 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【关注微信公众号：wwwtangshuangnet】
- 参考： 过渡：进入，离开和列表 【未经授权禁止转载】【版权所有】唐霜 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, 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net默认为 span 转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【原创不易，请尊重版权】
- move-class – 覆【作者：唐霜】【本文首发于唐霜的博客】盖移动过渡期间应用的 CSS 类。 【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】
- 除了 mode，其他特性和 <tr【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ansition> 相同。 【作者：唐霜】【转载请注明来源】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net
原创内容，盗版必究。未经授权，禁止复制转载。
- 事件：
- 事件和 <transition&g【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.nett; 相同. 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】【原创不易，请尊重版权】
- 作用：<transition-gr【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】oup> 元素作为多个元素/组件的【未经授权禁止转载】【本文受版权保护】过渡效果。<transition-未经授权，禁止复制转载。【本文首发于唐霜的博客】group> 渲染一个真实的 DO本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】M 元素。默认渲染 <span&g本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。t;，可以通过 tag 属性配置哪个元素转载请注明出处：www.tangshuang.net【本文受版权保护】应该被渲染。注意，每个 <tran【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】sition-group> 的子节未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。点必须有 独立的key ，动画才能正常工【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。作<transition-grou【版权所有，侵权必究】【作者：唐霜】p> 支持通过 CSS trans【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。form 过渡移动。当一个子节点被更新，本文作者：唐霜，转载请注明出处。【转载请注明来源】从屏幕上的位置发生变化，它将会获取应用 【转载请注明来源】本文作者：唐霜，转载请注明出处。CSS 移动类（通过 name 属性或配转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】置 move-class 属性自动生成）【原创内容，转载请注明出处】【作者：唐霜】。如果 CSS transform 属性原创内容，盗版必究。【版权所有，侵权必究】是“可过渡”属性，当应用移动类时，将会使【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】用 FLIP 技术 使元素流畅地到达动画终点。 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】
- 参考： 过渡：进入，离开和列表 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
<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原创内容，盗版必究。正则表达式。只有匹配的组件会被缓存。 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net
- exclude – 字符串或【作者：唐霜】【转载请注明来源】正则表达式。任何匹配的组件都不会被缓存。 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】原创内容，盗版必究。
- 作用：<keep-alive>本文作者：唐霜，转载请注明出处。原创内容，盗版必究。; 包裹动态组件时，会缓存不活动的组件实【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】例，而不是销毁它们。和 <tran【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。sition> 相似，<ke本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ep-alive> 是一个抽象组件【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】：它自身不会渲染一个 DOM 元素，也不【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。会出现在父组件链中。当组件在 <k【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.neteep-alive> 内被切换，它【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。的 activated 和 deacti转载请注明出处：www.tangshuang.net【作者：唐霜】vated 这两个生命周期钩子函数将会被【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】对应执行。主要用于保留组件状态或避免重新著作权归作者所有，禁止商业用途转载。【转载请注明来源】渲染。 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
- include and exclude 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】（2.1.0 新增）include 和 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。exclude 属性允许组件有条件地缓存【作者：唐霜】未经授权，禁止复制转载。。二者都可以用逗号分隔字符串或正则表达式【作者：唐霜】【本文受版权保护】来表示。匹配首先检查组件自身的 name未经授权，禁止复制转载。【版权所有，侵权必究】 选项，如果 name 选项不可用，则匹著作权归作者所有，禁止商业用途转载。【本文受版权保护】配它的局部注册名称（父组件 compon转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ents 选项的键值）。匿名组件不能被匹【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net配。 【本文受版权保护】【原创不易，请尊重版权】
- <keep-alive> 不转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。会在函数式组件中正常工作，因为它们没有缓著作权归作者所有，禁止商业用途转载。【作者：唐霜】存实例。 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- 参考： 动态组件 – keep-al【原创内容，转载请注明出处】【版权所有，侵权必究】ive 【转载请注明来源】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】
<!-- 基本 --> <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【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】tring, 用于命名插槽。 【转载请注明来源】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
- Usage:<slot> 元【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。素作为组件模板之中的内容分发插槽。 &l【原创内容，转载请注明出处】原创内容，盗版必究。t;slot> 元素自身将被替换。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。详细用法，请参考下面教程的链接。 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【作者：唐霜】
- 参考： 使用Slots分发内容 【本文首发于唐霜的博客】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net
Ajax请求：vue-resource
写前端应用，不可能绕过ajax请求数据。【原创内容，转载请注明出处】未经授权，禁止复制转载。现在已经有比较多专门处理数据请求的模块，未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。比如axio，以及近期火起来的fetch未经授权，禁止复制转载。【转载请注明来源】。vue官方也提供了一个插件（后面会有专【本文受版权保护】转载请注明出处：www.tangshuang.net门的章节讲插件）vue-resource【转载请注明来源】【本文受版权保护】，它是专门用来为vue提供数据请求的。当未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。然，其实你也可以不用，而使用其他的aja【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。x请求模块，甚至在vue里面混合使用jq本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】uery。anyway，我们这一章主要介【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。绍vue-resource。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。这里有个小故事，vue-resource【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】不是官方开发的，而是vue的一个早期用户【本文受版权保护】本文作者：唐霜，转载请注明出处。开发的，后来官方觉得很好，就作为了官方推【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】荐插件。因为插件的使用非常方便，使用文档【作者：唐霜】【本文首发于唐霜的博客】太少，以至于都没有专门的一个网站来介绍它未经授权，禁止复制转载。【本文首发于唐霜的博客】，你可以直接在github上看它的文档和源码。如果你想看中文快速入门的资料，可以看这位作者写的教程，非常简单，但很容易入门。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】安装
如果是用<script>引入【转载请注明来源】【作者：唐霜】vue-resource，那就很简单了，【本文受版权保护】【原创内容，转载请注明出处】不用说，但是它需要在vue.js引入之后【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。，你的代码开始之前引入vue-resou转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】rce.js，这样才能正常使用。
【访问 www.tangshuang.net 获取更多精彩内容】
如果使用npm安装，并且使用模块化方式著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。引入，那么应该这样：
import Vue from 'vue'import VueResource from 'vue-resource' Vue.use(VueResource)
Vue.use就是使用插件的一个方法，使本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。用之后，全局支持VueResource。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net下面的一切介绍，都基于这个use，这得你著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。读到后文的插件一章才能完全理解，目前来讲【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，你只需要这样去操作即可。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。配置方式
使用全局配置设置默认值
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】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)
实例内调用
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】this.$http(options)
便捷方法
- get(url, [options]) 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】
- head(url, [options]) 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
- delete(url, [options原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】]) 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】
- jsonp(url, [options]【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net) 【未经授权禁止转载】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- post(url, [body], [o转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ptions]) 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】
- put(url, [body], [op【转载请注明来源】【版权所有，侵权必究】tions]) 原创内容，盗版必究。【未经授权禁止转载】
- patch(url, [body], [【未经授权禁止转载】【未经授权禁止转载】options]) 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】
选项
| 参数 | 类型 | 描述 |
|---|---|---|
| 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的请求实际是一个【关注微信公众号：wwwtangshuangnet】【转载请注明来源】promise，响应的时候就可以通过.t本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。hen来获取响应结果。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net通过如下属性和方法处理一个请求获取到的响【版权所有】唐霜 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对象方式返回响应体 |
举个栗子：
原创内容，盗版必究。转载请注明出处：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()方法从响应中获取一副图像【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】的内容。你甚至可以用这个blob来直接显本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】示图片，而不是通过图片的src。
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net拦截器
全局定义拦截器后，它可用于前置和后置处理原创内容，盗版必究。【未经授权禁止转载】请求。
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。请求处理
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接口交换数据，那么未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。就有一个“资源”的概念，资源对应一个ur【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netl，所以vue-resource有一个更【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】加抽象的方法：Vue.resource或【转载请注明来源】【版权所有】唐霜 www.tangshuang.netthis.$resource。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。方法
let rsrc = this.$resource(url, [params], [actions], [options])
这里的rsrc就是建立的一个资源实例，你【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。可以对它进行restful的操作，操作方【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。法如下。来说一下参数：
【本文首发于唐霜的博客】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net- url: 请求的资源路径，应该不用解释吧 【原创不易，请尊重版权】【本文首发于唐霜的博客】
- params: url模板参数，下面会讲【版权所有，侵权必究】【原创不易，请尊重版权】什么是url模板 【原创内容，转载请注明出处】未经授权，禁止复制转载。
- actions: 自定义操作，除了下面的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netget, save, query等操作，本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】你还可以自定义一些操作，通过action【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。s来增加，这个也下面讲 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- options: 跟$https的opt【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ions是一样的 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
url模板
vue-resource使用了url-t著作权归作者所有，禁止商业用途转载。【转载请注明来源】emplate来解析url模板，有兴趣的【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】同学可以去研究一下url-templat【作者：唐霜】【未经授权禁止转载】e。具体来说，就是下面这种用法：
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【作者：唐霜】let rsrc = this.$resource('/book/{id}', {id: 12})
上面说了第二个参数prams是url模板【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】的参数。按照上面这个代码，resourc著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】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转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ons里面就可以放headers了。它的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net返回值就是上面$http的响应了。
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。自定义操作
上面说道，actions这个参数可以让你【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net自己自定义自己的操作。比如：
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netlet actions = {
patch: {
method: 'PATCH',
},
}
let rsrc = this.$srouce('/book/{id}', {id: 12}, actions)
rsrc.patch().then(..)..
相当于你自己新增一个方法，它的参数也是o【作者：唐霜】转载请注明出处：www.tangshuang.netptions。
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】头部对象
{
// 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，必须通过头部来进行验证：
【本文受版权保护】【未经授权禁止转载】【版权所有，侵权必究】未经授权，禁止复制转载。var headers = {
'User-Token': 'xxx',
}
var options = {
headers,
}
var rsrc = this.$resource(url, options)rsrc.get().then(..)...
但是有个点需要注意一下，发送header【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】s只需要传入一个对象字面量，而返回的re著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netsponse里面的headers是一个h著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ttp Header对象。Header对本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。象就有本节上述的这些属性和方法。
【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】发送表单数据
使用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
});
}
终止请求
当一个新的请求被发送的时候请终止上一个请【作者：唐霜】【转载请注明来源】求。例如在一个自动完成的输入框中输入的时本文作者：唐霜，转载请注明出处。【转载请注明来源】候。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】{
// 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 获取更多精彩内容】【本文首发于唐霜的博客】件之前，你应该回忆一下，前面我们说过，用【作者：唐霜】【关注微信公众号：wwwtangshuangnet】Vue.use安装插件。知道怎么用之后，【原创不易，请尊重版权】【原创不易，请尊重版权】在来看怎么开发一个插件就比较容易理解一些著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】开发插件
插件通常会为Vue添加全局功能。插件的范转载请注明出处：www.tangshuang.net【作者：唐霜】围没有限制——一般有下面几种：
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。- 添加全局方法或者属性，如: vue-element 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- 添加全局资源：指令/过滤器/过渡（过渡也原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是vue里面的一项功能，会在下面的章节详【本文受版权保护】【转载请注明来源】细阐述）等，如 vue-touch 著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。
- 通过全局 mixin方法添加一些组件选项转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，如: vuex 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net
- 添加 Vue 实例方法，通过把它们添加到【作者：唐霜】【未经授权禁止转载】 Vue.prototype 上实现。 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- 一个库，提供自己的 API，同时提供上面转载请注明出处：www.tangshuang.net【未经授权禁止转载】提到的一个或多个功能，如 vue-router 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】转载请注明出处：www.tangshuang.net
Vue.js 的插件应当有一个公开方法 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。install 。这个方法的第一个参数是【转载请注明来源】【原创内容，转载请注明出处】 Vue 构造器 , 第二个参数是一个可未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。选的选项对象:
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】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) {
// 逻辑...
}
}
利用上面四种方式，你就可以更好的控制你的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net组件或应用了。而除了第4种，前面三种你在【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。前面其实已经阅读到过了，有兴趣可以回到对本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。应的章节复习一下。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【未经授权禁止转载】使用插件
通过全局方法 Vue.use() 使用插【版权所有，侵权必究】【转载请注明来源】件:
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【作者：唐霜】// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)
也可以传入一个选项对象:
【原创不易，请尊重版权】【未经授权禁止转载】转载请注明出处：www.tangshuang.netVue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止注册相同插件多【本文首发于唐霜的博客】原创内容，盗版必究。次，届时只会注册一次该插件。
【访问 www.tangshuang.net 获取更多精彩内容】
一些插件，如 vue-router 如未经授权，禁止复制转载。【转载请注明来源】果 Vue 是全局变量则自动调用 Vue未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net.use() 。不过在模块环境中应当始终【作者：唐霜】本文版权归作者所有，未经授权不得转载。显式调用 Vue.use() :
// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)
生命周期
生命周期，是组件思想中非常重要的一个环节【本文受版权保护】本文作者：唐霜，转载请注明出处。。简单的说就是一个组件从一个类，被实例化未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。之后执行的一系列操作，到最后这个实例被销未经授权，禁止复制转载。【版权所有，侵权必究】毁的整个过程。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】什么是生命周期？
每个 Vue 实例在被创建之前都要经过一本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】系列的初始化过程。例如，实例需要配置数据未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net观测(data observer)、编译【未经授权禁止转载】【原创不易，请尊重版权】模版、挂载实例到 DOM ，然后在数据变【版权所有，侵权必究】原创内容，盗版必究。化时更新 DOM 。在这个过程中，实例也【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net会调用一些 生命周期钩子 ，这就给我们提【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。供了执行自定义逻辑的机会。
【原创不易，请尊重版权】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net我们只需要在实例中使用这些钩子函数，那么【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。当生命周期进行到特定位置时，就会调用这些【未经授权禁止转载】【转载请注明来源】函数，从而进行函数中规定的操作，这样就可本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】以在一个实例的不同生命阶段执行一些你想要【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net执行的操作。
【作者：唐霜】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【作者：唐霜】钩子的 this 指向调用它的 Vue 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】实例。一些用户可能会问 Vue.js 是转载请注明出处：www.tangshuang.net【版权所有，侵权必究】否有“控制器”的概念？答案是，没有。组件【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net的自定义逻辑可以分布在这些钩子中。
未经授权，禁止复制转载。【原创不易，请尊重版权】生命周期示意图
转载请注明出处：www.tangshuang.net
不用牢牢记住这张图，你需要的时候，打开转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】本书，找到这里即可。这张图将来会在你的开本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】发中经常用到。
生命周期钩子函数
所有的生命周期钩子自动绑定 this 上未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】下文到实例中，因此你可以访问数据，对属性【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net和方法进行运算。这意味着 你不能使用箭头【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net函数来定义一个生命周期方法 (例如 cr【未经授权禁止转载】【本文首发于唐霜的博客】eated: () => this本文作者：唐霜，转载请注明出处。【转载请注明来源】.fetchTodos())。这是因为箭原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net头函数绑定了父上下文，因此 this 与【版权所有】唐霜 www.tangshuang.net【本文受版权保护】你期待的 Vue 实例不同， this.原创内容，盗版必究。转载请注明出处：www.tangshuang.netfetchTodos 的行为未定义。
【本文受版权保护】本文版权归作者所有，未经授权不得转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。beforeCreate
在实例初始化之后，数据观测(data o【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。bserver) 和 event/wat【原创不易，请尊重版权】未经授权，禁止复制转载。cher 事件配置之前被调用。
未经授权，禁止复制转载。【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】created
实例已经创建完成之后被调用。在这一步，实【未经授权禁止转载】【原创内容，转载请注明出处】例已完成以下的配置：数据观测(data 【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netobserver)，属性和方法的运算， 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。watch/event 事件回调。然而，【转载请注明来源】【作者：唐霜】挂载阶段还没开始，$el 属性目前不可见【转载请注明来源】【转载请注明来源】。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【版权所有，侵权必究】beforeMount
在挂载开始之前被调用：相关的 rende本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。r 函数首次被调用。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【未经授权禁止转载】【版权所有，侵权必究】该钩子在服务器端渲染期间不被调用。
【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【版权所有】唐霜 www.tangshuang.netmounted
el 被新创建的 vm.$el 替换，并【转载请注明来源】【版权所有，侵权必究】挂载到实例上去之后调用该钩子。如果 ro本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ot 实例挂载了一个文档内元素，当 mo【作者：唐霜】原创内容，盗版必究。unted 被调用时 vm.$el 也在本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。文档内。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net该钩子在服务器端渲染期间不被调用。
【原创不易，请尊重版权】【转载请注明来源】beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】渲染和打补丁之前。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net你可以在这个钩子中进一步地更改状态，这不【版权所有，侵权必究】未经授权，禁止复制转载。会触发附加的重渲染过程。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】该钩子在服务器端渲染期间不被调用。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【转载请注明来源】updated
由于数据更改导致的虚拟 DOM 重新渲染本文作者：唐霜，转载请注明出处。原创内容，盗版必究。和打补丁，在这之后会调用该钩子。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【作者：唐霜】当这个钩子被调用时，组件 DOM 已经更【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。新，所以你现在可以执行依赖于 DOM 的【作者：唐霜】【版权所有，侵权必究】操作。然而在大多数情况下，你应该避免在此【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】期间更改状态，因为这可能会导致更新无限循【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】环。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。该钩子在服务器端渲染期间不被调用。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【本文受版权保护】activated
keep-alive 组件激活时调用。
【关注微信公众号：wwwtangshuangnet】
该钩子在服务器端渲染期间不被调用。
参考：构建组件 – keep-al【转载请注明来源】【转载请注明来源】ive动态组件 – keep-al【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ive
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】deactivated
keep-alive 组件停用时调用。
【本文受版权保护】
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全原创内容，盗版必究。未经授权，禁止复制转载。可用。
本文版权归作者所有，未经授权不得转载。
该钩子在服务器端渲染期间不被调用。
destroyed
Vue 实例销毁后调用。调用后，Vue 【原创不易，请尊重版权】【原创内容，转载请注明出处】实例指示的所有东西都会解绑定，所有的事件本文作者：唐霜，转载请注明出处。原创内容，盗版必究。监听器会被移除，所有的子实例也会被销毁。
原创内容，盗版必究。
该钩子在服务器端渲染期间不被调用。
Virtual DOM 虚拟DOM
终于写（copy）了那么多章之后，要来谈【版权所有】唐霜 www.tangshuang.net【转载请注明来源】一谈Virtual DOM。相信很多人对本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。这项技术早都垂涎三尺，想要对它的原理进行【本文首发于唐霜的博客】【未经授权禁止转载】窥探。本章将结合vue简单梳理Virtu【本文首发于唐霜的博客】【本文受版权保护】al DOM的原理。
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。vue2.0之后才支持Virtual D【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。OM，它介于编译template和渲染界【转载请注明来源】【原创内容，转载请注明出处】面之间。
【版权所有，侵权必究】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netVirtual DOM的灵感来源
DOM是一个很昂贵的对象，之所以昂贵，是著作权归作者所有，禁止商业用途转载。【本文受版权保护】因为它内部的方法太多，而且相互联系。DO本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。M本质也是一个对象，但是这个对象首先有非【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】常多的属性和方法，一个DOM节点对象就会本文版权归作者所有，未经授权不得转载。【转载请注明来源】占用非常多的内存，其次，当你操作DOM节本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。点的时候，DOM对象会不断操作自己，同时未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。还会操作和自己相关的其他DOM节点对象，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net所以整个DOM树是牵一发而动全身，操作D著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。OM就会消耗很多资源。
【转载请注明来源】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。既然DOM是一个对象，跟javascri【版权所有】唐霜 www.tangshuang.net【作者：唐霜】pt的其他对象并没有本质上的不同，那么，【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】可以不可以在另一个空间复制一个和DOM结【版权所有，侵权必究】未经授权，禁止复制转载。构相同的对象，但是，这个新的对象会删除很【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。多方法或属性，只保留几个必要的，而操作这本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】些对象的时候，不会有那么高消耗的连带操作未经授权，禁止复制转载。原创内容，盗版必究。，这样操作这个对象和操作DOM就完全是两【作者：唐霜】本文作者：唐霜，转载请注明出处。回事，性能上肯定快很多。最后，就是当操作本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】完之后，怎么把这个对象跟真实的DOM映射【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】起来？你可能还记得前面提到过一个key属原创内容，盗版必究。【本文首发于唐霜的博客】性，通过一个唯一标记来确定哪些位置改变了转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。，针对这些改变的对象，找到对应的DOM节【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。点，进行重新渲染。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】vue2.0中的Virtual DOM
在前面的阅读中，你已经见过VNode了，【本文受版权保护】【原创不易，请尊重版权】它是vue2里面加入的一种新对象，用来实【作者：唐霜】本文版权归作者所有，未经授权不得转载。现Virtual DOM。在vue渲染真【转载请注明来源】【原创不易，请尊重版权】实的DOM之前，内部的响应式系统改变的都未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。是VNode。响应式系统在下一章讲。
【本文受版权保护】原创内容，盗版必究。VNode模拟DOM树
在vue中Virtual DOM是通过V【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】Node类来表达的，每个DOM元素或vu本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。e组件都对应一个VNode对象。VNod本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】e结构如下（图来自《vue.js权威指南【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。》）：
【原创内容，转载请注明出处】
VNode
它包含了tag, text, elm, 转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。data, parent, childr本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。en等属性。它可以由真实的DOM生成，也转载请注明出处：www.tangshuang.net原创内容，盗版必究。可以由组件生成。如果由组件生成的话，VN【作者：唐霜】【本文首发于唐霜的博客】ode的componentOptions【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。有值，而如果由DOM生成，则该值空。
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net那么有什么方法获取一个元素的VNode呢原创内容，盗版必究。【未经授权禁止转载】？没有。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】【未经授权禁止转载】VNodeComponentOptions
如果VNode是由组件生成的，所有的组件本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】相关信息都在这个对象里面。
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】VNodeData
VNode中的节点数据data属性的详细转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。描述，包括slot, ref, stat原创内容，盗版必究。未经授权，禁止复制转载。icClass, style, clas【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.nets, props, attrs, tra【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netnsition, directives等本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】信息。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。VNodeDirective
VNodeData中的directive【版权所有，侵权必究】【作者：唐霜】s属性的详细信息，包括name, val【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ue, oldValue, arg, m【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netodifiers等。
未经授权，禁止复制转载。未经授权，禁止复制转载。如何生成VNode？
前面我们提到过render函数的参数cr著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。eateElement，其实你再回头去看本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。createElement这个函数，就大本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】概清楚是怎么回事，它实际上就生成了VNo【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。de（一个对象）。但是如果我们传入了te转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。mplate而没有传入render函数呢【本文首发于唐霜的博客】【本文首发于唐霜的博客】？vue会通过一个ast语法优化，对我们原创内容，盗版必究。未经授权，禁止复制转载。传入的template经过HTML解析器著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。之后的对象转化为给createEleme本文作者：唐霜，转载请注明出处。【本文受版权保护】nt的参数。
【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】总之，你会发现，vue的render函数【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】实际上是要生成VNode，它到真实的DO【本文首发于唐霜的博客】【原创内容，转载请注明出处】M，还有一个过程。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】VNode patch生成DOM
Virtual DOM之所以快，是因为在【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net生成真实的DOM之前，通过内部的一个简单【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】的多的对象的对比，判断是否有变化，具体的【作者：唐霜】【版权所有，侵权必究】变化在哪里，这个对比的过程比直接操作DO原创内容，盗版必究。未经授权，禁止复制转载。M要快非常多。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。vue还有一个特点，VNode还具有队列【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。，当VNode发生变化时，会放在一个队列本文作者：唐霜，转载请注明出处。【本文受版权保护】里，并不会马上去更新DOM，而是在遍历完未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】整个队列之后才更新DOM。所以性能上又好【本文受版权保护】【版权所有】唐霜 www.tangshuang.net了一些。
【版权所有，侵权必究】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netvue里对比新旧DOM的方法是patch【原创不易，请尊重版权】【原创不易，请尊重版权】Vnode这个方法，当它决定是否要更新D【未经授权禁止转载】转载请注明出处：www.tangshuang.netOM之前，会比较DOM节点对应的新旧VN【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ode，只有不同时，才进行更新，这个对比【版权所有，侵权必究】【原创内容，转载请注明出处】是在VNode内部，因此比对比DOM快很【本文首发于唐霜的博客】【本文受版权保护】多。patchValue这个方法是vue【作者：唐霜】【版权所有】唐霜 www.tangshuang.net里面非常出色，可以说是vue里面使得Vi本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】rtual DOM可行的核心部分。它的实未经授权，禁止复制转载。【转载请注明来源】现比较复杂，本书也说不清楚，你要是有兴趣【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】，可以阅读源码，细心研究。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。vue生成真正的DOM靠createEl【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。m方法，它把一个VNode真正转化为真实本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】的DOM。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。响应式原理
我们已经涵盖了大部分的基础知识 R【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。11; 现在是时候深入底层原理了！Vue转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net 最显著的特性之一便是不太引人注意的响应【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net式系统(reactivity syste【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netm)。模型层(model)只是普通 Ja【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】vaScript 对象，修改它则更新视图【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】(view)。这会让状态管理变得非常简单原创内容，盗版必究。【原创内容，转载请注明出处】且直观，不过理解它的工作原理以避免一些常本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】见的问题也是很重要的。在本章中，我们将开【版权所有，侵权必究】原创内容，盗版必究。始深入挖掘 Vue 响应式系统的底层细节【本文受版权保护】【原创内容，转载请注明出处】。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net如何追踪变化
把一个普通 JavaScript 对象传本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。给 Vue 实例的 data 选项，Vu【转载请注明来源】原创内容，盗版必究。e 将遍历此对象所有的属性，并使用 Object.definePropert转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。y 把这些属性全部转为 getter/se【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。tter。Object.definePr著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netoperty 是仅 ES5 支持，且无法【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 shim 的特性，这也就是为什么 Vu本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】e 不支持 IE8 以及更低版本浏览器的【作者：唐霜】【本文受版权保护】原因。
【未经授权禁止转载】未经授权，禁止复制转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net用户看不到 getter/setter，【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】但是在内部它们让 Vue 追踪依赖，在属【关注微信公众号：wwwtangshuangnet】【作者：唐霜】性被访问和修改时通知变化。这里需要注意的【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】问题是浏览器控制台在打印数据对象时 ge转载请注明出处：www.tangshuang.net【作者：唐霜】tter/setter 的格式化并不同，【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
【本文受版权保护】【转载请注明来源】【转载请注明来源】每个组件实例都有相应的 watcher 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net实例对象，它会在组件渲染的过程中把属性记未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net录为依赖，之后当依赖项的 setter 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net被调用时，会通知 watcher 重新计【未经授权禁止转载】【原创不易，请尊重版权】算，从而致使它关联的组件得以更新。
【本文首发于唐霜的博客】
变化检测问题
受现代 JavaScript 的限制（以【本文受版权保护】【原创不易，请尊重版权】及废弃 Object.observe），【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。Vue 不能检测到对象属性的添加或删除。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】由于 Vue 会在初始化实例时对属性执行【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 getter/setter 转化过程，【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net所以属性必须在 data 对象上存在才能【未经授权禁止转载】【未经授权禁止转载】让 Vue 转换它，这样才能让它是响应的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。。例如：
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】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本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ct, key, value) 方法将响原创内容，盗版必究。转载请注明出处：www.tangshuang.net应属性添加到嵌套的对象上：
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】Vue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set 实例方法，【原创内容，转载请注明出处】原创内容，盗版必究。这也是全局 Vue.set 方法的别名：
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】this.$set(this.someObject,'b',2)
有时你想向已有对象上添加一些属性，例如使【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net用 Object.assign() 或 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。_.extend() 方法来添加属性。但【作者：唐霜】【关注微信公众号：wwwtangshuangnet】是，添加到对象上的新属性不会触发更新。在原创内容，盗版必究。【作者：唐霜】这种情况下可以创建一个新的对象，让它包含【原创不易，请尊重版权】【本文受版权保护】原对象的属性和新的属性：
【本文首发于唐霜的博客】【转载请注明来源】// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
声明响应式属性
由于 Vue 不允许动态添加根级响应式属未经授权，禁止复制转载。【作者：唐霜】性，所以你必须在初始化实例前声明根级响应【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】式属性，哪怕只是一个空值:
【本文受版权保护】未经授权，禁止复制转载。【未经授权禁止转载】【转载请注明来源】var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你在 data 选项中未声明 mes【转载请注明来源】著作权归作者所有，禁止商业用途转载。sage，Vue 将警告你渲染函数在试图【作者：唐霜】著作权归作者所有，禁止商业用途转载。访问的属性不存在。
【转载请注明来源】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。这样的限制在背后是有其技术原因的，它消除【原创内容，转载请注明出处】【本文首发于唐霜的博客】了在依赖项跟踪系统中的一类边界情况，也使【未经授权禁止转载】原创内容，盗版必究。 Vue 实例在类型检查系统的帮助下运行【本文受版权保护】著作权归作者所有，禁止商业用途转载。的更高效。而且在代码可维护性方面也有一点本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。重要的考虑：data 对象就像组件状态的未经授权，禁止复制转载。【原创内容，转载请注明出处】概要，提前声明所有的响应式属性，可以让组转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】件代码在以后重新阅读或其他开发人员阅读时【作者：唐霜】本文作者：唐霜，转载请注明出处。更易于被理解。
原创内容，盗版必究。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】异步更新队列
可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，【本文受版权保护】著作权归作者所有，禁止商业用途转载。Vue 将开启一个队列，并缓冲在同一事件原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net循环中发生的所有数据改变。如果同一个 w【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。atcher 被多次触发，只会一次推入到【原创内容，转载请注明出处】【作者：唐霜】队列中。这种在缓冲时去除重复数据对于避免【版权所有，侵权必究】原创内容，盗版必究。不必要的计算和 DOM 操作上非常重要。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net然后，在下一个的事件循环“tick”中，【本文受版权保护】【版权所有，侵权必究】Vue 刷新队列并执行实际（已去重的）工【版权所有，侵权必究】【转载请注明来源】作。Vue 在内部尝试对异步队列使用原生【原创不易，请尊重版权】原创内容，盗版必究。的 Promise.then 和 Mut本文版权归作者所有，未经授权不得转载。【作者：唐霜】ationObserver，如果执行环境【本文受版权保护】著作权归作者所有，禁止商业用途转载。不支持，会采用 setTimeout(f【作者：唐霜】著作权归作者所有，禁止商业用途转载。n, 0) 代替。
原创内容，盗版必究。原创内容，盗版必究。例如，当你设置 vm.someData 未经授权，禁止复制转载。原创内容，盗版必究。= ‘new value&#【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】8217; ，该组件不会立即重新渲染。当【作者：唐霜】【转载请注明来源】刷新队列时，组件会在事件循环队列清空时的未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net下一个“tick”更新。多数情况我们不需【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。要关心这个过程，但是如果你想在 DOM 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。状态更新后做点什么，这就可能会有些棘手。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】虽然 Vue.js 通常鼓励开发人员沿着【关注微信公众号：wwwtangshuangnet】【本文受版权保护】“数据驱动”的方式思考，避免直接接触 D本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。OM，但是有时我们确实要这么做。为了在数转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】据变化之后等待 Vue 完成更新 DOM【转载请注明来源】未经授权，禁止复制转载。 ，可以在数据变化之后立即使用 Vue.【未经授权禁止转载】【作者：唐霜】nextTick(callback) 。未经授权，禁止复制转载。原创内容，盗版必究。这样回调函数在 DOM 更新完成后就会调未经授权，禁止复制转载。未经授权，禁止复制转载。用。例如：
【转载请注明来源】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net<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 实例上：
【未经授权禁止转载】【本文首发于唐霜的博客】【未经授权禁止转载】转载请注明出处：www.tangshuang.netVue.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本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】来切换视图，它有完整的中文文档，而且内容本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net不多，很快就可以看完，所以本书就不完完全【版权所有】唐霜 www.tangshuang.net【作者：唐霜】全的copy过来了，你可以进入官方的中文文档阅读。
本文版权归作者所有，未经授权不得转载。
本章主要是想让你能够使用vue-rou未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netter进行开发，对于深层的机制就不予阐述【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】了。
安装和代码结构
和VueResource的安装一样，vu转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.nete-router的安装也非常简单：
【原创不易，请尊重版权】【本文受版权保护】import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
接下来，打算使用它来进行路由了：
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。// 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【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netRouter的一个实例传给Vue实例。而【原创不易，请尊重版权】【作者：唐霜】实例化VueRouter的时候，传入一个【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。routes，routes是一个数组，数转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】组的每个元素是一个组件（构造器参数）。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】其实，我们也可以传一个组件构造器进去，路【本文受版权保护】【作者：唐霜】由实例创建时，会自动创建这个组件的实例。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net当这样的代码运行之后。当你访问/foo的【原创不易，请尊重版权】【本文首发于唐霜的博客】时候，就会在<router-vie本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netw></router-vie转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。w>这个地方替换为Foo这个组件的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。渲染结果。当你切换url为/bar的时候本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，渲染的就是Bar这个组件的渲染结果。也转载请注明出处：www.tangshuang.net原创内容，盗版必究。就是视图随着url改变而改变。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有，侵权必究】实例化参数配置
上面的new VueRouter的时候，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。需要传入参数，对路由实例进行配置，那么有未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net哪些配置项可选呢？
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netroutes
- 类型: Array<RouteCo本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】nfig> 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。
- RouteConfig 的类型定义： 【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】
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;
}
上面的红色字段可能是我们使用的最多的字段本文版权归作者所有，未经授权不得转载。【本文受版权保护】。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netmode
- 类型: string 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
- 默认值: “hashR【转载请注明来源】本文版权归作者所有，未经授权不得转载。21; (浏览器环境) | “【版权所有】唐霜 www.tangshuang.net【本文受版权保护】;abstract” (No原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。de.js 环境) 【本文首发于唐霜的博客】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】
- 可选值: “hashR【本文受版权保护】原创内容，盗版必究。21; | “history【转载请注明来源】本文版权归作者所有，未经授权不得转载。” | “abs【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】tract”配置路由模式:
- hash: 使用 URL hash 值来未经授权，禁止复制转载。【未经授权禁止转载】作路由。支持所有浏览器，包括不支持 HT【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ML5 History Api 的浏览器著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。。 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【版权所有，侵权必究】
- history: 依赖 HTML5 Hi【作者：唐霜】【转载请注明来源】story API 和服务器配置。查看 HTML5 History 模式. 本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- abstract: 支持所有 JavaS【关注微信公众号：wwwtangshuangnet】【本文受版权保护】cript 运行环境，如 Node.js原创内容，盗版必究。【原创内容，转载请注明出处】 服务器端。如果发现没有浏览器的 API本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net，路由会自动强制进入这个模式。 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
base
- 类型: string 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。
- 默认值: “/”【版权所有，侵权必究】【本文首发于唐霜的博客】。应用的基路径。例如，如果整个单页应用服【转载请注明来源】著作权归作者所有，禁止商业用途转载。务在 /app/ 下，然后 base 就【原创不易，请尊重版权】【转载请注明来源】应该设为 “/app/未经授权，禁止复制转载。【作者：唐霜】221;。 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
linkActiveClass
- 类型: string 【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- 默认值: “router-l【未经授权禁止转载】【原创不易，请尊重版权】ink-active”。全局【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。配置 <router-link&g转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。t; 的默认『激活 class 类名』。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】参考 router-link. 【版权所有，侵权必究】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。
scrollBehavior
- 类型: Function 原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】
- 更多详情参考 滚动行为. 【本文受版权保护】【版权所有，侵权必究】
(
to: Route,
from: Route,
savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}
router-view
<router-view>&【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。lt;/router-view>就【关注微信公众号：wwwtangshuangnet】【转载请注明来源】是用来显示VueRouter实例的渲染位原创内容，盗版必究。本文作者：唐霜，转载请注明出处。置。<router-view>未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net; 组件是一个 functional 组【版权所有，侵权必究】【原创内容，转载请注明出处】件，渲染路径匹配到的视图组件。<r著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】outer-view> 渲染的组件【作者：唐霜】【转载请注明来源】还可以内嵌自己的 <router-原创内容，盗版必究。原创内容，盗版必究。view>，根据嵌套路径，渲染嵌套著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】组件。
本文作者：唐霜，转载请注明出处。
有时候想同时（同级）展示多个视图，而不原创内容，盗版必究。本文作者：唐霜，转载请注明出处。是嵌套展示，例如创建一个布局，有 sid【转载请注明来源】【未经授权禁止转载】ebar（侧导航） 和 main（主内容未经授权，禁止复制转载。【原创内容，转载请注明出处】） 两个视图，这个时候命名视图就派上用场【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。了。你可以在界面中拥有多个单独命名的视图转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。，而不是只有一个单独的出口。如果 rou著作权归作者所有，禁止商业用途转载。【转载请注明来源】ter-view 没有设置名字，那么默认【未经授权禁止转载】【转载请注明来源】为 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>
一个视图使用一个组件渲染，因此对于同个路未经授权，禁止复制转载。【本文受版权保护】由，多个视图就需要多个组件。确保正确使用著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】 components 配置（带上 s）原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。：
【转载请注明来源】【原创内容，转载请注明出处】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netconst router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
这个时候在实例化VueRouter的时候【原创内容，转载请注明出处】【未经授权禁止转载】，就不是传component了，而是传给著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。components这个参数了。在com著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ponents里面，就要使用键值对的形式转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，传入不同的组件构造器给不同的name。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】Router 实例
属性
router.app
【本文首发于唐霜的博客】【转载请注明来源】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】- 类型: Vue instance 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文受版权保护】
- 配置了 router 的 Vue 根实例【本文首发于唐霜的博客】【转载请注明来源】。 原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。
router.mode
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】未经授权，禁止复制转载。- 类型: string 【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
- 路由使用的 模式。 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
router.currentRoute
【原创不易，请尊重版权】【原创不易，请尊重版权】- 类型: Route 【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net
- 当前路由对应的 路由信息对象. 【本文首发于唐霜的博客】【作者：唐霜】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】
方法
router.beforeEach(gu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ard)
原创内容，盗版必究。
router.afterEach(ho【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ok)
- 增加全局的导航钩子。参考 导航钩子. 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】
router.push(location【本文首发于唐霜的博客】【原创内容，转载请注明出处】)
著作权归作者所有，禁止商业用途转载。
router.replace(loca本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】tion)
【未经授权禁止转载】
router.go(n)
【版权所有】唐霜 www.tangshuang.net
router.back()
【本文受版权保护】
router.forward()
- 动态的导航到一个新 url。参考 编程式导航. 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
router.getMatchedCom著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ponents(location?)
【未经授权禁止转载】【本文首发于唐霜的博客】- 返回目标位置或是当前路由匹配的组件数组（【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。是数组的定义/构造类，不是实例）。通常在著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。服务端渲染的数据预加载时时候。 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。
router.resolve(locat【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netion, current?, appen【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。d?)
著作权归作者所有，禁止商业用途转载。【作者：唐霜】【作者：唐霜】- 2.1.0+ 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
- 解析目标位置（格式和 <route【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】r-link> 的 to prop【未经授权禁止转载】【原创内容，转载请注明出处】 一样），返回包含如下属性的对象： 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】
{
location: Location;
route: Route;
href: string;
}
router.addRoutes(rou著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。tes)
【原创不易，请尊重版权】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】- 2.2.0+ 【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net
- 动态添加更多的路由规则。参数必须是一个符【作者：唐霜】【本文受版权保护】合 routes 选项要求的数组。 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net
router.onReady(callb【原创不易，请尊重版权】【本文受版权保护】ack)
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。- 2.2.0+ 【本文受版权保护】【转载请注明来源】
- 添加一个会在第一次路由跳转完成时被调用的【版权所有，侵权必究】原创内容，盗版必究。回调函数。此方法通常用于等待异步的导航钩【本文受版权保护】【未经授权禁止转载】子完成，比如在进行服务端渲染的时候。 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
动态路由匹配
参数匹配
我们经常需要把某种模式匹配到的所有路由，本文作者：唐霜，转载请注明出处。【转载请注明来源】全都映射到同个组件。例如，我们有一个 U【转载请注明来源】未经授权，禁止复制转载。ser 组件，对于所有 ID 各不相同的【本文首发于唐霜的博客】【本文受版权保护】用户，都要使用这个组件来渲染。那么，我们【本文受版权保护】著作权归作者所有，禁止商业用途转载。可以在 vue-router 的路由路径本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。中使用『动态路径参数』（dynamic 【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。segment）来达到这个效果：
未经授权，禁止复制转载。原创内容，盗版必究。const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像 /user/foo 和 /u【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ser/bar 都将映射到相同的路由。
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net一个『路径参数』使用冒号 : 标记。当匹本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。配到一个路由时，参数值会被设置到 thi本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nets.$route.params，可以在每【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】个组件内使用。于是，我们可以更新 Use著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。r 的模板，输出当前用户的 ID：
【版权所有，侵权必究】【原创不易，请尊重版权】【作者：唐霜】【原创不易，请尊重版权】const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
你可以在一个路由中设置多段『路径参数』，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。对应的值都会设置到 $route.par著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netams 中。例如：
【原创不易，请尊重版权】【未经授权禁止转载】| 模式 | 匹配路径 | $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【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netRL 中有查询参数）、$route.ha原创内容，盗版必究。原创内容，盗版必究。sh 等等。你可以查看 API 文档 的详细说明。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【作者：唐霜】著作权归作者所有，禁止商业用途转载。响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /u【原创内容，转载请注明出处】【未经授权禁止转载】ser/foo 导航到 user/bar【转载请注明来源】【未经授权禁止转载】，原来的组件实例会被复用。因为两个路由都原创内容，盗版必究。【本文首发于唐霜的博客】渲染同个组件，比起销毁再创建，复用则显得原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net更加高效。不过，这也意味着组件的生命周期【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net钩子不会再被调用。
【本文受版权保护】【作者：唐霜】【转载请注明来源】复用组件时，想对路由参数的变化作出响应的【原创不易，请尊重版权】【原创不易，请尊重版权】话，你可以简单地 watch（监测变化）本文作者：唐霜，转载请注明出处。【作者：唐霜】 $route 对象：
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
高级匹配模式
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。配模式，例如：可选的动态路径参数、匹配零著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net个或多个、一个或多个，甚至是自定义正则匹【原创不易，请尊重版权】未经授权，禁止复制转载。配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】匹配。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】本文作者：唐霜，转载请注明出处。匹配优先级
有时候，同一个路径可以匹配多个路由，此时本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。，匹配的优先级就按照路由的定义顺序：谁先【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】定义的，谁的优先级就最高。
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创内容，转载请注明出处】嵌套路由
实际生活中的应用界面，通常由多层嵌套的组【转载请注明来源】本文作者：唐霜，转载请注明出处。件组合而成。同样地，URL 中各段动态路著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net径也按某种结构对应嵌套的各层组件。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net借助 vue-router，使用嵌套路由【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】配置，就可以很简单地表达这种关系。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【转载请注明来源】接着上节创建的 app：
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】<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&【转载请注明来源】转载请注明出处：www.tangshuang.netgt; 是最顶层的出口，渲染最高级路由匹【未经授权禁止转载】原创内容，盗版必究。配到的组件。同样地，一个被渲染组件同样可本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】以包含自己的嵌套 <router-【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】view>。例如，在 User 组转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。件的模板添加一个 <router-【本文受版权保护】【原创内容，转载请注明出处】view>：
【转载请注明来源】【本文受版权保护】【本文受版权保护】const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件，需要在 Vue【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】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原创内容，盗版必究。路径。 这让你充分的使用嵌套组件而无须设【原创不易，请尊重版权】【未经授权禁止转载】置嵌套的路径。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】你会发现，children 配置就是像 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。routes 配置一样的路由配置数组，所【版权所有，侵权必究】【原创内容，转载请注明出处】以呢，你可以嵌套多层路由。
【版权所有，侵权必究】【原创不易，请尊重版权】【转载请注明来源】此时，基于上面的配置，当你访问 /use转载请注明出处：www.tangshuang.net原创内容，盗版必究。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> 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。组件支持用户在具有路由功能的应用中（点击原创内容，盗版必究。【本文首发于唐霜的博客】）导航。 通过 to 属性指定目标地址，未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】默认渲染成带有正确链接的 <a&g【原创内容，转载请注明出处】【原创内容，转载请注明出处】t; 标签，可以通过配置 tag 属性生【作者：唐霜】本文作者：唐霜，转载请注明出处。成别的标签.。另外，当目标路由成功激活时【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】，链接元素自动设置一个表示激活的 CSS本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net 类名。
原创内容，盗版必究。【原创内容，转载请注明出处】<router-link> 转载请注明出处：www.tangshuang.net【作者：唐霜】比起写死的 <a href=转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】221;…”&g【版权所有，侵权必究】【转载请注明来源】t; 会好一些，理由如下：
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。- 无论是 HTML5 history 模式【本文受版权保护】本文作者：唐霜，转载请注明出处。还是 hash 模式，它的表现行为一致，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。所以，当你要切换路由模式，或者在 IE9【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。 降级使用 hash 模式，无须作任何变本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。动。 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】
- 在 HTML5 history 模式下，本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】router-link 会拦截点击事件，【版权所有，侵权必究】【未经授权禁止转载】让浏览器不在重新加载页面。 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】
- 当你在 HTML5 history 模式【原创内容，转载请注明出处】【本文受版权保护】下使用 base 选项之后，所有的 to本文作者：唐霜，转载请注明出处。【本文受版权保护】 属性都不需要写（基路径）了。 原创内容，盗版必究。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
Props
to
- 类型: string | Locatio【版权所有，侵权必究】转载请注明出处：www.tangshuang.netn 著作权归作者所有，禁止商业用途转载。【作者：唐霜】
- required 转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
表示目标路由的链接。当被点击后，内部会立【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】刻把 to 的值传到 router.pu著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。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 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】
- 默认值: false 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
设置 replace 属性的话，当点击时【版权所有】唐霜 www.tangshuang.net【作者：唐霜】，会调用 router.replace(【原创不易，请尊重版权】【转载请注明来源】) 而不是 router.push()，著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】于是导航后不会留下 history 记录【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。。
【作者：唐霜】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 <router-link :to="{ path: '/abc'}" replace></router-link>
append
- 类型: boolean 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
- 默认值: false 【版权所有，侵权必究】【本文受版权保护】
设置 append 属性后，则在当前（相【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。对）路径前添加基路径。例如，我们从 /a【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】 导航到一个相对路径 b，如果没有配置 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】append，则路径为 /b，如果配了，【作者：唐霜】【版权所有，侵权必究】则为 /a/b
【未经授权禁止转载】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net <router-link :to="{ path: 'relative/path'}" append></router-link>
tag
- 类型: string 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- 默认值: “a” 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】
有时候想要 <router-lin【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】k> 渲染成某种标签，例如 <【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。;li>。 于是我们使用 tag 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】prop 类指定何种标签，同样它还是会监著作权归作者所有，禁止商业用途转载。【转载请注明来源】听点击，触发导航。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --> <li>foo</li>
active-class
- 类型: string 【本文首发于唐霜的博客】【原创内容，转载请注明出处】
- 默认值: “router-l【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ink-active” 【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【本文首发于唐霜的博客】
设置 链接激活时使用的 CSS 类名。默【作者：唐霜】【原创不易，请尊重版权】认值可以通过路由的构造选项 linkAc未经授权，禁止复制转载。【原创内容，转载请注明出处】tiveClass 来全局配置。
【作者：唐霜】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【作者：唐霜】exact
- 类型: boolean 未经授权，禁止复制转载。【转载请注明来源】
- 默认值: false 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。
“是否激活” 默【本文受版权保护】著作权归作者所有，禁止商业用途转载。认类名的依据是 inclusive ma【原创不易，请尊重版权】转载请注明出处：www.tangshuang.nettch （全包含匹配）。 举个例子，如果著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net当前的路径是 /a 开头的，那么 <本文作者：唐霜，转载请注明出处。【本文受版权保护】;router-link to=R本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。21;/a”> 也会被原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】设置 CSS 类名。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net按照这个规则，<router-li转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netnk to=”/”著作权归作者所有，禁止商业用途转载。【本文受版权保护】;> 将会点亮各个路由！想要链接使【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】用 “exact 匹配模式&转载请注明出处：www.tangshuang.net原创内容，盗版必究。#8221;，则使用 exact 属性：
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】<!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>
events
- 类型: string | Array&l【原创不易，请尊重版权】转载请注明出处：www.tangshuang.nett;string> 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】
- 默认值: ‘click【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。217; 转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net
2.1.0+才有。声明可以用来触发导航的本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】事件。可以是一个字符串或是一个包含字符串转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】的数组。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】将”激活时的CSS类名”应用在外层元素
有时候我们要让 “激活时的C【作者：唐霜】著作权归作者所有，禁止商业用途转载。SS类名” 应用在外层元素，【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。而不是 <a> 标签本身，那【转载请注明来源】【本文受版权保护】么可以用 <router-link原创内容，盗版必究。原创内容，盗版必究。> 渲染外层元素，包裹着内层的原生【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 <a> 标签：
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】未经授权，禁止复制转载。【作者：唐霜】<router-link tag="li" to="/foo"> <a>/foo</a> </router-link>
在这种情况下，<a> 将作为【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】真实的链接（它会获得正确的 href 的本文版权归作者所有，未经授权不得转载。【本文受版权保护】），而 “激活时的CSS类名【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。” 则设置到外层的 <原创内容，盗版必究。未经授权，禁止复制转载。li>。
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】用代码切换URL
除了使用 <router-link【本文受版权保护】【转载请注明来源】> 创建 a 标签来定义导航链接，转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】我们还可以借助 router 的实例方法【原创不易，请尊重版权】【本文首发于唐霜的博客】，通过编写代码来实现。
【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】router.push(location)
想要导航到不同的 URL，则使用 rou【作者：唐霜】未经授权，禁止复制转载。ter.push 方法。这个方法会向 h著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netistory 栈添加一个新的记录，所以，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net当用户点击浏览器后退按钮时，则回到之前的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】 URL。
【版权所有，侵权必究】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。当你点击 <router-link【作者：唐霜】【版权所有】唐霜 www.tangshuang.net> 时，这个方法会在内部调用，所以原创内容，盗版必究。【原创不易，请尊重版权】说，点击 <router-link原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 :to=”…&转载请注明出处：www.tangshuang.net【本文受版权保护】#8221;> 等同于调用 rou本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ter.push(…)。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】| 声明式 | 编程式 |
|---|---|
| <router-link :to=”…”> | router.push(…) |
该方法的参数可以是一个字符串路径，或者一【作者：唐霜】转载请注明出处：www.tangshuang.net个描述地址的对象。例如：
【原创内容，转载请注明出处】【原创不易，请尊重版权】未经授权，禁止复制转载。未经授权，禁止复制转载。// 字符串
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 很像，唯一的著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】不同就是，它不会向 history 添加原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。新记录，而是跟它的方法名一样 —— 替换【作者：唐霜】【本文首发于唐霜的博客】掉当前的 history 记录。
未经授权，禁止复制转载。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。| 声明式 | 编程式 |
|---|---|
| <router-link :to=”…” replace> | router.replace(…) |
router.go(n)
这个方法的参数是一个整数，意思是在 hi【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】story 记录中向前或者后退多少步，类【本文首发于唐霜的博客】原创内容，盗版必究。似 window.history.go(未经授权，禁止复制转载。【原创内容，转载请注明出处】n)。
【关注微信公众号：wwwtangshuangnet】
例子
// 在浏览器记录中前进一步，等同于 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【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netter.go 跟 window.history.pushS转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。tate、 window.history【本文受版权保护】【未经授权禁止转载】.replaceState 和 wind【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ow.history.go好像， 实际上它们确实是效仿 windo【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。w.history API 的。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】【本文受版权保护】因此，如果你已经熟悉 Browser History APIs，那么在 vue-router 中操作 【转载请注明来源】转载请注明出处：www.tangshuang.nethistory 就是超级简单的。
【版权所有，侵权必究】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】还有值得提及的，vue-router 的【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】导航方法 （push、 replace、本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。 go） 在各类路由模式（history未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。、 hash 和 abstract）下表本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】现一致。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。重定向 和 别名
重定向
重定向也是通过 routes 配置来完成【原创不易，请尊重版权】【本文受版权保护】，下面例子是从 /a 重定向到 /b：
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】未经授权，禁止复制转载。const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
【版权所有，侵权必究】【作者：唐霜】【本文首发于唐霜的博客】未经授权，禁止复制转载。const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法，动态返回重定向目标：
原创内容，盗版必究。转载请注明出处：www.tangshuang.net【转载请注明来源】const router = new VueRouter({
routes: [
{
path: '/a',
redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}
}
]
})
别名
『重定向』的意思是，当用户访问 /a时，转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】URL 将会被替换成 /b，然后匹配路由【本文首发于唐霜的博客】【原创内容，转载请注明出处】为 /b，那么『别名』又是什么呢？
原创内容，盗版必究。转载请注明出处：www.tangshuang.net/a 的别名是 /b，意味着，当用户访问【转载请注明来源】【原创不易，请尊重版权】 /b 时，URL 会保持为 /b，但是【版权所有】唐霜 www.tangshuang.net【作者：唐霜】路由匹配则为 /a，就像用户访问 /a 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。一样。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【作者：唐霜】上面对应的路由配置为：
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【本文首发于唐霜的博客】const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
『别名』的功能让你可以自由地将 UI 结【本文受版权保护】【作者：唐霜】构映射到任意的 URL，而不是受限于配置【本文受版权保护】原创内容，盗版必究。的嵌套路由结构。
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。$router和$route
在组件内部可以通过this.$route【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】r和this.$route获取路由信息。
原创内容，盗版必究。未经授权，禁止复制转载。【本文受版权保护】this.$router
router这个实例化对象的引用。所以，本文作者：唐霜，转载请注明出处。【作者：唐霜】上面说的Router实例里面的属性和方法【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。，this.$router都有，于是就可本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】以用它来操作路由了，比如跳转路由之类的。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。this.$route
当前url对应的路由信息，主要包括下面信本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。息：
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】$route.path
类型: string
【原创内容，转载请注明出处】
字符串，对应当前路由的路径，总是解析为【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】绝对路径，如 “/foo/b【转载请注明来源】原创内容，盗版必究。ar”。
$route.params
类型: Object
【原创内容，转载请注明出处】
一个 key/value 对象，包含了【原创不易，请尊重版权】【原创不易，请尊重版权】 动态片段 和 全匹配片段，如果没有路由未经授权，禁止复制转载。原创内容，盗版必究。参数，就是一个空对象。
$route.query
类型: Object
【原创不易，请尊重版权】
一个 key/value 对象，表示 【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】URL 查询参数。例如，对于路径 /fo【作者：唐霜】【关注微信公众号：wwwtangshuangnet】o?user=1，则有 $route.q本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】uery.user == 1，如果没有查【本文首发于唐霜的博客】【未经授权禁止转载】询参数，则是个空对象。
$route.hash
类型: string
著作权归作者所有，禁止商业用途转载。
当前路由的 hash 值 (带 #) 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，如果没有 hash 值，则为空字符串。
$route.fullPath
类型: string
【转载请注明来源】
完成解析后的 URL，包含查询参数和 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nethash 的完整路径。
$route.matched
类型: Array<RouteRe本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。cord>
本文作者：唐霜，转载请注明出处。
一个数组，包含当前路由的所有嵌套路径片本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net段的 路由记录 。路由记录就是 rout【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。es 配置数组中的对象副本（还有在 ch【转载请注明来源】【转载请注明来源】ildren 数组）。
const router = new VueRouter({
routes: [
// 下面的对象就是 route record
{ path: '/foo', component: Foo,
children: [
// 这也是个 route record
{ path: 'bar', component: Bar }
]
}
]
})
当 URL 为 /foo/bar，$ro转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ute.matched 将会是一个包含从原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。上到下的所有对象（副本）。
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net$route.name
当前路由的名称，如果有的话。
【作者：唐霜】转载请注明出处：www.tangshuang.net【作者：唐霜】区别
$router是实例化对象，而$rout【版权所有】唐霜 www.tangshuang.net【本文受版权保护】e仅仅是当前的路由信息，两则完全不同。相本文版权归作者所有，未经授权不得转载。【作者：唐霜】对来说，$router丰富的多，还提供了本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】很多方法来操作路由。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。钩子
我们可以通过一些钩子，来改变vue-ro【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netuter导航的默认行为。vue-rout本文作者：唐霜，转载请注明出处。原创内容，盗版必究。er 提供的导航钩子主要用来拦截导航，让【原创内容，转载请注明出处】【原创内容，转载请注明出处】它完成跳转或取消。有多种方式可以在路由导【版权所有】唐霜 www.tangshuang.net【作者：唐霜】航发生时执行钩子：全局的, 单个路由独享【转载请注明来源】原创内容，盗版必究。的, 或者组件级的。
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net全局钩子
你可以使用 router.beforeE著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netach 注册一个全局的 before 钩原创内容，盗版必究。【本文受版权保护】子：
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时，全局的 before 未经授权，禁止复制转载。原创内容，盗版必究。钩子按照创建顺序调用。钩子是异步解析执行【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，此时导航在所有钩子 resolve 完【未经授权禁止转载】【版权所有，侵权必究】之前一直处于 等待中。
未经授权，禁止复制转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。【本文受版权保护】每个钩子方法接收三个参数：
【作者：唐霜】【版权所有，侵权必究】【转载请注明来源】- to: Route: 即将要进入的目标 路由对象 【原创内容，转载请注明出处】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
- from: Route: 当前导航正要离本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。开的路由 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net
- next: Function: 一定要调【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net用该方法来 resolve 这个钩子。执本文版权归作者所有，未经授权不得转载。【本文受版权保护】行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。如果全部钩子执行完了，则导航的状态就是 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】confirmed （确认的）。 未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- next(false): 中断当前的导航【未经授权禁止转载】转载请注明出处：www.tangshuang.net。如果浏览器的 URL 改变了（可能是用【本文受版权保护】【转载请注明来源】户手动或者浏览器后退按钮），那么 URL原创内容，盗版必究。转载请注明出处：www.tangshuang.net 地址会重置到 from 路由对应的地址【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】。 【版权所有，侵权必究】原创内容，盗版必究。【未经授权禁止转载】转载请注明出处：www.tangshuang.net
- next(‘/’【作者：唐霜】本文版权归作者所有，未经授权不得转载。) 或者 next({ path: &#本文作者：唐霜，转载请注明出处。原创内容，盗版必究。8216;/’ }): 跳转未经授权，禁止复制转载。【原创不易，请尊重版权】到一个不同的地址。当前的导航被中断，然后【作者：唐霜】【版权所有，侵权必究】进行一个新的导航。 原创内容，盗版必究。【作者：唐霜】本文作者：唐霜，转载请注明出处。
未经授权，禁止复制转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
确保要调用 next 方法，否则钩子就不【版权所有，侵权必究】原创内容，盗版必究。会被 resolved。
【版权所有，侵权必究】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。同样可以注册一个全局的 after 钩子【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，不过它不像 before 钩子那样，a【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。fter 钩子没有 next 方法，不能本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。改变导航：
【本文受版权保护】【本文受版权保护】【原创内容，转载请注明出处】router.afterEach(route => {
// ...
})
某个路由独享的钩子
你可以在路由配置上直接定义 before转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。Enter 钩子：
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些钩子与全局 before 钩子的方法【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。参数是一样的。
转载请注明出处：www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】组件内的钩子
最后，你可以在路由组件内直接定义以下路由【原创不易，请尊重版权】【版权所有，侵权必究】导航钩子：
【本文首发于唐霜的博客】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。- beforeRouteEnter 【本文受版权保护】【作者：唐霜】
- beforeRouteUpdate (2【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。.2 新增) 【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net
- beforeRouteLeave 【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【访问 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 钩子 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】不能 访问 this，因为钩子在导航确认本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。前被调用,因此即将登场的新组件还没被创建本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】。
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。不过，你可以通过传一个回调给 next来本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】访问组件实例。在导航被确认的时候执行回调转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，并且把组件实例作为回调方法的参数。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
你可以 在 beforeRouteLea【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ve 中直接访问 this。这个 lea【作者：唐霜】本文作者：唐霜，转载请注明出处。ve 钩子通常用来禁止用户在还未保存修改未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。前突然离开。可以通过 next(fals著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nete) 来取消导航。
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】过渡
vue里面提供了过渡的一些基础操作，比如【转载请注明来源】本文作者：唐霜，转载请注明出处。通过切换元素的class属性，配合css【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】实现过渡效果，在vue-router中也【关注微信公众号：wwwtangshuangnet】【转载请注明来源】提供了过渡效果，让你在切换view时可以【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】更加酷炫。本章就来整体介绍vue里面的过【未经授权禁止转载】【原创内容，转载请注明出处】渡相关的知识。
【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【转载请注明来源】【本文受版权保护】过渡效果
概述
Vue 在插入、更新或者移除 DOM 时【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。，提供多种不同方式的应用过渡效果。包括以【版权所有，侵权必究】【本文首发于唐霜的博客】下工具：
【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有，侵权必究】- 在 CSS 过渡和动画中自动应用 cla著作权归作者所有，禁止商业用途转载。【转载请注明来源】ss 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】
- 可以配合使用第三方 CSS 动画库，如 【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。Animate.css 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。
- 在过渡钩子函数中使用 JavaScrip本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】t 直接操作 DOM 【作者：唐霜】【原创不易，请尊重版权】
- 可以配合使用第三方 JavaScript转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net 动画库，如 Velocity.js 【未经授权禁止转载】【本文首发于唐霜的博客】
在这里，我们只会讲到进入、离开和列表的过【本文首发于唐霜的博客】未经授权，禁止复制转载。渡， 你也可以看下一节的 管理过渡状态.
【未经授权禁止转载】【转载请注明来源】原创内容，盗版必究。单元素/组件的过渡
Vue 提供了 transition 的【版权所有，侵权必究】【原创内容，转载请注明出处】封装组件，在下列情形中，可以给任何元素和本文作者：唐霜，转载请注明出处。原创内容，盗版必究。组件添加 entering/leavin本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。g 过渡
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】未经授权，禁止复制转载。- 条件渲染 （使用 v-if） 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
- 条件展示 （使用 v-show） 【本文首发于唐霜的博客】【未经授权禁止转载】【未经授权禁止转载】【本文受版权保护】
- 动态组件 【本文受版权保护】【原创内容，转载请注明出处】
- 组件根节点 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
这里是一个典型的例子：
【版权所有，侵权必究】【转载请注明来源】【转载请注明来源】<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【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net 组件中的元素时，Vue 将会做以下处理本文版权归作者所有，未经授权不得转载。【本文受版权保护】：
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】- 自动嗅探目标元素是否应用了 CSS 过渡著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】或动画，如果是，在恰当的时机添加/删除 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】CSS 类名。 原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net
- 如果没有找到 JavaScript 钩子原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】并且也没有检测到 CSS 过渡/动画，D【原创不易，请尊重版权】【作者：唐霜】OM 操作（插入/删除）在下一帧中立即执【转载请注明来源】本文版权归作者所有，未经授权不得转载。行。(注意：此指浏览器逐帧动画机制，与 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netVue，和Vue的 nextTick 概【作者：唐霜】本文版权归作者所有，未经授权不得转载。念不同) 本文作者：唐霜，转载请注明出处。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】
过渡的CSS类名
会有 4 个(CSS)类名在 enter【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net/leave 的过渡中切换
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。- v-enter: 定义进入过渡的开始状态转载请注明出处：www.tangshuang.net【作者：唐霜】。在元素被插入时生效，在下一个帧移除。 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】
- v-enter-active: 定义进入【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。过渡的结束状态。在元素被插入时生效，在 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。transition/animation【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 完成之后移除。 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】
- v-leave: 定义离开过渡的开始状态【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。。在离开过渡被触发时生效，在下一个帧移除【未经授权禁止转载】【原创内容，转载请注明出处】。 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【转载请注明来源】
- v-leave-active: 定义离开未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。过渡的结束状态。在离开过渡被触发时生效，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】在 transition/animati【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】on 完成之后移除。 【版权所有，侵权必究】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】
本文版权归作者所有，未经授权不得转载。
对于这些在 enter/leave 过【未经授权禁止转载】转载请注明出处：www.tangshuang.net渡中切换的类名，v- 是这些类名的前缀。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】使用 <transition na著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】me=”my-transit未经授权，禁止复制转载。【版权所有，侵权必究】ion”> 可以重置前【本文首发于唐霜的博客】未经授权，禁止复制转载。缀，比如 v-enter 替换为 my-本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。transition-enter。
v-enter-active 和 v-l【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。eave-active 可以控制 进入/本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。离开 过渡的不同阶段，在下面章节会有个示【转载请注明来源】原创内容，盗版必究。例说明。
原创内容，盗版必究。未经授权，禁止复制转载。CSS 过渡
常用的过渡都是使用 CSS 过渡。
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】【本文首发于唐霜的博客】下面是一个简单例子：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。<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 过渡，区别是【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】在动画中 v-enter 类名在节点插入未经授权，禁止复制转载。未经授权，禁止复制转载。 DOM 后不会立即删除，而是在 ani本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。mationend 事件触发时删除。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】示例： (省略了兼容性前缀)
【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【作者：唐霜】<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);
}
}
自定义过渡类名
我们可以通过以下特性来自定义过渡类名：
本文版权归作者所有，未经授权不得转载。【转载请注明来源】- enter-class 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- enter-active-class 本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- leave-class 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
- leave-active-class 【作者：唐霜】【版权所有，侵权必究】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】
他们的优先级高于普通的类名，这对于 Vu本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】e 的过渡系统和其他第三方 CSS 动画转载请注明出处：www.tangshuang.net【未经授权禁止转载】库，如 Animate.css 结合使用十分有用。
【版权所有，侵权必究】【转载请注明来源】示例：
【原创内容，转载请注明出处】原创内容，盗版必究。【转载请注明来源】【版权所有】唐霜 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 规则。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net如果你使用其中任何一种，Vue 能自动识【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】别类型并设置监听。
【版权所有，侵权必究】【未经授权禁止转载】但是，在一些场景中，你需要给同一个元素同【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。时设置两种过渡动效，比如 animati著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】on 很快的被触发并完成了，而 tran【转载请注明来源】本文版权归作者所有，未经授权不得转载。sition 效果还没结束。在这种情况中原创内容，盗版必究。【版权所有，侵权必究】，你就需要使用 type 特性并设置 a转载请注明出处：www.tangshuang.net【版权所有，侵权必究】nimation 或 transitio转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。n 来明确声明你需要 Vue 监听的类型原创内容，盗版必究。未经授权，禁止复制转载。。
【转载请注明来源】【本文受版权保护】【本文受版权保护】JavaScript 钩子
可以在属性中声明 JavaScript 【作者：唐霜】原创内容，盗版必究。钩子
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net<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著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netitions/animations 使用原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，也可以单独使用。
【转载请注明来源】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】当只用 JavaScript 过渡的时候【原创内容，转载请注明出处】【本文首发于唐霜的博客】， 在 enter 和 leave 中，【本文受版权保护】【本文首发于唐霜的博客】回调函数 done 是必须的 。 否则，【转载请注明来源】【本文受版权保护】它们会被同步调用，过渡会立即完成。
转载请注明出处：www.tangshuang.net【转载请注明来源】推荐对于仅使用 JavaScript 过【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。渡的元素添加 v-bind:css=&#【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。8221;false”，Vu【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】e 会跳过 CSS 的检测。这也可以避免【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。过渡过程中 CSS 的影响。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net一个使用 Velocity.js 的简单【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。例子：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。<!--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 特性设置节点的在原创内容，盗版必究。【原创不易，请尊重版权】初始渲染的过渡
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。<transition appear> <!-- ... --> </transition>
这里默认和进入和离开过渡一样，同样也可以本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。自定义 CSS 类名。
【原创内容，转载请注明出处】转载请注明出处：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.net 获取更多精彩内容】【版权所有，侵权必究】else 。最常见的多标签过渡是一个列表【版权所有，侵权必究】【转载请注明来源】和描述这个列表为空消息的元素：
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items found.</p> </transition>
可以这样使用，但是有一点需要注意：
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】当有相同标签名的元素切换时，需要通过 k著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ey 特性设置唯一的值来标记以让 Vue原创内容，盗版必究。【本文首发于唐霜的博客】 区分它们，否则 Vue 为了效率只会替【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】换相同标签内部的内容。即使在技术上没有必本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】要，给在 <transition&【转载请注明来源】未经授权，禁止复制转载。gt; 组件中的多个元素设置 key 是著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net一个更好的实践。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。示例:
原创内容，盗版必究。未经授权，禁止复制转载。<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition>
在一些场景中，也可以给通过给同一个元素的【关注微信公众号：wwwtangshuangnet】【作者：唐霜】 key 特性设置不同的状态来代替 v-【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。if 和 v-else，上面的例子可以重【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】写为：
【本文首发于唐霜的博客】【关注微信公众号：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.net 获取更多精彩内容】的时候另一个开始进入过渡。这是 <【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。transition> 的默认行为本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】 – 进入和离开同时发生。
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net在元素绝对定位在彼此之上的时候运行正常。【版权所有，侵权必究】【未经授权禁止转载】然后，我们加上 translate 让它原创内容，盗版必究。【原创不易，请尊重版权】们运动像滑动过渡。
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。同时生效的进入和离开的过渡不能满足所有要【作者：唐霜】【转载请注明来源】求，所以 Vue 提供了 过渡模式
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】- in-out: 新元素先进行过渡，完成之【未经授权禁止转载】原创内容，盗版必究。后当前元素过渡离开。 【原创不易，请尊重版权】原创内容，盗版必究。
- out-in: 当前元素先进行过渡，完成【未经授权禁止转载】本文作者：唐霜，转载请注明出处。之后新元素过渡进入。 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
用 out-in 重写之前的开关按钮过渡原创内容，盗版必究。转载请注明出处：www.tangshuang.net：
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
只用添加一个简单的特性，就解决了之前的过【关注微信公众号：wwwtangshuangnet】【本文受版权保护】渡问题而无需任何额外的代码。
【版权所有，侵权必究】【原创内容，转载请注明出处】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。in-out 模式不是经常用到，但对于一著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】些稍微不同的过渡效果还是有用的。将之前滑著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。动淡出的例子结合。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。多个组件的过渡
多个组件的过渡简单很多 – 【原创不易，请尊重版权】【原创内容，转载请注明出处】我们不需要使用 key 特性。相反，我们原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】只需要使用动态组件:
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。<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【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
- 同一时间渲染多个节点中的一个 【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。
那么怎么同时渲染整个列表，比如使用 v-【转载请注明来源】【版权所有】唐霜 www.tangshuang.netfor ？在这种场景中，使用 <t未经授权，禁止复制转载。【本文受版权保护】ransition-group> 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。组件。在我们深入例子之前，先了解关于这个【原创内容，转载请注明出处】【作者：唐霜】组件的几个特点：
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。- 不同于 <transition&g转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。t;， 它会以一个真实元素呈现：默认为一本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。个 <span>。你也可以通【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】过 tag 特性更换为其他元素。 【未经授权禁止转载】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】
- 内部元素 总是需要 提供唯一的 key 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。属性值 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
列表的进入和离开过渡
现在让我们由一个简单的例子深入，进入和离【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。开的过渡使用之前一样的 CSS 类名。
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net<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【转载请注明来源】问题。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net列表的位移过渡
<transition-group【版权所有，侵权必究】【原创内容，转载请注明出处】> 组件还有一个特殊之处。不仅可以【转载请注明来源】未经授权，禁止复制转载。进入和离开动画，还可以改变定位。要使用这【转载请注明来源】未经授权，禁止复制转载。个新功能只需了解新增的 v-move 特【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】性，它会在元素的改变定位的过程中应用。像著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】之前的类名一样，可以通过 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 使【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net用了一个叫 FLIP 简单的动画队列使用 transform【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nets 将元素从之前的位置平滑过渡新的位置。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。我们将之前实现的例子和这个技术结合，使我【转载请注明来源】【作者：唐霜】们列表的一切变动都会有动画过渡。
【转载请注明来源】转载请注明出处：www.tangshuang.net<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 过渡的元素不转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。能设置为 display: inline【版权所有，侵权必究】【本文受版权保护】 。作为替代方案，可以设置为 displ【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netay: inline-block 或者放【版权所有，侵权必究】【未经授权禁止转载】置于 flex 中。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】列表的渐进过渡
通过 data 属性与 JavaScri【本文受版权保护】【版权所有】唐霜 www.tangshuang.netpt 通信 ，就可以实现列表的渐进过渡：
【版权所有】唐霜 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.netgroup> 作为根组件，然后将任【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】何子组件放置在其中就可以了。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net使用 template 的简单例子：
未经授权，禁止复制转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。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) {
// ...
}
}
})
函数组件更适合完成这个任务：
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】Vue.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 中即使是过渡也是数据驱动的！未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】动态过渡最基本的例子是通过 name 特著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】性来绑定动态值。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】【未经授权禁止转载】<transition v-bind:name="transitionName"> <!-- ... --> </transition>
当你想用 Vue 的过渡系统来定义的 C【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】SS 过渡/动画 在不同过渡间切换会非常【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。有用。
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【未经授权禁止转载】所有的过渡特性都是动态绑定。它不仅是简单【原创内容，转载请注明出处】【访问 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 获取更多精彩内容】句老话，唯一的限制是你的想象力。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】过渡状态
Vue 的过渡系统提供了非常多简单的方法【版权所有，侵权必究】【未经授权禁止转载】设置进入、离开和列表的动效。那么对于数据【本文受版权保护】转载请注明出处：www.tangshuang.net元素本身的动效呢，比如：
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【未经授权禁止转载】原创内容，盗版必究。- 数字和运算 【未经授权禁止转载】未经授权，禁止复制转载。【本文首发于唐霜的博客】【版权所有，侵权必究】
- 颜色的显示 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】
- SVG 节点的位置 【转载请注明来源】原创内容，盗版必究。【作者：唐霜】
- 元素的大小和其他的属性 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】
所有的原始数字都被事先存储起来，可以直接【转载请注明来源】【版权所有，侵权必究】转换到数字。做到这一步，我们就可以结合 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】Vue 的响应式和组件系统，使用第三方库【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】来实现切换元素的过渡状态。
本文作者：唐霜，转载请注明出处。【本文受版权保护】状态动画 与 watcher
通过 watcher 我们能监听到任何数转载请注明出处：www.tangshuang.net【版权所有，侵权必究】值属性的数值更新。可能听起来很抽象，所以【版权所有】唐霜 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原创内容，盗版必究。 的值，通过下面的例子我们来通过 Col转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】or.js 实现一个例子：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】<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本文作者：唐霜，转载请注明出处。。当你修改一些变量，即使是一个简单的 S【作者：唐霜】著作权归作者所有，禁止商业用途转载。VG 多边形也可是实现很多难以想象的效果【版权所有，侵权必究】【本文首发于唐霜的博客】。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net原创内容，盗版必究。未经授权，禁止复制转载。See this fiddle for the complete co【本文首发于唐霜的博客】【本文首发于唐霜的博客】de behind the above 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。demo.
原创内容，盗版必究。原创内容，盗版必究。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net通过组件组织过渡
管理太多的状态转换会很快的增加 Vue 原创内容，盗版必究。转载请注明出处：www.tangshuang.net实例或者组件的复杂性，幸好很多的动画可以【原创内容，转载请注明出处】【本文受版权保护】提取到专用的子组件。我们来将之前的示例改【关注微信公众号：wwwtangshuangnet】【作者：唐霜】写一下：
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。<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
}
}
})
我们能在组件中结合使用这一节讲到各种过渡【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。策略和 Vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】vue-router过渡效果
<router-view> 【版权所有，侵权必究】【作者：唐霜】是基本的动态组件，所以我们可以用 <原创内容，盗版必究。【版权所有，侵权必究】;transition> 组件给它【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。添加一些过渡效果：
未经授权，禁止复制转载。【版权所有，侵权必究】<transition> <router-view></router-view> </transition>
<transition> 的【转载请注明来源】【原创内容，转载请注明出处】所有功能 在这里同样适用。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net单个路由的过渡
上面的用法会给所有路由设置一样的过渡效果【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，如果你想让每个路由组件有各自的过渡效果【本文首发于唐霜的博客】【转载请注明来源】，可以在各路由组件内使用 <tra【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。nsition> 并设置不同的 n【作者：唐霜】转载请注明出处：www.tangshuang.netame。
【转载请注明来源】转载请注明出处：www.tangshuang.netconst Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
}
const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}
基于路由的动态过渡
还可以基于当前路由与目标路由的变化关系，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】动态设置过渡效果：
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。<!-- 使用动态的 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 来定义全局组件，紧接着著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net用 new Vue({ el: R【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net16;#container ‘【转载请注明来源】未经授权，禁止复制转载。;}) 在每个页面内指定一个容器元素。
【本文受版权保护】【作者：唐霜】【本文受版权保护】著作权归作者所有，禁止商业用途转载。这种方式在很多中小规模的项目中运作的很好【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，在这些项目里 JavaScript 只【未经授权禁止转载】【转载请注明来源】被用来加强特定的视图。但当在更复杂的项目【转载请注明来源】【未经授权禁止转载】中，或者你的前端完全由 JavaScri【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】pt 驱动的时候，下面这些缺点将变得非常转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。明显：
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net- 全局定义(Global definiti【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netons) 强制要求每个 componen本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】t 中的命名不得重复 转载请注明出处：www.tangshuang.net【作者：唐霜】【本文受版权保护】
- 字符串模板(String templat【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netes) 缺乏语法高亮，在 HTML 有多原创内容，盗版必究。未经授权，禁止复制转载。行的时候，需要用到丑陋的 \ 本文版权归作者所有，未经授权不得转载。【转载请注明来源】未经授权，禁止复制转载。
- 不支持CSS(No CSS suppor著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】t) 意味着当 HTML 和 JavaS未经授权，禁止复制转载。原创内容，盗版必究。cript 组件化时，CSS 明显被遗漏 【本文受版权保护】【未经授权禁止转载】【原创不易，请尊重版权】
- 没有构建步骤(No build step【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。) 限制只能使用 HTML 和 ES5 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。JavaScript, 而不能使用预处理【本文受版权保护】本文作者：唐霜，转载请注明出处。器，如 Pug (formerly Ja【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。de) 和 Babel 【本文受版权保护】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】
文件扩展名为 .vue 的 single【转载请注明来源】著作权归作者所有，禁止商业用途转载。-file components(单文件【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。组件) 为以上所有问题提供了解决方法，并【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】且还可以使用 Webpack 或 Bro本文版权归作者所有，未经授权不得转载。【转载请注明来源】wserify 等构建工具。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net现在我们获得：
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】转载请注明出处：www.tangshuang.net原创内容，盗版必究。- 完整语法高亮 【转载请注明来源】【未经授权禁止转载】【本文首发于唐霜的博客】【转载请注明来源】
- CommonJS 模块 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。
- 组件化的 CSS 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
正如我们说过的，我们可以使用预处理器来构原创内容，盗版必究。未经授权，禁止复制转载。建简洁和功能更丰富的组件，比如 Jade著作权归作者所有，禁止商业用途转载。【作者：唐霜】，Babel (with ES2015 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】modules)，和 Stylus。
【本文受版权保护】【作者：唐霜】这些特定的语言只是例子，你可以只是简单地著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】使用 Babel，TypeScript，【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】SCSS，PostCSS –【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 或者其他任何能够帮助你提高生产力的预处转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net理器。
未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。【转载请注明来源】起步
针对刚接触 JavaScript 模块开发系统的用户
有了 .vue 组件，我们就进入了高级 转载请注明出处：www.tangshuang.net【作者：唐霜】JavaScript 应用领域。如果你没【转载请注明来源】【转载请注明来源】有准备好的话，意味着还需要学会使用一些附转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】加的工具：
【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。- Node Package Manager【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】 (NPM): 阅读 Getting Started guid【原创不易，请尊重版权】【未经授权禁止转载】e 直到 10: Uninstalling转载请注明出处：www.tangshuang.net【作者：唐霜】 global packages章节. 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】
- Modern JavaScript wi本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】th ES2015/16: 阅读 Bab本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。el 的 Learn ES2015 guide. 你不需要立刻记住每一个方法，但是你可【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net以保留这个页面以便后期参考。 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
在你花一些时日了解这些资源之后，我们建议【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】你参考 webpack-simple 。只要遵循指示，你就能很快的运行一个用【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】到 .vue 组件，ES2015 和 热【原创不易，请尊重版权】【原创不易，请尊重版权】重载( hot-reloading ) 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的Vue项目!
本文作者：唐霜，转载请注明出处。【转载请注明来源】本文作者：唐霜，转载请注明出处。这个模板使用 Webpack，一个能将多个模块打包成最终应用的模块打本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】包工具。 这个视频 介绍了Webpack的更多相关信息。 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】学习了这些基础知识后， 你可能想看看 这个在 Egghead.io上的 高级 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。Webpack 课程.
原创内容，盗版必究。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。在 Webpack中，每个模块被打包到 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】bundle 之前都由一个相应的 “lo【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netader” 来转换，Vue 也提供 vue-loader 插件来执行 .vue 单文件组件 的转著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】换. 这个 webpack-simple 模板已经为你准备好了所有的东西，但是如【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。果你想了解更多关于 .vue组件和 We【本文受版权保护】原创内容，盗版必究。bpack 如何一起运转的信息，你可以阅【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】读 vue-loader 的文档。
【本文首发于唐霜的博客】【版权所有，侵权必究】针对高级用户
无论你更钟情 Webpack 或是 Br本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。owserify，我们为简单的和更复杂的未经授权，禁止复制转载。【未经授权禁止转载】项目都提供了一些文档模板。我们建议浏览 github.com/vuejs-tem本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netplates，找到你需要的部分，然后参考 READM【原创内容，转载请注明出处】【本文首发于唐霜的博客】E 中的说明，使用 vue-cli 工具生成新的项目。
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】模板中使用 Webpack ，一个模块加载器加载多个模块然后构建成著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】最终应用。为了进一步了解 Webpack【转载请注明来源】【转载请注明来源】, 可以看 官方介绍视频。如果你有基础，可以看 在 Egghead.io 上的 Webp著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ack 进阶教程。
【作者：唐霜】【原创内容，转载请注明出处】【本文首发于唐霜的博客】【原创内容，转载请注明出处】vue-loader
通过vue-loader对.vue进行预本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。处理。vue-loader是webpac转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。k的一个插件，它可以对你的.vue文件进【转载请注明来源】未经授权，禁止复制转载。行预处理，即它把你的style部分进行预本文作者：唐霜，转载请注明出处。【转载请注明来源】编译之后，处理成css，把templat原创内容，盗版必究。【转载请注明来源】e部分编译成vue需要的模板，把scri原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。pt部分编译为es的javascript著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】。我们看下如何在webpack的conf未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ig文件中进行配置：
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【未经授权禁止转载】【转载请注明来源】{
module: {
loaders: [
{test: /\.vue$/, loader: 'vue-loader'},
],
},
}
.vue里面还支持预处理的其他语言来写，【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net比如style用scss来写，templ【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ate用jade来写，script用co【原创内容，转载请注明出处】未经授权，禁止复制转载。ffee来写。那么在对.vue进行编译时【原创不易，请尊重版权】【作者：唐霜】，就需要提前预编译这些语言。因此，你还得未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】安装对应的预编译模块，比如scss，你得原创内容，盗版必究。【原创内容，转载请注明出处】安装编译scss要用的node-sass【本文受版权保护】转载请注明出处：www.tangshuang.net：
【版权所有，侵权必究】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。npm install --save sass-loader node-sass
你必须在webpack的文件内配置一个v【版权所有，侵权必究】【本文首发于唐霜的博客】ue选项，vue-loader会自动调用原创内容，盗版必究。【作者：唐霜】这个选项中的loaders来进行处理：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。未经授权，禁止复制转载。{
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',
},
},
}
因为我也没有深度实践过，所以这里只是给了【版权所有，侵权必究】【本文受版权保护】参考代码，如果你在使用中遇到什么问题，可本文版权归作者所有，未经授权不得转载。【作者：唐霜】以在下方留言，让我们一起讨论你的问题。
原创内容，盗版必究。【作者：唐霜】【版权所有】唐霜 www.tangshuang.netvuex
vuex和react的flux对应，借鉴【未经授权禁止转载】【转载请注明来源】了Flux、Redux、和 The Elm Architecture。它是一个专为 Vue.js 应用程序开【原创内容，转载请注明出处】【未经授权禁止转载】发的状态管理模式，你可以通过这里深入阅读。
【转载请注明来源】【版权所有】唐霜 www.tangshuang.net什么是vuex
Vuex 是一个专为 Vue.js 应用转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状本文作者：唐霜，转载请注明出处。【本文受版权保护】态，并以相应的规则保证状态以一种可预测的【关注微信公众号：wwwtangshuangnet】【转载请注明来源】方式发生变化。Vuex 也集成到 Vue【未经授权禁止转载】【原创内容，转载请注明出处】 的官方调试工具 devtools extension，提供了诸如零配置的 time-trav本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】el 调试、状态快照导入导出等高级调试功【原创内容，转载请注明出处】【本文首发于唐霜的博客】能。
原创内容，盗版必究。【未经授权禁止转载】简单的说，vuex就是用一个全局单例模式【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。管理组件的共享状态，即用一个全局变量实现【本文受版权保护】原创内容，盗版必究。多个关联组件的状态管理，这样让组件之间发本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。生的事件可以更统一的在一个地方管理起来。
【版权所有，侵权必究】未经授权，禁止复制转载。说到底，vuex是vue的一个插件，实现本文版权归作者所有，未经授权不得转载。【作者：唐霜】组件之间的状态管理。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。编者按：vue是渐进式框架，所谓“渐进式【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】”就是说你需要的时候才用，不需要的时候不转载请注明出处：www.tangshuang.net【作者：唐霜】用，所以，当你的应用足够复杂的时候，才用【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】vuex，小应用其实没必要使用。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】vuex有一个概念叫“状态”，说白了，它【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】就是一个变量state，被挂在store【作者：唐霜】原创内容，盗版必究。上面，所谓状态，其实也就是上面说的共享的著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。数据，只不过这些数据是统一由vuex来管原创内容，盗版必究。原创内容，盗版必究。理，在不同的组件内都可以使用，并且可以更【版权所有】唐霜 www.tangshuang.net【本文受版权保护】新，不过要用commit来更新，不可以直【本文首发于唐霜的博客】未经授权，禁止复制转载。接更新state。
【未经授权禁止转载】转载请注明出处：www.tangshuang.net每一个 Vuex 应用的核心就是 sto本文作者：唐霜，转载请注明出处。【转载请注明来源】re（仓库）。”store&【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】#8221; 基本上就是一个容器，它包含原创内容，盗版必究。【版权所有，侵权必究】着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不【未经授权禁止转载】【作者：唐霜】同：
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】- Vuex 的状态存储是响应式的。当 Vu【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。e 组件从 store 中读取状态的时候著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】，若 store 中的状态发生变化，那么【本文受版权保护】本文版权归作者所有，未经授权不得转载。相应的组件也会相应地得到高效更新。 著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】
- 你不能直接改变 store 中的状态。改【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】变 store 中的状态的唯一途径就是显原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的【未经授权禁止转载】【未经授权禁止转载】变化，从而让我们能够实现一些工具帮助我们本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。更好地了解我们的应用。 【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。
State
state就是vuex里面的状态，说白了【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，就是用来保存各个数据的挂载点。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。单一状态树
Vuex 使用 单一状态树 —— 是的，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】用一个对象就包含了全部的应用层级状态。至【原创不易，请尊重版权】【本文受版权保护】此它便作为一个『唯一数据源(SSOT)』本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。而存在。这也意味着，每个应用将仅仅包含一本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net个 store 实例。单一状态树让我们能未经授权，禁止复制转载。【版权所有，侵权必究】够直接地定位任一特定的状态片段，在调试的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】过程中也能轻易地取得整个当前应用状态的快原创内容，盗版必究。【未经授权禁止转载】照。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net单状态树和模块化并不冲突 —— 在后面的【本文首发于唐霜的博客】未经授权，禁止复制转载。章节里我们会讨论如何将状态和状态变更事件本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】分布到各个子模块中。
【版权所有，侵权必究】【原创内容，转载请注明出处】【转载请注明来源】本文版权归作者所有，未经授权不得转载。组件中获得状态
那么我们如何在 Vue 组件中展示状态呢著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】？由于 Vuex 的状态存储是响应式的，未经授权，禁止复制转载。【未经授权禁止转载】从 store 实例中读取状态最简单的方本文版权归作者所有，未经授权不得转载。【作者：唐霜】法就是在计算属性中返回某个状态：
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【原创内容，转载请注明出处】// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
之所以要放在计算属性中，是因为计算属性会【本文受版权保护】【版权所有】唐霜 www.tangshuang.net追踪自己的依赖，当依赖发生变化时，计算属转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】性也跟着变化。每当 store.stat【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。e.count 变化的时候, 都会重新求本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net取计算属性，并且触发更新相关联的 DOM【作者：唐霜】未经授权，禁止复制转载。。
本文版权归作者所有，未经授权不得转载。【作者：唐霜】然而，这种模式导致组件依赖的全局状态单例【本文受版权保护】【版权所有】唐霜 www.tangshuang.net。在模块化的构建系统中，在每个需要使用 本文版权归作者所有，未经授权不得转载。【本文受版权保护】state 的组件中需要频繁地导入，并且【转载请注明来源】【原创不易，请尊重版权】在测试组件时需要模拟状态。
【原创不易，请尊重版权】【原创内容，转载请注明出处】【本文受版权保护】Vuex 通过 store 选项，提供了【转载请注明来源】【版权所有】唐霜 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 选项，该原创内容，盗版必究。原创内容，盗版必究。 store 实例会注入到根组件下的所有【版权所有，侵权必究】【作者：唐霜】子组件中，且子组件能通过 this.$s【本文首发于唐霜的博客】【本文受版权保护】tore 访问到。让我们更新下 Coun【原创不易，请尊重版权】【未经授权禁止转载】ter 的实现：
【未经授权禁止转载】【原创内容，转载请注明出处】const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】态都声明为计算属性会有些重复和冗余。为了未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】解决这个问题，我们可以使用 mapSta著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。te 辅助函数帮助我们生成计算属性，让你【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】少按几次键：
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 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【本文首发于唐霜的博客】【本文受版权保护】tate 传一个字符串数组。
【转载请注明来源】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net原创内容，盗版必究。computed: mapState([ // 映射 this.count 为 store.state.count 'count' ])
组件仍保有局部状态
使用 Vuex 并不意味着你需要将所有的本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net状态放入 Vuex。虽然将所有的状态放到【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 Vuex 会使状态变化更显式和易调试，【未经授权禁止转载】转载请注明出处：www.tangshuang.net但也会使代码变得冗长和不直观。如果有些状【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net态严格属于单个组件，最好还是作为组件的局转载请注明出处：www.tangshuang.net【版权所有，侵权必究】部状态。你应该根据你的应用开发需要进行权本文版权归作者所有，未经授权不得转载。【转载请注明来源】衡和确定。
【未经授权禁止转载】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】Getters
有时候我们需要从 store 中的 st原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ate 中派生出一些状态，例如对列表进行原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】过滤并计数：
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件需要用到此属性，我们要么复本文作者：唐霜，转载请注明出处。【未经授权禁止转载】制这个函数，或者抽取到一个共享函数然后在【原创不易，请尊重版权】【本文受版权保护】多处导入它 —— 无论哪种方式都不是很理【转载请注明来源】【关注微信公众号：wwwtangshuangnet】想。
【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【作者：唐霜】Vuex 允许我们在 store 中定义原创内容，盗版必究。【转载请注明来源】『getters』（可以认为是 stor著作权归作者所有，禁止商业用途转载。【转载请注明来源】e 的计算属性）。Getters 接受 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。state 作为其第一个参数：
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】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【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】etters 对象：
【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getters 也可以接受其他 gett转载请注明出处：www.tangshuang.net【转载请注明来源】ers 作为第二个参数：
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我们可以很容易地在任何组件中使用它
著作权归作者所有，禁止商业用途转载。【本文受版权保护】computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 转载请注明出处：www.tangshuang.net【版权所有，侵权必究】store 中的 getters 映射到转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】局部计算属性
原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一未经授权，禁止复制转载。【本文首发于唐霜的博客】个名字，使用对象形式：
本文版权归作者所有，未经授权不得转载。【转载请注明来源】mapGetters({
// 映射 this.doneCount 为 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
Mutations
更改 Vuex 的 store 中的状态本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】的唯一方法是提交 mutation。Vu【本文受版权保护】原创内容，盗版必究。ex 中的 mutations 非常类似未经授权，禁止复制转载。【转载请注明来源】于事件：每个 mutation 都有一个本文版权归作者所有，未经授权不得转载。【作者：唐霜】字符串的 事件类型 (type) 和 一未经授权，禁止复制转载。【转载请注明来源】个 回调函数 (handler)。这个回【版权所有，侵权必究】【作者：唐霜】调函数就是我们实际进行状态更改的地方，并转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】且它会接受 state 作为第一个参数：
【本文首发于唐霜的博客】【本文首发于唐霜的博客】const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++ // 注意：在vuex中，只有mutations里面可以直接修改state
}
}
})
你不能直接调用一个 mutation h【转载请注明来源】转载请注明出处：www.tangshuang.netandler。这个选项更像是事件注册：“【原创内容，转载请注明出处】原创内容，盗版必究。当触发一个类型为 increment 的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 mutation 时，调用此函数。”要【转载请注明来源】【本文首发于唐霜的博客】唤醒一个 mutation handle【本文首发于唐霜的博客】【转载请注明来源】r，你需要以相应的 type 调用 st【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ore.commit 方法：
转载请注明出处：www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。store.commit('increment')
提交Payload
你可以向 store.commit 传入【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。额外的参数，即 mutation 的 载【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net荷（payload）：
转载请注明出处：www.tangshuang.net【未经授权禁止转载】本文作者：唐霜，转载请注明出处。// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
在大多数情况下，载荷应该是一个对象，这样本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net可以包含多个字段并且记录的 mutati本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。on 会更易读：
【本文首发于唐霜的博客】【原创内容，转载请注明出处】【作者：唐霜】// ...
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
对象风格的提交方式
提交 mutation 的另一种方式是直【原创内容，转载请注明出处】【原创不易，请尊重版权】接使用包含 type 属性的对象：
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。store.commit({
type: 'increment',
amount: 10
})
当使用对象风格的提交方式，整个对象都作为【作者：唐霜】原创内容，盗版必究。载荷传给 mutation 函数，因此 【转载请注明来源】本文版权归作者所有，未经授权不得转载。handler 保持不变：
【转载请注明来源】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netmutations: {
increment (state, payload) {
state.count += payload.amount
}
}
Mutations需遵守Vue的响应规则
既然 Vuex 的 store 中的状态未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net是响应式的，那么当我们变更状态时，监视状本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】态的 Vue 组件也会自动更新。这也意味转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。着 Vuex 中的 mutation 也【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】需要与使用 Vue 一样遵守一些注意事项未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。：
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【转载请注明来源】- 最好提前在你的 store 中初始化好所【本文受版权保护】【本文首发于唐霜的博客】有所需属性。 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】
- 当需要在对象上添加新属性时，你应该使用 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。Vue.set(obj, ‘未经授权，禁止复制转载。【版权所有，侵权必究】newProp’, 123) 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
使用常量替代Mutation事件类型
使用常量替代 mutation 事件类型本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】在各种 Flux 实现中是很常见的模式。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】这样可以使 linter 之类的工具发挥【原创不易，请尊重版权】【本文首发于唐霜的博客】作用，同时把这些常量放在单独的文件中可以未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。让你的代码合作者对整个 app 包含的 本文作者：唐霜，转载请注明出处。【转载请注明来源】mutation 一目了然：
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。// 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.net的大型项目中，这会很有帮助。但如果你不喜【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】欢，你完全可以不这样做。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。mutation必须是同步函数
一条重要的原则就是要记住 mutatio【转载请注明来源】原创内容，盗版必究。n 必须是同步函数。为什么？请参考下面的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】例子：
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】【未经授权禁止转载】mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
现在想象，我们正在 debug 一个 a【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。pp 并且观察 devtool 中的 m转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。utation 日志。每一条 mutat【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ion 被记录，devtools 都需要【作者：唐霜】【原创不易，请尊重版权】捕捉到前一状态和后一状态的快照。然而，在【未经授权禁止转载】【本文受版权保护】上面的例子中 mutation 中的异步未经授权，禁止复制转载。原创内容，盗版必究。函数中的回调让这不可能完成：因为当 mu【作者：唐霜】本文作者：唐霜，转载请注明出处。tation 触发的时候，回调函数还没有【版权所有】唐霜 www.tangshuang.net【转载请注明来源】被调用，devtools 不知道什么时候【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net回调函数实际上被调用 —— 实质上任何在【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。回调函数中进行的的状态的改变都是不可追踪转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。的。
【版权所有，侵权必究】原创内容，盗版必究。【作者：唐霜】在组件中提交Mutations
你可以在组件中使用 this.$stor【转载请注明来源】【转载请注明来源】e.commit(‘xxx&【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。#8217;) 提交 mutation，本文版权归作者所有，未经授权不得转载。【转载请注明来源】或者使用 mapMutations 辅助【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net函数将组件中的 methods 映射为 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。store.commit 调用（需要在根原创内容，盗版必究。【本文受版权保护】节点注入 store）。
【原创内容，转载请注明出处】原创内容，盗版必究。【原创不易，请尊重版权】import { 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，【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】不同在于：
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。- Action提交mutation，而不是【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】直接变更state 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】
- 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【未经授权禁止转载】【未经授权禁止转载】 实例具有相同方法和属性的 contex【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】t 对象，因此你可以调用 context【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】.commit 提交一个 mutatio【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】n，或者通过 context.state著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。 和 context.getters 来【本文首发于唐霜的博客】原创内容，盗版必究。获取 state 和 getters。当【原创不易，请尊重版权】【本文受版权保护】我们在之后介绍到 Modules 时，你【作者：唐霜】【原创不易，请尊重版权】就知道 context 对象为什么不是 【本文受版权保护】【原创内容，转载请注明出处】store 实例本身了。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。实践中，我们会经常会用到 ES2015 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】的 参数解构 来简化代码（特别是我们需要本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】调用 commit 很多次的时候）：
【未经授权禁止转载】原创内容，盗版必究。actions: {
increment ({ commit }) {
commit('increment')
}
}
分发Action
Action 通过 store.disp【转载请注明来源】本文版权归作者所有，未经授权不得转载。atch 方法触发：
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】store.dispatch('increment')
乍一眼看上去感觉多此一举，我们直接分发 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】mutation 岂不更方便？实际上并非本文作者：唐霜，转载请注明出处。【本文受版权保护】如此，还记得 mutation 必须同步【原创不易，请尊重版权】【转载请注明来源】执行这个限制么？Action 就不受约束未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。！我们可以在 action 内部执行异步【原创内容，转载请注明出处】【本文受版权保护】操作：
【访问 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【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ons：
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。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)
)
}
}
注意我们正在进行一系列的异步操作，并且通【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net过提交 mutation 来记录 act【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netion 产生的副作用（即状态变更）。
【未经授权禁止转载】【未经授权禁止转载】【原创不易，请尊重版权】在组件中分发Action
你在组件中使用 this.$store.本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】dispatch(‘xxx&【作者：唐霜】【本文首发于唐霜的博客】#8217;) 分发 action，或者著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】使用 mapActions 辅助函数将组【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】件的 methods 映射为 store原创内容，盗版必究。未经授权，禁止复制转载。.dispatch 调用（需要先在根节点【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net注入 store）：
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。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 什么时候结束呢？更重要的【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。是，我们如何才能组合多个 action，【版权所有，侵权必究】【原创内容，转载请注明出处】以处理更加复杂的异步流程？
【本文首发于唐霜的博客】【作者：唐霜】首先，你需要明白 store.dispa【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.nettch 可以处理被触发的action的回本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】调函数返回的Promise，并且stor本文作者：唐霜，转载请注明出处。【转载请注明来源】e.dispatch仍旧返回Promis【转载请注明来源】未经授权，禁止复制转载。e：
【作者：唐霜】本文版权归作者所有，未经授权不得转载。actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
现在你可以：
未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【未经授权禁止转载】store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以：
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】原创内容，盗版必究。actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
最后，如果我们利用 async / aw【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netait 这个 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 函数转载请注明出处：www.tangshuang.net原创内容，盗版必究。。在这种情况下，只有当所有触发函数完成后【本文受版权保护】本文版权归作者所有，未经授权不得转载。，返回的 Promise 才会执行。
【原创不易，请尊重版权】【版权所有，侵权必究】【本文受版权保护】Modules
使用单一状态树，导致应用的所有状态集中到【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。一个很大的对象。但是，当应用变得很大时，转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。store 对象会变得臃肿不堪。
【版权所有，侵权必究】【本文受版权保护】为了解决以上问题，Vuex 允许我们将 【版权所有，侵权必究】【本文受版权保护】store 分割到模块（module）。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。每个模块拥有自己的 state、muta未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nettion、action、getters、著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】甚至是嵌套子模块——从上至下进行类似的分【版权所有，侵权必究】【访问 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，接收的第一个参数是模块的局部【转载请注明来源】【转载请注明来源】状态。
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】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，根节点状态【本文首发于唐霜的博客】【原创不易，请尊重版权】会作为第三个参数：
未经授权，禁止复制转载。【作者：唐霜】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
命名空间
模块内部的 action、mutatio【本文首发于唐霜的博客】【作者：唐霜】n、和 getter 现在仍然注册在全局【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net命名空间——这样保证了多个模块能够响应同本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net一 mutation 或 action。原创内容，盗版必究。【未经授权禁止转载】你可以通过添加前缀或后缀的方式隔离各模块【转载请注明来源】【本文受版权保护】，以避免名称冲突。你也可能希望写出一个可【转载请注明来源】【原创内容，转载请注明出处】复用的模块，其使用环境不可控。例如，我们【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net想创建一个 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 未经授权，禁止复制转载。【版权所有，侵权必究】方法注册模块：
【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。store.registerModule('myModule', {
// ...
})
模块的状态将是 store.state.【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。myModule。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。模块动态注册功能可以让其他 Vue 插件【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。为了应用的 store 附加新模块，以此【未经授权禁止转载】【原创内容，转载请注明出处】来分割 Vuex 的状态管理。例如，vu【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netex-router-sync 插件可以集【未经授权禁止转载】转载请注明出处：www.tangshuang.net成 vue-router 与 vuex，【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】管理动态模块的路由状态。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。你也可以使用 store.unregis原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】terModule(moduleName【作者：唐霜】本文作者：唐霜，转载请注明出处。) 动态地卸载模块。注意，你不能使用此方【本文受版权保护】著作权归作者所有，禁止商业用途转载。法卸载静态模块（在创建 store 时声【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net明的模块）。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。小结
本章讲vue，其实就是一直在反复谈论如何【原创不易，请尊重版权】【转载请注明来源】在组件之间共享数据。vuex通过一个中间【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net的数据存储仓库store来实现组件之间的【未经授权禁止转载】转载请注明出处：www.tangshuang.net数据交换。你可以使用一个全局变量保存这个【本文首发于唐霜的博客】【本文首发于唐霜的博客】store，然后就可以在所有地方使用这个原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】store。
【本文首发于唐霜的博客】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。如果要在组件中局部使用，你须要把这个st【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ore传入到根实例，这样在每一个组件里面原创内容，盗版必究。【原创内容，转载请注明出处】都可以使用this.$store.sta原创内容，盗版必究。【原创内容，转载请注明出处】te来访问共享状态。这个状态和视图是联动【版权所有，侵权必究】原创内容，盗版必究。的，当状态在一个组件中被更改，那么其他组【未经授权禁止转载】【本文首发于唐霜的博客】件中如果使用到这个状态，那么视图也会跟着【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net更改。
【未经授权禁止转载】未经授权，禁止复制转载。【版权所有，侵权必究】【原创不易，请尊重版权】不过就像前面在探讨prop属性的时候一样未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，你不能直接通过修改this.$stor【本文受版权保护】【版权所有】唐霜 www.tangshuang.nete.state上的某个值来修改状态，你必【本文受版权保护】【转载请注明来源】须在store被创建的时候就先确定好要准【本文首发于唐霜的博客】【本文首发于唐霜的博客】备哪些数据用来共享，并且写好对应的mut【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netations，在组件内使用this.$s本文版权归作者所有，未经授权不得转载。【本文受版权保护】tore.commit来提交mutati转载请注明出处：www.tangshuang.net【本文受版权保护】ons，达到修改state的目的。com【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】mit提交是修改state的唯一方法。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net但是所有的mutations操作必须是同原创内容，盗版必究。【原创不易，请尊重版权】步的，要异步操作，就必须使用action【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.nets，和mutations使用方法一样，a【原创不易，请尊重版权】原创内容，盗版必究。ctions也必须在创建store时定义著作权归作者所有，禁止商业用途转载。【作者：唐霜】好，在组件内使用this.$store.原创内容，盗版必究。转载请注明出处：www.tangshuang.netdispatch来分发某一个action原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。。而在action函数体内，也必须通过c【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netommit来修改state。
原创内容，盗版必究。【版权所有，侵权必究】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。其他
vue-cli
vue官方提供了一个命令端工具vue-c【原创内容，转载请注明出处】未经授权，禁止复制转载。li来快速创建、编译你的组件，你可以通过这里深入阅读。
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。服务端渲染
vue2.0版本之后，开始支持服务端渲染【本文受版权保护】【作者：唐霜】。简单的来说，服务端渲染就跟以前我们直接原创内容，盗版必究。【本文受版权保护】用php输出html差不多，但是对于前后本文作者：唐霜，转载请注明出处。【转载请注明来源】端都是vue的node服务器环境而言，服未经授权，禁止复制转载。【作者：唐霜】务端渲染可以实现后端渲染完之后，前端可以原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。获知哪里是由服务端渲染的，这样前端就不用本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】自己渲染了。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net编者不是很看好服务端渲染，它使得开发的逻【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。辑变得很难理解，而且如果开发时考虑服务端【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。渲染，不得不考虑一些原本编程中不需要思考本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net的问题，这其实也违背了编程本身的乐趣。如【原创内容，转载请注明出处】【原创内容，转载请注明出处】果你看“生命周期”一章，就会发现，很多钩本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】子函数在服务端渲染的时候不被调用，这使得未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net你在编程的时候，原本对生命周期的理解会变【转载请注明来源】本文作者：唐霜，转载请注明出处。得被怀疑。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【原创内容，转载请注明出处】后记
本书作为vue的中文教程，主要是为了帮助【本文受版权保护】【作者：唐霜】那些想要尽快学会vue，使用vue进行编【转载请注明来源】【版权所有】唐霜 www.tangshuang.net程的同学准备的，所以里面涉及的内容更偏向【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】于实用性和可理解性。大部分内容都是从官网【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】或对应的api文档中拷贝过来，同时加上自本文作者：唐霜，转载请注明出处。【转载请注明来源】己的话，使得对应的知识点更容易理解一些。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。但是毕竟不可能做到完美，肯定还会有不足之【原创不易，请尊重版权】【原创内容，转载请注明出处】处，如果你在阅读中有什么疑问或不懂的地方【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net，请在下方的留言框中留言，我会第一时间解未经授权，禁止复制转载。【版权所有，侵权必究】答你。
转载请注明出处：www.tangshuang.net【作者：唐霜】【本文受版权保护】【转载请注明来源】如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。
2017-05-04 | vue