vue.js中文教程（编）
前言
在阅读了《vue.js权威指南》之后，我【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】发现它基于1.0版本已经完全不适用当前的【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】2.0版本了，大部分介绍虽然很详尽，甚至【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】还分析了源码，但是实际上感觉是在浪费纸张【原创不易，请尊重版权】【原创不易，请尊重版权】，因为读者要看源码会到github上自己未经授权，禁止复制转载。【作者：唐霜】阅读，书里面只需要告诉读者项目的代码结构【转载请注明来源】本文作者：唐霜，转载请注明出处。，让读者可以快速找到对应的源码即可。而且著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】权威指南版本落伍会带来一些使用上的困难，【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net特别是一些api无法使用的时候，很苦恼。
【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有，侵权必究】ang.net
所以，我只把这本书当做一本接触vue的【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。入门书，省略了其中非常多的部分，从中大致【本文受版权保护】原创内容，盗版必究。领略vue的使用方法和理念。我大部分时候【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，更多的是对照官网的文档进行开发，一边开【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】发一边写代码，经常发现自己找不到对应的文本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】档，翻来翻去很久，才能找到自己需要的内容本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】。
而且官网的文档不是很详细，有些注意点并没转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】有说的很详细，导致开发的时候遇到一些坑，【本文受版权保护】未经授权，禁止复制转载。或者不是很理解，使用的时候就乱用，多试几【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。次就可以试出正确用法。当然这是笨蛋的方法【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】另外，我认为vue-router和vue转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net-resource是两个必须讲清楚的插件转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，《权威指南》里面虽然也讲了，但是对照官【本文首发于唐霜的博客】【作者：唐霜】方文档，还是落伍了。不过《权威指南》的框【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net架结构很好，可以借鉴作为学习的大体框架。
【本文首发于唐霜的博客】【本文受版权保护】【作者：唐霜】未经授权，禁止复制转载。鉴于这些情况，我专门编这本书，用来帮助v【本文受版权保护】【版权所有，侵权必究】ue的学习者快速理清知识体系。注意，我用【版权所有，侵权必究】未经授权，禁止复制转载。的是“编”，也就是说本书的内容基本上是复原创内容，盗版必究。未经授权，禁止复制转载。制黏贴来的，只不过把知识结构重新梳理，以【本文受版权保护】本文作者：唐霜，转载请注明出处。便更好的学习这门框架。因此，对前人的努力【转载请注明来源】原创内容，盗版必究。做出感谢。
原创内容，盗版必究。【作者：唐霜】【转载请注明来源】转载请注明出处：www.tangshua【原创内容，转载请注明出处】【转载请注明来源】ng.net之所以没有通过gitbook等方式开源本【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】书，是因为我觉得那样更难维护，而且不利于本文作者：唐霜，转载请注明出处。【本文受版权保护】拷贝。最重要的是，那样没有一个直观的反馈【转载请注明来源】未经授权，禁止复制转载。方式，如果你在阅读本书的时候遇到一些疑问【版权所有，侵权必究】【原创不易，请尊重版权】，请在下方的留言框中进行留言，我会第一时【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】间进行回复。当然，如果本书有不足之处，也原创内容，盗版必究。【原创不易，请尊重版权】请你留言，我会完善它。
原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net【作者：唐霜】ngnet】【原创内容，转载请注明出处】背景了解
我在morningstar一直使用的都是【关注微信公众号：wwwtangshuangnet】【作者：唐霜】backbone，并且接触了compon【版权所有，侵权必究】【本文首发于唐霜的博客】ent的理念，但backbone对我来说原创内容，盗版必究。未经授权，禁止复制转载。还是太重了，于是我在寻找其他的compo【原创不易，请尊重版权】【本文受版权保护】nent替代方案，最早进入我的视线的是r原创内容，盗版必究。【本文首发于唐霜的博客】eact，但在接触之后，发现react门【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。槛稍微有点高，方法名太长，方式太复杂，可本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。以说“不符合我的审美”，当然，我还会继续【转载请注明来源】本文作者：唐霜，转载请注明出处。学习react，因为我在接触vue之后，【转载请注明来源】【未经授权禁止转载】发现react在技术理念上，确实是一个未本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】来的产品，这并不是说vue不好，vue非【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。常好，所以我才会先花时间学习它，并且在我【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。的业余项目中直接使用它。未来react只【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。会作为我的一个工具，而vue则是我当下最【版权所有】唐霜 www.tangshuang.net【本文受版权保护】佳的选择。
【未经授权禁止转载】【本文受版权保护】本文版权归作者所有，未经授权不得转载。vue是什么？
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。vue的英文意思就是“视图”，所以可以【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】知道，vue是一个偏视图的js框架，根据【原创不易，请尊重版权】【原创内容，转载请注明出处】官方的解释的理解，vue不属于MVC的范【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】畴，因为它只有MV，而且它的M是内置于框著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】架内核中，对于开发者而言，可能基本上都是【转载请注明来源】【关注微信公众号：wwwtangshuangnet】在处理V的东西。这也是为什么现在把vue【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net和react对比如此热门的原因之一。既然本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】是解决视图问题，那么不可避免的就会和DO【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。M打交道，自然就会联想到react首创的【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。Virtual DOM理念，这在后文会详【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。细分析虚拟DOM是怎么回事。vue2.0本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。也使用了Virtual DOM，因此在视原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net图层面的渲染速度也非常快。
【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ngnet】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。总之，vue是一个关注视图层面的js框架【本文受版权保护】【转载请注明来源】。
【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ang.net【本文受版权保护】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。既然是框架，而非库，那么就意味着它已经帮转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net你处理好了很多问题，当然，同时也限制了一【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】些方式。这和react不同，react实本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。际上限制更少一些，内部封装更少一些，re著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】act官方把自己称为library（库）【转载请注明来源】【版权所有，侵权必究】。虽然是一个框架，但vue并不以构建ap本文作者：唐霜，转载请注明出处。原创内容，盗版必究。p为最终目标，实际上，组件思想在vue中【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】更加突出。因此，在基于vue的开发中，请【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net更多思考组件，这和angular的时代可原创内容，盗版必究。本文作者：唐霜，转载请注明出处。能有些不同。
【作者：唐霜】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ng.net原创内容，盗版必究。【原创不易，请尊重版权】发展历史
Vue.js正式发布于2014年2月，对著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。于目前的Vue.js：
【本文受版权保护】本文作者：唐霜，转载请注明出处。【作者：唐霜】在开发人数上，覆盖70多贡献者。
【转载请注明来源】
在受关注度上，GitHub拥有 200【转载请注明来源】【转载请注明来源】00 多 Star。
【版权所有，侵权必究】
从脚手架、构建、插件化、组件化，到编辑本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net器工具、浏览器插件等，基本涵盖了从开发到【转载请注明来源】【关注微信公众号：wwwtangshuangnet】测试等多个环节。
Vue.js的发展里程碑如下：
【本文首发于唐霜的博客】未经授权，禁止复制转载。2013年12月24日，发布0.7.0。
【版权所有，侵权必究】
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【版权所有】唐霜 www.tangshuang.net.0。
【未经授权禁止转载】
2016年4月27日，发布2.0的pr本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。eview版本。
原创内容，盗版必究。
2016年10月，2.0正式版发布，整著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】个框架重新编写，性能提升，支持服务端渲染未经授权，禁止复制转载。原创内容，盗版必究。。
vue的作者
我是对国产框架比较鄙视的，特别是以前用t【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】hinkphp，但在前端领域，我接触过s【本文首发于唐霜的博客】原创内容，盗版必究。eajs，原本觉得非常不错，可是后来也湮【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net灭了，就觉得国产开发框架没戏。看到vue本文作者：唐霜，转载请注明出处。原创内容，盗版必究。之前，并不知道它的作者是中国人，觉得这个【作者：唐霜】【原创内容，转载请注明出处】项目超有国际范儿。当后来知道vue的作者【作者：唐霜】转载请注明出处：www.tangshuang.net竟然是中国人，就突然感觉不一样。当然，这转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。和框架创作者是哪国人没有太大关系，但能够本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。如此优雅的写出vue，也不得不令人敬佩。
【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ang.net本文作者：唐霜，转载请注明出处。【作者：唐霜】尤雨溪，网名尤小右，英文名Evan，毕业【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net于上海复旦附中，在美国完成大学学业，本科【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。毕业于Colgate Universit【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。y，后在Parsons设计学院获得Des【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ign & Technology【未经授权禁止转载】转载请注明出处：www.tangshuang.net艺术硕士学位，后职于纽约Google C【作者：唐霜】原创内容，盗版必究。reative Lab，现在和阿里巴巴w本文作者：唐霜，转载请注明出处。【作者：唐霜】eex合作。
【版权所有，侵权必究】
这里是他的知乎主页，你可以follow他的twitter和他交流。
作为设计专业毕业的学生，即使有googl转载请注明出处：www.tangshuang.net【未经授权禁止转载】e工作经历，能够写出vue这样高审美的框著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。架，除了跪服也没有其他。这里是teahour对他的语言采访，你可以近著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】距离听听大牛的声音。
【版权所有，侵权必究】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。et 获取更多精彩内容】【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netang.netvue和其他框架或库的比较
原本应该把标题取名“我为什么选择vue”未经授权，禁止复制转载。【作者：唐霜】，但是个人认为还是严肃点好。以下内容全部【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】来自官方文档，官方对vue和React、Angula【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】r、Ember、Knockout、Pol【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netymer、Riot这些框架都进行了比较，未经授权，禁止复制转载。未经授权，禁止复制转载。虽然是官方，但并没有一味夸自己好，而是进【本文首发于唐霜的博客】【作者：唐霜】行较为客观的比较，值得一读，可以读到一些【版权所有，侵权必究】【作者：唐霜】vue团队对其他框架的优缺点如何吸取和摒原创内容，盗版必究。【转载请注明来源】弃。本文进行了重点摘抄，如果想看完整版，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】请点链接进入。
【版权所有，侵权必究】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ng.net【访问 www.tangshuang.n【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ngnet】react
React 和 Vue 有许多相似之处，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。它们都有：
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ang.net本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua原创内容，盗版必究。【转载请注明来源】ngnet】- 使用 Virtual DOM 本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- 提供了响应式（Reactive）和组件化【版权所有，侵权必究】【本文受版权保护】（Composable）的视图组件。 【访问 www.tangshuang.n【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【原创不易，请尊重版权】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
- 将注意力集中保持在核心库，伴随于此，有配【转载请注明来源】本文作者：唐霜，转载请注明出处。套的路由和负责处理全局状态管理的库。 【版权所有，侵权必究】【转载请注明来源】【版权所有，侵权必究】【未经授权禁止转载】
React 比 Vue 生态系统和丰富的本文版权归作者所有，未经授权不得转载。【作者：唐霜】自定义渲染器更好。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。在渲染用户界面的时候，DOM 的操作成本原创内容，盗版必究。【本文首发于唐霜的博客】是最高的，不幸的是没有库可以让这些原始操【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】作变得更快。我们能做到的最好效果就是：
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】- 把必须的 Dom 更新降到最小。Reac【未经授权禁止转载】本文作者：唐霜，转载请注明出处。t 和 Vue 都是通过 Virtual本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。 Dom 抽象层来实现这一要求，而且他们【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net都实现得一样赞。 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【本文首发于唐霜的博客】【作者：唐霜】ng.net
- 在这些 Dom 操作之上，则尽可能少地添转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。加额外性能开销（即：纯 JavaScri原创内容，盗版必究。【转载请注明来源】pt 运算）。这是 Vue 和 Reac【本文受版权保护】【未经授权禁止转载】t 产生分歧之处。 【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【原创内容，转载请注明出处】ang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】
JavaScript 开销直接与求算必要【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】 DOM 操作的机制相关。尽管 Vue 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。和 React 都使用了 Virtual【本文首发于唐霜的博客】【本文首发于唐霜的博客】 Dom 实现这一点，但 Vue 的 V未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】irtual Dom 实现（复刻自 snabbdom）是更加轻量化的，因此也就比 React【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 的实现更高效。
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ng.net转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netng.net著作权归作者所有，禁止商业用途转载。编者按：我的建议是vue和react都去【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。学，从职业角度讲，两者都有可能是未来几年【本文受版权保护】未经授权，禁止复制转载。风靡一时的应用级产品，各大小公司都会上相【本文首发于唐霜的博客】未经授权，禁止复制转载。应的项目；从编程的角度讲，vue更代表时本文作者：唐霜，转载请注明出处。【本文受版权保护】代的集大成者，react更代表未来。学习【作者：唐霜】著作权归作者所有，禁止商业用途转载。而言，其实只要掌握了学习方法，其实学什么【原创不易，请尊重版权】【作者：唐霜】都很快。谁先谁后？这取决于你当前的紧迫性本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，如果你的项目中马上要用react，那就本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。先学react，但请尽量读完本书。
本文作者：唐霜，转载请注明出处。【本文受版权保护】【未经授权禁止转载】angular
Vue 的一些语法和 Angular 的转载请注明出处：www.tangshuang.net【本文受版权保护】很相似（例如 v-if vs ng-if）。因为 Angular 是 Vue 早未经授权，禁止复制转载。【原创不易，请尊重版权】期开发的灵感来源。然而，Angular 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】中存在的许多问题，在 Vue 中已经得到本文版权归作者所有，未经授权不得转载。【转载请注明来源】解决。
在 Angular 1 中，当 watc【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.nether 越来越多时会变得越来越慢，因为作著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】用域内的每一次变化，所有 watcher转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。 都要重新计算。并且，如果一些 watc著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nether 触发另一个更新，脏检查循环（di【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。gest cycle）可能要运行多次。A【原创内容，转载请注明出处】未经授权，禁止复制转载。ngular 用户常常要使用深奥的技术，【作者：唐霜】【转载请注明来源】以解决脏检查循环的问题。有时没有简单的办【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net法来优化有大量 watcher 的作用域【本文受版权保护】未经授权，禁止复制转载。。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。Vue 则根本没有这个问题，因为它使用基转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】于依赖追踪的观察系统并且异步队列更新，所【转载请注明来源】【版权所有】唐霜 www.tangshuang.net有的数据变化都是独立触发，除非它们之间有【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。明确的依赖关系。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【版权所有，侵权必究】有意思的是，Angular 2 和 Vu【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。e 用相似的设计解决了一些 Angula著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】r 1 中存在的问题。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【本文首发于唐霜的博客】Angular 1 面向的是较小的应用程【本文受版权保护】本文作者：唐霜，转载请注明出处。序，Angular 2 已转移焦点，面向本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】的是大型企业应用。在这一点上 TypeS未经授权，禁止复制转载。【版权所有，侵权必究】cript 经常会被引用，它对那些喜欢用本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 Java 或者 C# 等类型安全的语言【未经授权禁止转载】【未经授权禁止转载】的人是非常有用的。
【访问 www.tangshuang.n【作者：唐霜】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【本文受版权保护】【本文受版权保护】编者按：总之，如果你以前学过使用过ang原创内容，盗版必究。【未经授权禁止转载】ular，那么学vue会很快，并且觉得v【原创内容，转载请注明出处】【原创不易，请尊重版权】ue非常简单。如果你以前没有学过angu【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。lar，直接跳过，马上学vue，等你使用【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。vue开发半年之后再去理解angular【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，会轻松很多。
【未经授权禁止转载】【关注微信公众号：wwwtangshua原创内容，盗版必究。【版权所有，侵权必究】ngnet】Ember
编者按：不用学了，既复杂，又死板。虽然它【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】是一个齐备的框架，里面什么都有了，但是正本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】是因为它这样，导致它很难跟上时代。
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ang.net【作者：唐霜】【原创内容，转载请注明出处】Knockout
Knockout 是 MVVM 领域内的【本文受版权保护】【作者：唐霜】先驱，并且追踪依赖。它的响应系统和 Vu转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e 也很相似。它在浏览器支持以及其他方面的表现也是让人印象深刻的。它本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】最低能支持到 IE6，而 Vue 最低只未经授权，禁止复制转载。【未经授权禁止转载】能支持到 IE9。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】随着时间的推移，Knockout 的发展【作者：唐霜】未经授权，禁止复制转载。已有所放缓，并且略显有点老旧了。比如，它未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。的组件系统缺少完备的生命周期事件方法，尽【本文受版权保护】本文版权归作者所有，未经授权不得转载。管这些在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【本文受版权保护】ang.netPolymer
Polymer 是另一个由谷歌赞助的项目【转载请注明来源】【原创不易，请尊重版权】，事实上也是 Vue 的一个灵感来源。V【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ue 的组件可以粗略的类比于 Polym【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。er 的自定义元素，并且两者具有相似的开【本文受版权保护】原创内容，盗版必究。发风格。最大的不同之处在于，Polyme【本文首发于唐霜的博客】【未经授权禁止转载】r 是基于最新版的 Web Compon【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ents 标准之上，并且需要重量级的 p著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。olyfills 来帮助工作（性能下降）【转载请注明来源】原创内容，盗版必究。，浏览器本身并不支持这些功能。相比而言，【版权所有，侵权必究】转载请注明出处：www.tangshuang.netVue 在支持到 IE9 的情况下并不需【作者：唐霜】【版权所有】唐霜 www.tangshuang.net要依赖 polyfills 来工作。
【转载请注明来源】【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【转载请注明来源】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。Polymer 自定义的元素是用 HTM原创内容，盗版必究。转载请注明出处：www.tangshuang.netL 文件来创建的，这会限制使用 Java本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netScript/CSS（和被现代浏览器普遍【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】支持的语言特性）。相比之下，Vue 的单【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。文件组件允许你非常容易的使用 ES201【转载请注明来源】原创内容，盗版必究。5 和你想用的 CSS 预编译处理器。
原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【本文首发于唐霜的博客】ngnet】原创内容，盗版必究。而 Vue 和 Web Componen著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nett 标准进行深层次的整合也是完全可行的，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】比如使用 Custom Elements本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。、Shadow DOM 的样式封装。然而【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。在我们做出严肃的实现承诺之前，我们目前仍【未经授权禁止转载】转载请注明出处：www.tangshuang.net在等待相关标准成熟，进而再广泛应用于主流【本文受版权保护】未经授权，禁止复制转载。的浏览器中。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。编者按：读者应该学习一下polymer，【转载请注明来源】转载请注明出处：www.tangshuang.net主要学习它的思想，如果没有必要，可以不深转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】入学习进行开发。
【原创内容，转载请注明出处】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ang.netRiot
Riot 2.0 提供了一个类似于基于组本文版权归作者所有，未经授权不得转载。【本文受版权保护】件的开发模型（在 Riot 中称之为 T【未经授权禁止转载】【转载请注明来源】ag），它提供了小巧精美的 API。Ri【原创内容，转载请注明出处】【本文受版权保护】ot 和 Vue 在设计理念上可能有许多本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】相似处。尽管相比 Riot ，Vue 要【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net显得重一点。
未经授权，禁止复制转载。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ngnet】著作权归作者所有，禁止商业用途转载。编者按：按照尤小右的说法，riot是很不转载请注明出处：www.tangshuang.net【未经授权禁止转载】错的，但是因为它用的技术不够fashio本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】n，我也不建议花太多时间学习，除非你有一【作者：唐霜】未经授权，禁止复制转载。个东西很需要一个更小的框架，你想更有个性【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】一点。
转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netng.net原创内容，盗版必究。Vue实例
首先，你必须掌握一个概念，就是“vue实【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】例”。什么意思呢？所有的vue程序都需要著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。实例化之后使用，实例主要有两种，一个是V转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ue实例，一个是组件实例。当然，如果你把原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】router和resource加进来，它【原创不易，请尊重版权】【原创内容，转载请注明出处】们也有实例，我们可以称之为插件实例。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】未经授权，禁止复制转载。构造器
每个 Vue.js 应用都是通过构造函数【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 Vue 创建一个 Vue 的根实例 启动的：
【转载请注明来源】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。var vm = new Vue({
// 选项
})
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】生命周期钩子等选项。全部的选项可以在 API 文档中查看。
【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【作者：唐霜】【本文首发于唐霜的博客】ang.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【未经授权禁止转载】ang.net组件构造器
可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器。所谓组件构造器，就是创建一个组件的原型未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。类。
var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent()
尽管可以命令式地创建扩展实例，不过在多数【本文首发于唐霜的博客】【本文受版权保护】情况下建议将组件构造器注册为一个自定义元原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。素，然后声明式地用在模板中。我们将在后面【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。详细说明组件系统。现在你只需知道所有的 【本文受版权保护】【版权所有】唐霜 www.tangshuang.netVue.js 组件其实都是被扩展的 Vu本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。e 实例。
【作者：唐霜】【本文首发于唐霜的博客】编者按：组件是vue里面重要的话题。但是【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net对于开发者而言，其实只需要关心上面那个红【本文首发于唐霜的博客】未经授权，禁止复制转载。色的大括号里面的开发即可。组件的使用有好【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】几种，但是开发者要写的，都在这个大括号身【转载请注明来源】未经授权，禁止复制转载。上。另外，Vue.extend之后，就是【原创不易，请尊重版权】【版权所有，侵权必究】一个组件构造器，实例化以后，就是一个组件本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，下文会有一章详细介绍组件，这里暂且跳过【未经授权禁止转载】【版权所有，侵权必究】。
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ng.net【访问 www.tangshuang.n【本文受版权保护】【原创不易，请尊重版权】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。et 获取更多精彩内容】实例属性（数据代理和响应）
每个 Vue 实例都会代理其 data 对象里所有的属性：
【原创不易，请尊重版权】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ng.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之前，就把本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】所有的data都传进去。实例创建之后，其本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】实可以使用$set来加入属性，也可以实现未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net响应功能。
【访问 www.tangshuang.n【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。除了 data 属性， Vue 实例暴露【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】了一些有用的实例属性与方法。这些属性与方【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。法都有前缀 $，以便与代理的 data 属性区分。例如转载请注明出处：www.tangshuang.net原创内容，盗版必究。：
var data = { a: 1 }
var app = new Vue({
el: '#example',
data: data
})
app.$data === data // -> true
app.$el === document.getElementById('example') // -> true
实例方法
在实例里面可以自己传进去一些方法进行调用【转载请注明来源】【版权所有，侵权必究】：
【作者：唐霜】本文作者：唐霜，转载请注明出处。var app = new Vue({
methods: {
myMethod() {},
otherMethod() {
// 这里就可以使用this.myMethod()了
},
},
})
app.otherMethod() // 可以在外面调用
和this.$data一样，vue也有一【版权所有，侵权必究】【转载请注明来源】些以$开头的方法，比如app.$watc著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.neth等，这些都是vue内置的方法。
转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ng.net【作者：唐霜】实例属性和方法的完整列表中查阅 API 参考。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。模板和数据绑定
Vue的模板语法
Vue.js 使用了基于 HTML 的模【作者：唐霜】【关注微信公众号：wwwtangshuangnet】版语法，允许开发者声明式地将 DOM 绑【原创不易，请尊重版权】【未经授权禁止转载】定至底层 Vue 实例的数据。所有 Vu【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】e.js 的模板都是合法的 HTML ，【未经授权禁止转载】【作者：唐霜】所以能被遵循规范的浏览器和 HTML 解本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】析器解析。
【作者：唐霜】【原创不易，请尊重版权】【作者：唐霜】【访问 www.tangshuang.n【本文首发于唐霜的博客】【本文首发于唐霜的博客】et 获取更多精彩内容】在底层的实现上， Vue 将模板编译成虚【未经授权禁止转载】【作者：唐霜】拟 DOM 渲染函数。结合响应系统，在应【原创不易，请尊重版权】【版权所有，侵权必究】用状态改变时， Vue 能够智能地计算出【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。重新渲染组件的最小代价并应用到 DOM 转载请注明出处：www.tangshuang.net【作者：唐霜】操作上。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】未经授权，禁止复制转载。如果你熟悉虚拟 DOM 并且偏爱 Jav【本文首发于唐霜的博客】原创内容，盗版必究。aScript 的原始力量，你也可以不用【作者：唐霜】【版权所有，侵权必究】模板，直接写渲染（render）函数，使用可选的 JSX 语法。
【未经授权禁止转载】未经授权，禁止复制转载。编者按：这里说的render函数和rea未经授权，禁止复制转载。【作者：唐霜】ct里面是一模一样的。在上面实例化vue【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。的时候，如果你传入了一个template转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。参数，就会使用template，如果你传【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】入了一个render参数（函数），则会使转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。用这个函数来作为模板的渲染。
【未经授权禁止转载】【本文受版权保护】【原创不易，请尊重版权】【作者：唐霜】插值
文本
数据绑定最常见的形式就是使用 “Must著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ache” 语法（双大括号）的文本插值：
【访问 www.tangshuang.n未经授权，禁止复制转载。未经授权，禁止复制转载。et 获取更多精彩内容】【原创不易，请尊重版权】<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
msg和你传入的data.msg是绑定的原创内容，盗版必究。【未经授权禁止转载】，当你在操作实例的时候，把实例的data【原创不易，请尊重版权】【未经授权禁止转载】.msg改变了，那么视图上的这个msg也【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。会改变。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【转载请注明来源】【版权所有】唐霜 www.tangshu【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ang.netvar app = new Vue({
template: '<span>Message: {{msg}}</span>',
data: {
msg: 'Welcome!',
},
})
setTimeout(() => app.msg = 'Let us go!', 1000)
上面你要知道一个事实：app.$data转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net.msg === app.msg，而且由【作者：唐霜】本文作者：唐霜，转载请注明出处。于vue的响应系统，所以你直接app.msg = 'Let us go!'和app.$set(app.$data, 'msg', 'Let us go')是一样的。总之，因为javascript【版权所有，侵权必究】【本文受版权保护】的对象是引用型数据，所以你只要使用对了引【本文首发于唐霜的博客】原创内容，盗版必究。用，怎么搞都是一样的。
纯 HTML
双大括号会将数据解释为纯文本，而非 HT【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ML 。为了输出真正的 HTML ，你需【本文首发于唐霜的博客】【未经授权禁止转载】要使用 v-html 指令：
<div v-html="rawHtml"></div>
被插入的内容都会被当做 HTML —— 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】字符串的模板引擎。组件更适合担任 UI 未经授权，禁止复制转载。原创内容，盗版必究。重用与复合的基本单元。
你的站点上动态渲染的任意 HTML 可能本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【版权所有，侵权必究】【未经授权禁止转载】ngnet】属性
Mustache 不能在 HTML 属性本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。中使用，应使用 v-bind 指令（下文【版权所有】唐霜 www.tangshuang.net【转载请注明来源】指令一章详细说）：
原创内容，盗版必究。转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ng.net<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。求值为 false 的话该属性会被移除：
原创内容，盗版必究。原创内容，盗版必究。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。<button v-bind:disabled="someDynamicCondition">Button</button>
使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑转载请注明出处：www.tangshuang.net原创内容，盗版必究。定简单的属性键值。但实际上，对于所有的数【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net据绑定， Vue.js 都提供了完全的 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。JavaScript 表达式支持。
【原创不易，请尊重版权】【本文受版权保护】原创内容，盗版必究。{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】用域下作为 JavaScript 被解析转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netngnet】原创内容，盗版必究。<!-- 这是语句，不是表达式 -->{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->{{ if (ok) { return message } }}
模板表达式都被放在沙盒中，只能访问全局变【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定【版权所有】唐霜 www.tangshuang.net【转载请注明来源】义的全局变量。
计算属性
什么是计算属性
模板内的表达式是非常便利的，但是它们实际【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net上只用于简单的运算。在模板中放入太多的逻本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net辑会让模板过重且难以维护。例如：
【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【版权所有，侵权必究】et 获取更多精彩内容】【本文首发于唐霜的博客】【作者：唐霜】【原创内容，转载请注明出处】<div id="example">{{ message.split('').reverse().join('') }}</div>
在这种情况下，模板不再简单和清晰。在意识本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net到这是反向显示 message 之前，你【版权所有】唐霜 www.tangshuang.net【本文受版权保护】不得不再次确认第二遍。当你想要在模板中多未经授权，禁止复制转载。【转载请注明来源】次反向显示 message 的时候，问题【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。会变得更糟糕。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu原创内容，盗版必究。转载请注明出处：www.tangshuang.netang.net转载请注明出处：www.tangshua【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netng.net这就是对于任何复杂逻辑，你都应当使用计算属性的原因。
【转载请注明来源】原创内容，盗版必究。【转载请注明来源】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ang.net所谓计算属性，就是跟ES5的getter原创内容，盗版必究。【作者：唐霜】一样的，用function来定义个属性，转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】当你获取这个属性的时候，实际上是要执行这本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net个function，执行function著作权归作者所有，禁止商业用途转载。【作者：唐霜】的过程就是计算过程，所以也就叫计算属性。【作者：唐霜】著作权归作者所有，禁止商业用途转载。所有的计算属性被放在computed里面【原创内容，转载请注明出处】未经授权，禁止复制转载。，computed和data, meth【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ods同级，如下：
【未经授权禁止转载】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。var app = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
在使用reversedMessage的时著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】候，把它当做一个属性，app.reversedMessage就可以了，在模板中：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
Vue模板中的变量，都是实例的属性，比如本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net这里面的message -> ap【原创不易，请尊重版权】【未经授权禁止转载】p.message，还记得上面的数据代理著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】吗？app.message === ap【原创内容，转载请注明出处】未经授权，禁止复制转载。p.$data.message === 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。传入的data.message。
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net原创内容，盗版必究。ang.net【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ang.net你可以像绑定普通属性一样在模板中绑定计算【转载请注明来源】【转载请注明来源】属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。这种依赖关系：计算属性的 getter 原创内容，盗版必究。【未经授权禁止转载】是没有副作用，这使得它易于测试和推理。
计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中【作者：唐霜】【关注微信公众号：wwwtangshuangnet】的 method 来达到同样的效果：
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ang.net<p>Reversed message: "{{ reversedMessage() }}"</p>
// in component -------------------------------------
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个 metho【原创不易，请尊重版权】【未经授权禁止转载】d 而不是一个计算属性。对于最终的结果，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net两种方式确实是相同的。然而，不同的是计算【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。属性是基于它们的依赖进行缓存的。计算属性著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】只有在它的相关依赖发生改变时才会重新求值【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。。这就意味着只要 message 还没有【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net发生改变，多次访问 reversedMe【本文受版权保护】【关注微信公众号：wwwtangshuangnet】ssage 计算属性会立即返回之前的计算【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。结果，而不必再次执行函数。
【原创内容，转载请注明出处】【本文受版权保护】这也同样意味着下面的计算属性将不再更新，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。因为 Date.now() 不是响应式依未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。赖：
原创内容，盗版必究。【作者：唐霜】computed: {
now: function () {
return Date.now()
}
}
相比而言，只要发生重新渲染，method著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】 调用总会执行该函数。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。我们为什么需要缓存？假设我们有一个性能开【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】销比较大的的计算属性 A ，它需要遍历一转载请注明出处：www.tangshuang.net【转载请注明来源】个极大的数组和做大量的计算。然后我们可能【作者：唐霜】著作权归作者所有，禁止商业用途转载。有其他的计算属性依赖于 A 。如果没有缓【未经授权禁止转载】转载请注明出处：www.tangshuang.net存，我们将不可避免的多次执行 A 的 g转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。etter！如果你不希望有缓存，请用 m著作权归作者所有，禁止商业用途转载。【本文受版权保护】ethod 替代。
【本文受版权保护】【版权所有】唐霜 www.tangshu【作者：唐霜】【原创不易，请尊重版权】ang.net计算 setter
计算属性默认只有 getter ，不过在【本文受版权保护】【本文受版权保护】需要时你也可以提供一个 setter ：
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ngnet】// ...
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̵【转载请注明来源】原创内容，盗版必究。7; 时， setter 会被调用， v【本文受版权保护】著作权归作者所有，禁止商业用途转载。m.firstName 和 vm.las【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】tName 也相应地会被更新。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【作者：唐霜】著作权归作者所有，禁止商业用途转载。ng.net【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【作者：唐霜】ang.net观察 Watchers
在Vue里面有个方法，可以用来监听实例属原创内容，盗版必究。【未经授权禁止转载】性的变化，就是watcher，如果你用过【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netangular的话，肯定知道watche【转载请注明来源】【本文首发于唐霜的博客】r是什么。
【访问 www.tangshuang.n【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【原创不易，请尊重版权】【作者：唐霜】什么是watch
watch是和data, methods未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net, computed同级的一个参数，你可【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】以在watch里面规定你要watch的属未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。性，当这些属性发生变化的时候，它会执行对【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net应的那个函数。栗子：
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【本文受版权保护】ang.net【转载请注明来源】【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ang.netvar app = new Vue({
data: {
message: '',
msg: '',
},
watch: {
message: function() { // 当app.$data.message发生变化的时候，执行这个函数
this.msg = 'Changed!'
},
},
})
虽然计算属性在大多数情况下更合适，但有时【作者：唐霜】未经授权，禁止复制转载。也需要一个自定义的 watcher 。这原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】是为什么 Vue 提供一个更通用的方法通【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。过 watch 选项，来响应数据的变化。【作者：唐霜】【原创内容，转载请注明出处】当你想要在数据变化响应时，执行异步操作或【本文受版权保护】【版权所有，侵权必究】开销较大的操作，这是很有用的。
【未经授权禁止转载】【版权所有】唐霜 www.tangshu原创内容，盗版必究。转载请注明出处：www.tangshuang.netang.net【作者：唐霜】例如：
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n【原创内容，转载请注明出处】未经授权，禁止复制转载。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。<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我们执行异步操作（访问一个 API），限原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。制我们执行该操作的频率，并在我们得到最终【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。结果前，设置中间状态。这是计算属性无法做【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。到的。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ang.net除了 watch 选项之外，您还可以使用 vm.$watch API 命令。
【访问 www.tangshuang.n【转载请注明来源】【原创内容，转载请注明出处】et 获取更多精彩内容】【关注微信公众号：wwwtangshua原创内容，盗版必究。【本文首发于唐霜的博客】ngnet】Computed 属性 vs Watched 属性
Vue 确实提供了一种更通用的方式来观察【原创不易，请尊重版权】【本文首发于唐霜的博客】和响应 Vue 实例上的数据变动：wat【作者：唐霜】【原创不易，请尊重版权】ch 属性。当你有一些数据需要随着其它数原创内容，盗版必究。【作者：唐霜】据变动而变动时，你很容易滥用 watch本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。——特别是如果你之前使用过 Angula未经授权，禁止复制转载。【转载请注明来源】rJS。然而，通常更好的想法是使用 co原创内容，盗版必究。【转载请注明来源】mputed 属性而不是命令式的 wat原创内容，盗版必究。未经授权，禁止复制转载。ch 回调。细想一下这个例子：
【关注微信公众号：wwwtangshua【本文受版权保护】【转载请注明来源】ngnet】【本文受版权保护】著作权归作者所有，禁止商业用途转载。【本文受版权保护】<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
}
}
})
好得多了，不是吗？
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【作者：唐霜】【原创不易，请尊重版权】指令
什么是指令？
指令（Directives）是带有 v-【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。 前缀的特殊属性。指令属性的值预期是单一【作者：唐霜】转载请注明出处：www.tangshuang.net JavaScript 表达式（除了 v著作权归作者所有，禁止商业用途转载。【本文受版权保护】-for，之后再讨论）。指令的职责就是当【原创内容，转载请注明出处】【版权所有，侵权必究】其表达式的值改变时相应地将某些行为应用到【本文受版权保护】【版权所有】唐霜 www.tangshuang.net DOM 上。让我们回顾一下在介绍里的例【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】子：
【版权所有，侵权必究】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ngnet】【版权所有】唐霜 www.tangshu【作者：唐霜】【作者：唐霜】ang.net<p v-if="seen">Now you see me</p>
这里， v-if 指令将根据表达式 se【版权所有，侵权必究】未经授权，禁止复制转载。en 的值的真假来移除/插入 <p【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】> 元素。而v-if就是指令。vu【本文首发于唐霜的博客】【版权所有，侵权必究】e里面有很多内置的指令，你还可以自定义指本文版权归作者所有，未经授权不得转载。【本文受版权保护】令。
【未经授权禁止转载】【未经授权禁止转载】Vue2提供的所有指令可以在这里看到，主要有v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once。因为指令还挺重要的，所以本书会全部解释【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】一遍。
未经授权，禁止复制转载。未经授权，禁止复制转载。指令怎么用？
只需要直接将指令作为html元素的属性来【转载请注明来源】本文作者：唐霜，转载请注明出处。使用就可以了，例如<div v-if="hasChild"></div>。指令只对当前所在的这个元素起作用，它在原创内容，盗版必究。本文作者：唐霜，转载请注明出处。哪个元素上，就哪个元素做出对应的动作。
该属性的值被称为指令的“表达式”，例如v著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】-if=”isExists&【版权所有，侵权必究】转载请注明出处：www.tangshuang.net#8221;，isExists对应thi【转载请注明来源】本文版权归作者所有，未经授权不得转载。s.isExists，既然是表达式，就有转载请注明出处：www.tangshuang.net【未经授权禁止转载】返回值，它的值被传给指令，指令根据表达式【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的返回结果来决定所在的元素进行怎样的操作【原创内容，转载请注明出处】【作者：唐霜】。表达式里面的变量，都是来自vue实例的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。属性。
【版权所有，侵权必究】【转载请注明来源】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。指令也可以有参数，主要是指v-on和v-本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】bind这两个指令，它们后面跟上一个冒号本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，冒号和等号之间的内容就是参数，例如v-转载请注明出处：www.tangshuang.net【作者：唐霜】bind:src=”src”，红【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。色的src就是参数。
【本文受版权保护】【访问 www.tangshuang.n原创内容，盗版必究。【未经授权禁止转载】et 获取更多精彩内容】一些指令还有修饰符，用.符号连接，主要是【未经授权禁止转载】【版权所有】唐霜 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。为了安全起见【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，不要用。
【本文首发于唐霜的博客】【原创不易，请尊重版权】转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netng.net【转载请注明来源】条件判断型指令
v-if
<div v-if="is"></div>
如果this.is值为真，则当前元素会被【版权所有，侵权必究】未经授权，禁止复制转载。插入到dom中，如果is为假，当前元素会转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】被从dom中移除。因此，v-if是有do【作者：唐霜】转载请注明出处：www.tangshuang.netm消耗的，使用时不应该反复更改is值。
【版权所有，侵权必究】【版权所有，侵权必究】v-show
<div v-show="is"></div>
v-show和v-if是一样的用法，但是【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】相对于v-if不一样。v-if是会把这个【原创内容，转载请注明出处】【转载请注明来源】元素从dom中移走或者插入的，但是v-s转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】how是不会的，is为false的时候，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】会给这个元素加一个display:non【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】e，仅仅是隐藏这个元素，所以不会有dom【转载请注明来源】【作者：唐霜】的消耗。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。v-else
必须跟v-if一起用。并且不需要表达式，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。还记得上面说的“表达式”是什么意思吗？
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。<div v-if="Math.random() > 0.5"> Now you see me</div><div v-else> Now you don't</div>
v-else-if
2.1.0版本新增的指令，所以2.0版本转载请注明出处：www.tangshuang.net【作者：唐霜】是没有的，使用的时候注意。前一兄弟元素必原创内容，盗版必究。【版权所有，侵权必究】须有 v-if 或 v-else-if。著作权归作者所有，禁止商业用途转载。【作者：唐霜】表示 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
基于源数据多次渲染元素或模板块。也就是说【转载请注明来源】转载请注明出处：www.tangshuang.net，跟前面的指令不一样，上面的指令当前元素本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】只会出现0次或1次，而v-for可以让当转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。前元素重复渲染。此指令之值，必须使用特定【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net语法 alias in expressi本文作者：唐霜，转载请注明出处。【作者：唐霜】on ，为当前遍历的元素提供别名：
【本文首发于唐霜的博客】【原创内容，转载请注明出处】<div v-for="item in items">{{ item.text }}</div>
另外也可以为数组索引指定别名（或者用于对【版权所有，侵权必究】【原创内容，转载请注明出处】象的键）：
【版权所有，侵权必究】转载请注明出处：www.tangshua【转载请注明来源】【作者：唐霜】ng.net<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 默认行为试着不改变整体，而是【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net替换元素。迫使其重新排序的元素,您需要提未经授权，禁止复制转载。【版权所有，侵权必究】供一个 key 的特殊属性:
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ng.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它会基于key的变化重新排列元素顺序，并【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。且会移除key不存在的元素。具体可以阅读这里。下文“特殊属性”一节会讲到。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】et 获取更多精彩内容】绑定型指令
绑定型指令会有参数，也就是有冒号，参数是本文作者：唐霜，转载请注明出处。【未经授权禁止转载】绑定的属性或事件。绑定型指令还有修饰符。
未经授权，禁止复制转载。【版权所有，侵权必究】原创内容，盗版必究。【关注微信公众号：wwwtangshua【作者：唐霜】【本文首发于唐霜的博客】ngnet】v-bind
动态地绑定一个或多个attr或prop属本文作者：唐霜，转载请注明出处。【作者：唐霜】性。简单的说就是，通过v-bind绑定一本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】个属性，这个属性可以是html原本有的，【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】也可以是某些特殊的，绑定的表达式的值赋值【原创不易，请尊重版权】【转载请注明来源】给这个属性。例如：<img v-bind:src="imgSrc">，imgSrc是实例的imgSrc属性t【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.nethis.imgSrc，它的值将会作为字符【本文受版权保护】【本文受版权保护】串作为属性src的值。绑定之后，如果th转载请注明出处：www.tangshuang.net【本文受版权保护】is.imgSrc更改，那么src的值也著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】随着更改，图片也就会换成另外一幅。
在绑定 class 或 style 特性【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】时，支持其它类型的值，如数组或对象。下文【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。会详细讲class和style属性的问题【版权所有，侵权必究】【版权所有，侵权必究】。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ngnet】【本文首发于唐霜的博客】在绑定 prop 时，prop 必须在子原创内容，盗版必究。本文作者：唐霜，转载请注明出处。组件中声明，这你得读到组件那一章才会了解著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】什么是自组件，以及自组件的props。
【未经授权禁止转载】未经授权，禁止复制转载。没有参数时，可以绑定到一个包含键值对的对【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。象。注意此时 class 和 style【转载请注明来源】【关注微信公众号：wwwtangshuangnet】 绑定不支持数组和对象。
【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ngnet】【版权所有，侵权必究】未经授权，禁止复制转载。v-bind:可以缩写成单独的一个冒号:转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net。
【版权所有，侵权必究】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。修饰符：
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。- .prop – 被用于绑定 【转载请注明来源】【原创不易，请尊重版权】DOM 属性。(what’s the differenc【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nete?)。编者按：prop和attr是不同的，【转载请注明来源】【原创不易，请尊重版权】熟悉jquery的同学应该知道，比如ch【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】eckbox的checked属性。 本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
- .camel – trans著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。form the kebab-case 【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】attribute name into 【本文受版权保护】【原创内容，转载请注明出处】camelCase. (supporte【版权所有】唐霜 www.tangshuang.net【作者：唐霜】d since 2.1.0) 【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【转载请注明来源】et 获取更多精彩内容】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ang.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例如 SVG 的 viewBox 属性：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。<svg :view-box.camel="viewBox"></svg>
v-on
绑定事件监听器。事件类型由参数指定。表达【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】式可以是一个方法的名字或一个内联语句，如【版权所有，侵权必究】【本文首发于唐霜的博客】果没有修饰符也可以省略。
【作者：唐霜】
用在普通元素上时，只能监听 原生 DO未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netM 事件。用在自定义元素组件上时，也可以未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】监听子组件触发的自定义事件。关于这个“子原创内容，盗版必究。原创内容，盗版必究。组件的自定义事件”也可以在下文的“组件”本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net一章学到。
在监听原生 DOM 事件时，方法以事件为【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。唯一的参数。如果使用内联语句，语句可以访【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】问一个 $event 属性： v-on:原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netclick=”handle(著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。‘ok’, $e未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。vent)”。
【未经授权禁止转载】【原创内容，转载请注明出处】【未经授权禁止转载】v-on:可以缩写成@。
【原创不易，请尊重版权】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netang.net修饰符：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ng.net【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】ang.net- .stop – 调用 eve【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。nt.stopPropagation()【版权所有，侵权必究】转载请注明出处：www.tangshuang.net。 【作者：唐霜】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【转载请注明来源】ang.net【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netang.net
- .prevent – 调用 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】event.preventDefault【作者：唐霜】【原创内容，转载请注明出处】()。 本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创不易，请尊重版权】
- .capture – 添加事【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】件侦听器时使用 capture 模式。 【关注微信公众号：wwwtangshua【作者：唐霜】本文版权归作者所有，未经授权不得转载。ngnet】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
- .self – 只当事件是从【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。侦听器绑定的元素本身触发时才触发回调。 转载请注明出处：www.tangshua【原创内容，转载请注明出处】【未经授权禁止转载】ng.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。
- .{keyCode | keyAlias转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net} – 只当事件是从特定键触【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。发时才触发回调。 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- .native – 监听组件【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。根元素的原生事件。 转载请注明出处：www.tangshua【版权所有，侵权必究】原创内容，盗版必究。ng.net【本文首发于唐霜的博客】原创内容，盗版必究。
- .once – 只触发一次回本文版权归作者所有，未经授权不得转载。【本文受版权保护】调。 【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- .left – (2.2.0【本文受版权保护】著作权归作者所有，禁止商业用途转载。) 只当点击鼠标左键时触发。 原创内容，盗版必究。未经授权，禁止复制转载。【版权所有，侵权必究】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。et 获取更多精彩内容】
- .right – (2.2.【转载请注明来源】未经授权，禁止复制转载。0) 只当点击鼠标右键时触发。 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ng.net【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。et 获取更多精彩内容】
- .middle – (2.2【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】.0) 只当点击鼠标中键时触发。 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【本文受版权保护】【版权所有，侵权必究】ngnet】本文版权归作者所有，未经授权不得转载。
示例：
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。<!-- 方法处理器 -->
<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>
还有更多的修饰符：
【原创不易，请尊重版权】【原创不易，请尊重版权】【原创不易，请尊重版权】- .enter 【版权所有，侵权必究】【作者：唐霜】【未经授权禁止转载】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ng.net
- .tab 【原创不易，请尊重版权】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netngnet】原创内容，盗版必究。【作者：唐霜】
- .delete (捕获 “删除” 和 “【本文受版权保护】转载请注明出处：www.tangshuang.net退格” 键) 未经授权，禁止复制转载。【原创内容，转载请注明出处】
- .esc 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua【本文受版权保护】原创内容，盗版必究。ngnet】
- .space 【原创不易，请尊重版权】【转载请注明来源】著作权归作者所有，禁止商业用途转载。
- .up 【作者：唐霜】【作者：唐霜】【版权所有，侵权必究】
- .down 原创内容，盗版必究。【本文受版权保护】
- .left 【未经授权禁止转载】【未经授权禁止转载】【原创不易，请尊重版权】
- .right 【版权所有，侵权必究】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ng.net转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ng.net
- .ctrl 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】
- .alt 【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ang.net未经授权，禁止复制转载。【访问 www.tangshuang.n【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】原创内容，盗版必究。
- .shift 【原创不易，请尊重版权】【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ngnet】【版权所有，侵权必究】
- .meta 【关注微信公众号：wwwtangshua【转载请注明来源】【原创内容，转载请注明出处】ngnet】本文版权归作者所有，未经授权不得转载。
这些修饰符是跟键盘相关的，主要是在一些输【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。入相关的元素上可以使用。
【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ngnet】【作者：唐霜】【转载请注明来源】v-model
在表单控件或者组件上创建双向绑定。它会根【转载请注明来源】【本文首发于唐霜的博客】据控件类型自动选取正确的方法来更新元素。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】尽管有些神奇，但 v-model 本质上著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。不过是语法糖，它负责监听用户的输入事件以【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net更新数据，并特别处理一些极端的例子。
原创内容，盗版必究。【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。et 获取更多精彩内容】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshu【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ang.netv-model 并不关心表单控件初始化所【原创内容，转载请注明出处】【原创不易，请尊重版权】生成的值。因为它会选择 Vue 实例数据转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】来作为具体的值。
【关注微信公众号：wwwtangshua【作者：唐霜】原创内容，盗版必究。ngnet】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。对于要求 IME （如中文、 日语、 韩【本文受版权保护】【转载请注明来源】语等） 的语言，你会发现那v-model本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】不会在 ime 构成中得到更新。如果你也【转载请注明来源】【版权所有】唐霜 www.tangshuang.net想实现更新，请使用 input事件。
【未经授权禁止转载】【本文首发于唐霜的博客】编者按：这个指令超级复杂，它一定会跟表单【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】控件联系在一起。所以要事先认真解释一下。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。首先，要理解双向绑定的概念。非常简单的说【本文首发于唐霜的博客】【未经授权禁止转载】，就是包含了两种绑定。第一种就是v-bi著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。nd的绑定，v-bind绑定之后，如果v【转载请注明来源】转载请注明出处：www.tangshuang.netue实例对应的属性变化了，视图也会跟着改【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net变。第二种是反过来的，是视图上的改变会导本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】致vue实例对应的属性的变化。视图怎么变未经授权，禁止复制转载。原创内容，盗版必究。呢？比如在input, textarea【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】中输入内容，通过点击，切换radio, 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。checkbox, select的选项。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】这就是双向绑定。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。v-model因为只会用在表单控件上，所本文作者：唐霜，转载请注明出处。原创内容，盗版必究。以有关内容都在下面的《表单控件绑定》一章本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】中详解。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【原创不易，请尊重版权】为了区别v-bind和v-model，我【本文受版权保护】【本文受版权保护】还专门写了一篇文章，你可以在看完这里之后再读一下。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【未经授权禁止转载】【版权所有，侵权必究】【转载请注明来源】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【原创不易，请尊重版权】ngnet】补充：<input v-model【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。=”something【本文受版权保护】【原创内容，转载请注明出处】221;>其实是<input【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】 v-bind:value=”【原创不易，请尊重版权】【本文受版权保护】;something” v-著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。on:input=”some【版权所有】唐霜 www.tangshuang.net【本文受版权保护】thing = $event.targe本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nett.value”>的语【转载请注明来源】【转载请注明来源】法糖，也就是说v-model本身就已经包【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】含了v-bind，所以当v-bind:v【版权所有，侵权必究】【原创不易，请尊重版权】alue, v-on:input和v-m【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。odel同时出现在一个input上时，这原创内容，盗版必究。【本文首发于唐霜的博客】个v-bind, v-on会失效。这在下【原创内容，转载请注明出处】未经授权，禁止复制转载。文会反复出现，如果你此刻没有理解，可以等【未经授权禁止转载】原创内容，盗版必究。到下面阅读到相关内容之后再反过来思考。
【未经授权禁止转载】未经授权，禁止复制转载。未经授权，禁止复制转载。原创内容，盗版必究。
控制型指令
还有内置指令可以实现在渲染过程中暂时挂起【作者：唐霜】著作权归作者所有，禁止商业用途转载。当前指令所在的元素，或者改变vue默认的【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】渲染机制。
【原创不易，请尊重版权】【版权所有，侵权必究】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。et 获取更多精彩内容】v-pre
不进行模板编译的部分。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ng.net本文版权归作者所有，未经授权不得转载。<span v-pre>{{ this will not be compiled }}</span>
里面的{{}}不会被认为是js表达式编译未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】成html，而是原模原样的展示出来。
【原创不易，请尊重版权】【作者：唐霜】本文作者：唐霜，转载请注明出处。【作者：唐霜】v-once
只渲染元素和组件一次。随后的重新渲染,元【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。素/组件及其所有的子节点将被视为静态内容转载请注明出处：www.tangshuang.net【本文受版权保护】并跳过。这可以用于优化更新性能。
原创内容，盗版必究。【本文受版权保护】<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once><h1>comment</h1><p>{{msg}}</p></div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul><li v-for="i in list" v-once>{{i}}</li></ul>
也就是说，once让渲染失去了数据绑定机【原创内容，转载请注明出处】【版权所有，侵权必究】制，只有在第一次渲染的时候，会获取当时的未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】变量对应的数据进行渲染，渲染结束之后，将【本文受版权保护】【版权所有】唐霜 www.tangshuang.net不再跟着数据变化而变化。
【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ang.net【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】【原创内容，转载请注明出处】这个指令有的时候非常有用。比如一些组件并【未经授权禁止转载】【版权所有，侵权必究】不需要跟着数据变化而变化的时候。
原创内容，盗版必究。未经授权，禁止复制转载。【作者：唐霜】v-cloak
这个指令保持在元素上直到关联实例结束编译【未经授权禁止转载】【转载请注明来源】。和 CSS 规则如 [v-cloak]转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】 { display: none } 一【原创不易，请尊重版权】原创内容，盗版必究。起用时，这个指令可以隐藏未编译的 Mus【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nettache 标签直到实例准备完毕。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【本文首发于唐霜的博客】ang.net[v-cloak] { display: none;}
<div v-cloak>
{{ message }}
</div>
其实也就是一个普通的属性，当编译结束的时原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。候，就把这个属性移除掉。所以上面那个cs【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】s，使得这些有v-cloak属性的元素全著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。部先隐藏起来，最后当v-cloak被移除未经授权，禁止复制转载。【作者：唐霜】的时候，这些元素就显示出来了。为什么要有【转载请注明来源】【版权所有】唐霜 www.tangshuang.net这么一个奇怪的属性呢？因为你要知道，{{【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。message}}在原始的html中是字【作者：唐霜】【转载请注明来源】符串，是会显示在界面中的。如果你的浏览器著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】编译模板速度慢，或者用户网速慢，vue代本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net码半天没加载完，那么用户就会看到这些奇怪【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】的{{}}，而如果使用一个v-cloak著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】属性，就可以把这些内容事先隐藏起来，不让【版权所有，侵权必究】【本文受版权保护】用户看到。
【版权所有】唐霜 www.tangshu【本文受版权保护】【版权所有】唐霜 www.tangshuang.netang.net【作者：唐霜】【作者：唐霜】自定义指令
vue里你还可以自定义指令，它们和内置指【作者：唐霜】本文版权归作者所有，未经授权不得转载。令一样，以v-开头。开发自己的指令之前，【版权所有，侵权必究】转载请注明出处：www.tangshuang.net你需要理解指令到底是拿来干什么的，而不要原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net把所有的功能都开发成指令来用。
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。创建指令
让我们来创建一个指令：当页面加载时，元素本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。将获得焦点。事实上，你访问后还没点击任何【作者：唐霜】【版权所有】唐霜 www.tangshuang.net内容，input 就获得了焦点。我们希望转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】使用的时候用v-focus来作为标识符。
【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ang.net著作权归作者所有，禁止商业用途转载。【转载请注明来源】【版权所有】唐霜 www.tangshu【未经授权禁止转载】未经授权，禁止复制转载。ang.netnew Vue({
directives: {
focus: {
inserted(el) {
el.focus()
},
},
},
})
这样我们我们就创建了v-focus指令，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。在模板中，就可以这样使用：
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【版权所有，侵权必究】et 获取更多精彩内容】<input v-focus>
这样当页面打开的时候，这个input就会【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】自动获取焦点。
【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netang.net【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】et 获取更多精彩内容】钩子函数
你可以看到上面的定义一个指令的结构：在实本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】力参数中传入directives，在di未经授权，禁止复制转载。【作者：唐霜】rectives里面就是所有的自定义指令著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，focus就是指令的名称，focus里【关注微信公众号：wwwtangshuangnet】【转载请注明来源】面会加入多个方法函数，这些函数就是钩子函【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net数，每一个钩子函数都会在不同的时刻执行，转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】从而实现你想要的功能。
【未经授权禁止转载】未经授权，禁止复制转载。转载请注明出处：www.tangshua未经授权，禁止复制转载。未经授权，禁止复制转载。ng.net【原创不易，请尊重版权】指令定义函数提供了几个钩子函数（可选）：
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【转载请注明来源】- bind: 只调用一次，指令第一次绑定到【作者：唐霜】【原创内容，转载请注明出处】元素时调用，用这个钩子函数可以定义一个在【原创内容，转载请注明出处】原创内容，盗版必究。绑定时执行一次的初始化动作。 【本文受版权保护】原创内容，盗版必究。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- inserted: 被绑定元素插入父节点【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。时调用（父节点存在即可调用，不必存在于 【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netdocument 中）。 原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
- update: 被绑定元素所在的模板更新著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。时调用，而不论绑定值是否变化。通过比较更【原创不易，请尊重版权】未经授权，禁止复制转载。新前后的绑定值，可以忽略不必要的模板更新转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】（详细的钩子函数参数见下）。 转载请注明出处：www.tangshua未经授权，禁止复制转载。【原创内容，转载请注明出处】ng.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua未经授权，禁止复制转载。【本文受版权保护】ng.net
- componentUpdated: 被绑【转载请注明来源】原创内容，盗版必究。定元素所在模板完成一次更新周期时调用。 未经授权，禁止复制转载。原创内容，盗版必究。
- unbind: 只调用一次， 指令与元素【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】解绑时调用。 未经授权，禁止复制转载。【未经授权禁止转载】
钩子函数的参数
钩子函数被赋予了以下参数：
【原创不易，请尊重版权】【版权所有，侵权必究】- el: 指令所绑定的元素，可以用来直接操著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】作 DOM 。 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
- binding: 一个对象，包含以下属性原创内容，盗版必究。转载请注明出处：www.tangshuang.net：
- name: 指令名，不包括 v- 前缀。 本文作者：唐霜，转载请注明出处。【作者：唐霜】转载请注明出处：www.tangshua【本文受版权保护】【版权所有】唐霜 www.tangshuang.netng.net
- value: 指令的绑定值， 例如： v【作者：唐霜】原创内容，盗版必究。-my-directive=”转载请注明出处：www.tangshuang.net【作者：唐霜】;1 + 1″, value未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net 的值是 2。 【版权所有，侵权必究】原创内容，盗版必究。
- oldValue: 指令绑定的前一个值，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net仅在 update 和 componen原创内容，盗版必究。未经授权，禁止复制转载。tUpdated 钩子中可用。无论值是否【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】改变都可用。 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【未经授权禁止转载】
- expression: 绑定值的字符串形【本文受版权保护】【本文受版权保护】式。 例如 v-my-directive【原创内容，转载请注明出处】【作者：唐霜】=”1 + 1″转载请注明出处：www.tangshuang.net【转载请注明来源】 ， expression 的值是 &#【作者：唐霜】本文版权归作者所有，未经授权不得转载。8220;1 + 1″。 【未经授权禁止转载】【本文首发于唐霜的博客】转载请注明出处：www.tangshua【本文首发于唐霜的博客】【未经授权禁止转载】ng.net
- arg: 传给指令的参数。例如 v-my【原创内容，转载请注明出处】【版权所有，侵权必究】-directive:foo， arg 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。的值是 “foo”【版权所有】唐霜 www.tangshuang.net【转载请注明来源】;。 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】ng.net
- modifiers: 一个包含修饰符的对【本文受版权保护】【未经授权禁止转载】象。 例如： v-my-directiv本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nete.foo.bar, 修饰符对象 mod【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ifiers 的值是 { foo: tr本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ue, bar: true }。 【本文首发于唐霜的博客】【作者：唐霜】未经授权，禁止复制转载。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【原创不易，请尊重版权】【未经授权禁止转载】ngnet】
- vnode: Vue 编译生成的虚拟节点原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，查阅 VNode API 了解更多详情。 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【未经授权禁止转载】
- oldVnode: 上一个虚拟节点，仅在未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。 update 和 componentU【作者：唐霜】【版权所有，侵权必究】pdated 钩子中可用。 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
除了 el 之外，其它参数都应该是只读的【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net，尽量不要修改他们。如果需要在钩子之间共【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。享数据，建议通过元素的 dataset 来进行。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】<div id="hook-arguments-example" v-demo:hello.a.b="message"></div>
Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') }})new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' }})
函数简写
大多数情况下，我们可能想在 bind 和【作者：唐霜】【原创内容，转载请注明出处】 update 钩子上做重复动作，并且不【转载请注明来源】未经授权，禁止复制转载。想关心其它的钩子函数。可以这样写:
【未经授权禁止转载】【本文首发于唐霜的博客】【本文受版权保护】转载请注明出处：www.tangshua原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ng.netVue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value})
对象字面量
如果指令需要多个值，可以传入一个 Jav未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。aScript 对象字面量。记住，指令函【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。数能够接受所有合法类型的 JavaScr【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ipt 表达式。
【原创不易，请尊重版权】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!"})
【版权所有】唐霜 www.tangshu【本文受版权保护】【转载请注明来源】ang.net原创内容，盗版必究。编者按：
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ng.net本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【作者：唐霜】【原创内容，转载请注明出处】ang.net
本文作者：唐霜，转载请注明出处。 本书到目前为止，所有的方法都是在局部进【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】行定义，而没有进行全局定义，在vue里面【转载请注明来源】转载请注明出处：www.tangshuang.net，指令可以通过全局方法Vue.direc原创内容，盗版必究。【转载请注明来源】tives()来定义，也可以在实例参数、【原创内容，转载请注明出处】【本文受版权保护】组件参数中加入directives来进行转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。局部定义。局部定义就是说只有在当前这个实【转载请注明来源】转载请注明出处：www.tangshuang.net例的模板内可以使用指令，而全局定义则可以【作者：唐霜】【转载请注明来源】让所有模板都可以使用这个指令。除了指令，著作权归作者所有，禁止商业用途转载。【作者：唐霜】还有下文要提的过滤器也有这两种定义方式。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。但为了增加学习曲线的平滑度，在前面几章都【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。是主要提到局部定义。后面会有专门的章节来【本文受版权保护】未经授权，禁止复制转载。阐述全局和局部问题。
过滤器
什么是过滤器？
什么是过滤器呢？你用过一些模板引擎的话可本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。能知道，比如{{name | toUpp【未经授权禁止转载】【作者：唐霜】erCase}}，通过一个管道符号，后面本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】跟上一个函数，对前面的变量进行输出前的处【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net理。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【访问 www.tangshuang.n【本文首发于唐霜的博客】【作者：唐霜】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。Vue 2.x 中，过滤器只能在 mus本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nettache 绑定和 v-bind 表达式本文作者：唐霜，转载请注明出处。原创内容，盗版必究。（从 2.1.0 开始支持）中使用，因为【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net过滤器设计目的就是用于文本转换。为了在其【未经授权禁止转载】原创内容，盗版必究。他指令中实现更复杂的数据变换，你应该使用原创内容，盗版必究。【本文受版权保护】计算属性。
【原创不易，请尊重版权】原创内容，盗版必究。【作者：唐霜】<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
过滤器可以串联：
【原创不易，请尊重版权】未经授权，禁止复制转载。【本文首发于唐霜的博客】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【转载请注明来源】et 获取更多精彩内容】{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。此可以接受参数：
转载请注明出处：www.tangshua【作者：唐霜】本文版权归作者所有，未经授权不得转载。ng.net【原创内容，转载请注明出处】原创内容，盗版必究。【版权所有，侵权必究】{{ message | filterA('arg1', arg2) }}
这里，字符串 ‘arg1&#未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。8217; 将传给过滤器作为第二个参数，【原创内容，转载请注明出处】【转载请注明来源】 arg2 表达式的值将被求值然后传给过【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。滤器作为第三个参数。
【版权所有，侵权必究】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ng.net【未经授权禁止转载】自定义过滤器
从vue2.0开始，vue不再内置过滤器【转载请注明来源】本文作者：唐霜，转载请注明出处。，以前很多过滤器可以直接使用，比如upp【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】ercase等。现在不能直接用了，但是我【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。们可以自己自定义。过滤器函数总接受表达式未经授权，禁止复制转载。【版权所有，侵权必究】的值作为第一个参数。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netang.netnew Vue({
// ...
filters: {
capitalize: function (value) { // 注意，这里的参数上面说过了，可以新增其他参数的
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
使用很简单，和上面一样。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。未经授权，禁止复制转载。{{userName | capitalize}}
总之，把你自己的过滤器放在filters【未经授权禁止转载】本文作者：唐霜，转载请注明出处。变量中。
【未经授权禁止转载】【版权所有，侵权必究】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netang.net【版权所有，侵权必究】Vue2.0把过滤器这块移除是有道理的，【原创不易，请尊重版权】【本文首发于唐霜的博客】他们希望你更多使用computed，而不【原创内容，转载请注明出处】【本文受版权保护】是过滤器。
【作者：唐霜】【关注微信公众号：wwwtangshua【转载请注明来源】著作权归作者所有，禁止商业用途转载。ngnet】表单控件绑定
在前面的v-model一节中已经说了，这原创内容，盗版必究。转载请注明出处：www.tangshuang.net一章，其实就是对v-model的展开说明【未经授权禁止转载】【原创不易，请尊重版权】。当然，也不完全就是v-model，这章转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。会全面的讲解跟表单相关的所有开发相关内容【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net。
【转载请注明来源】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】数据的双向绑定
前面说了，v-model是双向绑定的秘诀著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。。那么到底怎么实现呢？
【转载请注明来源】【访问 www.tangshuang.n【作者：唐霜】著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】【未经授权禁止转载】【原创内容，转载请注明出处】文本 input text
<input v-model="message">
<p>Message is: {{ message }}</p>
new Vue({
data: {
message: 'placeholder',
},
})
这里的双向绑定包括两个绑定，一个是dat【未经授权禁止转载】本文作者：唐霜，转载请注明出处。a.message被绑定到input控件著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net上，被作为input的value值。当然【本文受版权保护】【版权所有】唐霜 www.tangshuang.net，{{message}}也是被绑定好的。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net当data.message发生变化的时候本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】，视图里面会跟着变。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ang.net现在，在input里面输入自己的字符串。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】由于v-model的作用，data.me【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ssage也随之发生变化，data.me转载请注明出处：www.tangshuang.net【未经授权禁止转载】ssage这次反过来等于输入的值。于此同【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】时，由于data.message变了，{【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。{message}}也跟着变了。
【原创不易，请尊重版权】【本文受版权保护】【本文受版权保护】这个过程就是v-model的双向绑定的结【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】果。
【本文受版权保护】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netng.net【原创不易，请尊重版权】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。编者按：关于v-model是v-bind【版权所有】唐霜 www.tangshuang.net【转载请注明来源】和v-on的语法糖的问题，你此刻可能不是【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】很懂，因为你还没有阅读事件绑定这一章，下【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】一章会专门讲事件绑定，阅读完下一章你再回原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】头阅读这一章，就会有不一样的理解。
【未经授权禁止转载】【访问 www.tangshuang.n【原创不易，请尊重版权】原创内容，盗版必究。et 获取更多精彩内容】【原创不易，请尊重版权】【原创不易，请尊重版权】
多行文本 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.neta>{{message}}<转载请注明出处：www.tangshuang.net原创内容，盗版必究。/textarea> ) 并不会生【未经授权禁止转载】【转载请注明来源】效，应用 v-model 来代替。
【转载请注明来源】【未经授权禁止转载】【本文受版权保护】【本文首发于唐霜的博客】textarea和上面的input te【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。xt是一样的，效果也和我们想象的一样。
未经授权，禁止复制转载。未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。复选框 input checkbox
单个勾选框
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
这里的v-model绑定了checked【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，但是checked这个变量应该是一个b【本文首发于唐霜的博客】【原创不易，请尊重版权】oolean值，表示这个checkbox【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。是否被选中，是绑定到了prop属性。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】这个时候，你会问，当复选框选中了，那么我【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】怎么知道要用什么值呢？这里有两种解释，一原创内容，盗版必究。【本文受版权保护】种是你不需要知道它要用什么值，你只需要知【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】道它的结果是选中还是不选中即可，至于选中原创内容，盗版必究。未经授权，禁止复制转载。了怎么办，不选中又怎么办，请自己来决定。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ang.net另一种是给两个绑定值，如下：
【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netngnet】【未经授权禁止转载】【原创内容，转载请注明出处】<input type="checkbox" v-model="checked" :true-value="a" :false-value="b">
这里的a和b都是变量，选中的时候chec转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ked值等于a，即app.checked【本文受版权保护】【本文受版权保护】 = app.a，否则app.check本文作者：唐霜，转载请注明出处。【本文受版权保护】ed = app.b。这样checked本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net就不是boolean值了。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】注意：checkbox单个复选框的时候，本文作者：唐霜，转载请注明出处。【作者：唐霜】不能使用:value="xxx"绑定值，即使绑定了也没用，会被舍弃，读过著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。我前面那篇文章的就知道。
多个勾选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <span>Checked names: {{ checkedNames }}</span>// 这可以checkedNames直接显示成JSON.stringify()的结果
new Vue({
el: '...',
data: {
checkedNames: [],
}
})
这里，要求type=”che本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netckbox”是一定要有的，如【本文首发于唐霜的博客】【未经授权禁止转载】果没有type=”check本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netbox”，会报错，type值本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net必须是字符串，不能通过v-bind进行绑【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net定使用动态值，否则vue会报错。
【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ang.net著作权归作者所有，禁止商业用途转载。data.checkedNames一定要本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】是数组，当用户勾选了上面checkbox【作者：唐霜】【转载请注明来源】的其中一个时，它的value值会被丢到d【转载请注明来源】【版权所有】唐霜 www.tangshuang.netata.checkedNames这个数组【关注微信公众号：wwwtangshuangnet】【作者：唐霜】中来。而它的value值则可以通过v-b转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ind绑定一个动态数据。
【未经授权禁止转载】【本文首发于唐霜的博客】【本文受版权保护】在HTML中，通过相同的一个name值来【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】确定这组checkbox是一个组的，而在【原创不易，请尊重版权】原创内容，盗版必究。这里，则是通过v-model的值是同一个【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】值来确定是一个组的。
【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ngnet】【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。这个时候就可以使用:value来动态绑定【作者：唐霜】本文版权归作者所有，未经授权不得转载。value值了，这和单个复选框不一样。
【作者：唐霜】【作者：唐霜】【版权所有，侵权必究】单选按钮 input radio
<div id="example-4" class="demo"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div>
new Vue({
el: '#example-4',
data: {
picked: '',
}
})
单选框组跟多个checkbox复选框组是【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net一样的。包括:value绑定。唯一不同的【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】是picked是一个单选值，所以是一个值著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】，而不是数组。
【本文首发于唐霜的博客】【本文受版权保护】选择列表 select
单选列表
【原创内容，转载请注明出处】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ng.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
}
})
多选列表（绑定到一个数组）
【未经授权禁止转载】原创内容，盗版必究。<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是一个数组。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。动态选项，用 v-for 渲染：
【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ang.net原创内容，盗版必究。<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
绑定 value
对于单选按钮，勾选框及选择列表选项， v【原创内容，转载请注明出处】原创内容，盗版必究。-model 绑定的 value 通常是本文作者：唐霜，转载请注明出处。【作者：唐霜】静态字符串（对于勾选框是逻辑值）：
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】<!-- 当选中时，`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.n原创内容，盗版必究。【转载请注明来源】et 获取更多精彩内容】【原创内容，转载请注明出处】当我们通过v-bind:value对va【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】lue进行绑定时，应该要注意，v-bin【转载请注明来源】【关注微信公众号：wwwtangshuangnet】d就是一个单向绑定操作，你有没有必要对这【转载请注明来源】【版权所有，侵权必究】个value进行单向绑定？你应该怎么绑定著作权归作者所有，禁止商业用途转载。【作者：唐霜】呢？准备写表单之前，先想好你的表单逻辑再【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net开始写代码。在这之前，一定要先读一下我的这篇文章。
未经授权，禁止复制转载。转载请注明出处：www.tangshua【本文首发于唐霜的博客】【本文受版权保护】ng.net【访问 www.tangshuang.n【原创内容，转载请注明出处】未经授权，禁止复制转载。et 获取更多精彩内容】原创内容，盗版必究。【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ngnet】补充：<input v-model【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。=”something原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。221;>其实是<input本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。 v-bind:value=”【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】;something” v-【原创不易，请尊重版权】【原创内容，转载请注明出处】on:input=”some本文作者：唐霜，转载请注明出处。【转载请注明来源】thing = $event.targe【本文受版权保护】转载请注明出处：www.tangshuang.nett.value”>的语【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。法糖，也就是说v-model本身就已经包【本文受版权保护】本文版权归作者所有，未经授权不得转载。含了v-bind，所以当v-bind和v本文作者：唐霜，转载请注明出处。【本文受版权保护】-model同时出现在一个input上时转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，这个v-bind会失效。
未经授权，禁止复制转载。转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netng.net【本文受版权保护】转载请注明出处：www.tangshua【版权所有，侵权必究】【作者：唐霜】ng.net
修饰符
.lazy
在默认情况下， v-model 在 in【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netput 事件中同步输入框的值与数据 (除未经授权，禁止复制转载。未经授权，禁止复制转载。了 上述 IME 部分)，但你可以添加一转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】个修饰符 lazy ，从而转变为在 ch【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netange 事件中同步：
原创内容，盗版必究。【版权所有，侵权必究】<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Numbe【作者：唐霜】本文版权归作者所有，未经授权不得转载。r 类型（如果原值的转换结果为 NaN 原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net则返回原值），可以添加一个修饰符 num【未经授权禁止转载】原创内容，盗版必究。ber 给 v-model 来处理输入值【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。：
【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net原创内容，盗版必究。ngnet】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ng.net【未经授权禁止转载】<input v-model.number="age" type="number">
这通常很有用，因为在 type=R【原创内容，转载请注明出处】原创内容，盗版必究。21;number” 时 H【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】TML 中输入的值也总是会返回字符串类型本文作者：唐霜，转载请注明出处。【作者：唐霜】。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【未经授权禁止转载】原创内容，盗版必究。ngnet】【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【转载请注明来源】et 获取更多精彩内容】.trim
如果要自动过滤用户输入的首尾空格，可以添【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。加 trim 修饰符到 v-model 转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】上过滤输入：
【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】原创内容，盗版必究。ngnet】【转载请注明来源】转载请注明出处：www.tangshua【作者：唐霜】著作权归作者所有，禁止商业用途转载。ng.net<input v-model.trim="msg">
表单验证：vue-validator
这一章是插入的一章，在实际开发中，你不一【版权所有，侵权必究】转载请注明出处：www.tangshuang.net定需要vue-validator来验证你【作者：唐霜】本文版权归作者所有，未经授权不得转载。的表单选项。但是本章可以给你一些启示，帮著作权归作者所有，禁止商业用途转载。【作者：唐霜】助你设计自己的验证思路。vue-vali本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。dator也不是vue官方的插件，而是一【作者：唐霜】本文版权归作者所有，未经授权不得转载。个个人项目。不过插件作者比较早的开发了完【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】善的验证机制，所以插件也得到广泛使用。v【作者：唐霜】未经授权，禁止复制转载。ue-validator目前对vue2.【原创内容，转载请注明出处】【原创不易，请尊重版权】2+是不支持的，v3版本支持vue2.0【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。。它也有自己的完整中文文档，你可以点击这里进入阅读。但是这个中文文档是v2.x的，本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】v2.x版本不支持vue2.0，但是大部【本文受版权保护】【关注微信公众号：wwwtangshuangnet】分接口都是一样的，所以也可以看。但是因为【作者：唐霜】【转载请注明来源】vue-validator对vue2.0【转载请注明来源】本文作者：唐霜，转载请注明出处。的支持还不稳定，所以，本书也更多的只介绍著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net一些常用功能，以及验证思路。
【转载请注明来源】未经授权，禁止复制转载。【作者：唐霜】安装和开始
vue的插件都使用use方法来安装。我们【原创不易，请尊重版权】【原创内容，转载请注明出处】使用npm来安装vue-validato转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netr：
【本文受版权保护】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ang.net原创内容，盗版必究。npm install --save vue-validator
安装好之后，在你的项目中使用它：
【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ang.net原创内容，盗版必究。import Vue from 'vue'import VueValidator form 'vue-validator' Vue.use(VueValidator)
在这之后，你就可以使用vue-valid未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ator进行表单验证了。
【作者：唐霜】原创内容，盗版必究。<div id="app">
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="['required']">
</div>
<div class="comment-field">
<label for="comment">comment:</label>
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
</div>
<div class="errors">
<p v-if="$validation1.username.required">Required your name.</p>
<p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
</div>
<input type="submit" value="send" v-if="$validation1.valid">
</form>
</validator>
</div>
验证结果会关联到验证器元素上。在上例中，转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net验证结果保存在 $validation1本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。 下，$validation1 是由 v【原创不易，请尊重版权】【转载请注明来源】alidator 元素的 name 属性本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。值加 $ 前缀组成。
转载请注明出处：www.tangshua【原创不易，请尊重版权】【转载请注明来源】ng.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netang.net验证结果结构
验证结果（也就是上面的$validati著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。on1）有如下结构:
转载请注明出处：www.tangshua【原创内容，转载请注明出处】【本文首发于唐霜的博客】ng.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'
}]
},
}
全局结果可以直接从验证结果中获取到，字段【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。验证结果保存在以字段名命名的键下。
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】字段验证结果
- valid: 字段有效时返回 true,【本文受版权保护】【版权所有，侵权必究】否则返回 false。 【原创不易，请尊重版权】【本文首发于唐霜的博客】
- invalid: valid 的逆. 转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ng.net【版权所有，侵权必究】转载请注明出处：www.tangshua【作者：唐霜】本文版权归作者所有，未经授权不得转载。ng.net【原创内容，转载请注明出处】
- touched: 字段获得过焦点时返回 【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】true,否则返回 false。 转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ng.net转载请注明出处：www.tangshua原创内容，盗版必究。原创内容，盗版必究。ng.net
- untouched: touched 的【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net逆. 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- modified: 字段值与初始值不同时未经授权，禁止复制转载。【作者：唐霜】返回 true,否则返回 false。 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。
- dirty: 字段值改变过至少一次时返回著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 true,否则返回 false。 【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【原创内容，转载请注明出处】ang.net
- pristine: dirty 的逆. 【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【原创不易，请尊重版权】ngnet】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】
- errors: 字段无效时返回存有错误信原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】息的数据，否则返回 undefined。 原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【转载请注明来源】【原创内容，转载请注明出处】ngnet】
全局结果
- valid: 所有字段都有效时返回 tr本文作者：唐霜，转载请注明出处。【转载请注明来源】ue,否则返回 false。 【原创内容，转载请注明出处】【本文首发于唐霜的博客】【版权所有，侵权必究】
- invalid: 只要存在无效字段就返回著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】 true,否则返回 false。 【版权所有】唐霜 www.tangshu【未经授权禁止转载】【作者：唐霜】ang.net转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ng.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- touched: 只要存在获得过焦点的字【版权所有，侵权必究】原创内容，盗版必究。段就返回 true,否则返回 false原创内容，盗版必究。本文作者：唐霜，转载请注明出处。。 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- untouched: touched 的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】逆。 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
- modified: 只要存在与初始值不同著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。的字段就返回 true,否则返回 fal未经授权，禁止复制转载。【原创内容，转载请注明出处】se。 转载请注明出处：www.tangshua【本文首发于唐霜的博客】【未经授权禁止转载】ng.net【本文首发于唐霜的博客】
- dirty: 只要存在值改变过至少一次的【本文受版权保护】本文版权归作者所有，未经授权不得转载。字段就返回 true,否则返回 fals本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。e。 【未经授权禁止转载】【本文首发于唐霜的博客】
- pristine: 所有字段都没有发生过【版权所有，侵权必究】原创内容，盗版必究。变化时返回 true,否则返回 fals未经授权，禁止复制转载。【原创不易，请尊重版权】e。 【访问 www.tangshuang.n【转载请注明来源】【原创不易，请尊重版权】et 获取更多精彩内容】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
- errors: 有无效字段时返回所有无效【作者：唐霜】原创内容，盗版必究。字段的错误信息，否则返回 undefin【本文受版权保护】本文版权归作者所有，未经授权不得转载。ed。 【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【原创内容，转载请注明出处】【本文首发于唐霜的博客】【本文受版权保护】
验证器语法
v-validate 指令用法如下:
【本文首发于唐霜的博客】【原创不易，请尊重版权】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。v-validate[:field]="array literal | object literal | binding"
字段
2.0-alpha以前的版本中，验证器是【转载请注明来源】著作权归作者所有，禁止商业用途转载。依赖于 v-model 的。从2.0-a【未经授权禁止转载】未经授权，禁止复制转载。lpha版本开始，v-model 是可选【本文受版权保护】本文作者：唐霜，转载请注明出处。的。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。~v1.4.4:
原创内容，盗版必究。未经授权，禁止复制转载。<form novalidate>
<input type="text" v-model="comment" v-validate="minLength: 16, maxLength: 128">
<div>
<span v-show="validation.comment.minLength">Your comment is too short.</span>
<span v-show="validation.comment.maxLength">Your comment is too long.</span>
</div>
<input type="submit" value="send" v-if="valid">
</form>
v2.0-alpha后:
转载请注明出处：www.tangshua【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netng.net原创内容，盗版必究。【访问 www.tangshuang.n【版权所有，侵权必究】【原创不易，请尊重版权】et 获取更多精彩内容】原创内容，盗版必究。<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属性，也【作者：唐霜】【转载请注明来源】就是红色的comment。蓝色的大括号里【未经授权禁止转载】本文作者：唐霜，转载请注明出处。面是规则，其中minlength的规则是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。16，而当你输入内容之后，验证结果怎么样【转载请注明来源】转载请注明出处：www.tangshuang.net呢？$validation.commen著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】t.minlength就可以得到验证的结原创内容，盗版必究。【作者：唐霜】果。
【本文首发于唐霜的博客】【原创内容，转载请注明出处】Caml-case 属性
同 Vue.js一样, v-valida未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。te 指令中的字段名可以使用 kebab著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net-case:
【原创不易，请尊重版权】转载请注明出处：www.tangshua【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ng.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.n原创内容，盗版必究。【本文首发于唐霜的博客】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【转载请注明来源】注意: 当使用 field 属性指定字段【本文受版权保护】【原创不易，请尊重版权】名时不需要在 v-validate 指令【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。中再次指定。
【本文受版权保护】原创内容，盗版必究。未经授权，禁止复制转载。【本文受版权保护】
<div id="app">
<validator name="validation">
<form novalidate>
<p class="validate-field" v-for="field in fields">
<label :for="field.id">{{field.label}}</label>
<input type="text" :id="field.id" :placeholder="field.placeholder" :field="field.name" v-validate="field.validate">
</p>
<pre>{{ $validation | json }}</pre>
</form>
</validator>
</div>
new Vue({
el: '#app',
data: {
fields: [{
id: 'username',
label: 'username',
name: 'username',
placeholder: 'input your username',
validate: { required: true, maxlength: 16 }
},
{
id: 'message',
label: 'message',
name: 'message',
placeholder: 'input your message',
validate: { required: true, minlength: 8 }
}]
}
})
数组
下例中使用了数组型字面量：
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】<validator name="validation">
<form novalidate>
Zip: <input type="text" v-validate:zip="['required']">
<br />
<div>
<span v-if="$validation.zip.required">Zip code is required.</span>
</div>
</form>
</validator>
因为 required 验证器不要额外的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。参数，这样写更简洁。
转载请注明出处：www.tangshua【本文首发于唐霜的博客】【转载请注明来源】ng.net【本文受版权保护】【作者：唐霜】【本文首发于唐霜的博客】对象
下例中使用了对象型字面量：
转载请注明出处：www.tangshua原创内容，盗版必究。【原创内容，转载请注明出处】ng.net转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ng.net【原创不易，请尊重版权】【未经授权禁止转载】<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="{ required: true, minlength: 3, maxlength: 16 }"><br />
<div>
<span v-if="$validation.id.required">ID is required</span>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
使用对象型字面量允许你为验证器指定额外的【本文受版权保护】【版权所有，侵权必究】参数。对于 required，因为它不需著作权归作者所有，禁止商业用途转载。【转载请注明来源】要参数，如上例中随便指定一个值即可。
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【本文首发于唐霜的博客】ang.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.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】ang.netnew Vue({
el: '#app',
data: {
rules: {
minlength: 3,
maxlength: 16
}
}
})
<div id="app">
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="rules"><br />
<div>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
</div>
除数据属性外，也可以使用计算属性或事例方【未经授权禁止转载】【原创内容，转载请注明出处】法来指定验证规则。
原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。【本文受版权保护】Terminal 指令问题
请注意，当你想要使用如 v-if 和 v【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net-for 这些 terminal 指令时本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】，应把可验证的目标元素包裹在 <t【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】emplate> 之类的不可见标签著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net内。因为 v-validate 指令不能【作者：唐霜】【版权所有】唐霜 www.tangshuang.net与这些 terminal 指令使用在同一【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。元素上。
本文版权归作者所有，未经授权不得转载。
下例中使用了 <div> 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。标签：
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内置了一些验证转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net规则，也就是上面v-validate:后原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】面的表达式内容中的东西。这些内置规则包括原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。：
【版权所有，侵权必究】原创内容，盗版必究。required
这个字段必须有值。举个例子：
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文受版权保护】转载请注明出处：www.tangshua原创内容，盗版必究。【未经授权禁止转载】ng.net<input v-validate:fieldx="{required: true}">
那么当你在提交表单时，如果这个input【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】没有输入值，那么$validation.转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。fieldx.required就会返回f【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】alse。
【原创内容，转载请注明出处】【本文受版权保护】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】原创内容，盗版必究。ang.net【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】pattern
正则匹配校验器，校验元素值是否跟patt【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ern所表示的正则表达式匹配。
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。minlength
最小长度，如果元素的值的最小长度小于mi【未经授权禁止转载】原创内容，盗版必究。nlength规定的值，就会返回fals【未经授权禁止转载】未经授权，禁止复制转载。e。
转载请注明出处：www.tangshua【转载请注明来源】【原创内容，转载请注明出处】ng.net【本文首发于唐霜的博客】maxlength
最大长度，如果元素中输入的值大于这个设定转载请注明出处：www.tangshuang.net原创内容，盗版必究。值，就会返回false。
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。原创内容，盗版必究。ang.net【本文受版权保护】本文版权归作者所有，未经授权不得转载。min
最小值校验器，当你输入的值比这个值还小（【本文受版权保护】【作者：唐霜】<=）的时候，返回false。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。max
最大值校验器，当你输入的值比这个值还大(本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】>=)，那返回false。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】结合 v-model
可以验证通过 v-model 指令进行数转载请注明出处：www.tangshuang.net【未经授权禁止转载】据绑定的字段：
原创内容，盗版必究。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】ng.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【本文受版权保护】方法见下例：
【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ngnet】未经授权，禁止复制转载。原创内容，盗版必究。<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.tangshu未经授权，禁止复制转载。【转载请注明来源】ang.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 !!'
}
}
})
下拉列表
支持下拉列表验证:
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【转载请注明来源】【本文首发于唐霜的博客】ngnet】<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+的功能。有时，我们需要为不同验【原创内容，转载请注明出处】【版权所有，侵权必究】证结果显示不同的样式以达到更好的交互效果本文作者：唐霜，转载请注明出处。原创内容，盗版必究。。vue-validator 在验证完表【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】单元素后会自动插入相应的类来指示验证结果【本文首发于唐霜的博客】【版权所有，侵权必究】，如下例所示：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
上例会输出如下 HTML：
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】ang.net本文作者：唐霜，转载请注明出处。<input id="username" type="text" class="invalid untouched pristine">
验证结果类列表
| 验证类型 | 类名 (默认) | 描述 |
|---|---|---|
| valid | valid | 当目标元素变为 valid 时 |
| invalid | invalid | 当目标元素变为 invalid 时 |
| touched | touched | 当 touched 目标元素时 |
| untouched | untouched | 当目标元素还未被 touched 时 |
| pristine | pristine | 当目标元素还未 dirty 时 |
| dirty | dirty | 当目标元素 dirty 时 |
| modified | modified | 当目标元素 modified 时 |
使用自定义验证结果类
当默认的验证结果类名不方便使用时，你可以原创内容，盗版必究。【版权所有，侵权必究】使用 classes 属性自定义相应的类未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。名，如下所示：
转载请注明出处：www.tangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ng.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n原创内容，盗版必究。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。<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 指【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。令上，值必须为对象。
【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ngnet】未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】未经授权，禁止复制转载。ngnet】【关注微信公众号：wwwtangshua【原创不易，请尊重版权】【作者：唐霜】ngnet】在非目标元素上使用验证结果类
通常情况下验证结果类会插入到定义 v-v【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netalidate 指令的元素上。然而有时候【转载请注明来源】原创内容，盗版必究。我们需要把这些类插入到其他元素上。这时我著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】们可以使用 v-validate-cla【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ss 来实现，如下所示：
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】原创内容，盗版必究。【转载请注明来源】<validator name="validation1" :classes="{ touched: 'touched-validator', dirty: 'dirty-validator' }">
<div v-validate-class class="username">
<label for="username">username:</label>
<input id="username" type="text" :classes="{ valid: 'valid-username', invalid: 'invalid-username' }"
v-validate:username="{ required: { rule: true, message: 'required you name !!' }
}">
</div>
</validator>
上例会输出如下 HTML：
【转载请注明来源】【版权所有】唐霜 www.tangshu【本文受版权保护】转载请注明出处：www.tangshuang.netang.net<div class="username invalid-username untouched pristine"> <label for="username">username:</label> <input id="username" type="text"> </div>
分组
支持把验证字段分组：
【访问 www.tangshuang.n【版权所有，侵权必究】【转载请注明来源】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua原创内容，盗版必究。【本文首发于唐霜的博客】ngnet】【版权所有，侵权必究】<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>
错误消息
错误消息可以直接在验证规则中指定，同时可转载请注明出处：www.tangshuang.net【转载请注明来源】以在 v-show 和 v-if 中使用本文版权归作者所有，未经授权不得转载。【转载请注明来源】错误消息：
【本文受版权保护】未经授权，禁止复制转载。<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
<span v-if="$validation1.username.required">{{ $validation1.username.required }}</span>
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}">
<span v-if="$validation1.password.required">{{ $validation1.password.required }}</span>
<span v-if="$validation1.password.minlength">{{ $validation1.password.minlength }}</span>
</div>
</validator>
也可以在 v-for 指令中使用错误消息本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】：
【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【本文受版权保护】ang.net本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ang.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>
使用数据属性或计算属性来指定验证规则比使【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。用内联验证规则更简洁。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文受版权保护】本文作者：唐霜，转载请注明出处。错误消息枚举组件
在上例中，我们使用 v-for 指令来枚未经授权，禁止复制转载。【转载请注明来源】举验证器的 errors。但是，我们可以著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】让它更简单。本验证器提供了非常易用的 v【版权所有】唐霜 www.tangshuang.net【本文受版权保护】alidator-errors 组件来枚【未经授权禁止转载】【本文首发于唐霜的博客】举错误消息，如下例所示：
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。<validator name="validation1">
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}">
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-validate:password="{
required: { rule: true, message: 'required you password !!' },
minlength: { rule: 8, message: 'your password short too !!' }
}"/>
</div>
<div class="errors">
<validator-errors :validation="$validation1"></validator-errors>
</div>
</validator>
上例的代码渲染出的界面如下：
【作者：唐霜】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ang.net<div class="username">
<label for="username">username:</label>
<input id="username" type="text"></div><div class="password">
<label for="password">password:</label>
<input id="password" type="password"></div><div class="errors">
<div>
<p>password: your password short too !!</p>
</div>
<div>
<p>password: required you password !!</p>
</div>
<div>
<p>username: required you name !!</p>
</div>
</div>
如果你不喜欢 validator-err【原创内容，转载请注明出处】未经授权，禁止复制转载。ors 默认的错误消息格式，可以指定自定【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。义的组件或 partial 作为消息模版本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】。
【本文受版权保护】转载请注明出处：www.tangshua原创内容，盗版必究。未经授权，禁止复制转载。ng.net自定义组件模版
下例中展示了使用组件作为模版：
【访问 www.tangshuang.n【原创不易，请尊重版权】【转载请注明来源】et 获取更多精彩内容】未经授权，禁止复制转载。<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本文作者：唐霜，转载请注明出处。版：
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。<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 属性本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。来指定这部分验证结果。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。- group: 指定组的错误消息 (例如 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】$validation.group1.e【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。rrors) 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net【本文受版权保护】ngnet】
- field: 指定字段的错误消息 (例如【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net $validation.field1.【本文受版权保护】【关注微信公众号：wwwtangshuangnet】errors) 著作权归作者所有，禁止商业用途转载。【转载请注明来源】
下例中展示了 group 属性的使用：
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【未经授权禁止转载】ang.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.tangshua【本文受版权保护】著作权归作者所有，禁止商业用途转载。ng.net【本文首发于唐霜的博客】原创内容，盗版必究。字段验证事件
对于每一个字段，你都可以监听如下事件：
【原创内容，转载请注明出处】未经授权，禁止复制转载。- valid: 当字段验证结果变为有效时触【原创内容，转载请注明出处】【本文受版权保护】发 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。
- invalid: 当字段验证结果变为无效【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】时触发 【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ngnet】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ng.net
- touched: 当字段失去焦点时触发 【作者：唐霜】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
- dirty: 当字段值首次变化时触发 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【转载请注明来源】
- modified: 当字段值与初始值不同【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。时或变回初始值时触发 【本文受版权保护】【本文受版权保护】未经授权，禁止复制转载。【未经授权禁止转载】
<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
}
}
})
顶级验证事件
可以监听如下顶级验证结果的变化事件：
本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。- valid: 当全局验证结果变为有效时触【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。发 转载请注明出处：www.tangshua【原创内容，转载请注明出处】【原创内容，转载请注明出处】ng.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
- invalid: 当全局验证结果变为无效本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】时触发 转载请注明出处：www.tangshua原创内容，盗版必究。【本文首发于唐霜的博客】ng.net【转载请注明来源】
- touched: 当任意验证字段失去焦点未经授权，禁止复制转载。【作者：唐霜】时触发 【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【作者：唐霜】et 获取更多精彩内容】【原创不易，请尊重版权】
- dirty: 当任意字段首次改变时触发 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【未经授权禁止转载】
- modified: 当任意字段首次改变时【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】或所有字段恢复初始值时触发 【关注微信公众号：wwwtangshua【本文受版权保护】本文版权归作者所有，未经授权不得转载。ngnet】著作权归作者所有，禁止商业用途转载。
<div id="app">
<validator name="validation1" @valid="onValid" @invalid="onInvalid"
@touched="onTouched"
@dirty="onDirty"
@modified="onModified">
<div class="comment-field">
<label for="username">username:</label>
<input type="text" v-validate:username="['required']"/>
</div>
<div class="password-field">
<label for="password">password:</label>
<input type="password" v-validate:password="{ required: true, minlength: 8 }"/>
</div>
<div>
<p>{{occuredValid}}</p>
<p>{{occuredInvalid}}</p>
<p>{{occuredTouched}}</p>
<p>{{occuredDirty}}</p>
<p>{{occuredModified}}</p>
</div>
</validator>
</div>
new Vue({
el: '#app',
data: {
occuredValid: '',
occuredInvalid: '',
occuredTouched: '',
occuredDirty: '',
occuredModified: ''
},
methods: {
onValid: function () {
this.occuredValid = 'occured valid event'
this.occuredInvalid = ''
},
onInvalid: function () {
this.occuredInvalid = 'occured invalid event'
this.occuredValid = ''
},
onTouched: function () {
this.occuredTouched = 'occured touched event'
},
onDirty: function () {
this.occuredDirty = 'occured dirty event'
},
onModified: function (modified) {
this.occuredModified = 'occured modified event: ' + modified
}
}
})
手动设置错误消息
有时候你需要手动设置验证错误的消息，如从【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net服务器端得到的验证错误消息。这时你可以通未经授权，禁止复制转载。【本文首发于唐霜的博客】过 $setValidationErro本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。rs 方法设置错误消息，如下例：
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【原创不易，请尊重版权】【原创内容，转载请注明出处】et 获取更多精彩内容】<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() 被调本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。用时才会进行初始化。这在待验证的数据需要转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net异步加载时有用，避免了在得到数据前出现错【未经授权禁止转载】【作者：唐霜】误提示。
原创内容，盗版必究。转载请注明出处：www.tangshua原创内容，盗版必究。【版权所有，侵权必究】ng.net下例中在得到评论内容后验证器才开始工作；本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。如果不设置 lazy 属性，在得到评论内【本文受版权保护】未经授权，禁止复制转载。容前会显示错误提示。
原创内容，盗版必究。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【本文首发于唐霜的博客】ang.net【本文受版权保护】<!-- 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 方【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。法注册自定义验证器。
本文版权归作者所有，未经授权不得转载。【本文受版权保护】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ng.net【访问 www.tangshuang.n【原创不易，请尊重版权】原创内容，盗版必究。et 获取更多精彩内容】转载请注明出处：www.tangshua未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.net【原创不易，请尊重版权】提示: Vue.validator as【本文受版权保护】原创内容，盗版必究。set 继承自 Vue.js 的 ass原创内容，盗版必究。未经授权，禁止复制转载。et 管理系统.
本文版权归作者所有，未经授权不得转载。【作者：唐霜】
通过下例中的 email 自定义验证器详本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。细了解 Vue.validator 的使【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。用方法：
【本文受版权保护】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】// Register email validator function.
Vue.validator('email', function (val) {
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
})
new Vue({
el: '#app'
data: {
email: ''
}
})
<div id="app">
<validator name="validation1">
address: <input type="text" v-validate:address="['email']"><br />
<div>
<p v-show="$validation1.address.email">Invalid your mail address format.</p>
</div>
<validator>
</div>
局部注册
可以通过组件的 validators 选转载请注明出处：www.tangshuang.net【未经授权禁止转载】项注册只能在组件内使用的自定义验证器。
【本文受版权保护】【关注微信公众号：wwwtangshua【本文受版权保护】原创内容，盗版必究。ngnet】自定义验证器是通过在组件的 valida著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.nettors 下定义验证通过返回真不通过返回【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。假的回调函数来实现。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n【未经授权禁止转载】未经授权，禁止复制转载。et 获取更多精彩内容】原创内容，盗版必究。下例中注册了 numeric 和 url【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。 两个自定义验证器：
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。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【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。lidate 指令自动进行验证。然而有时【原创内容，转载请注明出处】【作者：唐霜】候我们需要关闭自动验证，在有需要时手动触【版权所有，侵权必究】【本文受版权保护】发验证。
转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ng.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。【本文受版权保护】initial
当 vue-validator 完成初始本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。编译后，会根据每一条 v-validat本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.nete 指令自动进行验证。如果你不需要自动验【版权所有，侵权必究】未经授权，禁止复制转载。证，可以通过 initial 属性或 v本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net-validate 验证规则来关闭自动验未经授权，禁止复制转载。【版权所有，侵权必究】证，如下所示：
【关注微信公众号：wwwtangshua【转载请注明来源】本文版权归作者所有，未经授权不得转载。ngnet】本文版权归作者所有，未经授权不得转载。【本文受版权保护】<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>
这在使用服务器端验证等异步验证方式时有用【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】，具体可见后文例子。
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ngnet】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。detect-blur and detect-change
vue-validator 会在检测到表【版权所有，侵权必究】原创内容，盗版必究。单元素(input, checkbox,转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。 select 等)上的 DOM 事件(著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。input, blur, change)著作权归作者所有，禁止商业用途转载。【转载请注明来源】时自动验证。此时，可以使用 detect【转载请注明来源】【原创内容，转载请注明出处】-change 和 detect-blu【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。r 属性：
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<div id="app">
<validator name="validation">
<form novalidate @submit="onSubmit">
<h1>user registration</h1>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" detect-change="off" detect-blur="off" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}" />
</div>
<div class="password">
<label for="password">password:</label>
<input id="password" type="password" v-model="password" detect-change="off" detect-blur="off" v-validate:password="{
required: { rule: true, message: 'required you new password !!' },
minlength: { rule: 8, message: 'your new password short too !!' }
}" />
</div>
<div class="confirm">
<label for="confirm">confirm password:</label>
<input id="confirm" type="password" detect-change="off" detect-blur="off" v-validate:confirm="{
required: { rule: true, message: 'required you confirm password !!' },
confirm: { rule: password, message: 'your confirm password incorrect !!' }
}" />
</div>
<div class="errors" v-if="$validation.touched">
<validator-errors :validation="$validation"></validator-errors>
</div>
<input type="submit" value="register" />
</form>
</validator>
</div>
new Vue({
el: '#app',
data: {
password: ''
},
validators: {
confirm: function (val, target) {
return val === target
}
},
methods: {
onSubmit: function (e) {
// validate manually
var self = this
this.$validate(true, function () {
if (self.$validation.invalid) {
e.preventDefault()
}
})
}
}
})
异步验证
当在需要进行服务器端验证，可以使用异步验本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】证，如下例：
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ng.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】原创内容，盗版必究。<template>
<validator name="validation">
<form novalidate>
<h1>user registration</h1>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text" detect-change="off" v-validate:username="{
required: { rule: true, message: 'required your name !!' },
exist: { rule: true, initial: 'off' }
}" />
<span v-if="checking">checking ...</span>
</div>
<div class="errors">
<validator-errors :validation="$validation"></validator-errors>
</div>
<input type="submit" value="register" :disabled="!$validation.valid" />
</form>
</validator>
</template>
function copyOwnFrom(target, source) {
Object.getOwnPropertyNames(source).forEach(function (propName) {
Object.defineProperty(target, propName, Object.getOwnPropertyDescriptor(source, propName))
})
return target
}
function ValidationError() {
copyOwnFrom(this, Error.apply(null, arguments))
}
ValidationError.prototype = Object.create(Error.prototype)
ValidationError.prototype.constructor = ValidationError
// exmpale with ES2015
export default {
data () {
return { checking: false }
},
validators: {
exist (val) {
this.vm.checking = true // spinner on
return fetch('/validations/exist', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: val
})
}).then((res) => {
this.vm.checking = false // spinner off
return res.json()
}).then((json) => {
return Object.keys(json).length > 0 ? Promise.reject(new ValidationError(json.message)) : Promise.resolve()
}).catch((error) => {
if (error instanceof ValidationError) {
return Promise.reject(error.message)
} else {
return Promise.reject('unexpected error')
}
})
}
}
}
异步验证接口
在异步验证时，可以使用如下两类接口：
未经授权，禁止复制转载。转载请注明出处：www.tangshua未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netng.net转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ng.net1. 函数
需要实现一个返回签名为 function【作者：唐霜】【作者：唐霜】 (resolve, reject) 如【本文受版权保护】著作权归作者所有，禁止商业用途转载。同 promise 一样的函数的自定义验【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】证器。函数参数解释如下：
【转载请注明来源】转载请注明出处：www.tangshua未经授权，禁止复制转载。【本文首发于唐霜的博客】ng.net- 验证结果
- 成功时: resolve 本文版权归作者所有，未经授权不得转载。【转载请注明来源】【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ngnet】
- 失败时: reject 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ang.net
【版权所有】唐霜 www.tangshu【本文受版权保护】【原创不易，请尊重版权】ang.net【原创不易，请尊重版权】
2. promise
需要实现一个返回 promise 的自定【未经授权禁止转载】【作者：唐霜】义验证器。根据验证结果来 resolve【本文受版权保护】【原创不易，请尊重版权】 或 reject。
【访问 www.tangshuang.n【未经授权禁止转载】本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。使用错误消息
如上例所示，在服务器端验证错误发生时，可本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。以使用服务器端返回的错误消息。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】ng.net【作者：唐霜】验证器函数 context
验证器函数 context 是绑定到 V【原创不易，请尊重版权】【本文首发于唐霜的博客】alidation 对象上的。Valid著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ation 对象提供了一些属性，这些属性转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】在实现特定的验证器时有用。
【版权所有，侵权必究】原创内容，盗版必究。vm 属性
暴露了当前验证所在的 vue 实例。
【版权所有】唐霜 www.tangshu【转载请注明来源】【本文首发于唐霜的博客】ang.net
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 元素。下【本文首发于唐霜的博客】【转载请注明来源】面展示了结合 International Teleph著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netone Input jQuery 插件使用的例子：
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【未经授权禁止转载】new Vue({
validators: {
phone: function (val) {
return $(this.el).intlTelInput('isValidNumber')
}
}
})
全局 API
Vue.validator( id, [definition] )
- 参数:
- {String} id 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。
- {Function | Object} 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net[definition] 【转载请注明来源】著作权归作者所有，禁止商业用途转载。
原创内容，盗版必究。【本文首发于唐霜的博客】
- 返回: validator defini【关注微信公众号：wwwtangshuangnet】【转载请注明来源】tion function or obj【本文首发于唐霜的博客】未经授权，禁止复制转载。ect 【作者：唐霜】【版权所有，侵权必究】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】
注册或获取全局验证器。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】/*
* 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 【本文受版权保护】【转载请注明来源】原创内容，盗版必究。【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】
- 详细: 一个只对当前 Vue 实例可见的【本文受版权保护】著作权归作者所有，禁止商业用途转载。验证器定义对象。 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【原创不易，请尊重版权】
实例元方法
$activateValidator()
- 参数: 无 【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ang.net原创内容，盗版必究。
- 用法: 激活使用 validator 元著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】素的 lazy 属性延迟初始化的验证器 【版权所有】唐霜 www.tangshu原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ang.net【版权所有】唐霜 www.tangshu原创内容，盗版必究。未经授权，禁止复制转载。ang.net
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> 【原创不易，请尊重版权】【版权所有，侵权必究】errors
- {String} field 指定错误字【原创内容，转载请注明出处】【本文受版权保护】段名。 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创不易，请尊重版权】
- {String} message 指定错著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。误消息。 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【原创内容，转载请注明出处】【本文受版权保护】ng.net【版权所有，侵权必究】
- {String} validator [未经授权，禁止复制转载。【版权所有，侵权必究】optional] 指定错误所在的验证器【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】。 【本文受版权保护】【版权所有】唐霜 www.tangshu【转载请注明来源】本文作者：唐霜，转载请注明出处。ang.net【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ang.net本文作者：唐霜，转载请注明出处。
【转载请注明来源】原创内容，盗版必究。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
- Array<Object> 【原创不易，请尊重版权】【版权所有，侵权必究】errors
- 用法: 用来设置验证错误结果。这在手动设著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】置服务器端验证产生的错误时有用。 【作者：唐霜】【本文首发于唐霜的博客】【未经授权禁止转载】【本文首发于唐霜的博客】
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.tangshua本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net【转载请注明来源】
- {Boolean} [touched] 【本文首发于唐霜的博客】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】et 获取更多精彩内容】
- {Function} [cb] 【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netang.net【本文受版权保护】
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【原创内容，转载请注明出处】ang.net
- 用法: Validate the tar【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】get formalable eleme【版权所有，侵权必究】【未经授权禁止转载】nt fields. 验证目标表单元素。
- 如果未设置 field 参数，验证所有字【原创不易，请尊重版权】【原创不易，请尊重版权】段； 【原创不易，请尊重版权】【转载请注明来源】未经授权，禁止复制转载。【转载请注明来源】
- 如果 touched 参数为 true，【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net那么验证结果的 touched 值会被设著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】置为 true； 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
【版权所有，侵权必究】原创内容，盗版必究。
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 转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ng.net【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshua【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ngnet】
- field 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ng.net本文作者：唐霜，转载请注明出处。
- detect-blur 未经授权，禁止复制转载。【未经授权禁止转载】【原创不易，请尊重版权】
- detect-change 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【未经授权禁止转载】ang.net
- initial 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ang.net著作权归作者所有，禁止商业用途转载。
【本文首发于唐霜的博客】未经授权，禁止复制转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。
- 用法: 自定需要验证的表单元素。可参见下著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】面的示例。 原创内容，盗版必究。【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【版权所有，侵权必究】ang.net【本文受版权保护】
- 另见:
- 验证器语法 【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ang.net【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net未经授权，禁止复制转载。
- 分组 本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。【转载请注明来源】
- 事件 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ng.net
- 结合 v-model 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
- 自定义验证时机<!– array s【原创不易，请尊重版权】【作者：唐霜】yntax –> 【访问 www.tangshuang.n【未经授权禁止转载】【版权所有，侵权必究】et 获取更多精彩内容】转载请注明出处：www.tangshua【转载请注明来源】【版权所有】唐霜 www.tangshuang.netng.net
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【原创不易，请尊重版权】ang.net【未经授权禁止转载】未经授权，禁止复制转载。【本文首发于唐霜的博客】
<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.tangshu本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ang.net
- groups 【原创内容，转载请注明出处】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshu【本文受版权保护】未经授权，禁止复制转载。ang.net
- lazy 【关注微信公众号：wwwtangshua【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ngnet】【本文受版权保护】
转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netng.net【转载请注明来源】【访问 www.tangshuang.n【版权所有，侵权必究】【版权所有，侵权必究】et 获取更多精彩内容】
- 用法: <validator>【本文首发于唐霜的博客】【未经授权禁止转载】; 元素用来在表单元素(input, s【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】elect, textarea等)上引入【转载请注明来源】【未经授权禁止转载】验证器。<validator>【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。; 元素本身会被替换。验证结果会关联到验原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。证器元素上，字段名是由 validato未经授权，禁止复制转载。【作者：唐霜】r 元素的 name 属性值加 $ 前缀【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net组成。小心: 验证器名称不要与 Vue.转载请注明出处：www.tangshuang.net【转载请注明来源】js 中的自带属性重复，如 $event本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。 等。 【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ang.net转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netng.net
- 另见:
- 验证结果结构 【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ngnet】本文作者：唐霜，转载请注明出处。
- 分组 【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net著作权归作者所有，禁止商业用途转载。
- 延迟初始化 【原创内容，转载请注明出处】【原创内容，转载请注明出处】【未经授权禁止转载】
- 自定义验证时机 转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【转载请注明来源】ng.net【版权所有，侵权必究】【作者：唐霜】原创内容，盗版必究。
- 异步验证 转载请注明出处：www.tangshua【作者：唐霜】【本文首发于唐霜的博客】ng.net【未经授权禁止转载】
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ang.net【原创不易，请尊重版权】未经授权，禁止复制转载。
<!-- basic -->
<validator name="validation">
<input type="text" v-validate:username="['required']">
<p v-if="$validation.invalid">invalid !!<p>
</validator>
<!-- validation grouping -->
<validator name="validation" :groups="['user', 'password']">
<label for="username">username:</label>
<input type="text" group="user" v-validate:username="['required']">
<label for="password">password:</label>
<input type="password" group="password" v-validate:password1="{ minlength: 8, required: true }"/>
<label for="confirm">password (confirm):</label>
<input type="password" group="password" v-validate:password2="{ minlength: 8, required: true }"/>
<p v-if="$validation.user.invalid">Invalid yourname !!</p>
<p v-if="$validation.password.invalid">Invalid password input !!</p>
</validator>
<!-- lazy initialization -->
<validator lazy name="validation">
<input type="text" :value="comment" v-validate:comment="{ required: true, maxlength: 256 }"/>
<span v-if="$validation.comment.required">Required your comment</span>
<span v-if="$validation.comment.maxlength">Too long comment !!</span>
<button type="button" value="save" @click="onSave" v-if="valid">
</validator>
validator-errors
- 属性:
- validation (required【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。 with v-bind) 原创内容，盗版必究。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ang.net【原创不易，请尊重版权】
- component 【作者：唐霜】未经授权，禁止复制转载。
- partial 【未经授权禁止转载】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ng.net
- group 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【本文受版权保护】ang.net【原创内容，转载请注明出处】
- field 【本文首发于唐霜的博客】【原创不易，请尊重版权】
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ang.net
- 用法: <validator-er转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】rors> 可以作为错误消息的出口【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。。<validator-error本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。s> 元素会被替换成默认的错误消息【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net模板。可以通过 component 和 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。partial 属性来自定义错误消息的显【转载请注明来源】本文作者：唐霜，转载请注明出处。示方式。 【未经授权禁止转载】原创内容，盗版必究。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ng.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.netlick, hover，已经熟的不能再熟原创内容，盗版必究。【本文首发于唐霜的博客】悉了。本章就来介绍在vue里面怎么快速实【作者：唐霜】【转载请注明来源】现事件绑定。
【版权所有，侵权必究】【本文受版权保护】<button @click.prevent="say('A word!', $event)">ok</button>
上面这短短一段代码，有4个东西要介绍，下转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】面一一介绍：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。使用v-on:绑定事件
前面已经对v-on指令讲过了，不讲了。
【关注微信公众号：wwwtangshua【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【转载请注明来源】方法函数
事件的回调函数可以直接写在methods著作权归作者所有，禁止商业用途转载。【转载请注明来源】里面：
本文作者：唐霜，转载请注明出处。【本文受版权保护】本文作者：唐霜，转载请注明出处。【作者：唐霜】new Vue({
methods: {
say(word, e) { alert(word) },
},
})
$event变量
它是直接被绑定到vue的实例上的属性。相未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。当于this.$event，也是事件信息本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，比如$event.target等信息。原创内容，盗版必究。未经授权，禁止复制转载。它和DOM原生事件的event是一样的。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】修饰符
事件修饰符比较多，前文已经提到了，也不讲【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。了。
【未经授权禁止转载】【本文首发于唐霜的博客】原创内容，盗版必究。【原创内容，转载请注明出处】自定义事件
vue提供了四个和事件相关的实例方法，分本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。别是$on, $once, $off, 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。$emit，用过jquery的同学应该非【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。常熟悉了。我们来看下具体怎么用：
【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ngnet】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。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【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ry的用法几乎一样，v-on主要是在模板【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。中绑定DOM原生的一些事件，而$on, 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】$once可以绑定自定义的事件，两者互不【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】干扰，$emit能否触发原生的DOM事件本文作者：唐霜，转载请注明出处。【转载请注明来源】呢？请注意阅读下文。
【版权所有，侵权必究】【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。未经授权，禁止复制转载。ang.net【原创内容，转载请注明出处】【原创不易，请尊重版权】$on
监听当前实例上的自定义事件。事件可以由v【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。m.$emit触发。回调函数会接收所有传【转载请注明来源】原创内容，盗版必究。入事件触发函数的额外参数。
【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ang.net原创内容，盗版必究。【转载请注明来源】vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')// -> "hi"
$once
监听一个自定义事件，但是只触发一次，在第本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。一次触发之后移除监听器。
【关注微信公众号：wwwtangshua【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netngnet】【未经授权禁止转载】vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')// -> "hi"，同时移除test事件
vm.$emit('test', 'again') // test事件被移除了，所以这个触发不会有任何结果
$on和$once绑定的事件是在实例上，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net而非DOM元素上，所以它们跟DOM原生的【本文受版权保护】【关注微信公众号：wwwtangshuangnet】事件是两回事。DOM原生事件是在触发DO著作权归作者所有，禁止商业用途转载。【本文受版权保护】M元素特定事件时被触发的，比如click【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。。但是对于这里的实例vm而言，click【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】没有来源，实例根本不存在被click之说【版权所有，侵权必究】转载请注明出处：www.tangshuang.net，所以$on和$once跟DOM原生事件【版权所有，侵权必究】【版权所有，侵权必究】扯不上任何关系。同理，$emit也是作用本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net于实例之上，既然实例跟原生的DOM事件扯【版权所有，侵权必究】未经授权，禁止复制转载。不上关系，那么$emit也就跟原生DOM转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。事件扯不上关系了。这就回答了上文提出的那【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。个问题。
【未经授权禁止转载】【转载请注明来源】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ngnet】【原创内容，转载请注明出处】所以说，$on和$once绑定的是一个自转载请注明出处：www.tangshuang.net【作者：唐霜】定义事件，这些事件是存储在vue内部的事【转载请注明来源】【版权所有】唐霜 www.tangshuang.net件管理器中，跟DOM事件是两码事，既然如【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】此，跟v-on事件绑定也就是两回事。
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netng.net【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【访问 www.tangshuang.n【转载请注明来源】【本文首发于唐霜的博客】et 获取更多精彩内容】$off
移除事件监听器。
【转载请注明来源】未经授权，禁止复制转载。转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ng.net- 如果没有提供参数，则移除所有的事件监听器【原创内容，转载请注明出处】【版权所有，侵权必究】； 【作者：唐霜】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【本文首发于唐霜的博客】ang.net【版权所有】唐霜 www.tangshu【作者：唐霜】著作权归作者所有，禁止商业用途转载。ang.net
- 如果只提供了事件，则移除该事件所有的监听转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。器； 本文作者：唐霜，转载请注明出处。【作者：唐霜】
- 如果同时提供了事件与回调，则只移除这个回【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。调的监听器。 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ang.net
$emit
触发当前实例上的事件。附加参数都会传给监【本文首发于唐霜的博客】【作者：唐霜】听器回调。参数怎么传前面的代码已经演示过著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。了。
【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ngnet】【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ngnet】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ang.netClass和Style的绑定
数据绑定一个常见需求是操作元素的 cla【作者：唐霜】原创内容，盗版必究。ss 列表和它的内联样式。因为它们都是属【未经授权禁止转载】【作者：唐霜】性 ，我们可以用v-bind 处理它们：转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。只需要计算出表达式最终的字符串。不过，字本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。符串拼接麻烦又易错。因此，在 v-bin【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。d 用于 class 和 style 时【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。， Vue.js 专门增强了它。表达式的【未经授权禁止转载】【未经授权禁止转载】结果类型除了字符串之外，还可以是对象或数【原创内容，转载请注明出处】【原创不易，请尊重版权】组。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ang.net本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】绑定 HTML Class
对象语法
我们可以传给 v-bind:class 【转载请注明来源】原创内容，盗版必究。一个对象，以动态地切换 class 。
【访问 www.tangshuang.n原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】【本文受版权保护】【原创不易，请尊重版权】<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 未经授权，禁止复制转载。未经授权，禁止复制转载。的更新将取决于数据属性 isActive原创内容，盗版必究。原创内容，盗版必究。 是否为真值 。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。我们也可以在对象中传入更多属性用来动态切【原创内容，转载请注明出处】【转载请注明来源】换多个 class 。此外， v-bin本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】d:class 指令可以与普通的 cla本文作者：唐霜，转载请注明出处。【未经授权禁止转载】ss 属性共存。如下模板:
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ang.net【作者：唐霜】转载请注明出处：www.tangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ng.net<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
如下 data:
【访问 www.tangshuang.n原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。et 获取更多精彩内容】data: {
isActive: true,
hasError: false
}
渲染为:
【转载请注明来源】著作权归作者所有，禁止商业用途转载。<div class="static active"></div>
当 isActive 或者 hasErr【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netor 变化时，class 列表将相应地更未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】新。例如，如果 hasError 的值为【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】 true ， class列表将变为 &本文作者：唐霜，转载请注明出处。【本文受版权保护】#8220;static active 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】text-danger”。
【作者：唐霜】【本文受版权保护】【原创不易，请尊重版权】你也可以直接绑定数据里的一个对象：
【未经授权禁止转载】【作者：唐霜】转载请注明出处：www.tangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ng.net<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
渲染的结果和上面一样。我们也可以在这里绑未经授权，禁止复制转载。【作者：唐霜】定返回对象的计算属性。这是一个常用且强大未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】的模式：
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
数组语法
我们可以把一个数组传给 v-bind:c【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】lass ，以应用一个 class 列表本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】：
【原创不易，请尊重版权】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。<div v-bind:class="[activeClass, errorClass]">
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为:
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ng.net【本文受版权保护】原创内容，盗版必究。<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 clas【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。s ，可以用三元表达式：
【转载请注明来源】【转载请注明来源】<div v-bind:class="[isActive ? activeClass : '', errorClass]">
此例始终添加 errorClass ，但【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。是只有在 isActive 是 true【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net 时添加 activeClass 。
【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ngnet】
不过，当有多个条件 class 时这样【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】写有些繁琐。可以在数组语法中使用对象语法【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net：
<div v-bind:class="[{ active: isActive }, errorClass]">
用在组件上
这个章节假设你已经对 Vue 组件 有一著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】定的了解。当然你也可以跳过这里，稍后再回【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net过头来看。当你在一个定制的组件上用到 c本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。lass 属性的时候，这些类将被添加到根【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net元素上面，这个元素上已经存在的类不会被覆【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net盖。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。例如，如果你声明了这个组件:
原创内容，盗版必究。【关注微信公众号：wwwtangshua【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ngnet】【本文受版权保护】著作权归作者所有，禁止商业用途转载。Vue.component('my-component', { template: '<p class="foo bar">Hi</p>'})
然后在使用它的时候添加一些 class：
【版权所有】唐霜 www.tangshu【未经授权禁止转载】未经授权，禁止复制转载。ang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。<my-component class="baz boo"></my-component>
HTML 最终将被渲染成为:
【原创不易，请尊重版权】【版权所有，侵权必究】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】<p class="foo bar baz boo">Hi</p>
同样的适用于绑定 HTML class 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。:
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ngnet】<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 true 的时【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。候，HTML 将被渲染成为:
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】et 获取更多精彩内容】<p class="foo bar active">Hi</p>
绑定内联样式
对象语法
v-bind:style 的对象语法十分【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net直观——看着非常像 CSS ，其实它是一【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】个 JavaScript 对象。 CSS原创内容，盗版必究。转载请注明出处：www.tangshuang.net 属性名可以用驼峰式（camelCase【版权所有】唐霜 www.tangshuang.net【转载请注明来源】）或短横分隔命名（kebab-case）【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。：
【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】et 获取更多精彩内容】【未经授权禁止转载】【原创不易，请尊重版权】<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，让模板更原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net清晰：
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ang.net【本文受版权保护】【转载请注明来源】<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
同样的，对象语法常常结合返回对象的计算属【原创内容，转载请注明出处】【原创内容，转载请注明出处】性使用。
【访问 www.tangshuang.n【版权所有，侵权必究】【原创不易，请尊重版权】et 获取更多精彩内容】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ang.net【版权所有，侵权必究】数组语法
v-bind:style 的数组语法可以【版权所有，侵权必究】转载请注明出处：www.tangshuang.net将多个样式对象应用到一个元素上：
【原创不易，请尊重版权】【作者：唐霜】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netang.net本文版权归作者所有，未经授权不得转载。<div v-bind:style="[baseStyles, overridingStyles]">
自动添加前缀
当 v-bind:style 使用需要特未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】定前缀的 CSS 属性时，如 trans【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】form ，Vue.js 会自动侦测并添未经授权，禁止复制转载。【本文受版权保护】加相应的前缀。
【本文首发于唐霜的博客】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.net原创内容，盗版必究。【关注微信公众号：wwwtangshua【本文受版权保护】【原创内容，转载请注明出处】ngnet】修饰符
前面两处提到了修饰符，这一章其实主要是要未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。总结一下，内容是跟前面一样的，如果你已经本文版权归作者所有，未经授权不得转载。【作者：唐霜】理解了，就不用看。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【本文受版权保护】著作权归作者所有，禁止商业用途转载。ng.net【版权所有，侵权必究】事件修饰符
在事件处理程序中调用 event.pre【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ventDefault() 或 even本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nett.stopPropagation() 【本文受版权保护】原创内容，盗版必究。是非常常见的需求。尽管我们可以在 met本文版权归作者所有，未经授权不得转载。【本文受版权保护】hods 中轻松实现这点，但更好的方式是【原创内容，转载请注明出处】原创内容，盗版必究。：methods 只有纯粹的数据逻辑，而本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net不是去处理 DOM 事件细节。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netng.net【本文首发于唐霜的博客】为了解决这个问题， Vue.js 为 v【版权所有】唐霜 www.tangshuang.net【转载请注明来源】-on 提供了 事件修饰符。通过由点(.【转载请注明来源】原创内容，盗版必究。)表示的指令后缀来调用修饰符。
【关注微信公众号：wwwtangshua【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netngnet】【访问 www.tangshuang.n【版权所有，侵权必究】原创内容，盗版必究。et 获取更多精彩内容】【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ngnet】【访问 www.tangshuang.n【本文受版权保护】【本文受版权保护】et 获取更多精彩内容】- .stop 原创内容，盗版必究。转载请注明出处：www.tangshua【原创内容，转载请注明出处】未经授权，禁止复制转载。ng.net
- .prevent 【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netang.net本文版权归作者所有，未经授权不得转载。
- .capture 原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- .self 【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【本文受版权保护】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ng.net
- .once 【本文受版权保护】转载请注明出处：www.tangshua【未经授权禁止转载】未经授权，禁止复制转载。ng.net【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net【本文受版权保护】ngnet】
按键修饰符
在监听键盘事件时，我们经常需要监测常见的本文作者：唐霜，转载请注明出处。【本文受版权保护】键值。 Vue 允许为 v-on 在监听未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。键盘事件时添加按键修饰符。记住所有的 k【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。eyCode 比较困难，所以 Vue 为本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。最常用的按键提供了别名。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ngnet】未经授权，禁止复制转载。全部的按键别名：
原创内容，盗版必究。原创内容，盗版必究。- .enter 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- .tab 【访问 www.tangshuang.n未经授权，禁止复制转载。【作者：唐霜】et 获取更多精彩内容】【作者：唐霜】【版权所有，侵权必究】
- .delete (捕获 “删除” 和 “【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】退格” 键) 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】
- .esc 【版权所有，侵权必究】未经授权，禁止复制转载。原创内容，盗版必究。【版权所有，侵权必究】
- .space 【转载请注明来源】【作者：唐霜】未经授权，禁止复制转载。
- .up 【本文受版权保护】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
- .down 转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ng.net未经授权，禁止复制转载。
- .left 【原创不易，请尊重版权】【转载请注明来源】【本文受版权保护】【访问 www.tangshuang.n【作者：唐霜】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】
- .right 转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ng.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】【未经授权禁止转载】ngnet】
可以通过全局 config.keyCod本文作者：唐霜，转载请注明出处。【本文受版权保护】es 对象自定义按键修饰符别名。
【作者：唐霜】【关注微信公众号：wwwtangshua【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【转载请注明来源】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ng.netVue.config.keyCodes.f1 = 112 // 这样用 <input v-on:keyup.112="submit">
可以用如下修饰符开启鼠标或键盘事件监听，原创内容，盗版必究。未经授权，禁止复制转载。使在按键按下时发生响应。
原创内容，盗版必究。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ang.net【版权所有，侵权必究】- .ctrl 原创内容，盗版必究。未经授权，禁止复制转载。【本文受版权保护】【访问 www.tangshuang.n【转载请注明来源】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】
- .alt 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【转载请注明来源】【本文受版权保护】
- .shift 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- .meta 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文受版权保护】
组件
终于进入组件这一章。前文多次提到组件是v【原创内容，转载请注明出处】原创内容，盗版必究。ue里面非常核心的概念。但是实际上，组件【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net在本书中，更多的是提倡作为一种思想，具体原创内容，盗版必究。【本文首发于唐霜的博客】使用的时候跟本书最前面的“vue实例”差【本文受版权保护】【版权所有】唐霜 www.tangshuang.net别不会太大，除了data()的地方需要着【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net重强调，如果不涉及其他，组件实例和app【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】级别实例差距不会有太大理解上的鸿沟。
【访问 www.tangshuang.n【作者：唐霜】【本文受版权保护】et 获取更多精彩内容】原创内容，盗版必究。【版权所有，侵权必究】【未经授权禁止转载】既然是一种思想，那么组件涉及的问题就不单原创内容，盗版必究。【作者：唐霜】单是编程问题。比如组件之间如何通信，父子【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。组件之间的问题，数据流等问题。这些只有当【作者：唐霜】转载请注明出处：www.tangshuang.net我们探讨组件才会提出来的问题，需要你更多【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。的进行思考，想通之后，这些问题在实践中怎【版权所有，侵权必究】【未经授权禁止转载】么处理就迎刃而解了。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【关注微信公众号：wwwtangshua原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ngnet】这一章也是所有入门级别知识的最后一章，从未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。这一章之后，就要进入到更加深入的学习，这【本文受版权保护】本文版权归作者所有，未经授权不得转载。些深入学习是必须的，不然无法认识vue的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】原貌。但是深入学习之前，前面几章的基础学【本文首发于唐霜的博客】未经授权，禁止复制转载。习可以帮助你快速理解vue的基本使用方法【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net，掌握之后，算是入门了。
原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。【版权所有，侵权必究】什么是组件？
组件（Component）是 Vue.j未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。s 最强大的功能之一。组件可以扩展 HT原创内容，盗版必究。【转载请注明来源】ML 元素，封装可重用的代码。在较高层面原创内容，盗版必究。【本文首发于唐霜的博客】上，组件是自定义元素， Vue.js 的【原创不易，请尊重版权】【未经授权禁止转载】编译器为它添加特殊功能。在有些情况下，组【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。件也可以是原生 HTML 元素的形式，以未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net is 特性扩展。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【本文首发于唐霜的博客】ang.net本文作者：唐霜，转载请注明出处。简单的说，vue组件就是一个js类，使用【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net的时候new一下，得到一个组件的实例，组【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】件实例有很多接口，app层面就可以调用这本文版权归作者所有，未经授权不得转载。【转载请注明来源】些接口来把组件的功能集成到app中。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。在开发层面上，你只需要使用Vue.ext【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】end({…})就可以得到一【转载请注明来源】【转载请注明来源】个组件。而开发的大部分工作，就是写好大括【原创不易，请尊重版权】【原创不易，请尊重版权】号里面的内容。
【未经授权禁止转载】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【作者：唐霜】ng.net创建一个组件
上面说过了，开发层面上，创建一个组件只需未经授权，禁止复制转载。【未经授权禁止转载】要使用Vue.extend，如下：
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ng.netvar MyComponent = Vue.extend({
template: '<div>OK</div>',
})
这样就创建了一个组件构造器MyCompo【原创不易，请尊重版权】【本文受版权保护】nent。实际上，Vue.extend的著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net结果是Vue的一个子类。既然是一个类，就原创内容，盗版必究。转载请注明出处：www.tangshuang.net可以被实例化，通过实例化得到一个组件实例【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】，“组件实例”这个称呼在前面已经提到过了转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。。组件构造器是一个类，可以被实例化为组件转载请注明出处：www.tangshuang.net【转载请注明来源】实例。
【本文受版权保护】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net未经授权，禁止复制转载。var component1 = new MyComponent()
关于Vue.extend，我们会在后文继未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。续深入，这里就不赘述了。组件实例有一些方【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。法可以用，例如$mount方法，这也在后原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。面的Vue.extend部分去解释。本章未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】主要是要让你学会组件的思想和主要开发方式本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】。
【版权所有，侵权必究】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【版权所有，侵权必究】【原创内容，转载请注明出处】ngnet】注册一个组件
创建好了组件，接下来要在vue中注册它。本文作者：唐霜，转载请注明出处。【转载请注明来源】注册组件也有全局和局部两种。注册是什么概【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】念呢？其实注册是创建一个组件构造器的引用转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，并可以形式化的进行实例化。所谓形式化，【本文受版权保护】【转载请注明来源】简单的说，就是把组件注册成一个html元【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。素，这样可以直接在模板中使用这个跟组件等【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】价的元素来实例化组件。
【原创不易，请尊重版权】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ng.net// 局部注册
new Vue({
el: '#app',
template: '<div><my-component></my-component></div>',
components: {
'my-component': MyComponent,
},
})
// 全局注册Vue.component('my-component', MyComponent)
全局注册有一个好处，就是可以在任何一个v本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ue实例中去使用。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。使用一个注册好的组件
组件注册好之后，就可以在模板中使用注册的本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net组件名称，像一个html元素一样调用它，【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】而且这个元素还支持指令，比如v-for之【转载请注明来源】【版权所有】唐霜 www.tangshuang.net类的。基本的使用方法是在app的模板中使未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。用它：
未经授权，禁止复制转载。原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。<div> <my-component></my-component> </div>
因为在创建组件的时候，传入了templa【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】te值，所以<my-compone【作者：唐霜】【作者：唐霜】nt>的地方就会替换为组件的模板编【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】译后的html，所以最终看到的结果是：
【版权所有】唐霜 www.tangshu【转载请注明来源】原创内容，盗版必究。ang.net原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。<div> <div>OK</div> </div>
这是最简单的情况，就是模板替换一下而已。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】如果再把指令加进来，把数据绑定加进来，组转载请注明出处：www.tangshuang.net【作者：唐霜】件和app的互动就非常复杂了。
未经授权，禁止复制转载。
使用一个组件（比如在模板中插入<【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】my-component>元素）的【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】本质，是创建一个组件实例。也就是说，一个【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。<my-component>【作者：唐霜】【未经授权禁止转载】就是一个组件实例，它们共享一个组件构造器【转载请注明来源】【版权所有】唐霜 www.tangshuang.net（一个js类）。
简易注册
上面我的做法是先创建一个组件构造器，然后【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】把组件构造器传入实例构造器。实际上，在实转载请注明出处：www.tangshuang.net【转载请注明来源】践开发中，我们基本不会这样干，我们大部分本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net都会使用简易方式直接注册，跳过创建步骤：
【原创内容，转载请注明出处】【本文受版权保护】【作者：唐霜】【作者：唐霜】Vue.component('my-component', {
template: '<div>OK</div>',
})
包括在创建vue实例的时候也是这样，直接【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net传对象字面量进去即可。相当于注册过程会自【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】动创建一个匿名的组件构造器。
【原创内容，转载请注明出处】
在开发中，如果不涉及组件实例复用问题，【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】这个方法非常好。也是最推荐的做法。
data必须是函数
在创建或注册模板的时候，传入一个data【原创不易，请尊重版权】【转载请注明来源】属性作为用来绑定的数据。但是在组件中，d【原创不易，请尊重版权】【本文首发于唐霜的博客】ata必须是一个函数，而不能直接把一个对著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。象赋值给它。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】【原创不易，请尊重版权】Vue.component('my-component', {
template: '<div>OK</div>',
data() {
return {} // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
},
})
你在前面看到，在new Vue()的时候本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，是可以给data直接赋值为一个对象的。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】这是怎么回事，为什么到了组件这里就不行了【关注微信公众号：wwwtangshuangnet】【转载请注明来源】。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ang.net你要理解，上面这个操作是一个简易操作，实【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。际上，它首先需要创建一个组件构造器，然后【原创内容，转载请注明出处】【未经授权禁止转载】注册组件。注册组件的本质其实就是建立一个【关注微信公众号：wwwtangshuangnet】【转载请注明来源】组件构造器的引用。使用组件才是真正创建一【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。个组件实例。所以，注册组件其实并不产生新著作权归作者所有，禁止商业用途转载。【作者：唐霜】的组件类，但会产生一个可以用来实例化的新【原创内容，转载请注明出处】原创内容，盗版必究。方式。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。理解这点之后，再理解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【原创不易，请尊重版权】行处理：
【原创不易，请尊重版权】【本文受版权保护】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本身设本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】计无关。其实vue不应该把这个方法名取为著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。data()，应该叫setData或其他【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。更容易立即的方法名。
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ngnet】【原创内容，转载请注明出处】prop
什么是prop?
首先，什么是prop？prop也是属性，著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】但是它和attribution不一样，a【原创不易，请尊重版权】【本文首发于唐霜的博客】ttribution往往是固定的值属性，本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】而prop更多的是动态的状态值属性，最简【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。单的例子就是input checkbox著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的checked属性，checked属性著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的attr值是它的初始值，而prop值是【本文首发于唐霜的博客】原创内容，盗版必究。它的当前值，这对于熟悉jquery的同学【原创不易，请尊重版权】【本文首发于唐霜的博客】而已应该比较好理解。
【版权所有，侵权必究】【作者：唐霜】为组件声明props属性
vue里面，组件实例的作用域是孤立的。这【版权所有】唐霜 www.tangshuang.net【作者：唐霜】意味着不能(也不应该)在子组件的模板内直转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net接引用父组件的数据。要让子组件使用父组件【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的数据，我们需要通过子组件的props选【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net项。
【作者：唐霜】原创内容，盗版必究。子组件要显式地用 props 选项声明它期待获得的数据：
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
使用prop属性
这样之后，message就变成了一个pr【转载请注明来源】【版权所有，侵权必究】op属性，在模板中，你使用child这个【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】元素时，就可以给这个元素传一个messa未经授权，禁止复制转载。【原创内容，转载请注明出处】ge属性进去：
【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ang.net【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ngnet】【本文受版权保护】<child message="hello!"></child>
如果在创建组件的时候没有声明props，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net那么<child>的mess【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。age就没用。
原创内容，盗版必究。【原创内容，转载请注明出处】未经授权，禁止复制转载。【版权所有，侵权必究】prop属性命名注意点
如果你在声明props的时候，属性名是多本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】个单词构成的怎么办？在注册组件的时候使用【未经授权禁止转载】【转载请注明来源】驼峰命名方式：
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文受版权保护】Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
但是在使用组件的时候，传入的属性名得是短【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。横线隔开的：
【未经授权禁止转载】【本文首发于唐霜的博客】<child my-message="hello!"></child>
这是因为html不区分大小写，你写成<child myMessage="hello!"></child>的话，假如有一个属性名是mymessage怎么办？所以，一定要注意这一点。
动态绑定prop属性值
既然是当做html元素的属性，那么就跟前【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。面讲的模板语法想通，你可以在prop属性【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。上尝试使用一些指令，比如v-bind，例原创内容，盗版必究。原创内容，盗版必究。如：
【原创内容，转载请注明出处】转载请注明出处：www.tangshua【版权所有，侵权必究】【版权所有，侵权必究】ng.net<child :my-message="msg"></child>
注意，这里的<child>是著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】在父组件，或者app层面的vue实例的模【作者：唐霜】【原创内容，转载请注明出处】板中使用的，所以这里的msg这个变量也是【本文受版权保护】著作权归作者所有，禁止商业用途转载。来自父组件或app。
【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】
这里有一个注意点，如果是普通的传值，不【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net使用v-bind，那么值的内容是一个字符【本文首发于唐霜的博客】【原创不易，请尊重版权】串，即使你给了一个数字，它传进去还是个字转载请注明出处：www.tangshuang.net【未经授权禁止转载】符串。想要传数字或其他类型的数据，应该用【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netv-bind，比如：
<child :my-message="1"></child>
这个时候组件内获取的才是number，而本文版权归作者所有，未经授权不得转载。【转载请注明来源】不是string。
【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【本文首发于唐霜的博客】单向数据绑定
prop 是单向绑定的：当父组件的属性变【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。化时，将传导给子组件，但是不会反过来。这【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net是为了防止子组件无意修改了父组件的状态。
【转载请注明来源】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ang.net【访问 www.tangshuang.n【转载请注明来源】【原创内容，转载请注明出处】et 获取更多精彩内容】【访问 www.tangshuang.n【作者：唐霜】【作者：唐霜】et 获取更多精彩内容】另外，每次父组件更新时，子组件的所有 p本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netrop 都会更新为最新值。这意味着你不应【本文首发于唐霜的博客】【本文受版权保护】该在子组件内部改变 prop 。如果你这【转载请注明来源】【版权所有】唐霜 www.tangshuang.net么做了，Vue 会在控制台给出警告。
【原创不易，请尊重版权】【原创不易，请尊重版权】这一点非常好理解：JavaScript的【转载请注明来源】【原创内容，转载请注明出处】对象是引用类型数据，它的每一个属性都指向本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。同一个内存空间，所以不同的变量引用同一个原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】对象的话，其中一个的属性一改，另一个也会转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net跟着改。父组件和子组件之间的prop也是原创内容，盗版必究。【本文首发于唐霜的博客】一样，你修改子组件里面的prop，那么父【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。组件里面的对应的属性也该了，这会让父组件未经授权，禁止复制转载。【转载请注明来源】或app层面产生混乱，一定会出bug。
转载请注明出处：www.tangshua【本文首发于唐霜的博客】【本文受版权保护】ng.net【本文受版权保护】正确的处理方法是，在创建组件时，保证组件【未经授权禁止转载】本文作者：唐霜，转载请注明出处。只是接收prop数据，接收到以后马上放在【版权所有】唐霜 www.tangshuang.net【转载请注明来源】自己的私有属性中去：
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。props: ['initialCounter'],data: function () {
return { counter: this.initialCounter }
}
props: ['size'],computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
上面一个是通过data直接挂在一个属性上【作者：唐霜】本文作者：唐霜，转载请注明出处。，一个是通过计算属性，把prop只当做计著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。算的一个依赖。总之，这两种方式都可以解决【关注微信公众号：wwwtangshuangnet】【作者：唐霜】上面说的不允许子组件修改prop原始值的【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】问题。
【转载请注明来源】【关注微信公众号：wwwtangshua【转载请注明来源】【原创不易，请尊重版权】ngnet】转载请注明出处：www.tangshua原创内容，盗版必究。【未经授权禁止转载】ng.net【原创内容，转载请注明出处】如果你使用data，你在组件内修改了这个【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。属性值，那就跟prop没关系了，后期父组未经授权，禁止复制转载。【版权所有，侵权必究】件的prop值改变，也不会影响data了【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】。
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ang.net【转载请注明来源】原创内容，盗版必究。Prop 验证
我们可以为组件的 props 指定验证规【版权所有，侵权必究】【作者：唐霜】格。如果传入的数据不符合规格，Vue 会【原创内容，转载请注明出处】【转载请注明来源】发出警告。当组件给其他人使用时，这很有用著作权归作者所有，禁止商业用途转载。【作者：唐霜】。
本文版权归作者所有，未经授权不得转载。
要指定验证规格，需要用对象的形式，而不【转载请注明来源】【本文受版权保护】能用字符串数组：
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type 可以是下面原生构造器：
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。- String 原创内容，盗版必究。【版权所有，侵权必究】未经授权，禁止复制转载。
- Number 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ang.net
- Boolean 【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ang.net【原创不易，请尊重版权】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【作者：唐霜】et 获取更多精彩内容】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ngnet】
- Function 【本文首发于唐霜的博客】【原创不易，请尊重版权】【原创不易，请尊重版权】
- Object 【本文首发于唐霜的博客】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- Array 【原创内容，转载请注明出处】未经授权，禁止复制转载。【本文首发于唐霜的博客】
type 也可以是一个自定义构造器函数，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net使用 instanceof 检测。
未经授权，禁止复制转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【转载请注明来源】ang.net当 prop 验证失败，Vue会在抛出警【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。告 (如果使用的是开发版本)。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。事件反馈
前面一节指出，子组件不能自己主动修改pr【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】op，以防改变了父组件或app的值导致b【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ug。那么如果子组件确实需要上级应用修改【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。这些变量，让自己更好的适应新情况怎么办？【本文受版权保护】【作者：唐霜】那就让父组件或app自己来改。可是父组件【本文受版权保护】原创内容，盗版必究。怎么知道自己要改？通过子组件的事件就可以本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net做到了。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。前文我们已经学过事件绑定的知识了，组件的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】实例也具有事件绑定的能力。所以我们可以在【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】子组件里面触发事件，在父组件里面监听这个原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net事件，当事件被触发时，父组件通过绑定的回著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net调函数来执行prop的更改。当然除了更改【作者：唐霜】【本文受版权保护】prop，还可以做其他的事情。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。只能使用v-on绑定自定义事件
前文我们指出，直接用实例的$on方法来绑未经授权，禁止复制转载。【原创内容，转载请注明出处】定自定义事件。但是在这里不行，不能直接在【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。父组件里面直接用$on，因为我们使用&l【本文受版权保护】著作权归作者所有，禁止商业用途转载。t;my-component>实例【转载请注明来源】原创内容，盗版必究。化组件时，没有得到一个变量用来存储实例化【作者：唐霜】本文作者：唐霜，转载请注明出处。对象，它相当于是匿名的，所以我们找不到它本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，当然也找不到它的$on。
原创内容，盗版必究。【访问 www.tangshuang.n未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ng.net【原创内容，转载请注明出处】那怎么办？只能使用v-on来进行事件绑定未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】et 获取更多精彩内容】<child @clicked="showSomething"></child>
这里的clicked是事件名，在子组件里【版权所有，侵权必究】【转载请注明来源】面，通过this.$emit(̵【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。6;clicked’)触发事本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。件。父组件里面，通过上面代码中的@cli原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。cked=”showSome著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netthing”监听这个事件，而转载请注明出处：www.tangshuang.net【转载请注明来源】showSomething就是事件回调函未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。数，是父组件methods方法之一。
【未经授权禁止转载】【本文受版权保护】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。使用v-model实现input双向绑定
上面不是说只能使用v-on绑定事件吗？是转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的，但是你是否还记得前文提到过v-mod未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。el其实是v-bind和v-on的语法糖【原创不易，请尊重版权】【本文受版权保护】？上一节我们说过了，<child&本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。gt;可以使用v-bind，而这里又说可原创内容，盗版必究。本文作者：唐霜，转载请注明出处。以使用v-on，所以只要情况允许，就可以【作者：唐霜】著作权归作者所有，禁止商业用途转载。使用v-model。
【本文首发于唐霜的博客】原创内容，盗版必究。所谓情况允许，是指符合下面条件：
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】- 接受一个 value 属性 【作者：唐霜】【版权所有】唐霜 www.tangshu【未经授权禁止转载】【作者：唐霜】ang.net【本文首发于唐霜的博客】【转载请注明来源】
- 在有新的 value 时触发 input【转载请注明来源】原创内容，盗版必究。 事件 【本文受版权保护】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
所以，只有下面这种<child&g【版权所有，侵权必究】【作者：唐霜】t;才可以使用v-model实现双向绑定【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】：
【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【本文首发于唐霜的博客】ang.net【未经授权禁止转载】Vue.component('child', {
template: '<input :value="value" @keyup="update($event.target.value)">', //
props: ['value'],
methods: {
update(value) {
this.$emit('input', value)
},
},
})
这样，在父组件中才可以这样使用：
【原创内容，转载请注明出处】【本文受版权保护】【本文受版权保护】【原创内容，转载请注明出处】<child v-model="someData"></child> // 等价于： <child :value="someData" @input="someData = $event.target.value"></child>
蓝色部分表示的是v-bind部分，红褐色【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。部分表示v-on部分。组件内部，绿色的k本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】eyup是input元素的DOM原生事件原创内容，盗版必究。【原创内容，转载请注明出处】，红色的udpate是回调函数，当key转载请注明出处：www.tangshuang.net原创内容，盗版必究。up的时候执行update()，而upd【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ate()的时候就$emit(̵【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】6;input’)，触发了父【原创内容，转载请注明出处】【本文首发于唐霜的博客】组件的v-on:input。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ang.net基于这种原理，不一定要使用在input输【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】入框上，实际上，任何元素都可以模拟这种方【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。式实现数据双向绑定。当然，如果没有输入，【转载请注明来源】未经授权，禁止复制转载。双向绑定的说法就很奇怪。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【作者：唐霜】本文作者：唐霜，转载请注明出处。ng.net使用 Slot 分发内容
在使用组件时，我们常常要像这样组合它们：
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。<app> <app-header></app-header> <app-footer></app-footer> </app>
注意两点：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。- <app> 组件不知道它的挂未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。载点会有什么内容。挂载点的内容是由<【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net;app>的父组件决定的。 【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ngnet】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。
- <app> 组件很可能有它自【版权所有】唐霜 www.tangshuang.net【转载请注明来源】己的模版。 【作者：唐霜】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ng.net原创内容，盗版必究。
为了让组件可以组合，我们需要一种方式来混本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】合父组件的内容与子组件自己的模板。这个过转载请注明出处：www.tangshuang.net原创内容，盗版必究。程被称为 内容分发 (或 “transc【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】lusion” 如果你熟悉 Angula转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。r)。Vue.js 实现了一个内容分发 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。API ，参照了当前 Web 组件规范草案，使用特殊的 <slot> 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。元素作为原始内容的插槽。
【关注微信公众号：wwwtangshua【本文受版权保护】未经授权，禁止复制转载。ngnet】【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。et 获取更多精彩内容】编译作用域
在深入内容分发 API 之前，我们先明确著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。内容在哪个作用域里编译。假定模板为：
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。<child-component>{{ message }}</child-component>
message应该绑定到父组件的数据，还【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。是绑定到子组件的数据？答案是父组件。组件【原创内容，转载请注明出处】【未经授权禁止转载】作用域简单地说是：
【原创内容，转载请注明出处】
父组件模板的内容在父组件作用域内编译；【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。令绑定到子组件的属性/方法：
【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【作者：唐霜】转载请注明出处：www.tangshuang.netang.net<!-- 无效 --><child-component v-show="someChildProperty"></child-component>
假定 someChildProperty本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。 是子组件的属性，上例不会如预期那样工作本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。。父组件模板不应该知道子组件的状态。
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】如果要绑定作用域内的指令到一个组件的根节【作者：唐霜】未经授权，禁止复制转载。点，你应当在组件自己的模板上做：
【转载请注明来源】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【转载请注明来源】【转载请注明来源】et 获取更多精彩内容】Vue.component('child-component', { // 有效，因为是在正确的作用域内 template: '<div v-show="someChildProperty">Child</div>', data: function () { return { someChildProperty: true } }})
类似地，分发内容是在父作用域内编译。
转载请注明出处：www.tangshua【本文受版权保护】【本文首发于唐霜的博客】ng.net【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【本文首发于唐霜的博客】ang.net单个 Slot
除非子组件模板包含至少一个 <sl【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ot> 插口，否则父组件的内容将会【未经授权禁止转载】【版权所有，侵权必究】被丢弃。当子组件模板只有一个没有属性的 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。slot 时，父组件整个内容片段将插入到【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 slot 所在的 DOM 位置，并替换原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net掉 slot 标签本身。
转载请注明出处：www.tangshua【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netng.net本文作者：唐霜，转载请注明出处。最初在 <slot> 标签中【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。的任何内容都被视为备用内容。备用内容在子【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。组件的作用域内编译，并且只有在宿主元素为【本文受版权保护】原创内容，盗版必究。空，且没有要插入的内容时才显示备用内容。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。假定 my-component 组件有下【转载请注明来源】【版权所有，侵权必究】面模板：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net<div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div>
父组件模版：
本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。<div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div>
渲染结果：
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【未经授权禁止转载】原创内容，盗版必究。ng.net<div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div> </div>
具名 Slot
<slot> 元素可以用一个【版权所有，侵权必究】【本文首发于唐霜的博客】特殊的属性 name 来配置如何分发内容【未经授权禁止转载】【本文受版权保护】。多个 slot 可以有不同的名字。具名【作者：唐霜】未经授权，禁止复制转载。 slot 将匹配内容片段中有对应 sl【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ot 特性的元素。
【本文首发于唐霜的博客】【版权所有，侵权必究】仍然可以有一个匿名 slot ，它是默认【版权所有，侵权必究】【版权所有，侵权必究】 slot ，作为找不到匹配的内容片段的【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。备用插槽。如果没有默认的 slot ，这【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net些找不到匹配的内容片段将被抛弃。
本文作者：唐霜，转载请注明出处。【作者：唐霜】例如，假定我们有一个 app-layou原创内容，盗版必究。【本文首发于唐霜的博客】t 组件，它的模板为：
【未经授权禁止转载】未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【转载请注明来源】【转载请注明来源】ngnet】【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netang.net<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
父组件模版：
未经授权，禁止复制转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ng.net本文版权归作者所有，未经授权不得转载。<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p> </app-layout>
渲染结果为：
【作者：唐霜】【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【本文受版权保护】ngnet】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。<div class="container"> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>
在组合组件时，内容分发 API 是非常有著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。用的机制。
【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【版权所有，侵权必究】ngnet】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。一个（能够传递数据到）可重用模板替换已渲转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。染元素。2.1.0才新增的，因此，如果你【转载请注明来源】原创内容，盗版必究。只是使用2.0版本，还是使用不了。
【原创内容，转载请注明出处】【转载请注明来源】【本文首发于唐霜的博客】【原创内容，转载请注明出处】在子组件中，只需将数据传递到插槽，就像你【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。将 prop 传递给组件一样：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。<div class="child"> <slot text="hello from child"></slot> </div>
在父级中，具有特殊属性 scope 的 原创内容，盗版必究。未经授权，禁止复制转载。<template> 元素，著作权归作者所有，禁止商业用途转载。【本文受版权保护】表示它是作用域插槽的模板。scope 的【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。值对应一个临时变量名，此变量接收从子组件转载请注明出处：www.tangshuang.net原创内容，盗版必究。中传递的 prop 对象：
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net原创内容，盗版必究。ang.net转载请注明出处：www.tangshua【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ng.net【未经授权禁止转载】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【本文受版权保护】ng.net<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
如果我们渲染以上结果，得到的输出会是：
【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【本文受版权保护】<div class="parent"> <div class="child"> <span>hello from parent</span> <span>hello from child</span> </div> </div>
作用域插槽更具代表性的用例是列表组件，允【原创不易，请尊重版权】【本文受版权保护】许组件自定义应该如何渲染列表每一项：
【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
列表组件的模板：
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。<ul> <slot name="item" v-for="item in items" :text="item.text" > <!-- 这里写入备用内容 --> </slot> </ul>
内联模板
如果子组件有 inline-templa【作者：唐霜】本文版权归作者所有，未经授权不得转载。te 特性，组件将把它的内容当作它的模板著作权归作者所有，禁止商业用途转载。【本文受版权保护】，而不是把它当作分发内容。这让模板更灵活本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】。
【版权所有】唐霜 www.tangshu【转载请注明来源】【原创内容，转载请注明出处】ang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【版权所有，侵权必究】ang.net原创内容，盗版必究。<my-component inline-template> <div> <p>These are compiled as the component's own template.</p> <p>Not parent's transclusion content.</p> </div> </my-component>
但是 inline-template 让本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】模板的作用域难以理解。最佳实践是使用 t【版权所有，侵权必究】【未经授权禁止转载】emplate 选项在组件内定义模板或者原创内容，盗版必究。【本文受版权保护】在 .vue 文件中使用 templat转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。e 元素。
原创内容，盗版必究。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】编者按：关于.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>
也可以直接绑定到组件对象上：
【关注微信公众号：wwwtangshua【本文受版权保护】【原创内容，转载请注明出处】ngnet】【未经授权禁止转载】【未经授权禁止转载】var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
在动态组件模式下，你可以使用keep-a【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。live指令实现一个缓存效果：
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】<keep-alive> <component :is="currentView"> <!-- 非活动组件将被缓存！ --> </component> </keep-alive>
在API 参考查看更多 <keep-alive&转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】gt; 的细节。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】异步创建组件
在大型应用中，我们可能需要将应用拆分为多【转载请注明来源】转载请注明出处：www.tangshuang.net个小模块，按需从服务器下载。为了让事情更【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】简单， Vue.js 允许将组件定义为一【本文受版权保护】【版权所有】唐霜 www.tangshuang.net个工厂函数，动态地解析组件的定义。Vue未经授权，禁止复制转载。【版权所有，侵权必究】.js 只在组件需要渲染时触发工厂函数，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。并且把结果缓存起来，用于后面的再次渲染。
【本文首发于唐霜的博客】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ng.net【关注微信公众号：wwwtangshua【转载请注明来源】【转载请注明来源】ngnet】这里的工厂函数和promise的工厂函数转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。是一样的，接受resolve, reje【转载请注明来源】【原创不易，请尊重版权】ct两个参数。resolve的时候，将创转载请注明出处：www.tangshuang.net【本文受版权保护】建数组所要用到的对象返回即可。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】【原创内容，转载请注明出处】Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// Pass the component definition to the resolve callback
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
工厂函数接收一个 resolve 回调，转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net在收到从服务器下载的组件定义时调用。也可本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。以调用 reject(reason) 指【本文首发于唐霜的博客】【本文首发于唐霜的博客】示加载失败。
【本文首发于唐霜的博客】【未经授权禁止转载】递归和循环引用
递归组件
组件在它的模板内可以递归地调用自己，不过【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，只有当它有 name 选项时才可以：
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【转载请注明来源】name: 'unique-name-of-my-component'
当你利用Vue.component全局注转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net册了一个组件, 全局的ID作为组件的 n【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netame 选项，被自动设置.
【转载请注明来源】原创内容，盗版必究。Vue.component('unique-name-of-my-component', {
// ...
})
如果你不谨慎, 递归组件可能导致死循环:
【本文受版权保护】【原创内容，转载请注明出处】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ng.netname: 'stack-overflow', template: '<div><stack-overflow></stack-overflow></div>'
上面组件会导致一个错误 “max sta【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ck size exceeded” ，所【作者：唐霜】【本文首发于唐霜的博客】以要确保递归调用有终止条件 (比如递归调转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net用时使用 v-if 并让他最终返回 fa【版权所有，侵权必究】【本文受版权保护】lse )。
转载请注明出处：www.tangshua【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ng.net本文作者：唐霜，转载请注明出处。【作者：唐霜】本文作者：唐霜，转载请注明出处。组件间的循环引用
假设你正在构建一个文件目录树，像在Fin【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。der或文件资源管理器中。你可能有一个 【版权所有，侵权必究】【本文首发于唐霜的博客】tree-folder组件:
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【转载请注明来源】et 获取更多精彩内容】<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>
然后 一个tree-folder-con【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。tents组件：
【原创内容，转载请注明出处】【版权所有，侵权必究】转载请注明出处：www.tangshua【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ng.net<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>
当你仔细看时，会发现在渲染树上这两个组件【转载请注明来源】未经授权，禁止复制转载。同时为对方的父节点和子节点–这点是矛盾的本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。。当使用Vue.component将这两转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】个组件注册为全局组件的时候，框架会自动为未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net你解决这个矛盾，如果你是这样做的，就不用本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】继续往下看了。
【作者：唐霜】【原创不易，请尊重版权】然而，如果你使用诸如Webpack或者B本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】rowserify之类的模块化管理工具来【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。requiring/importing组原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net件的话，就会报错了：
【本文受版权保护】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【本文受版权保护】【本文受版权保护】【作者：唐霜】Failed to mount comp【未经授权禁止转载】【版权所有，侵权必究】onent: template or r【本文受版权保护】原创内容，盗版必究。ender function not d本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netefined.
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ng.net【原创内容，转载请注明出处】
为了解释为什么会报错，简单的将上面两个组【关注微信公众号：wwwtangshuangnet】【本文受版权保护】件称为 A 和 B ，模块系统看到它需要【作者：唐霜】【作者：唐霜】 A ，但是首先 A 需要 B ，但是 【转载请注明来源】转载请注明出处：www.tangshuang.netB 需要 A， 而 A 需要 B，陷入了【作者：唐霜】【本文受版权保护】一个无限循环，因此不知道到底应该先解决哪【本文受版权保护】【作者：唐霜】个。要解决这个问题，我们需要在其中一个组原创内容，盗版必究。本文作者：唐霜，转载请注明出处。件中（比如 A ）告诉模块化管理系统，“【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netA 虽然需要 B ，但是不需要优先导入 【原创内容，转载请注明出处】【作者：唐霜】B”。
【原创内容，转载请注明出处】原创内容，盗版必究。在我们的例子中，我们选择在tree-fo【版权所有，侵权必究】【本文首发于唐霜的博客】lder 组件中来告诉模块化管理系统循环著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】引用的组件间的处理优先级，我们知道引起矛【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。盾的子组件是tree-folder-co著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ntents，所以我们在beforeCr本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】eate 生命周期钩子中去注册它：
【原创不易，请尊重版权】【本文首发于唐霜的博客】beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
}
问题解决了。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】X-Templates
另一种定义模版的方式是在 JavaScr本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ipt 标签里使用 text/x-tem转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netplate 类型，并且指定一个id。例如本文作者：唐霜，转载请注明出处。【转载请注明来源】：
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【转载请注明来源】ng.net<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著作权归作者所有，禁止商业用途转载。该避免使用，因为它将模版和组件的其他定义未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net隔离了。
转载请注明出处：www.tangshua【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ng.net未经授权，禁止复制转载。对低开销的静态组件使用v-once
尽管在 Vue 中渲染 HTML 很快，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net不过当组件中包含大量静态内容时，可以考虑著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。使用 v-once 将渲染结果缓存起来，【作者：唐霜】原创内容，盗版必究。就像这样：
原创内容，盗版必究。【原创不易，请尊重版权】【未经授权禁止转载】【本文受版权保护】Vue.component('terms-of-service', {
template: `<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>`
})
小结
这一章介绍了vue的核心理念之一——组件【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。。组件的概念并没有想象的那么复杂，简单的转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】说就是一个相对隔离的vue子类的实例化对本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。象。怎么来理解这里的“隔离”呢？主要是两原创内容，盗版必究。转载请注明出处：www.tangshuang.net个方面：
未经授权，禁止复制转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。- 组件通过props属性获取父组件或app【作者：唐霜】【作者：唐霜】层面传来的数据，这些数据不应该被直接修改未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。，也就是说这些数据仅属于组件的上一层，而【本文受版权保护】著作权归作者所有，禁止商业用途转载。不属于当前组件，组件不能通过修改这些数据【原创不易，请尊重版权】【原创不易，请尊重版权】来影响上一层； 【未经授权禁止转载】【本文受版权保护】【版权所有】唐霜 www.tangshu【本文受版权保护】【原创内容，转载请注明出处】ang.net
- 组件不能直接对父组件或app层产生影响，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net但是可以通过事件绑定对上一层进行事件通知本文作者：唐霜，转载请注明出处。【本文受版权保护】，上一层接收到这些通知时，自己决定是否要原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】进行变化。 未经授权，禁止复制转载。【本文首发于唐霜的博客】
组件的另一个话题就是复用性。基于上面两个【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。方面的特性，组件应该是具备高可复用性的，【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。当一个地方需要使用这个组件时，只需要实例【本文首发于唐霜的博客】未经授权，禁止复制转载。化，并给适合的props即可。只要pro【原创不易，请尊重版权】【作者：唐霜】ps给的符合要求，组件就可以根据自己的逻【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。辑运行，既不受外界影响，也不影响外界。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。全局和局部
在前文我多次提到了全局和局部的问题，可以原创内容，盗版必究。本文作者：唐霜，转载请注明出处。看到，好几个操作，其实都存在全局和局部的【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。相同操作。但前文我们大部分时间更专注局部【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】，本章其实更多从全局角度出发，把之前从来转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】没提过的全局方法，都提一遍。这样可以帮助本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net你更好的全面了解vue的api。
【本文受版权保护】【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ang.net全局配置
Vue.config 是一个对象，包含 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】Vue 的全局配置。可以在启动应用之前修未经授权，禁止复制转载。【版权所有，侵权必究】改下列属性：
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】原创内容，盗版必究。ang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】silent
- 类型： boolean 【转载请注明来源】【原创内容，转载请注明出处】
- 默认值： false 【作者：唐霜】【未经授权禁止转载】
- 作用：取消 Vue 所有的日志与警告。 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
Vue.config.silent = true
optionMergeStrategies
- 类型： { [key: string]:【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。 Function } 未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。
- 默认值： {}
原创内容，盗版必究。 未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- 作用：自定义合并策略的选项。合并策略选项【作者：唐霜】【原创内容，转载请注明出处】分别接受第一个参数作为父实例，第二个参数转载请注明出处：www.tangshuang.net【本文受版权保护】为子实例，Vue实例上下文被作为第三个参【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。数传入。 【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ang.net本文作者：唐霜，转载请注明出处。
- 参考 自定义选项的混合策略 【版权所有】唐霜 www.tangshu【作者：唐霜】原创内容，盗版必究。ang.net【版权所有】唐霜 www.tangshu【未经授权禁止转载】【转载请注明来源】ang.net
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
}) // Profile.options._my_option = 2
devtools
- 类型： boolean 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- 默认值： true (生产版为 fals本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】e) 【本文首发于唐霜的博客】【本文首发于唐霜的博客】【未经授权禁止转载】
- 作用：配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生原创内容，盗版必究。本文作者：唐霜，转载请注明出处。产版本默认为 false。生产版本设为 【版权所有，侵权必究】【本文首发于唐霜的博客】true 可以启用检查。 【本文首发于唐霜的博客】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
// 务必在加载 Vue 之后，立即同步设置以下内容 Vue.config.devtools = true
errorHandler
- 类型： Function 转载请注明出处：www.tangshua【本文首发于唐霜的博客】【转载请注明来源】ng.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ang.net
- 默认值： 默认抛出错误 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【未经授权禁止转载】
- 作用：指定组件的渲染和观察期间未捕获错误转载请注明出处：www.tangshuang.net原创内容，盗版必究。的处理函数。这个处理函数被调用时，可获取【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。错误信息和 Vue 实例。
【本文受版权保护】
【原创内容，转载请注明出处】【原创不易，请尊重版权】Sentry, 一个错误追踪服务, 通过此选项提供官方集成。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。 转载请注明出处：www.tangshua原创内容，盗版必究。【转载请注明来源】ng.net【访问 www.tangshuang.n【本文首发于唐霜的博客】【本文首发于唐霜的博客】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。
Vue.config.errorHandler = function (err, vm) {
// handle error
}
ignoredElements
- 类型: Array<string&【本文首发于唐霜的博客】原创内容，盗版必究。gt; 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
- 默认值: [] 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
- 作用： 须使 Vue 忽略在 Vue 之本文版权归作者所有，未经授权不得转载。【转载请注明来源】外的自定义元素 (e.g., 使用了 W【作者：唐霜】原创内容，盗版必究。eb Components APIs)。【原创不易，请尊重版权】未经授权，禁止复制转载。否则，它会假设你忘记注册全局组件或者拼错【作者：唐霜】【未经授权禁止转载】了组件名称，从而抛出一个关于 Unkno未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。wn custom element 的警【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net告。 【原创不易，请尊重版权】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【作者：唐霜】
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ]
keyCodes
- 类型： { [key: string]:本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】 number | Array<n【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。umber> } 【未经授权禁止转载】转载请注明出处：www.tangshua【版权所有，侵权必究】未经授权，禁止复制转载。ng.net未经授权，禁止复制转载。【未经授权禁止转载】
- 默认值： {} 转载请注明出处：www.tangshua【本文受版权保护】【未经授权禁止转载】ng.net【作者：唐霜】【未经授权禁止转载】
- 作用：给 v-on 自定义键位别名。 【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【转载请注明来源】ang.net【版权所有，侵权必究】【版权所有，侵权必究】
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}
全局 API
Vue.extend( options )
- 参数：{Object} options 【原创内容，转载请注明出处】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
- 作用：使用基础 Vue 构造器，创建一个【本文首发于唐霜的博客】【原创内容，转载请注明出处】“子类”。参数是一个包含组件选项的对象。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。data 选项是特例，需要注意 R著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net11; 在 Vue.extend() 中【原创内容，转载请注明出处】【版权所有，侵权必究】它必须是函数。 【原创不易，请尊重版权】【作者：唐霜】著作权归作者所有，禁止商业用途转载。
- 参考： 组件 转载请注明出处：www.tangshua【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ng.net【转载请注明来源】【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ngnet】
<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.tangshua【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netng.net<p>Walter White aka Heisenberg</p>
Vue.nextTick([callback, context])
- 参数：
- {Function} [callback转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。] 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- {Object} [context] 【原创内容，转载请注明出处】【作者：唐霜】【原创内容，转载请注明出处】未经授权，禁止复制转载。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- 作用：在下次 DOM 更新循环结束之后执【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】行延迟回调。在修改数据之后立即使用这个方【转载请注明来源】【转载请注明来源】法，获取更新后的 DOM。
【本文受版权保护】
【转载请注明来源】本文作者：唐霜，转载请注明出处。2.1.0新增：如果没有提供回调且支持 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】promise 的环境中返回 promi【本文首发于唐霜的博客】未经授权，禁止复制转载。se。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【本文受版权保护】【本文受版权保护】ang.net【本文受版权保护】【本文首发于唐霜的博客】 未经授权，禁止复制转载。原创内容，盗版必究。
- 参考： 异步更新队列 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netngnet】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【本文首发于唐霜的博客】ang.net本文作者：唐霜，转载请注明出处。
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
Vue.set( object, key, value )
- 参数：
- {Object} object 【原创内容，转载请注明出处】【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。
- {string} key 原创内容，盗版必究。【原创不易，请尊重版权】
- {any} value 转载请注明出处：www.tangshua未经授权，禁止复制转载。【本文首发于唐霜的博客】ng.net【未经授权禁止转载】未经授权，禁止复制转载。
【本文首发于唐霜的博客】【本文受版权保护】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- 返回值： 设置的值. 原创内容，盗版必究。【原创内容，转载请注明出处】未经授权，禁止复制转载。未经授权，禁止复制转载。
- 作用：设置对象的属性。如果对象是响应式的【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，确保属性被创建后也是响应式的，同时触发本文作者：唐霜，转载请注明出处。【转载请注明来源】视图更新。这个方法主要用于避开 Vue 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】不能检测属性被添加的限制。注意对象不能是本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 Vue 实例，或者 Vue 实例的根数未经授权，禁止复制转载。【版权所有，侵权必究】据对象。 【转载请注明来源】本文作者：唐霜，转载请注明出处。
- 参考： 深入响应式原理 【原创内容，转载请注明出处】【转载请注明来源】
Vue.delete( object, key )
- 参数：
- {Object} object 【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【未经授权禁止转载】ang.net【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ang.net
- {string} key 【作者：唐霜】著作权归作者所有，禁止商业用途转载。【转载请注明来源】
【本文受版权保护】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】
- 作用：删除对象的属性。如果对象是响应式的【作者：唐霜】【本文受版权保护】，确保删除能触发更新视图。这个方法主要用【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】于避开 Vue 不能检测到属性被删除的限【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】制，但是你应该很少会使用它。注意对象不能本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】是 Vue 实例，或者 Vue 实例的根本文作者：唐霜，转载请注明出处。【转载请注明来源】数据对象。 【转载请注明来源】【作者：唐霜】
- 参考： 深入响应式原理 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ang.net原创内容，盗版必究。
Vue.directive( id, [definition] )
- 参数：
- {string} id 未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】
- {Function | Object} 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】[definition] 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【转载请注明来源】ngnet】未经授权，禁止复制转载。
【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netang.net【作者：唐霜】
- 作用：注册或获取全局指令。 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ang.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
- 参考： 自定义指令 【访问 www.tangshuang.n【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【转载请注明来源】et 获取更多精彩内容】【本文受版权保护】
// 注册
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【作者：唐霜】著作权归作者所有，禁止商业用途转载。on] 【转载请注明来源】著作权归作者所有，禁止商业用途转载。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- 作用：注册或获取全局过滤器。 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
Vue.component( id, [definition] )
- 参数：
- {string} id 转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ng.net【原创内容，转载请注明出处】原创内容，盗版必究。
- {Function | Object} 【本文受版权保护】本文作者：唐霜，转载请注明出处。[definition] 未经授权，禁止复制转载。【作者：唐霜】未经授权，禁止复制转载。【关注微信公众号：wwwtangshua未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netngnet】
【未经授权禁止转载】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【作者：唐霜】ang.net【原创不易，请尊重版权】
- 作用：注册或获取全局组件。注册还会自动使未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。用给定的id设置组件的名称。 未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
- 参考： 组件 转载请注明出处：www.tangshua【原创不易，请尊重版权】未经授权，禁止复制转载。ng.net【版权所有】唐霜 www.tangshu【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ang.net原创内容，盗版必究。
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')
Vue.use( plugin )
- 参数：{Object | Functio原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netn} plugin 【版权所有，侵权必究】转载请注明出处：www.tangshua未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ng.net
- 作用：安装 Vue.js 插件。如果插件本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】是一个对象，必须提供 install 方本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net法。如果插件是一个函数，它会被作为 in【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】stall 方法。install 方法将【原创不易，请尊重版权】【本文受版权保护】被作为 Vue 的参数调用。当 inst本文作者：唐霜，转载请注明出处。【作者：唐霜】all 方法被同一个插件多次调用，插件将未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net只会被安装一次。 【版权所有】唐霜 www.tangshu【本文受版权保护】【版权所有，侵权必究】ang.net未经授权，禁止复制转载。
- 参考： 插件 【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【未经授权禁止转载】【版权所有，侵权必究】ngnet】著作权归作者所有，禁止商业用途转载。
编者按：关于如何开发一个插件，读者应该要转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。学习一下，因为有的时候你确实需要全局实现【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】某些功能。通过插件，可以给Vue这个全局未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。变量加入一些全局方法，也可以给每一个实例【本文受版权保护】本文作者：唐霜，转载请注明出处。加入原型链方法，在组件内使用this.$【版权所有】唐霜 www.tangshuang.net【本文受版权保护】yourmethod这种方式来执行某些功【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。能。点击上面的参考链接去学习如何写插件。
【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【转载请注明来源】ang.net【作者：唐霜】Vue.mixin( mixin )
- 参数：{Object} mixin 【本文首发于唐霜的博客】未经授权，禁止复制转载。【未经授权禁止转载】【原创不易，请尊重版权】
- 作用：全局注册一个混合，影响注册之后所有【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】创建的每个 Vue 实例。插件作者可以使原创内容，盗版必究。原创内容，盗版必究。用混合，向组件注入自定义的行为。不推荐在未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。应用代码中使用。 未经授权，禁止复制转载。【转载请注明来源】
- 参考： 全局混合 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu【转载请注明来源】著作权归作者所有，禁止商业用途转载。ang.net未经授权，禁止复制转载。
编者按：关于混入，如果你学过react应著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】该知道。简单的说就是把几个类合并为一个类未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net，这样，继承这个混合的类的子类就拥有了多【未经授权禁止转载】【转载请注明来源】个父类的方法。在vue里面，组件也可以使未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】用混入来继承组件，在创建组件的时候就可以【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。使用一个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 转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netng.net【访问 www.tangshuang.n【未经授权禁止转载】【作者：唐霜】et 获取更多精彩内容】【版权所有，侵权必究】未经授权，禁止复制转载。
- 作用：在render函数中编译模板字符串【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。。只在独立构建时有效。 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【未经授权禁止转载】【本文首发于唐霜的博客】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】
- 参考： Render 函数 【转载请注明来源】本文版权归作者所有，未经授权不得转载。
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
全局注册
全局注册函数直接挂在Vue这个全局对象上著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。。注意下面的方法，都是复数形式。
转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ng.net【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】Vue.directives
全局注册一个指令。这样你就可以在任何的V【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ue实例上使用这个指令。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
Vue.filters
注册或获取全局过滤器。
【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】原创内容，盗版必究。// 注册
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>'
})
局部配置
所谓局部配置，就是在实例化的时候的配置。
【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua【转载请注明来源】未经授权，禁止复制转载。ngnet】parent
指定实例的父实例，例如：
【原创内容，转载请注明出处】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】var parent = new Vue({...})
var child = new Vue({
parent,
})
这样，就指定了child的父实例是par【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netent。当child被实例化出来之后，c【本文首发于唐霜的博客】【本文首发于唐霜的博客】hild.$parent就引用paren本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】t，而parent.$children是【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】一个数组，里面就包含了child，可以用本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。parent.$children.ind原创内容，盗版必究。【转载请注明来源】exOf(child) > -1来【本文受版权保护】【版权所有，侵权必究】判断是否是否包含了某个实例。
【未经授权禁止转载】【本文首发于唐霜的博客】原创内容，盗版必究。【版权所有】唐霜 www.tangshu【版权所有，侵权必究】转载请注明出处：www.tangshuang.netang.netmixin
前面已经讲过全局的mixin，其实它也可【作者：唐霜】转载请注明出处：www.tangshuang.net以在实例化配置时传入：
【原创不易，请尊重版权】未经授权，禁止复制转载。var mixin = {
created: function () {
console.log(1)
}
}
var vm = new Vue({
created: function () {
console.log(2)
},
mixins: [mixin]
})
// -> 1
// -> 2
mixins 选项接受一个混合对象的数组【本文首发于唐霜的博客】【原创不易，请尊重版权】。这些混合实例对象可以像正常的实例对象一【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】样包含选项,他们将在 Vue.exten本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。d() 里最终选择使用相同的选项合并逻辑原创内容，盗版必究。未经授权，禁止复制转载。合并。举例：如果你混合包含一个钩子而创建著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net组件本身也有一个,两个函数将被调用。Mi本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netxin钩子按照传入顺序依次调用,并在调用转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】组件自身的钩子之前被调用。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】name
注意，这个选项只对组件的创建起作用。
【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】var MyComponent = Vue.extend({
name: 'my-component',
})
允许组件模板递归地调用自身。注意，组件在【本文受版权保护】【本文首发于唐霜的博客】全局用 Vue.component() 【原创不易，请尊重版权】【原创内容，转载请注明出处】注册时，全局 ID 自动作为组件的 na原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。me。
未经授权，禁止复制转载。【版权所有，侵权必究】【版权所有，侵权必究】指定 name 选项的另一个好处是便于调【未经授权禁止转载】转载请注明出处：www.tangshuang.net试。有名字的组件有更友好的警告信息。另外【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net，当在有 vue-devtools, 未命名组件将显示成 <Anon【转载请注明来源】未经授权，禁止复制转载。ymousComponent>, 【作者：唐霜】本文作者：唐霜，转载请注明出处。这很没有语义。通过提供 name 选项，本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】可以获得更有语义信息的组件树。
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netang.net【未经授权禁止转载】extend
允许声明扩展另一个组件(可以是一个简单的著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。选项对象或构造函数),而无需使用 Vue本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。.extend。这主要是为了便于扩展单文本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。件组件。
本文作者：唐霜，转载请注明出处。
这和 mixins 类似，区别在于，组【本文首发于唐霜的博客】【本文受版权保护】件自身的选项会比要扩展的源组件具有更高的本文作者：唐霜，转载请注明出处。【作者：唐霜】优先级。
var CompA = { ... }
// 在没有调用 Vue.extend 时候继承 CompA
var CompB = { extends: CompA, ...}
delimiters
改变纯文本插入分隔符。 这个选择只有在独著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net立构建时才有用。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ng.net本文版权归作者所有，未经授权不得转载。默认值: [“{{̶本文作者：唐霜，转载请注明出处。【转载请注明来源】0;, “}}”【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。]
【转载请注明来源】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。new Vue({ delimiters: ['${', '}']})
// 分隔符变成了 ES6 模板字符串的风格
functional
使组件无状态（没有 data ）和无实例【转载请注明来源】【本文受版权保护】（没有 this 上下文）。他们用一个简原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。单的 render 函数返回虚拟节点使他【原创内容，转载请注明出处】原创内容，盗版必究。们更容易渲染。
【作者：唐霜】【原创不易，请尊重版权】参考： 函数式组件
【版权所有，侵权必究】【本文受版权保护】原创内容，盗版必究。实例属性
vm.$data
- 类型: Object 著作权归作者所有，禁止商业用途转载。【作者：唐霜】【原创不易，请尊重版权】未经授权，禁止复制转载。
- 详细: Vue 实例观察的数据对象。Vu【版权所有】唐霜 www.tangshuang.net【本文受版权保护】e 实例代理了对其 data 对象属性的【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。访问。 转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ng.net【原创不易，请尊重版权】原创内容，盗版必究。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】
- 另见: 选项 – data 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
vm.$el
- 类型: HTMLElement 【作者：唐霜】【未经授权禁止转载】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ng.net
- 只读 【未经授权禁止转载】【本文首发于唐霜的博客】原创内容，盗版必究。转载请注明出处：www.tangshua【原创内容，转载请注明出处】【本文首发于唐霜的博客】ng.net
- 详细: Vue 实例使用的根 DOM 元【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】素。 【本文受版权保护】【转载请注明来源】本文作者：唐霜，转载请注明出处。【转载请注明来源】
vm.$options
- 类型: Object 【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- 只读 【访问 www.tangshuang.n【本文受版权保护】本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【版权所有，侵权必究】【本文受版权保护】【转载请注明来源】
- 详细: 用于当前 Vue 实例的初始化选【本文首发于唐霜的博客】【原创内容，转载请注明出处】项。需要在选项中包含自定义属性时会有用处【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】： 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netng.net
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // -> 'foo'
}
})
vm.$parent
- 类型: Vue instance 【访问 www.tangshuang.n【版权所有，侵权必究】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【作者：唐霜】【本文首发于唐霜的博客】
- 只读 【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】
- 详细: 父实例，如果当前实例有的话。 【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】et 获取更多精彩内容】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
vm.$root
- 类型: Vue instance 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- 只读 未经授权，禁止复制转载。【原创不易，请尊重版权】
- 详细: 当前组件树的根 Vue 实例。如【本文受版权保护】著作权归作者所有，禁止商业用途转载。果当前实例没有父实例，此实例将会是其自已【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。。 【作者：唐霜】【本文首发于唐霜的博客】未经授权，禁止复制转载。【未经授权禁止转载】
vm.$children
- 类型: Array<Vue ins著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】tance> 【原创内容，转载请注明出处】【本文首发于唐霜的博客】【访问 www.tangshuang.n【原创不易，请尊重版权】【本文受版权保护】et 获取更多精彩内容】
- 只读 【关注微信公众号：wwwtangshua【未经授权禁止转载】【原创不易，请尊重版权】ngnet】【作者：唐霜】【访问 www.tangshuang.n【原创内容，转载请注明出处】原创内容，盗版必究。et 获取更多精彩内容】未经授权，禁止复制转载。
- 详细: 当前实例的直接子组件。需要注意 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】$children 并不保证顺序，也不是【本文受版权保护】【本文受版权保护】响应式的。如果你发现自己正在尝试使用 $原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netchildren 来进行数据绑定，考虑使【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net用一个数组配合 v-for 来生成子组件【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，并且使用 Array 作为真正的来源。 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ngnet】
vm.$slots
- 类型： { [name: string]未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。: ?Array<VNode>【作者：唐霜】转载请注明出处：www.tangshuang.net; } 【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netang.net【版权所有，侵权必究】未经授权，禁止复制转载。【本文受版权保护】
- 只读 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】
- 详细: 用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot=【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。221;foo” 中的内容将转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】会在 vm.$slots.foo 中被找原创内容，盗版必究。转载请注明出处：www.tangshuang.net到）。default 属性包括了所有没有著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】被包含在具名 slot 中的节点。在使用 render 函数书写一个组件时，访问 vm.$slots转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 最有帮助。 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
- 参考：
- <slot> 组件 【本文受版权保护】转载请注明出处：www.tangshua【转载请注明来源】著作权归作者所有，禁止商业用途转载。ng.net
- 使用 Slots 进行内容分发 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
- Render 函数 未经授权，禁止复制转载。【转载请注明来源】【未经授权禁止转载】
【未经授权禁止转载】【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ngnet】【本文首发于唐霜的博客】【转载请注明来源】
vm.$scopedSlots
【访问 www.tangshuang.n【本文首发于唐霜的博客】原创内容，盗版必究。et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【本文受版权保护】【关注微信公众号：wwwtangshuangnet】ang.net【版权所有，侵权必究】2.1.0新增
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netng.net本文版权归作者所有，未经授权不得转载。
- 类型： { [name: string]本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。: props => VNode 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。| Array<VNode>【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 } 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
- 只读 【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ngnet】转载请注明出处：www.tangshua【本文受版权保护】著作权归作者所有，禁止商业用途转载。ng.net
- 详细：用来访问 scoped slots。对于包括 默认 slot 在内的每一个【本文受版权保护】【转载请注明来源】 slot， 该对象都包含一个返回相应 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】VNode 的函数。在使用 render 函数 书写一个组件时，访问 vm.$scop【转载请注明来源】转载请注明出处：www.tangshuang.netedSlots 最有帮助。 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- 参考：
- <slot> 组件 转载请注明出处：www.tangshua【版权所有，侵权必究】未经授权，禁止复制转载。ng.net【版权所有，侵权必究】【作者：唐霜】
- Scoped Slots 【转载请注明来源】【转载请注明来源】【本文首发于唐霜的博客】
- Render 函数 【版权所有】唐霜 www.tangshu原创内容，盗版必究。转载请注明出处：www.tangshuang.netang.net【本文首发于唐霜的博客】
【原创不易，请尊重版权】【作者：唐霜】【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】原创内容，盗版必究。ang.net未经授权，禁止复制转载。
vm.$refs
- 类型： Object 【原创内容，转载请注明出处】转载请注明出处：www.tangshua【作者：唐霜】【版权所有】唐霜 www.tangshuang.netng.net【访问 www.tangshuang.n【版权所有，侵权必究】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】
- 只读 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
- 详细：一个对象，其中包含了所有拥有 re【未经授权禁止转载】【本文受版权保护】f 注册的子组件。 【转载请注明来源】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
- 另见： 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
vm.$isServer
- 类型： boolean 原创内容，盗版必究。【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netang.net【未经授权禁止转载】
- 只读 著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】
- 详细：当前 Vue 实例是否运行于服务器【本文首发于唐霜的博客】【原创内容，转载请注明出处】。 【转载请注明来源】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- 参考： 服务端渲染 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】
实例的数据方法
vm.$watch( expOrFn, callback, [options] )
- 参数：
- {string | Function} 【原创不易，请尊重版权】【未经授权禁止转载】expOrFn 原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshua原创内容，盗版必究。原创内容，盗版必究。ngnet】
- {Function} callback 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【本文受版权保护】未经授权，禁止复制转载。et 获取更多精彩内容】【转载请注明来源】
- {Object} [options]
- {boolean} deep 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文受版权保护】转载请注明出处：www.tangshua原创内容，盗版必究。未经授权，禁止复制转载。ng.net
- {boolean} immediate 未经授权，禁止复制转载。【版权所有，侵权必究】原创内容，盗版必究。【版权所有】唐霜 www.tangshu原创内容，盗版必究。【本文受版权保护】ang.net
未经授权，禁止复制转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【转载请注明来源】【本文首发于唐霜的博客】
- 返回值： {Function} unwa【本文受版权保护】【本文首发于唐霜的博客】tch 著作权归作者所有，禁止商业用途转载。【本文受版权保护】原创内容，盗版必究。
- 用法：观察 Vue 实例变化的一个表达式本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】或计算属性函数。回调函数得到的参数为新值本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。和旧值。表达式只接受监督的键路径。对于更【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】复杂的表达式，用一个函数取代。注意：在变【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。异（不是替换）对象或数组时，旧值将与新值原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net相同，因为它们的引用指向同一个对象/数组【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。。Vue 不会保留变异之前值的副本。 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有，侵权必究】
- 示例：vm.$watch 返回一个取消观未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。察函数，用来停止触发回调： 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【本文受版权保护】
// 键路径
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 。注意监听数组的变动不需要这么做。 【本文受版权保护】【本文首发于唐霜的博客】原创内容，盗版必究。【原创不易，请尊重版权】
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
- 选项：immediate在选项参数中指定【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。 immediate: true 将立即本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。以表达式的当前值触发回调： 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ng.net【本文首发于唐霜的博客】
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发回调
vm.$set( object, key, value )
- 参数：
- {Object} object 【原创内容，转载请注明出处】【原创不易，请尊重版权】未经授权，禁止复制转载。【本文受版权保护】
- {string} key 转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【作者：唐霜】ng.net转载请注明出处：www.tangshua【转载请注明来源】著作权归作者所有，禁止商业用途转载。ng.net
- {any} value 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【本文首发于唐霜的博客】原创内容，盗版必究。
未经授权，禁止复制转载。【未经授权禁止转载】【转载请注明来源】本文作者：唐霜，转载请注明出处。
- 返回值： 设置的值. 【版权所有，侵权必究】【访问 www.tangshuang.n【版权所有，侵权必究】未经授权，禁止复制转载。et 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。
- 用法：这是全局 Vue.set 的别名。 【本文受版权保护】【访问 www.tangshuang.n未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】【关注微信公众号：wwwtangshua原创内容，盗版必究。【转载请注明来源】ngnet】【未经授权禁止转载】
- 另见： Vue.set 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ang.net【本文受版权保护】
vm.$delete( object, key )
- 参数：
- {Object} object 【原创不易，请尊重版权】转载请注明出处：www.tangshua【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ng.net【关注微信公众号：wwwtangshua【本文受版权保护】【原创不易，请尊重版权】ngnet】【原创内容，转载请注明出处】
- {string} key 【访问 www.tangshuang.n原创内容，盗版必究。未经授权，禁止复制转载。et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。
- 用法：这是全局 Vue.delete 的【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】别名。 【转载请注明来源】【访问 www.tangshuang.n原创内容，盗版必究。【转载请注明来源】et 获取更多精彩内容】【版权所有，侵权必究】【原创不易，请尊重版权】
- 另见： Vue.delete 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【作者：唐霜】
Render 函数
Vue 推荐在绝大多数情况下使用 tem著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】plate 来创建你的 HTML。然而在转载请注明出处：www.tangshuang.net【转载请注明来源】一些场景中，你真的需要 JavaScri【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。pt 的完全编程的能力，这就是 rend【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】er 函数，它比 template 更接著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net近编译器。
转载请注明出处：www.tangshua【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ng.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。特别是在一些通过v-if来确定使用哪一块著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。内容的时候，你要写很多个v-if来决定使【本文首发于唐霜的博客】原创内容，盗版必究。用哪一块内容。但是如果使用render函【未经授权禁止转载】转载请注明出处：www.tangshuang.net数，就可以避免这种重复的工作。
【转载请注明来源】【转载请注明来源】【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】原创内容，盗版必究。ngnet】【未经授权禁止转载】什么是render函数？
如果你使用过react，那么应该完全不陌【未经授权禁止转载】【转载请注明来源】生。render函数是在模板的编译阶段，【本文首发于唐霜的博客】【版权所有，侵权必究】用来编译模板的。在template和re【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。nder同时存在的时候，render具有【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】更高的优先级。也就是说，vue实例化的时【作者：唐霜】【未经授权禁止转载】候，如果你有render函数，那么当实例【版权所有，侵权必究】原创内容，盗版必究。化进行渲染DOM的时候，render函数【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】是一个决定性的元素，render的返回结著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。果，就是最终的DOM渲染结果。
未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshua【转载请注明来源】【原创不易，请尊重版权】ng.net【未经授权禁止转载】简单的说，render函数，就是使用ja【版权所有，侵权必究】转载请注明出处：www.tangshuang.netvascript编程的方式来创建模板（代转载请注明出处：www.tangshuang.net【版权所有，侵权必究】替template参数），用render【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】函数的返回值作为模板编译的基础。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ang.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 【转载请注明来源】著作权归作者所有，禁止商业用途转载。Node，它只存在于vue的虚拟DOM系本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】统中，并且和实例是对应的，只有当渲染DO【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】M发生之后，它才会转换为真是的DOM节点原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】。
【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【作者：唐霜】ngnet】【原创内容，转载请注明出处】data Object
上面代码中，第二个参数是一个object【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。，但是可以有哪些内容可以配置呢？
【本文受版权保护】未经授权，禁止复制转载。{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 "on"
// 所以不再支持如 v-on:keyup.enter 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件，用于监听原生事件，而不是组件内部使用 vm.$emit 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令. 注意事项：不能对绑定的旧值设值
// Vue 会为您持续追踪
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => h('span', props.text)
},
// 如果组件是其他组件的子组件，需为slot指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
VNodes 必须唯一
组件树中的所有 VNodes 必须是唯一【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】的。这意味着，下面的 render fu【版权所有】唐霜 www.tangshuang.net【本文受版权保护】nction 是无效的：
本文作者：唐霜，转载请注明出处。【转载请注明来源】转载请注明出处：www.tangshua【作者：唐霜】转载请注明出处：www.tangshuang.netng.netrender: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 错误-重复的VNodes
myParagraphVNode, myParagraphVNode
])
}
如果你真的需要重复很多次的元素/组件，你本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】可以使用工厂函数来实现。例如，下面这个例【原创内容，转载请注明出处】未经授权，禁止复制转载。子 render 函数完美有效地渲染了 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。20 个重复的段落：
【访问 www.tangshuang.n【本文受版权保护】【未经授权禁止转载】et 获取更多精彩内容】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ng.net著作权归作者所有，禁止商业用途转载。render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
一旦你开始使用render函数，你就可以本文版权归作者所有，未经授权不得转载。【转载请注明来源】使用createElement函数完全代【转载请注明来源】【版权所有】唐霜 www.tangshuang.net替模板，通过javascript逻辑来创【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。建复杂的模板逻辑。当然，这样做会让模板可转载请注明出处：www.tangshuang.net【转载请注明来源】读性变得很差，于是，你可以使用jsx。
【本文首发于唐霜的博客】原创内容，盗版必究。【转载请注明来源】JSX
如果你写了很多 render 函数，可能【未经授权禁止转载】【本文首发于唐霜的博客】会觉得痛苦。特别是模板极其简单的情况下。
原创内容，盗版必究。
这就是会有一个 Babel plugin 插件，用于在 Vue 中使用 JSX 【本文首发于唐霜的博客】原创内容，盗版必究。语法的原因，它可以让我们回到于更接近模板【访问 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【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】 的别名是 Vue 生态系统中的一个通用【作者：唐霜】【版权所有，侵权必究】惯例，实际上也是 JSX 所要求的，如果【作者：唐霜】转载请注明出处：www.tangshuang.net在作用域中 h 失去作用， 在应用中会触【原创内容，转载请注明出处】【作者：唐霜】发报错。
未经授权，禁止复制转载。【作者：唐霜】更多关于 JSX 映射到 JavaScr本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ipt，阅读 使用文档。
【本文受版权保护】【转载请注明来源】特殊属性
Vue里面使用了DOM模板，也就是说，所转载请注明出处：www.tangshuang.net【版权所有，侵权必究】有元素的属性（attr或prop）首先可原创内容，盗版必究。本文作者：唐霜，转载请注明出处。以被HTML解析识别。而如果不是HTML著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本身内置的属性的话，vue可以自己在编译【转载请注明来源】本文作者：唐霜，转载请注明出处。模板的时候对这些属性进行解析，主要包括下【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net列属性：
原创内容，盗版必究。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ang.net著作权归作者所有，禁止商业用途转载。- vue的指令，内置指令或自定义指令 【版权所有，侵权必究】【本文受版权保护】未经授权，禁止复制转载。
- 子组件的props属性 【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ngnet】【原创内容，转载请注明出处】【转载请注明来源】
- 本章将要讲到的特殊属性 【原创内容，转载请注明出处】【作者：唐霜】
除了上述这些属性之外，比如，我们给一个元转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】素添加了go属性<div go="-1"></div>，这个属性不会起到任何作用，当然，你可以【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。用css来改变它的样式，但是在元素本身层转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。面上，真没用。回到主题，本章要讲vue的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net内置的特殊属性。
key
key 的特殊属性主要用在 Vue的虚拟【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】DOM算法，在新旧nodes对比时辨识V本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】Nodes。如果不使用key，Vue会使本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】用一种最大限度减少动态元素并且尽可能的尝【版权所有，侵权必究】【原创内容，转载请注明出处】试修复/再利用相同类型元素的算法。使用k【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netey，它会基于key的变化重新排列元素顺【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】序，并且会移除key不存在的元素。
【原创内容，转载请注明出处】【作者：唐霜】有相同父元素的子元素必须有独特的key。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】重复的key会造成渲染错误。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ngnet】未经授权，禁止复制转载。最常见的用例是结合 v-for:
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
它也可以用于强制替换元素/组件而不是重复【转载请注明来源】【原创内容，转载请注明出处】使用它。当你遇到如下场景时它可能会很有用著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。:
【关注微信公众号：wwwtangshua【转载请注明来源】【作者：唐霜】ngnet】【原创内容，转载请注明出处】- 完整地触发组件的生命周期钩子 【本文首发于唐霜的博客】【原创内容，转载请注明出处】【未经授权禁止转载】
- 触发过渡 转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ng.net【未经授权禁止转载】【作者：唐霜】
例如:
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时，<spa原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】n> 会随时被更新，因此会触发过渡转载请注明出处：www.tangshuang.net【作者：唐霜】。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ref
ref 被用来给元素或子组件注册引用信息【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net。引用信息将会注册在父组件的 $refs转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 对象上。如果在普通的 DOM 元素上使【原创不易，请尊重版权】原创内容，盗版必究。用，引用指向的就是 DOM 元素; 如果【未经授权禁止转载】原创内容，盗版必究。用在子组件上，引用就指向组件实例:
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ang.net<!-- 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 用于元素或组件的时候，引本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】用信息将是包含 DOM 节点或组件实例的【本文受版权保护】【版权所有，侵权必究】数组。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ang.net关于ref注册时间的重要说明: 因为re本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。f本身是作为渲染结果被创建的，在初始渲染未经授权，禁止复制转载。【作者：唐霜】的时候你不能访问它们 – 它【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。们还不存在！$refs 也不是响应式的，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net因此你不应该试图用它在模版中做数据绑定。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】- 参考： 子组件 Refs 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ang.net本文作者：唐霜，转载请注明出处。
slot
用于标记往哪个slot中插入子组件内容。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net详细用法，请参考下面指南部分的链接。
【关注微信公众号：wwwtangshua【原创不易，请尊重版权】【原创内容，转载请注明出处】ngnet】【原创内容，转载请注明出处】【版权所有，侵权必究】【版权所有，侵权必究】- 参考： 具名 Slots 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
内置组件
我们新注册一个组件之后，就可以用这个组件【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的名称作为一个html元素插入到你的模板【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】中去。但是，vue保留了几个组件名，而这【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】几个组件可以直接调用，是vue的内置组件【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，实现对应的功能。
未经授权，禁止复制转载。转载请注明出处：www.tangshua【作者：唐霜】本文版权归作者所有，未经授权不得转载。ng.net【原创不易，请尊重版权】component
- Props：
- is – string | 【本文首发于唐霜的博客】未经授权，禁止复制转载。ComponentDefinition 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】| ComponentConstruct【作者：唐霜】【本文首发于唐霜的博客】or 【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
- inline-template R原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。11; boolean 【转载请注明来源】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
【版权所有】唐霜 www.tangshu【作者：唐霜】著作权归作者所有，禁止商业用途转载。ang.net转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ng.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
- 用法：渲染一个“元组件”为动态组件。依 未经授权，禁止复制转载。【原创内容，转载请注明出处】is 的值，来决定哪个组件被渲染。 未经授权，禁止复制转载。转载请注明出处：www.tangshua【本文首发于唐霜的博客】【本文首发于唐霜的博客】ng.net未经授权，禁止复制转载。原创内容，盗版必究。
- 参考： 动态组件 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshua未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ng.net转载请注明出处：www.tangshua【本文受版权保护】【原创不易，请尊重版权】ng.net
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
transition
- Props：
- name – string,【转载请注明来源】本文版权归作者所有，未经授权不得转载。 用于自动生成 CSS 过渡类名。例如：本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netname: ‘fade未经授权，禁止复制转载。未经授权，禁止复制转载。217; 将自动拓展为.fade-ent【作者：唐霜】【版权所有，侵权必究】er，.fade-enter-activ著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nete等。默认类名为 “v【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net221; 转载请注明出处：www.tangshua【转载请注明来源】未经授权，禁止复制转载。ng.net【作者：唐霜】【本文首发于唐霜的博客】【原创不易，请尊重版权】
- appear – boole转载请注明出处：www.tangshuang.net【转载请注明来源】an, 是否在初始渲染时使用过渡。默认为【关注微信公众号：wwwtangshuangnet】【作者：唐霜】 false。 【作者：唐霜】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
- css – boolean,原创内容，盗版必究。转载请注明出处：www.tangshuang.net 是否使用 CSS 过渡类。默认为 tr【本文受版权保护】未经授权，禁止复制转载。ue。如果设置为 false，将只通过组本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】件事件触发注册的 JavaScript 未经授权，禁止复制转载。【转载请注明来源】钩子。 【作者：唐霜】【未经授权禁止转载】
- type – string,【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。 指定过渡事件类型，侦听过渡何时结束。有【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】效值为 “transitio【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。n” 和 “an转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。imation”。默认 Vu【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】e.js 将自动检测出持续时间长的为过渡本文版权归作者所有，未经授权不得转载。【转载请注明来源】事件类型。 【原创内容，转载请注明出处】【本文受版权保护】
- mode – string,【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】 控制离开/进入的过渡时间序列。有效的模转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。式有 “out-inR【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。21; 和 “in-out&著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net#8221;；默认同时生效。 【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。
- enter-class – 【本文受版权保护】【原创不易，请尊重版权】string 本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- leave-class – 【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。string 未经授权，禁止复制转载。原创内容，盗版必究。转载请注明出处：www.tangshua【转载请注明来源】【未经授权禁止转载】ng.net未经授权，禁止复制转载。
- enter-active-class &【作者：唐霜】【原创不易，请尊重版权】#8211; string 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】
- leave-active-class &【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】#8211; string 【版权所有，侵权必究】【作者：唐霜】【本文受版权保护】【原创内容，转载请注明出处】
- appear-class –【作者：唐霜】原创内容，盗版必究。 string 【作者：唐霜】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n【版权所有，侵权必究】【作者：唐霜】et 获取更多精彩内容】
- appear-active-class 【本文受版权保护】【本文受版权保护】– string 【本文首发于唐霜的博客】转载请注明出处：www.tangshua【作者：唐霜】未经授权，禁止复制转载。ng.net未经授权，禁止复制转载。【原创不易，请尊重版权】
转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ng.net【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netang.net
- 事件：
- before-enter 【关注微信公众号：wwwtangshua原创内容，盗版必究。【作者：唐霜】ngnet】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ngnet】
- enter 【访问 www.tangshuang.n未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【转载请注明来源】【本文受版权保护】
- after-enter 【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netngnet】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- before-leave 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
- leave 【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ngnet】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【作者：唐霜】ang.net
- after-leave 本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。【原创内容，转载请注明出处】
- before-appear 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【未经授权禁止转载】ang.net著作权归作者所有，禁止商业用途转载。
- appear 本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
- after-appear 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netngnet】
【本文受版权保护】【本文受版权保护】未经授权，禁止复制转载。【原创内容，转载请注明出处】
- 作用：<transition>本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。; 元素作为单个元素/组件的过渡效果。&著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】lt;transition> 不会著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】渲染额外的 DOM 元素，也不会出现在检【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。测过的组件层级中。它只是将内容包裹在其中【本文首发于唐霜的博客】【本文首发于唐霜的博客】，简单的运用过渡行为。 原创内容，盗版必究。未经授权，禁止复制转载。转载请注明出处：www.tangshua【作者：唐霜】【本文受版权保护】ng.net本文版权归作者所有，未经授权不得转载。
- 参考： 过渡：进入，离开和列表 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ng.net【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【版权所有，侵权必究】ngnet】
<!-- 简单元素 -->
<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.n【未经授权禁止转载】【本文首发于唐霜的博客】et 获取更多精彩内容】【未经授权禁止转载】原创内容，盗版必究。【原创内容，转载请注明出处】
- move-class – 覆原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。盖移动过渡期间应用的 CSS 类。 【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ang.net原创内容，盗版必究。【本文受版权保护】
- 除了 mode，其他特性和 <tr【原创不易，请尊重版权】【转载请注明来源】ansition> 相同。 未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创不易，请尊重版权】
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。
- 事件：
- 事件和 <transition&g【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。t; 相同. 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n原创内容，盗版必究。【未经授权禁止转载】et 获取更多精彩内容】
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ang.net
- 作用：<transition-gr【作者：唐霜】【本文受版权保护】oup> 元素作为多个元素/组件的未经授权，禁止复制转载。未经授权，禁止复制转载。过渡效果。<transition-本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】group> 渲染一个真实的 DO著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。M 元素。默认渲染 <span&g本文作者：唐霜，转载请注明出处。【本文受版权保护】t;，可以通过 tag 属性配置哪个元素【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。应该被渲染。注意，每个 <tran未经授权，禁止复制转载。【转载请注明来源】sition-group> 的子节著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】点必须有 独立的key ，动画才能正常工【本文受版权保护】【版权所有，侵权必究】作<transition-grou本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netp> 支持通过 CSS trans著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】form 过渡移动。当一个子节点被更新，【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】从屏幕上的位置发生变化，它将会获取应用 【转载请注明来源】转载请注明出处：www.tangshuang.netCSS 移动类（通过 name 属性或配本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。置 move-class 属性自动生成）【转载请注明来源】转载请注明出处：www.tangshuang.net。如果 CSS transform 属性转载请注明出处：www.tangshuang.net【未经授权禁止转载】是“可过渡”属性，当应用移动类时，将会使【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。用 FLIP 技术 使元素流畅地到达动画终点。 【原创不易，请尊重版权】未经授权，禁止复制转载。未经授权，禁止复制转载。【未经授权禁止转载】
- 参考： 过渡：进入，离开和列表 本文作者：唐霜，转载请注明出处。【本文受版权保护】著作权归作者所有，禁止商业用途转载。【作者：唐霜】
<transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>
keep-alive
- Props:
- include – 字符串或【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。正则表达式。只有匹配的组件会被缓存。 【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netngnet】【作者：唐霜】【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【本文受版权保护】ang.net
- exclude – 字符串或【转载请注明来源】未经授权，禁止复制转载。正则表达式。任何匹配的组件都不会被缓存。 【版权所有，侵权必究】【访问 www.tangshuang.n未经授权，禁止复制转载。原创内容，盗版必究。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
【关注微信公众号：wwwtangshua原创内容，盗版必究。【转载请注明来源】ngnet】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ngnet】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- 作用：<keep-alive>【未经授权禁止转载】转载请注明出处：www.tangshuang.net; 包裹动态组件时，会缓存不活动的组件实本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。例，而不是销毁它们。和 <tran【转载请注明来源】【版权所有，侵权必究】sition> 相似，<ke本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ep-alive> 是一个抽象组件原创内容，盗版必究。【本文受版权保护】：它自身不会渲染一个 DOM 元素，也不【作者：唐霜】【原创不易，请尊重版权】会出现在父组件链中。当组件在 <k【转载请注明来源】【原创不易，请尊重版权】eep-alive> 内被切换，它【原创不易，请尊重版权】【转载请注明来源】的 activated 和 deacti未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】vated 这两个生命周期钩子函数将会被【本文受版权保护】著作权归作者所有，禁止商业用途转载。对应执行。主要用于保留组件状态或避免重新【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net渲染。 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】
- include and exclude 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】（2.1.0 新增）include 和 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。exclude 属性允许组件有条件地缓存【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】。二者都可以用逗号分隔字符串或正则表达式【本文首发于唐霜的博客】【原创不易，请尊重版权】来表示。匹配首先检查组件自身的 name转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。 选项，如果 name 选项不可用，则匹原创内容，盗版必究。未经授权，禁止复制转载。配它的局部注册名称（父组件 compon著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ents 选项的键值）。匿名组件不能被匹著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net配。 【本文首发于唐霜的博客】【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。
- <keep-alive> 不本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net会在函数式组件中正常工作，因为它们没有缓原创内容，盗版必究。【转载请注明来源】存实例。 【本文受版权保护】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ang.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未经授权，禁止复制转载。【未经授权禁止转载】tring, 用于命名插槽。 【原创内容，转载请注明出处】【原创不易，请尊重版权】未经授权，禁止复制转载。【访问 www.tangshuang.n原创内容，盗版必究。【未经授权禁止转载】et 获取更多精彩内容】
- Usage:<slot> 元【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。素作为组件模板之中的内容分发插槽。 &l【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。t;slot> 元素自身将被替换。未经授权，禁止复制转载。【本文受版权保护】详细用法，请参考下面教程的链接。 转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ng.net本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【本文首发于唐霜的博客】【作者：唐霜】ng.net【原创不易，请尊重版权】
- 参考： 使用Slots分发内容 【版权所有，侵权必究】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】
Ajax请求：vue-resource
写前端应用，不可能绕过ajax请求数据。本文作者：唐霜，转载请注明出处。【本文受版权保护】现在已经有比较多专门处理数据请求的模块，【原创不易，请尊重版权】【未经授权禁止转载】比如axio，以及近期火起来的fetch【本文受版权保护】本文版权归作者所有，未经授权不得转载。。vue官方也提供了一个插件（后面会有专【本文受版权保护】【原创不易，请尊重版权】门的章节讲插件）vue-resource本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】，它是专门用来为vue提供数据请求的。当【本文受版权保护】【版权所有，侵权必究】然，其实你也可以不用，而使用其他的aja著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】x请求模块，甚至在vue里面混合使用jq未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netuery。anyway，我们这一章主要介原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net绍vue-resource。
【未经授权禁止转载】【关注微信公众号：wwwtangshua【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netngnet】【版权所有，侵权必究】这里有个小故事，vue-resource【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】不是官方开发的，而是vue的一个早期用户本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。开发的，后来官方觉得很好，就作为了官方推【未经授权禁止转载】【本文首发于唐霜的博客】荐插件。因为插件的使用非常方便，使用文档原创内容，盗版必究。【原创不易，请尊重版权】太少，以至于都没有专门的一个网站来介绍它【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，你可以直接在github上看它的文档和源码。如果你想看中文快速入门的资料，可以看这位作者写的教程，非常简单，但很容易入门。
【转载请注明来源】【作者：唐霜】【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】安装
如果是用<script>引入【作者：唐霜】【未经授权禁止转载】vue-resource，那就很简单了，本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。不用说，但是它需要在vue.js引入之后本文版权归作者所有，未经授权不得转载。【本文受版权保护】，你的代码开始之前引入vue-resou未经授权，禁止复制转载。【原创内容，转载请注明出处】rce.js，这样才能正常使用。
【关注微信公众号：wwwtangshua【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ngnet】
如果使用npm安装，并且使用模块化方式【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net引入，那么应该这样：
import Vue from 'vue'import VueResource from 'vue-resource' Vue.use(VueResource)
Vue.use就是使用插件的一个方法，使【转载请注明来源】未经授权，禁止复制转载。用之后，全局支持VueResource。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。下面的一切介绍，都基于这个use，这得你【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net读到后文的插件一章才能完全理解，目前来讲【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】，你只需要这样去操作即可。
未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。配置方式
使用全局配置设置默认值
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netng.net本文版权归作者所有，未经授权不得转载。Vue.http.options.root = '/root'; Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';
在你的Vue组件配置中设置默认值
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。未经授权，禁止复制转载。ang.netnew Vue({
http: {
root: '/root',
headers: {
Authorization: 'Basic YXBpOnBhc3N3b3Jk'
}
}
})
调用方式
全局调用
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【未经授权禁止转载】ang.net【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua原创内容，盗版必究。【原创不易，请尊重版权】ngnet】Vue.http(options)
实例内调用
【关注微信公众号：wwwtangshua【本文受版权保护】【关注微信公众号：wwwtangshuangnet】ngnet】著作权归作者所有，禁止商业用途转载。this.$http(options)
便捷方法
- get(url, [options]) 本文版权归作者所有，未经授权不得转载。【转载请注明来源】
- head(url, [options]) 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ang.net【转载请注明来源】
- delete(url, [options转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】]) 【本文首发于唐霜的博客】【转载请注明来源】
- jsonp(url, [options]【版权所有，侵权必究】【原创不易，请尊重版权】) 著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- post(url, [body], [o著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netptions]) 未经授权，禁止复制转载。【本文受版权保护】【作者：唐霜】
- put(url, [body], [op著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。tions]) 【关注微信公众号：wwwtangshua【版权所有，侵权必究】【未经授权禁止转载】ngnet】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net
- patch(url, [body], [【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。options]) 原创内容，盗版必究。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ng.net【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】et 获取更多精彩内容】
选项
| 参数 | 类型 | 描述 |
|---|---|---|
| url | string | 请求的目标URL |
| body | Object, FormData, string | 作为请求体发送的数据 |
| headers | Object | 作为请求头部发送的头部对象 |
| params | Object | 作为URL参数的参数对象 |
| method | string | HTTP方法 (例如GET，POST，…) |
| timeout | number | 请求超时（单位：毫秒） (0表示永不超时) |
| before | function(request) | 在请求发送之前修改请求的回调函数 |
| progress | function(event) | 用于处理上传进度的回调函数 ProgressEvent |
| credentials | boolean | 是否需要出示用于跨站点请求的凭据 |
| emulateHTTP | boolean | 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。 |
| emulateJSON | boolean | 设置请求体的类型为application/x-www-form-urlencoded |
响应
vue-resource的请求实际是一个本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。promise，响应的时候就可以通过.t【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。hen来获取响应结果。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。通过如下属性和方法处理一个请求获取到的响【本文受版权保护】【原创内容，转载请注明出处】应对象：
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。| 属性 | 类型 | 描述 |
|---|---|---|
| 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对象方式返回响应体 |
举个栗子：
【本文受版权保护】【原创不易，请尊重版权】// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then((response) => {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// set data on vm
this.$set('someData', response.body);
// 下面这句厉害了，它让你的下一个then可以得到返回的json数据
return response.json()
}, (response) => {
// error callback
})
.then(data => {
// 因为上面return response.json()，所以这里的data就是服务端返回的json数据
})
使用blob()方法从响应中获取一副图像【未经授权禁止转载】本文作者：唐霜，转载请注明出处。的内容。你甚至可以用这个blob来直接显未经授权，禁止复制转载。【未经授权禁止转载】示图片，而不是通过图片的src。
【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netngnet】转载请注明出处：www.tangshua【本文首发于唐霜的博客】【作者：唐霜】ng.net【版权所有，侵权必究】未经授权，禁止复制转载。拦截器
全局定义拦截器后，它可用于前置和后置处理【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】请求。
未经授权，禁止复制转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ng.net原创内容，盗版必究。【关注微信公众号：wwwtangshua【转载请注明来源】转载请注明出处：www.tangshuang.netngnet】请求处理
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本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。l，所以vue-resource有一个更【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。加抽象的方法：Vue.resource或【原创内容，转载请注明出处】【原创不易，请尊重版权】this.$resource。
【本文受版权保护】本文作者：唐霜，转载请注明出处。方法
let rsrc = this.$resource(url, [params], [actions], [options])
这里的rsrc就是建立的一个资源实例，你未经授权，禁止复制转载。原创内容，盗版必究。可以对它进行restful的操作，操作方未经授权，禁止复制转载。【版权所有，侵权必究】法如下。来说一下参数：
【原创内容，转载请注明出处】原创内容，盗版必究。【转载请注明来源】著作权归作者所有，禁止商业用途转载。- url: 请求的资源路径，应该不用解释吧 【作者：唐霜】【作者：唐霜】
- params: url模板参数，下面会讲【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。什么是url模板 【原创不易，请尊重版权】【本文首发于唐霜的博客】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ng.net著作权归作者所有，禁止商业用途转载。
- actions: 自定义操作，除了下面的【本文受版权保护】【本文首发于唐霜的博客】get, save, query等操作，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】你还可以自定义一些操作，通过action【未经授权禁止转载】未经授权，禁止复制转载。s来增加，这个也下面讲 【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】
- options: 跟$https的opt【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ions是一样的 【转载请注明来源】【转载请注明来源】
url模板
vue-resource使用了url-t本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netemplate来解析url模板，有兴趣的本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】同学可以去研究一下url-templat【本文受版权保护】转载请注明出处：www.tangshuang.nete。具体来说，就是下面这种用法：
【转载请注明来源】【访问 www.tangshuang.n【未经授权禁止转载】本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】let rsrc = this.$resource('/book/{id}', {id: 12})
上面说了第二个参数prams是url模板转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的参数。按照上面这个代码，resourc【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.nete的url会指向：/book/12，这个转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。应该非常好理解。
未经授权，禁止复制转载。【本文受版权保护】原创内容，盗版必究。【转载请注明来源】默认操作
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'},
怎么用呢？
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。rsrc.get(options).then(..)..
操作只有一个参数options，opti【本文受版权保护】未经授权，禁止复制转载。ons里面就可以放headers了。它的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net返回值就是上面$http的响应了。
本文版权归作者所有，未经授权不得转载。【本文受版权保护】【作者：唐霜】自定义操作
上面说道，actions这个参数可以让你著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】自己自定义自己的操作。比如：
【作者：唐霜】原创内容，盗版必究。let actions = {
patch: {
method: 'PATCH',
},
}
let rsrc = this.$srouce('/book/{id}', {id: 12}, actions)
rsrc.patch().then(..)..
相当于你自己新增一个方法，它的参数也是o【本文首发于唐霜的博客】【版权所有，侵权必究】ptions。
【原创内容，转载请注明出处】转载请注明出处：www.tangshua【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】ng.net【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ang.net转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ng.net头部对象
{
// 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.tangshua【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ng.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。var headers = {
'User-Token': 'xxx',
}
var options = {
headers,
}
var rsrc = this.$resource(url, options)rsrc.get().then(..)...
但是有个点需要注意一下，发送header未经授权，禁止复制转载。【转载请注明来源】s只需要传入一个对象字面量，而返回的re【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。sponse里面的headers是一个h原创内容，盗版必究。【作者：唐霜】ttp Header对象。Header对原创内容，盗版必究。本文作者：唐霜，转载请注明出处。象就有本节上述的这些属性和方法。
【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ngnet】【转载请注明来源】【未经授权禁止转载】发送表单数据
使用FormData发送表单。
【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ang.net【版权所有】唐霜 www.tangshu【本文受版权保护】【本文首发于唐霜的博客】ang.net【原创内容，转载请注明出处】{
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
});
}
终止请求
当一个新的请求被发送的时候请终止上一个请著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。求。例如在一个自动完成的输入框中输入的时转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】候。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ngnet】{
// 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写插件。但是，在写插【本文受版权保护】原创内容，盗版必究。件之前，你应该回忆一下，前面我们说过，用著作权归作者所有，禁止商业用途转载。【作者：唐霜】Vue.use安装插件。知道怎么用之后，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。在来看怎么开发一个插件就比较容易理解一些未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。开发插件
插件通常会为Vue添加全局功能。插件的范【本文受版权保护】【本文首发于唐霜的博客】围没有限制——一般有下面几种：
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文首发于唐霜的博客】- 添加全局方法或者属性，如: vue-element 【本文受版权保护】【转载请注明来源】【本文首发于唐霜的博客】
- 添加全局资源：指令/过滤器/过渡（过渡也【转载请注明来源】原创内容，盗版必究。是vue里面的一项功能，会在下面的章节详【转载请注明来源】原创内容，盗版必究。细阐述）等，如 vue-touch 【作者：唐霜】【未经授权禁止转载】【转载请注明来源】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【转载请注明来源】ng.net
- 通过全局 mixin方法添加一些组件选项未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，如: vuex 【未经授权禁止转载】【原创内容，转载请注明出处】【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
- 添加 Vue 实例方法，通过把它们添加到【转载请注明来源】【版权所有】唐霜 www.tangshuang.net Vue.prototype 上实现。 【原创内容，转载请注明出处】【原创不易，请尊重版权】
- 一个库，提供自己的 API，同时提供上面【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。提到的一个或多个功能，如 vue-router 未经授权，禁止复制转载。【本文首发于唐霜的博客】【访问 www.tangshuang.n原创内容，盗版必究。【转载请注明来源】et 获取更多精彩内容】
Vue.js 的插件应当有一个公开方法 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】install 。这个方法的第一个参数是【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net Vue 构造器 , 第二个参数是一个可本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。选的选项对象:
【作者：唐霜】【未经授权禁止转载】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例属性或方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}
}
利用上面四种方式，你就可以更好的控制你的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。组件或应用了。而除了第4种，前面三种你在原创内容，盗版必究。【转载请注明来源】前面其实已经阅读到过了，有兴趣可以回到对【版权所有】唐霜 www.tangshuang.net【转载请注明来源】应的章节复习一下。
【本文受版权保护】【作者：唐霜】使用插件
通过全局方法 Vue.use() 使用插【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。件:
本文作者：唐霜，转载请注明出处。【本文受版权保护】// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)
也可以传入一个选项对象:
转载请注明出处：www.tangshua原创内容，盗版必究。未经授权，禁止复制转载。ng.net【版权所有】唐霜 www.tangshu【作者：唐霜】本文作者：唐霜，转载请注明出处。ang.netVue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止注册相同插件多转载请注明出处：www.tangshuang.net原创内容，盗版必究。次，届时只会注册一次该插件。
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ng.net
一些插件，如 vue-router 如原创内容，盗版必究。【作者：唐霜】果 Vue 是全局变量则自动调用 Vue本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】.use() 。不过在模块环境中应当始终本文作者：唐霜，转载请注明出处。【未经授权禁止转载】显式调用 Vue.use() :
// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)
生命周期
生命周期，是组件思想中非常重要的一个环节【本文受版权保护】【关注微信公众号：wwwtangshuangnet】。简单的说就是一个组件从一个类，被实例化【版权所有，侵权必究】【本文受版权保护】之后执行的一系列操作，到最后这个实例被销著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。毁的整个过程。
【本文受版权保护】【本文受版权保护】转载请注明出处：www.tangshua【版权所有，侵权必究】【本文首发于唐霜的博客】ng.net【本文首发于唐霜的博客】什么是生命周期？
每个 Vue 实例在被创建之前都要经过一【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】系列的初始化过程。例如，实例需要配置数据原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】观测(data observer)、编译【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。模版、挂载实例到 DOM ，然后在数据变【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。化时更新 DOM 。在这个过程中，实例也【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net会调用一些 生命周期钩子 ，这就给我们提著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net供了执行自定义逻辑的机会。
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netang.net【作者：唐霜】我们只需要在实例中使用这些钩子函数，那么【版权所有】唐霜 www.tangshuang.net【转载请注明来源】当生命周期进行到特定位置时，就会调用这些著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。函数，从而进行函数中规定的操作，这样就可本文版权归作者所有，未经授权不得转载。【转载请注明来源】以在一个实例的不同生命阶段执行一些你想要未经授权，禁止复制转载。【作者：唐霜】执行的操作。
本文作者：唐霜，转载请注明出处。【本文受版权保护】钩子的 this 指向调用它的 Vue 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】实例。一些用户可能会问 Vue.js 是原创内容，盗版必究。原创内容，盗版必究。否有“控制器”的概念？答案是，没有。组件原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。的自定义逻辑可以分布在这些钩子中。
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】生命周期示意图
本文版权归作者所有，未经授权不得转载。
不用牢牢记住这张图，你需要的时候，打开著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本书，找到这里即可。这张图将来会在你的开【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。发中经常用到。
生命周期钩子函数
所有的生命周期钩子自动绑定 this 上转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。下文到实例中，因此你可以访问数据，对属性未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net和方法进行运算。这意味着 你不能使用箭头【转载请注明来源】本文版权归作者所有，未经授权不得转载。函数来定义一个生命周期方法 (例如 cr著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。eated: () => this著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。.fetchTodos())。这是因为箭【作者：唐霜】转载请注明出处：www.tangshuang.net头函数绑定了父上下文，因此 this 与【未经授权禁止转载】【本文首发于唐霜的博客】你期待的 Vue 实例不同， this.【本文首发于唐霜的博客】【转载请注明来源】fetchTodos 的行为未定义。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ang.netbeforeCreate
在实例初始化之后，数据观测(data o本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。bserver) 和 event/wat【未经授权禁止转载】【本文受版权保护】cher 事件配置之前被调用。
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】原创内容，盗版必究。【原创内容，转载请注明出处】created
实例已经创建完成之后被调用。在这一步，实【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。例已完成以下的配置：数据观测(data 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。observer)，属性和方法的运算， 【版权所有，侵权必究】【原创不易，请尊重版权】watch/event 事件回调。然而，【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。挂载阶段还没开始，$el 属性目前不可见【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。。
【作者：唐霜】【未经授权禁止转载】原创内容，盗版必究。转载请注明出处：www.tangshua【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】ng.netbeforeMount
在挂载开始之前被调用：相关的 rende原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netr 函数首次被调用。
【版权所有，侵权必究】原创内容，盗版必究。该钩子在服务器端渲染期间不被调用。
【访问 www.tangshuang.n未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】未经授权，禁止复制转载。mounted
el 被新创建的 vm.$el 替换，并著作权归作者所有，禁止商业用途转载。【转载请注明来源】挂载到实例上去之后调用该钩子。如果 ro【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ot 实例挂载了一个文档内元素，当 mo【原创内容，转载请注明出处】原创内容，盗版必究。unted 被调用时 vm.$el 也在未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。文档内。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。该钩子在服务器端渲染期间不被调用。
【原创内容，转载请注明出处】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新未经授权，禁止复制转载。【未经授权禁止转载】渲染和打补丁之前。
【原创内容，转载请注明出处】未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。你可以在这个钩子中进一步地更改状态，这不原创内容，盗版必究。未经授权，禁止复制转载。会触发附加的重渲染过程。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。该钩子在服务器端渲染期间不被调用。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【原创不易，请尊重版权】updated
由于数据更改导致的虚拟 DOM 重新渲染本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】和打补丁，在这之后会调用该钩子。
【本文首发于唐霜的博客】未经授权，禁止复制转载。当这个钩子被调用时，组件 DOM 已经更本文作者：唐霜，转载请注明出处。【作者：唐霜】新，所以你现在可以执行依赖于 DOM 的本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。操作。然而在大多数情况下，你应该避免在此本文版权归作者所有，未经授权不得转载。【本文受版权保护】期间更改状态，因为这可能会导致更新无限循未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。环。
转载请注明出处：www.tangshua原创内容，盗版必究。【原创内容，转载请注明出处】ng.net未经授权，禁止复制转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。该钩子在服务器端渲染期间不被调用。
【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【作者：唐霜】【原创内容，转载请注明出处】【原创内容，转载请注明出处】activated
keep-alive 组件激活时调用。
本文作者：唐霜，转载请注明出处。
该钩子在服务器端渲染期间不被调用。
参考：构建组件 – keep-al【本文受版权保护】【版权所有，侵权必究】ive动态组件 – keep-al著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ive
【本文受版权保护】本文作者：唐霜，转载请注明出处。【作者：唐霜】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ng.netdeactivated
keep-alive 组件停用时调用。
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ng.net
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】可用。
著作权归作者所有，禁止商业用途转载。
该钩子在服务器端渲染期间不被调用。
destroyed
Vue 实例销毁后调用。调用后，Vue 【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】实例指示的所有东西都会解绑定，所有的事件转载请注明出处：www.tangshuang.net【版权所有，侵权必究】监听器会被移除，所有的子实例也会被销毁。
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netng.net
该钩子在服务器端渲染期间不被调用。
Virtual DOM 虚拟DOM
终于写（copy）了那么多章之后，要来谈【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一谈Virtual DOM。相信很多人对【原创不易，请尊重版权】原创内容，盗版必究。这项技术早都垂涎三尺，想要对它的原理进行【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net窥探。本章将结合vue简单梳理Virtu【本文首发于唐霜的博客】【未经授权禁止转载】al DOM的原理。
【版权所有，侵权必究】【本文受版权保护】未经授权，禁止复制转载。【原创不易，请尊重版权】vue2.0之后才支持Virtual D【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netOM，它介于编译template和渲染界转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】面之间。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ng.netVirtual DOM的灵感来源
DOM是一个很昂贵的对象，之所以昂贵，是【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。因为它内部的方法太多，而且相互联系。DO【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】M本质也是一个对象，但是这个对象首先有非【转载请注明来源】【本文首发于唐霜的博客】常多的属性和方法，一个DOM节点对象就会【本文受版权保护】本文版权归作者所有，未经授权不得转载。占用非常多的内存，其次，当你操作DOM节【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】点的时候，DOM对象会不断操作自己，同时【本文受版权保护】【原创内容，转载请注明出处】还会操作和自己相关的其他DOM节点对象，本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】所以整个DOM树是牵一发而动全身，操作D【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。OM就会消耗很多资源。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有，侵权必究】既然DOM是一个对象，跟javascri本文作者：唐霜，转载请注明出处。【转载请注明来源】pt的其他对象并没有本质上的不同，那么，【本文首发于唐霜的博客】【转载请注明来源】可以不可以在另一个空间复制一个和DOM结【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net构相同的对象，但是，这个新的对象会删除很转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net多方法或属性，只保留几个必要的，而操作这本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net些对象的时候，不会有那么高消耗的连带操作未经授权，禁止复制转载。原创内容，盗版必究。，这样操作这个对象和操作DOM就完全是两【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net回事，性能上肯定快很多。最后，就是当操作未经授权，禁止复制转载。未经授权，禁止复制转载。完之后，怎么把这个对象跟真实的DOM映射【本文受版权保护】著作权归作者所有，禁止商业用途转载。起来？你可能还记得前面提到过一个key属【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】性，通过一个唯一标记来确定哪些位置改变了【本文受版权保护】【原创内容，转载请注明出处】，针对这些改变的对象，找到对应的DOM节本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】点，进行重新渲染。
原创内容，盗版必究。原创内容，盗版必究。vue2.0中的Virtual DOM
在前面的阅读中，你已经见过VNode了，原创内容，盗版必究。原创内容，盗版必究。它是vue2里面加入的一种新对象，用来实【转载请注明来源】未经授权，禁止复制转载。现Virtual DOM。在vue渲染真转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】实的DOM之前，内部的响应式系统改变的都著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】是VNode。响应式系统在下一章讲。
未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。VNode模拟DOM树
在vue中Virtual DOM是通过V【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】Node类来表达的，每个DOM元素或vu【作者：唐霜】未经授权，禁止复制转载。e组件都对应一个VNode对象。VNod著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】e结构如下（图来自《vue.js权威指南【原创不易，请尊重版权】【本文受版权保护】》）：
【版权所有，侵权必究】
VNode
它包含了tag, text, elm, 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】data, parent, childr【本文受版权保护】【原创不易，请尊重版权】en等属性。它可以由真实的DOM生成，也【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】可以由组件生成。如果由组件生成的话，VN【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ode的componentOptions未经授权，禁止复制转载。【未经授权禁止转载】有值，而如果由DOM生成，则该值空。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。那么有什么方法获取一个元素的VNode呢【未经授权禁止转载】【本文受版权保护】？没有。
未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】VNodeComponentOptions
如果VNode是由组件生成的，所有的组件转载请注明出处：www.tangshuang.net【作者：唐霜】相关信息都在这个对象里面。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。VNodeData
VNode中的节点数据data属性的详细【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】描述，包括slot, ref, stat【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】icClass, style, clas未经授权，禁止复制转载。【本文首发于唐霜的博客】s, props, attrs, tra【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netnsition, directives等著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。信息。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】【原创内容，转载请注明出处】【版权所有，侵权必究】VNodeDirective
VNodeData中的directive本文作者：唐霜，转载请注明出处。【本文受版权保护】s属性的详细信息，包括name, val【原创内容，转载请注明出处】【转载请注明来源】ue, oldValue, arg, m【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。odifiers等。
【本文受版权保护】未经授权，禁止复制转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ngnet】如何生成VNode？
前面我们提到过render函数的参数cr本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】eateElement，其实你再回头去看【原创内容，转载请注明出处】【原创内容，转载请注明出处】createElement这个函数，就大原创内容，盗版必究。【转载请注明来源】概清楚是怎么回事，它实际上就生成了VNo【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】de（一个对象）。但是如果我们传入了te【作者：唐霜】【版权所有，侵权必究】mplate而没有传入render函数呢本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。？vue会通过一个ast语法优化，对我们未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。传入的template经过HTML解析器【版权所有，侵权必究】【本文受版权保护】之后的对象转化为给createEleme未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】nt的参数。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】【本文首发于唐霜的博客】总之，你会发现，vue的render函数转载请注明出处：www.tangshuang.net原创内容，盗版必究。实际上是要生成VNode，它到真实的DO【作者：唐霜】原创内容，盗版必究。M，还有一个过程。
未经授权，禁止复制转载。原创内容，盗版必究。VNode patch生成DOM
Virtual DOM之所以快，是因为在【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net生成真实的DOM之前，通过内部的一个简单【本文首发于唐霜的博客】未经授权，禁止复制转载。的多的对象的对比，判断是否有变化，具体的本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】变化在哪里，这个对比的过程比直接操作DO著作权归作者所有，禁止商业用途转载。【本文受版权保护】M要快非常多。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】vue还有一个特点，VNode还具有队列【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，当VNode发生变化时，会放在一个队列未经授权，禁止复制转载。【本文受版权保护】里，并不会马上去更新DOM，而是在遍历完未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】整个队列之后才更新DOM。所以性能上又好【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】了一些。
【原创内容，转载请注明出处】【作者：唐霜】【转载请注明来源】vue里对比新旧DOM的方法是patch【作者：唐霜】【作者：唐霜】Vnode这个方法，当它决定是否要更新D【本文首发于唐霜的博客】【本文受版权保护】OM之前，会比较DOM节点对应的新旧VN转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netode，只有不同时，才进行更新，这个对比【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。是在VNode内部，因此比对比DOM快很本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】多。patchValue这个方法是vue【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。里面非常出色，可以说是vue里面使得Vi【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。rtual DOM可行的核心部分。它的实本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】现比较复杂，本书也说不清楚，你要是有兴趣【转载请注明来源】【转载请注明来源】，可以阅读源码，细心研究。
【转载请注明来源】【转载请注明来源】本文版权归作者所有，未经授权不得转载。vue生成真正的DOM靠createEl【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】m方法，它把一个VNode真正转化为真实转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的DOM。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【作者：唐霜】【版权所有】唐霜 www.tangshuang.netang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n【作者：唐霜】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】响应式原理
我们已经涵盖了大部分的基础知识 R未经授权，禁止复制转载。原创内容，盗版必究。11; 现在是时候深入底层原理了！Vue本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net 最显著的特性之一便是不太引人注意的响应【原创内容，转载请注明出处】未经授权，禁止复制转载。式系统(reactivity syste【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】m)。模型层(model)只是普通 Ja原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】vaScript 对象，修改它则更新视图【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。(view)。这会让状态管理变得非常简单【作者：唐霜】【本文受版权保护】且直观，不过理解它的工作原理以避免一些常转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net见的问题也是很重要的。在本章中，我们将开本文作者：唐霜，转载请注明出处。【未经授权禁止转载】始深入挖掘 Vue 响应式系统的底层细节转载请注明出处：www.tangshuang.net【本文受版权保护】。
【关注微信公众号：wwwtangshua【转载请注明来源】【本文受版权保护】ngnet】原创内容，盗版必究。【转载请注明来源】【转载请注明来源】如何追踪变化
把一个普通 JavaScript 对象传【未经授权禁止转载】原创内容，盗版必究。给 Vue 实例的 data 选项，Vu本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nete 将遍历此对象所有的属性，并使用 Object.definePropert原创内容，盗版必究。未经授权，禁止复制转载。y 把这些属性全部转为 getter/se【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。tter。Object.definePr【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】operty 是仅 ES5 支持，且无法【原创不易，请尊重版权】未经授权，禁止复制转载。 shim 的特性，这也就是为什么 Vu【本文受版权保护】著作权归作者所有，禁止商业用途转载。e 不支持 IE8 以及更低版本浏览器的【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】原因。
【作者：唐霜】【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ang.net本文作者：唐霜，转载请注明出处。用户看不到 getter/setter，【版权所有，侵权必究】【转载请注明来源】但是在内部它们让 Vue 追踪依赖，在属【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。性被访问和修改时通知变化。这里需要注意的【本文受版权保护】本文版权归作者所有，未经授权不得转载。问题是浏览器控制台在打印数据对象时 ge【未经授权禁止转载】原创内容，盗版必究。tter/setter 的格式化并不同，【转载请注明来源】【转载请注明来源】所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
【本文首发于唐霜的博客】未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ngnet】每个组件实例都有相应的 watcher 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】实例对象，它会在组件渲染的过程中把属性记原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。录为依赖，之后当依赖项的 setter 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。被调用时，会通知 watcher 重新计【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。算，从而致使它关联的组件得以更新。
【原创不易，请尊重版权】
变化检测问题
受现代 JavaScript 的限制（以著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。及废弃 Object.observe），【本文受版权保护】【原创不易，请尊重版权】Vue 不能检测到对象属性的添加或删除。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。由于 Vue 会在初始化实例时对属性执行本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 getter/setter 转化过程，未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。所以属性必须在 data 对象上存在才能本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。让 Vue 转换它，这样才能让它是响应的【转载请注明来源】【原创内容，转载请注明出处】。例如：
【本文首发于唐霜的博客】转载请注明出处：www.tangshua【转载请注明来源】【版权所有】唐霜 www.tangshuang.netng.net【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ang.net转载请注明出处：www.tangshua原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ng.netvar vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应的vm.b = 2
// `vm.b` 是非响应的
Vue 不允许在已经创建的实例上动态添加【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。新的根级响应式属性(root-level【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。 reactive property)。【作者：唐霜】本文版权归作者所有，未经授权不得转载。然而它可以使用 Vue.set(obje本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ct, key, value) 方法将响【作者：唐霜】原创内容，盗版必究。应属性添加到嵌套的对象上：
原创内容，盗版必究。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【原创内容，转载请注明出处】Vue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set 实例方法，【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。这也是全局 Vue.set 方法的别名：
原创内容，盗版必究。【转载请注明来源】【本文受版权保护】this.$set(this.someObject,'b',2)
有时你想向已有对象上添加一些属性，例如使【原创不易，请尊重版权】未经授权，禁止复制转载。用 Object.assign() 或 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。_.extend() 方法来添加属性。但转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。是，添加到对象上的新属性不会触发更新。在转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net这种情况下可以创建一个新的对象，让它包含【本文首发于唐霜的博客】【原创内容，转载请注明出处】原对象的属性和新的属性：
【版权所有】唐霜 www.tangshu【作者：唐霜】【作者：唐霜】ang.net【本文受版权保护】【转载请注明来源】// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
声明响应式属性
由于 Vue 不允许动态添加根级响应式属【转载请注明来源】转载请注明出处：www.tangshuang.net性，所以你必须在初始化实例前声明根级响应著作权归作者所有，禁止商业用途转载。【本文受版权保护】式属性，哪怕只是一个空值:
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【本文受版权保护】【作者：唐霜】ngnet】var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你在 data 选项中未声明 mes【原创不易，请尊重版权】原创内容，盗版必究。sage，Vue 将警告你渲染函数在试图本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】访问的属性不存在。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。这样的限制在背后是有其技术原因的，它消除转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net了在依赖项跟踪系统中的一类边界情况，也使【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】 Vue 实例在类型检查系统的帮助下运行著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。的更高效。而且在代码可维护性方面也有一点未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。重要的考虑：data 对象就像组件状态的著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】概要，提前声明所有的响应式属性，可以让组【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】件代码在以后重新阅读或其他开发人员阅读时原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】更易于被理解。
【转载请注明来源】【未经授权禁止转载】异步更新队列
可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】Vue 将开启一个队列，并缓冲在同一事件未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】循环中发生的所有数据改变。如果同一个 w【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。atcher 被多次触发，只会一次推入到【转载请注明来源】【未经授权禁止转载】队列中。这种在缓冲时去除重复数据对于避免【本文受版权保护】【本文首发于唐霜的博客】不必要的计算和 DOM 操作上非常重要。【本文首发于唐霜的博客】原创内容，盗版必究。然后，在下一个的事件循环“tick”中，原创内容，盗版必究。【作者：唐霜】Vue 刷新队列并执行实际（已去重的）工原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】作。Vue 在内部尝试对异步队列使用原生【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的 Promise.then 和 Mut【转载请注明来源】未经授权，禁止复制转载。ationObserver，如果执行环境本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net不支持，会采用 setTimeout(f本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。n, 0) 代替。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】例如，当你设置 vm.someData 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。= ‘new value&#【作者：唐霜】【原创不易，请尊重版权】8217; ，该组件不会立即重新渲染。当【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。刷新队列时，组件会在事件循环队列清空时的本文版权归作者所有，未经授权不得转载。【本文受版权保护】下一个“tick”更新。多数情况我们不需本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】要关心这个过程，但是如果你想在 DOM 未经授权，禁止复制转载。【作者：唐霜】状态更新后做点什么，这就可能会有些棘手。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。虽然 Vue.js 通常鼓励开发人员沿着【转载请注明来源】【原创内容，转载请注明出处】“数据驱动”的方式思考，避免直接接触 D著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】OM，但是有时我们确实要这么做。为了在数【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。据变化之后等待 Vue 完成更新 DOM转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。 ，可以在数据变化之后立即使用 Vue.未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。nextTick(callback) 。【转载请注明来源】未经授权，禁止复制转载。这样回调函数在 DOM 更新完成后就会调【本文受版权保护】本文版权归作者所有，未经授权不得转载。用。例如：
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick(【原创内容，转载请注明出处】未经授权，禁止复制转载。) 实例方法特别方便，因为它不需要全局 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。Vue ，并且回调函数中的 this 将转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】自动绑定到当前的 Vue 实例上：
未经授权，禁止复制转载。【原创内容，转载请注明出处】Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => '没有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})
路由：vue-router
当我们开始打算用vue来写app的时候，【作者：唐霜】【关注微信公众号：wwwtangshuangnet】一定会考虑路由的问题。vue官方出品了v【本文首发于唐霜的博客】原创内容，盗版必究。ue-router，它可以实现改变url【原创内容，转载请注明出处】未经授权，禁止复制转载。来切换视图，它有完整的中文文档，而且内容【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】不多，很快就可以看完，所以本书就不完完全未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】全的copy过来了，你可以进入官方的中文文档阅读。
【未经授权禁止转载】
本章主要是想让你能够使用vue-rou本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ter进行开发，对于深层的机制就不予阐述转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】了。
安装和代码结构
和VueResource的安装一样，vu【作者：唐霜】【版权所有，侵权必究】e-router的安装也非常简单：
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ng.net【版权所有，侵权必究】【本文受版权保护】本文版权归作者所有，未经授权不得转载。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 获取更多精彩内容】Router的一个实例传给Vue实例。而【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net实例化VueRouter的时候，传入一个【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。routes，routes是一个数组，数未经授权，禁止复制转载。【原创内容，转载请注明出处】组的每个元素是一个组件（构造器参数）。
未经授权，禁止复制转载。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【作者：唐霜】et 获取更多精彩内容】【关注微信公众号：wwwtangshua【作者：唐霜】著作权归作者所有，禁止商业用途转载。ngnet】其实，我们也可以传一个组件构造器进去，路未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。由实例创建时，会自动创建这个组件的实例。
【本文受版权保护】【本文受版权保护】当这样的代码运行之后。当你访问/foo的【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net时候，就会在<router-vie【本文受版权保护】本文版权归作者所有，未经授权不得转载。w></router-vie【版权所有，侵权必究】转载请注明出处：www.tangshuang.netw>这个地方替换为Foo这个组件的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。渲染结果。当你切换url为/bar的时候【作者：唐霜】【本文首发于唐霜的博客】，渲染的就是Bar这个组件的渲染结果。也【本文受版权保护】转载请注明出处：www.tangshuang.net就是视图随着url改变而改变。
【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。未经授权，禁止复制转载。实例化参数配置
上面的new VueRouter的时候，【未经授权禁止转载】【本文受版权保护】需要传入参数，对路由实例进行配置，那么有原创内容，盗版必究。【版权所有，侵权必究】哪些配置项可选呢？
【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ngnet】本文作者：唐霜，转载请注明出处。routes
- 类型: Array<RouteCo【本文首发于唐霜的博客】【版权所有，侵权必究】nfig> 转载请注明出处：www.tangshua【本文首发于唐霜的博客】【转载请注明来源】ng.net原创内容，盗版必究。【作者：唐霜】【本文受版权保护】
- RouteConfig 的类型定义： 【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ang.net【本文受版权保护】
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.tangshua未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ng.net本文版权归作者所有，未经授权不得转载。mode
- 类型: string 【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【本文受版权保护】本文作者：唐霜，转载请注明出处。
- 默认值: “hashR【作者：唐霜】【本文首发于唐霜的博客】21; (浏览器环境) | “【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】;abstract” (No【转载请注明来源】【关注微信公众号：wwwtangshuangnet】de.js 环境) 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【关注微信公众号：wwwtangshua【转载请注明来源】【原创不易，请尊重版权】ngnet】本文作者：唐霜，转载请注明出处。
- 可选值: “hashR原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】21; | “history著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】” | “abs原创内容，盗版必究。【本文首发于唐霜的博客】tract”配置路由模式:
- hash: 使用 URL hash 值来【本文受版权保护】著作权归作者所有，禁止商业用途转载。作路由。支持所有浏览器，包括不支持 HT著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ML5 History Api 的浏览器原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】。 【转载请注明来源】【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ang.net【版权所有】唐霜 www.tangshu【版权所有，侵权必究】未经授权，禁止复制转载。ang.net【原创内容，转载请注明出处】
- history: 依赖 HTML5 Hi【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netstory API 和服务器配置。查看 HTML5 History 模式. 【本文受版权保护】未经授权，禁止复制转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。
- abstract: 支持所有 JavaS本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】cript 运行环境，如 Node.js【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】 服务器端。如果发现没有浏览器的 API【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，路由会自动强制进入这个模式。 【关注微信公众号：wwwtangshua【版权所有，侵权必究】【原创内容，转载请注明出处】ngnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【版权所有，侵权必究】原创内容，盗版必究。
base
- 类型: string 【未经授权禁止转载】【本文受版权保护】
- 默认值: “/”【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net。应用的基路径。例如，如果整个单页应用服未经授权，禁止复制转载。【未经授权禁止转载】务在 /app/ 下，然后 base 就【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net应该设为 “/app/【本文受版权保护】【版权所有，侵权必究】221;。 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【原创不易，请尊重版权】原创内容，盗版必究。
linkActiveClass
- 类型: string 【版权所有，侵权必究】【本文首发于唐霜的博客】【作者：唐霜】
- 默认值: “router-l本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ink-active”。全局本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】配置 <router-link&g原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。t; 的默认『激活 class 类名』。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。参考 router-link. 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ang.net
scrollBehavior
- 类型: Function 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ng.net
- 更多详情参考 滚动行为. 【作者：唐霜】【作者：唐霜】【访问 www.tangshuang.n未经授权，禁止复制转载。未经授权，禁止复制转载。et 获取更多精彩内容】转载请注明出处：www.tangshua未经授权，禁止复制转载。【本文受版权保护】ng.net
(
to: Route,
from: Route,
savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}
router-view
<router-view>&著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】lt;/router-view>就著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net是用来显示VueRouter实例的渲染位【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net置。<router-view>本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net; 组件是一个 functional 组本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net件，渲染路径匹配到的视图组件。<r【转载请注明来源】【转载请注明来源】outer-view> 渲染的组件【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net还可以内嵌自己的 <router-本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netview>，根据嵌套路径，渲染嵌套未经授权，禁止复制转载。【未经授权禁止转载】组件。
【未经授权禁止转载】
有时候想同时（同级）展示多个视图，而不本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。是嵌套展示，例如创建一个布局，有 sid本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ebar（侧导航） 和 main（主内容【作者：唐霜】【原创不易，请尊重版权】） 两个视图，这个时候命名视图就派上用场【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】了。你可以在界面中拥有多个单独命名的视图本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，而不是只有一个单独的出口。如果 rou原创内容，盗版必究。转载请注明出处：www.tangshuang.netter-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.net：
原创内容，盗版必究。转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ng.net【转载请注明来源】const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
这个时候在实例化VueRouter的时候本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。，就不是传component了，而是传给【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。components这个参数了。在com【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ponents里面，就要使用键值对的形式【版权所有，侵权必究】【原创内容，转载请注明出处】，传入不同的组件构造器给不同的name。
【版权所有，侵权必究】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ng.net未经授权，禁止复制转载。Router 实例
属性
router.app
转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ng.net本文作者：唐霜，转载请注明出处。- 类型: Vue instance 转载请注明出处：www.tangshua【本文受版权保护】【原创内容，转载请注明出处】ng.net【访问 www.tangshuang.n【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- 配置了 router 的 Vue 根实例本文版权归作者所有，未经授权不得转载。【转载请注明来源】。 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有，侵权必究】未经授权，禁止复制转载。ang.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
router.mode
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。- 类型: string 【版权所有，侵权必究】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ang.net【版权所有，侵权必究】【原创内容，转载请注明出处】
- 路由使用的 模式。 【本文受版权保护】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】未经授权，禁止复制转载。ang.net
router.currentRoute
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。- 类型: Route 原创内容，盗版必究。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】
- 当前路由对应的 路由信息对象. 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【作者：唐霜】ng.net【原创不易，请尊重版权】
方法
router.beforeEach(gu【转载请注明来源】本文版权归作者所有，未经授权不得转载。ard)
转载请注明出处：www.tangshua未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ng.net
router.afterEach(ho转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ok)
- 增加全局的导航钩子。参考 导航钩子. 【本文首发于唐霜的博客】转载请注明出处：www.tangshua未经授权，禁止复制转载。【原创内容，转载请注明出处】ng.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。
router.push(location【本文受版权保护】【作者：唐霜】)
【作者：唐霜】
router.replace(loca【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nettion)
著作权归作者所有，禁止商业用途转载。
router.go(n)
本文版权归作者所有，未经授权不得转载。
router.back()
【作者：唐霜】
router.forward()
- 动态的导航到一个新 url。参考 编程式导航. 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【原创内容，转载请注明出处】
router.getMatchedCom【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netponents(location?)
【转载请注明来源】【转载请注明来源】- 返回目标位置或是当前路由匹配的组件数组（原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。是数组的定义/构造类，不是实例）。通常在【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。服务端渲染的数据预加载时时候。 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ng.net【转载请注明来源】
router.resolve(locat未经授权，禁止复制转载。【作者：唐霜】ion, current?, appen【原创不易，请尊重版权】【本文首发于唐霜的博客】d?)
原创内容，盗版必究。【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】- 2.1.0+ 原创内容，盗版必究。【版权所有，侵权必究】【版权所有，侵权必究】
- 解析目标位置（格式和 <route【作者：唐霜】【作者：唐霜】r-link> 的 to prop未经授权，禁止复制转载。【版权所有，侵权必究】 一样），返回包含如下属性的对象： 转载请注明出处：www.tangshua未经授权，禁止复制转载。【版权所有，侵权必究】ng.net【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ang.net【本文首发于唐霜的博客】
{
location: Location;
route: Route;
href: string;
}
router.addRoutes(rou【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。tes)
【原创不易，请尊重版权】【本文受版权保护】未经授权，禁止复制转载。- 2.2.0+ 【访问 www.tangshuang.n【转载请注明来源】本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ang.net
- 动态添加更多的路由规则。参数必须是一个符【原创不易，请尊重版权】原创内容，盗版必究。合 routes 选项要求的数组。 【转载请注明来源】【转载请注明来源】【原创不易，请尊重版权】【转载请注明来源】
router.onReady(callb未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netack)
【原创内容，转载请注明出处】未经授权，禁止复制转载。【原创不易，请尊重版权】- 2.2.0+ 转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netng.net【本文首发于唐霜的博客】
- 添加一个会在第一次路由跳转完成时被调用的【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】回调函数。此方法通常用于等待异步的导航钩【本文受版权保护】【原创内容，转载请注明出处】子完成，比如在进行服务端渲染的时候。 【原创不易，请尊重版权】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ng.net
动态路由匹配
参数匹配
我们经常需要把某种模式匹配到的所有路由，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】全都映射到同个组件。例如，我们有一个 U本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ser 组件，对于所有 ID 各不相同的【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】用户，都要使用这个组件来渲染。那么，我们本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net可以在 vue-router 的路由路径【未经授权禁止转载】【原创内容，转载请注明出处】中使用『动态路径参数』（dynamic 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netsegment）来达到这个效果：
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像 /user/foo 和 /u【转载请注明来源】原创内容，盗版必究。ser/bar 都将映射到相同的路由。
【未经授权禁止转载】【访问 www.tangshuang.n【版权所有，侵权必究】【本文首发于唐霜的博客】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。一个『路径参数』使用冒号 : 标记。当匹【作者：唐霜】【版权所有，侵权必究】配到一个路由时，参数值会被设置到 thi【本文受版权保护】【转载请注明来源】s.$route.params，可以在每【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】个组件内使用。于是，我们可以更新 Use【作者：唐霜】【本文首发于唐霜的博客】r 的模板，输出当前用户的 ID：
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua未经授权，禁止复制转载。【转载请注明来源】ng.net【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ngnet】const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
你可以在一个路由中设置多段『路径参数』，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。对应的值都会设置到 $route.par本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ams 中。例如：
【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ang.net【版权所有】唐霜 www.tangshu【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ang.net本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】| 模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: ‘evan’ } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: ‘evan’, post_id: 123 } |
除了 $route.params 外，$【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netroute 对象还提供了其它有用的信息，【版权所有，侵权必究】【作者：唐霜】例如，$route.query（如果 U原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】RL 中有查询参数）、$route.ha未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】sh 等等。你可以查看 API 文档 的详细说明。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /u【转载请注明来源】【作者：唐霜】ser/foo 导航到 user/bar【未经授权禁止转载】【本文首发于唐霜的博客】，原来的组件实例会被复用。因为两个路由都【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net渲染同个组件，比起销毁再创建，复用则显得著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。更加高效。不过，这也意味着组件的生命周期【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net钩子不会再被调用。
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netng.net转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ng.net【原创不易，请尊重版权】复用组件时，想对路由参数的变化作出响应的【版权所有，侵权必究】【转载请注明来源】话，你可以简单地 watch（监测变化）转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。 $route 对象：
【版权所有，侵权必究】【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】ngnet】本文作者：唐霜，转载请注明出处。const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
高级匹配模式
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹【原创不易，请尊重版权】【未经授权禁止转载】配模式，例如：可选的动态路径参数、匹配零原创内容，盗版必究。【未经授权禁止转载】个或多个、一个或多个，甚至是自定义正则匹本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。匹配。
【原创不易，请尊重版权】【访问 www.tangshuang.n原创内容，盗版必究。【转载请注明来源】et 获取更多精彩内容】【本文首发于唐霜的博客】匹配优先级
有时候，同一个路径可以匹配多个路由，此时本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net，匹配的优先级就按照路由的定义顺序：谁先【本文受版权保护】原创内容，盗版必究。定义的，谁的优先级就最高。
【原创不易，请尊重版权】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ngnet】【原创不易，请尊重版权】转载请注明出处：www.tangshua未经授权，禁止复制转载。未经授权，禁止复制转载。ng.net嵌套路由
实际生活中的应用界面，通常由多层嵌套的组转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net件组合而成。同样地，URL 中各段动态路未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net径也按某种结构对应嵌套的各层组件。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net原创内容，盗版必究。et 获取更多精彩内容】【作者：唐霜】未经授权，禁止复制转载。借助 vue-router，使用嵌套路由未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。配置，就可以很简单地表达这种关系。
【本文首发于唐霜的博客】未经授权，禁止复制转载。接着上节创建的 app：
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。<div id="app"> <router-view></router-view> </div>
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的 <router-view&本文版权归作者所有，未经授权不得转载。【转载请注明来源】gt; 是最顶层的出口，渲染最高级路由匹【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net配到的组件。同样地，一个被渲染组件同样可著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】以包含自己的嵌套 <router-【作者：唐霜】【未经授权禁止转载】view>。例如，在 User 组本文版权归作者所有，未经授权不得转载。【作者：唐霜】件的模板添加一个 <router-【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。view>：
【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染组件，需要在 Vue本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。Router 的参数中使用 childr原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。en 配置：
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshua【未经授权禁止转载】【转载请注明来源】ng.netconst 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【本文受版权保护】由。如果你想要渲染点什么，可以提供一个 【版权所有，侵权必究】【本文受版权保护】空的 子路由：
【本文受版权保护】【作者：唐霜】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转载请注明出处：www.tangshuang.net默认渲染成带有正确链接的 <a&g【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。t; 标签，可以通过配置 tag 属性生【本文受版权保护】未经授权，禁止复制转载。成别的标签.。另外，当目标路由成功激活时转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】，链接元素自动设置一个表示激活的 CSS【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。 类名。
【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】et 获取更多精彩内容】【原创内容，转载请注明出处】未经授权，禁止复制转载。<router-link> 本文作者：唐霜，转载请注明出处。【作者：唐霜】比起写死的 <a href=本文作者：唐霜，转载请注明出处。原创内容，盗版必究。221;…”&g【作者：唐霜】【版权所有，侵权必究】t; 会好一些，理由如下：
【原创不易，请尊重版权】未经授权，禁止复制转载。【原创不易，请尊重版权】- 无论是 HTML5 history 模式【作者：唐霜】本文版权归作者所有，未经授权不得转载。还是 hash 模式，它的表现行为一致，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。所以，当你要切换路由模式，或者在 IE9【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 降级使用 hash 模式，无须作任何变本文版权归作者所有，未经授权不得转载。【转载请注明来源】动。 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
- 在 HTML5 history 模式下，【转载请注明来源】【转载请注明来源】router-link 会拦截点击事件，【转载请注明来源】【关注微信公众号：wwwtangshuangnet】让浏览器不在重新加载页面。 转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net转载请注明出处：www.tangshua原创内容，盗版必究。【作者：唐霜】ng.net
- 当你在 HTML5 history 模式【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】下使用 base 选项之后，所有的 to【原创不易，请尊重版权】【未经授权禁止转载】 属性都不需要写（基路径）了。 原创内容，盗版必究。【访问 www.tangshuang.n原创内容，盗版必究。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【本文首发于唐霜的博客】【转载请注明来源】
Props
to
- 类型: string | Locatio【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】n 本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
- required 【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】et 获取更多精彩内容】【转载请注明来源】
表示目标路由的链接。当被点击后，内部会立【版权所有，侵权必究】转载请注明出处：www.tangshuang.net刻把 to 的值传到 router.pu转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。sh()，所以这个值可以是一个字符串或者本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。是描述目标位置的对象。
【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ngnet】【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ang.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 【转载请注明来源】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【本文受版权保护】ngnet】【作者：唐霜】
- 默认值: false 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
设置 replace 属性的话，当点击时未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。，会调用 router.replace(转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】) 而不是 router.push()，【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】于是导航后不会留下 history 记录未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net。
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【未经授权禁止转载】 <router-link :to="{ path: '/abc'}" replace></router-link>
append
- 类型: boolean 【版权所有】唐霜 www.tangshu原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
- 默认值: false 【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ang.net【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【本文首发于唐霜的博客】ang.net
设置 append 属性后，则在当前（相【本文受版权保护】【未经授权禁止转载】对）路径前添加基路径。例如，我们从 /a【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 导航到一个相对路径 b，如果没有配置 【本文受版权保护】【原创不易，请尊重版权】append，则路径为 /b，如果配了，【未经授权禁止转载】【作者：唐霜】则为 /a/b
【原创不易，请尊重版权】【本文首发于唐霜的博客】 <router-link :to="{ path: 'relative/path'}" append></router-link>
tag
- 类型: string 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ngnet】
- 默认值: “a” 【本文首发于唐霜的博客】【本文首发于唐霜的博客】【作者：唐霜】【原创不易，请尊重版权】
有时候想要 <router-lin【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。k> 渲染成某种标签，例如 <未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】;li>。 于是我们使用 tag 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】prop 类指定何种标签，同样它还是会监【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。听点击，触发导航。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --> <li>foo</li>
active-class
- 类型: string 原创内容，盗版必究。【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ngnet】【原创内容，转载请注明出处】
- 默认值: “router-l著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ink-active” 【转载请注明来源】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】
设置 链接激活时使用的 CSS 类名。默著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。认值可以通过路由的构造选项 linkAc【本文首发于唐霜的博客】原创内容，盗版必究。tiveClass 来全局配置。
未经授权，禁止复制转载。【作者：唐霜】exact
- 类型: boolean 未经授权，禁止复制转载。【原创不易，请尊重版权】【作者：唐霜】
- 默认值: false 【本文首发于唐霜的博客】【访问 www.tangshuang.n原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】et 获取更多精彩内容】
“是否激活” 默本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。认类名的依据是 inclusive ma【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。tch （全包含匹配）。 举个例子，如果原创内容，盗版必究。本文作者：唐霜，转载请注明出处。当前的路径是 /a 开头的，那么 <【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。;router-link to=R原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】21;/a”> 也会被【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】设置 CSS 类名。
【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ng.net按照这个规则，<router-li【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。nk to=”/”【本文受版权保护】著作权归作者所有，禁止商业用途转载。;> 将会点亮各个路由！想要链接使【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。用 “exact 匹配模式&【未经授权禁止转载】【版权所有，侵权必究】#8221;，则使用 exact 属性：
【原创内容，转载请注明出处】【原创内容，转载请注明出处】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。<!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>
events
- 类型: string | Array&l本文版权归作者所有，未经授权不得转载。【本文受版权保护】t;string> 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- 默认值: ‘click转载请注明出处：www.tangshuang.net原创内容，盗版必究。217; 【版权所有，侵权必究】【访问 www.tangshuang.n【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】【访问 www.tangshuang.n【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有，侵权必究】ang.net
2.1.0+才有。声明可以用来触发导航的转载请注明出处：www.tangshuang.net【未经授权禁止转载】事件。可以是一个字符串或是一个包含字符串原创内容，盗版必究。【本文首发于唐霜的博客】的数组。
【未经授权禁止转载】未经授权，禁止复制转载。将”激活时的CSS类名”应用在外层元素
有时候我们要让 “激活时的C著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。SS类名” 应用在外层元素，【本文受版权保护】【本文首发于唐霜的博客】而不是 <a> 标签本身，那【本文首发于唐霜的博客】【原创内容，转载请注明出处】么可以用 <router-link转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net> 渲染外层元素，包裹着内层的原生未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net <a> 标签：
【本文受版权保护】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netng.net【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ang.net本文作者：唐霜，转载请注明出处。<router-link tag="li" to="/foo"> <a>/foo</a> </router-link>
在这种情况下，<a> 将作为【作者：唐霜】本文作者：唐霜，转载请注明出处。真实的链接（它会获得正确的 href 的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。），而 “激活时的CSS类名转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】” 则设置到外层的 <【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netli>。
【版权所有，侵权必究】原创内容，盗版必究。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【本文受版权保护】et 获取更多精彩内容】用代码切换URL
除了使用 <router-link转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】> 创建 a 标签来定义导航链接，未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net我们还可以借助 router 的实例方法【版权所有，侵权必究】【作者：唐霜】，通过编写代码来实现。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshua原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【转载请注明来源】router.push(location)
想要导航到不同的 URL，则使用 rou本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ter.push 方法。这个方法会向 h【本文受版权保护】著作权归作者所有，禁止商业用途转载。istory 栈添加一个新的记录，所以，【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。当用户点击浏览器后退按钮时，则回到之前的【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】 URL。
【本文受版权保护】【原创不易，请尊重版权】转载请注明出处：www.tangshua【转载请注明来源】【未经授权禁止转载】ng.net【原创内容，转载请注明出处】当你点击 <router-link未经授权，禁止复制转载。【作者：唐霜】> 时，这个方法会在内部调用，所以【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】说，点击 <router-link著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net :to=”…&本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】#8221;> 等同于调用 rou【原创内容，转载请注明出处】未经授权，禁止复制转载。ter.push(…)。
【转载请注明来源】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】ng.net| 声明式 | 编程式 |
|---|---|
| <router-link :to=”…”> | router.push(…) |
该方法的参数可以是一个字符串路径，或者一【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。个描述地址的对象。例如：
【未经授权禁止转载】【未经授权禁止转载】原创内容，盗版必究。// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location)
跟 router.push 很像，唯一的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。不同就是，它不会向 history 添加【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。新记录，而是跟它的方法名一样 —— 替换【转载请注明来源】【未经授权禁止转载】掉当前的 history 记录。
【原创内容，转载请注明出处】原创内容，盗版必究。| 声明式 | 编程式 |
|---|---|
| <router-link :to=”…” replace> | router.replace(…) |
router.go(n)
这个方法的参数是一个整数，意思是在 hi【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。story 记录中向前或者后退多少步，类【作者：唐霜】【本文首发于唐霜的博客】似 window.history.go(原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netn)。
【访问 www.tangshuang.n【原创不易，请尊重版权】未经授权，禁止复制转载。et 获取更多精彩内容】
例子
// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100)
操作 History
你也许注意到 router.push、 未经授权，禁止复制转载。【版权所有，侵权必究】router.replace 和 rou【转载请注明来源】【作者：唐霜】ter.go 跟 window.history.pushS【本文受版权保护】本文版权归作者所有，未经授权不得转载。tate、 window.history【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】.replaceState 和 wind【本文受版权保护】转载请注明出处：www.tangshuang.netow.history.go好像， 实际上它们确实是效仿 windo原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。w.history API 的。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。因此，如果你已经熟悉 Browser History APIs，那么在 vue-router 中操作 【本文首发于唐霜的博客】原创内容，盗版必究。history 就是超级简单的。
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ang.net著作权归作者所有，禁止商业用途转载。还有值得提及的，vue-router 的未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。导航方法 （push、 replace、本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】 go） 在各类路由模式（history【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】、 hash 和 abstract）下表【本文受版权保护】【未经授权禁止转载】现一致。
【本文受版权保护】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.net重定向 和 别名
重定向
重定向也是通过 routes 配置来完成本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，下面例子是从 /a 重定向到 /b：
著作权归作者所有，禁止商业用途转载。【本文受版权保护】const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
原创内容，盗版必究。【版权所有，侵权必究】const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法，动态返回重定向目标：
【作者：唐霜】【访问 www.tangshuang.n原创内容，盗版必究。原创内容，盗版必究。et 获取更多精彩内容】【原创内容，转载请注明出处】【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】et 获取更多精彩内容】const router = new VueRouter({
routes: [
{
path: '/a',
redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}
}
]
})
别名
『重定向』的意思是，当用户访问 /a时，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。URL 将会被替换成 /b，然后匹配路由【转载请注明来源】著作权归作者所有，禁止商业用途转载。为 /b，那么『别名』又是什么呢？
【作者：唐霜】【关注微信公众号：wwwtangshua【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ngnet】/a 的别名是 /b，意味着，当用户访问【转载请注明来源】【原创不易，请尊重版权】 /b 时，URL 会保持为 /b，但是【本文首发于唐霜的博客】【原创不易，请尊重版权】路由匹配则为 /a，就像用户访问 /a 【原创内容，转载请注明出处】未经授权，禁止复制转载。一样。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ang.net上面对应的路由配置为：
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netang.net未经授权，禁止复制转载。【本文首发于唐霜的博客】const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
『别名』的功能让你可以自由地将 UI 结【未经授权禁止转载】转载请注明出处：www.tangshuang.net构映射到任意的 URL，而不是受限于配置转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的嵌套路由结构。
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ng.net$router和$route
在组件内部可以通过this.$route【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。r和this.$route获取路由信息。
【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【转载请注明来源】et 获取更多精彩内容】【作者：唐霜】【原创内容，转载请注明出处】this.$router
router这个实例化对象的引用。所以，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。上面说的Router实例里面的属性和方法本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】，this.$router都有，于是就可著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。以用它来操作路由了，比如跳转路由之类的。
【原创不易，请尊重版权】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】this.$route
当前url对应的路由信息，主要包括下面信【未经授权禁止转载】未经授权，禁止复制转载。息：
【未经授权禁止转载】【本文受版权保护】【本文受版权保护】$route.path
类型: string
未经授权，禁止复制转载。
字符串，对应当前路由的路径，总是解析为【转载请注明来源】著作权归作者所有，禁止商业用途转载。绝对路径，如 “/foo/b【原创不易，请尊重版权】【作者：唐霜】ar”。
$route.params
类型: Object
原创内容，盗版必究。
一个 key/value 对象，包含了【未经授权禁止转载】【作者：唐霜】 动态片段 和 全匹配片段，如果没有路由【关注微信公众号：wwwtangshuangnet】【本文受版权保护】参数，就是一个空对象。
$route.query
类型: Object
【原创不易，请尊重版权】
一个 key/value 对象，表示 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】URL 查询参数。例如，对于路径 /fo【转载请注明来源】本文作者：唐霜，转载请注明出处。o?user=1，则有 $route.q【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】uery.user == 1，如果没有查【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】询参数，则是个空对象。
$route.hash
类型: string
【版权所有，侵权必究】
当前路由的 hash 值 (带 #) 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net，如果没有 hash 值，则为空字符串。
$route.fullPath
类型: string
本文版权归作者所有，未经授权不得转载。
完成解析后的 URL，包含查询参数和 【作者：唐霜】【原创不易，请尊重版权】hash 的完整路径。
$route.matched
类型: Array<RouteRe原创内容，盗版必究。【转载请注明来源】cord>
【原创内容，转载请注明出处】
一个数组，包含当前路由的所有嵌套路径片原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。段的 路由记录 。路由记录就是 rout【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netes 配置数组中的对象副本（还有在 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【版权所有，侵权必究】ute.matched 将会是一个包含从原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net上到下的所有对象（副本）。
【转载请注明来源】【原创不易，请尊重版权】$route.name
当前路由的名称，如果有的话。
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【版权所有，侵权必究】【作者：唐霜】ngnet】区别
$router是实例化对象，而$rout【作者：唐霜】【版权所有】唐霜 www.tangshuang.nete仅仅是当前的路由信息，两则完全不同。相【本文受版权保护】【作者：唐霜】对来说，$router丰富的多，还提供了【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net很多方法来操作路由。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】钩子
我们可以通过一些钩子，来改变vue-ro著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】uter导航的默认行为。vue-rout【原创内容，转载请注明出处】【本文首发于唐霜的博客】er 提供的导航钩子主要用来拦截导航，让本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】它完成跳转或取消。有多种方式可以在路由导【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】航发生时执行钩子：全局的, 单个路由独享【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】的, 或者组件级的。
【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【作者：唐霜】et 获取更多精彩内容】【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。全局钩子
你可以使用 router.beforeE本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ach 注册一个全局的 before 钩本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。子：
【本文首发于唐霜的博客】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【本文受版权保护】ngnet】本文版权归作者所有，未经授权不得转载。const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时，全局的 before 【转载请注明来源】【原创内容，转载请注明出处】钩子按照创建顺序调用。钩子是异步解析执行【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，此时导航在所有钩子 resolve 完本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。之前一直处于 等待中。
【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【本文受版权保护】et 获取更多精彩内容】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】et 获取更多精彩内容】每个钩子方法接收三个参数：
转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ng.net原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。- to: Route: 即将要进入的目标 路由对象 【本文首发于唐霜的博客】原创内容，盗版必究。原创内容，盗版必究。
- from: Route: 当前导航正要离【未经授权禁止转载】转载请注明出处：www.tangshuang.net开的路由 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- next: Function: 一定要调转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。用该方法来 resolve 这个钩子。执【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。如果全部钩子执行完了，则导航的状态就是 【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】confirmed （确认的）。 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【原创不易，请尊重版权】ang.net【未经授权禁止转载】
- next(false): 中断当前的导航著作权归作者所有，禁止商业用途转载。【转载请注明来源】。如果浏览器的 URL 改变了（可能是用【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net户手动或者浏览器后退按钮），那么 URL本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net 地址会重置到 from 路由对应的地址【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】。 【本文受版权保护】未经授权，禁止复制转载。【未经授权禁止转载】
- next(‘/’【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】) 或者 next({ path: &#【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】8216;/’ }): 跳转【版权所有，侵权必究】未经授权，禁止复制转载。到一个不同的地址。当前的导航被中断，然后【作者：唐霜】【关注微信公众号：wwwtangshuangnet】进行一个新的导航。 原创内容，盗版必究。【版权所有，侵权必究】原创内容，盗版必究。
转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ng.net【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【作者：唐霜】ang.net
确保要调用 next 方法，否则钩子就不【原创不易，请尊重版权】【作者：唐霜】会被 resolved。
转载请注明出处：www.tangshua【转载请注明来源】【转载请注明来源】ng.net【作者：唐霜】同样可以注册一个全局的 after 钩子原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，不过它不像 before 钩子那样，a【转载请注明来源】【未经授权禁止转载】fter 钩子没有 next 方法，不能【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net改变导航：
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【本文受版权保护】未经授权，禁止复制转载。et 获取更多精彩内容】router.afterEach(route => {
// ...
})
某个路由独享的钩子
你可以在路由配置上直接定义 before【版权所有，侵权必究】【本文首发于唐霜的博客】Enter 钩子：
【原创内容，转载请注明出处】【原创内容，转载请注明出处】【未经授权禁止转载】const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些钩子与全局 before 钩子的方法【版权所有，侵权必究】原创内容，盗版必究。参数是一样的。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ang.net原创内容，盗版必究。【原创不易，请尊重版权】组件内的钩子
最后，你可以在路由组件内直接定义以下路由【版权所有，侵权必究】【作者：唐霜】导航钩子：
【本文首发于唐霜的博客】原创内容，盗版必究。未经授权，禁止复制转载。【版权所有，侵权必究】- beforeRouteEnter 【作者：唐霜】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netang.net转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ng.net著作权归作者所有，禁止商业用途转载。
- beforeRouteUpdate (2本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。.2 新增) 本文版权归作者所有，未经授权不得转载。【本文受版权保护】
- beforeRouteLeave 【原创不易，请尊重版权】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ng.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 钩子 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】不能 访问 this，因为钩子在导航确认【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net前被调用,因此即将登场的新组件还没被创建【本文受版权保护】本文版权归作者所有，未经授权不得转载。。
【作者：唐霜】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net【原创不易，请尊重版权】未经授权，禁止复制转载。不过，你可以通过传一个回调给 next来【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net访问组件实例。在导航被确认的时候执行回调【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，并且把组件实例作为回调方法的参数。
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】原创内容，盗版必究。转载请注明出处：www.tangshua【本文受版权保护】转载请注明出处：www.tangshuang.netng.netbeforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
你可以 在 beforeRouteLea【本文首发于唐霜的博客】【本文首发于唐霜的博客】ve 中直接访问 this。这个 lea【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ve 钩子通常用来禁止用户在还未保存修改【本文受版权保护】【未经授权禁止转载】前突然离开。可以通过 next(fals【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】e) 来取消导航。
【转载请注明来源】原创内容，盗版必究。原创内容，盗版必究。过渡
vue里面提供了过渡的一些基础操作，比如本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net通过切换元素的class属性，配合css【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。实现过渡效果，在vue-router中也【未经授权禁止转载】【本文首发于唐霜的博客】提供了过渡效果，让你在切换view时可以【未经授权禁止转载】【转载请注明来源】更加酷炫。本章就来整体介绍vue里面的过本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。渡相关的知识。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。过渡效果
概述
Vue 在插入、更新或者移除 DOM 时转载请注明出处：www.tangshuang.net【作者：唐霜】，提供多种不同方式的应用过渡效果。包括以【转载请注明来源】【版权所有】唐霜 www.tangshuang.net下工具：
【未经授权禁止转载】【未经授权禁止转载】【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ang.net著作权归作者所有，禁止商业用途转载。- 在 CSS 过渡和动画中自动应用 cla【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ss 【本文首发于唐霜的博客】【原创不易，请尊重版权】转载请注明出处：www.tangshua【转载请注明来源】【转载请注明来源】ng.net【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【作者：唐霜】ang.net
- 可以配合使用第三方 CSS 动画库，如 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。Animate.css 转载请注明出处：www.tangshua【未经授权禁止转载】【原创不易，请尊重版权】ng.net【原创不易，请尊重版权】【未经授权禁止转载】【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【版权所有，侵权必究】et 获取更多精彩内容】
- 在过渡钩子函数中使用 JavaScrip原创内容，盗版必究。【原创内容，转载请注明出处】t 直接操作 DOM 转载请注明出处：www.tangshua【本文首发于唐霜的博客】【版权所有，侵权必究】ng.net著作权归作者所有，禁止商业用途转载。
- 可以配合使用第三方 JavaScript【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】 动画库，如 Velocity.js 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ngnet】
在这里，我们只会讲到进入、离开和列表的过著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net渡， 你也可以看下一节的 管理过渡状态.
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ng.net本文版权归作者所有，未经授权不得转载。单元素/组件的过渡
Vue 提供了 transition 的著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】封装组件，在下列情形中，可以给任何元素和【原创不易，请尊重版权】【作者：唐霜】组件添加 entering/leavin本文作者：唐霜，转载请注明出处。【未经授权禁止转载】g 过渡
本文版权归作者所有，未经授权不得转载。【作者：唐霜】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ngnet】- 条件渲染 （使用 v-if） 【未经授权禁止转载】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】原创内容，盗版必究。
- 条件展示 （使用 v-show） 【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
- 动态组件 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
- 组件根节点 未经授权，禁止复制转载。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】
这里是一个典型的例子：
【作者：唐霜】【作者：唐霜】【原创内容，转载请注明出处】<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
当插入或删除包含在 transition【未经授权禁止转载】【原创不易，请尊重版权】 组件中的元素时，Vue 将会做以下处理【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】：
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【原创内容，转载请注明出处】- 自动嗅探目标元素是否应用了 CSS 过渡转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。或动画，如果是，在恰当的时机添加/删除 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。CSS 类名。 【原创内容，转载请注明出处】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ng.net
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。 转载请注明出处：www.tangshua原创内容，盗版必究。原创内容，盗版必究。ng.net【转载请注明来源】本文版权归作者所有，未经授权不得转载。
- 如果没有找到 JavaScript 钩子转载请注明出处：www.tangshuang.net原创内容，盗版必究。并且也没有检测到 CSS 过渡/动画，D【本文首发于唐霜的博客】【本文首发于唐霜的博客】OM 操作（插入/删除）在下一帧中立即执未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net行。(注意：此指浏览器逐帧动画机制，与 【原创内容，转载请注明出处】【作者：唐霜】Vue，和Vue的 nextTick 概本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。念不同) 【转载请注明来源】未经授权，禁止复制转载。原创内容，盗版必究。
过渡的CSS类名
会有 4 个(CSS)类名在 enter【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】/leave 的过渡中切换
【原创内容，转载请注明出处】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【未经授权禁止转载】ng.net【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【本文受版权保护】ang.net原创内容，盗版必究。- v-enter: 定义进入过渡的开始状态著作权归作者所有，禁止商业用途转载。【本文受版权保护】。在元素被插入时生效，在下一个帧移除。 【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【未经授权禁止转载】ang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】
- v-enter-active: 定义进入本文版权归作者所有，未经授权不得转载。【转载请注明来源】过渡的结束状态。在元素被插入时生效，在 未经授权，禁止复制转载。原创内容，盗版必究。transition/animation【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 完成之后移除。 【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】【原创不易，请尊重版权】ngnet】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- v-leave: 定义离开过渡的开始状态【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net。在离开过渡被触发时生效，在下一个帧移除未经授权，禁止复制转载。【本文首发于唐霜的博客】。 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】
- v-leave-active: 定义离开【本文首发于唐霜的博客】未经授权，禁止复制转载。过渡的结束状态。在离开过渡被触发时生效，【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net在 transition/animati原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。on 完成之后移除。 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。
本文作者：唐霜，转载请注明出处。
对于这些在 enter/leave 过【作者：唐霜】本文版权归作者所有，未经授权不得转载。渡中切换的类名，v- 是这些类名的前缀。原创内容，盗版必究。未经授权，禁止复制转载。使用 <transition na著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】me=”my-transit本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ion”> 可以重置前本文版权归作者所有，未经授权不得转载。【本文受版权保护】缀，比如 v-enter 替换为 my-【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】transition-enter。
v-enter-active 和 v-l【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。eave-active 可以控制 进入/转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】离开 过渡的不同阶段，在下面章节会有个示转载请注明出处：www.tangshuang.net【本文受版权保护】例说明。
未经授权，禁止复制转载。转载请注明出处：www.tangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ng.net【版权所有，侵权必究】CSS 过渡
常用的过渡都是使用 CSS 过渡。
原创内容，盗版必究。未经授权，禁止复制转载。下面是一个简单例子：
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ng.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在动画中 v-enter 类名在节点插入【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。 DOM 后不会立即删除，而是在 ani【作者：唐霜】原创内容，盗版必究。mationend 事件触发时删除。
【版权所有】唐霜 www.tangshu原创内容，盗版必究。转载请注明出处：www.tangshuang.netang.net原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。示例： (省略了兼容性前缀)
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netngnet】著作权归作者所有，禁止商业用途转载。<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Look at me!</p>
</transition>
</div>
new Vue({
el: '#example-2',
data: {
show: true
}
})
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
自定义过渡类名
我们可以通过以下特性来自定义过渡类名：
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【本文受版权保护】【原创不易，请尊重版权】et 获取更多精彩内容】【原创内容，转载请注明出处】未经授权，禁止复制转载。- enter-class 【原创不易，请尊重版权】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】
- enter-active-class 【访问 www.tangshuang.n未经授权，禁止复制转载。【原创内容，转载请注明出处】et 获取更多精彩内容】未经授权，禁止复制转载。
- leave-class 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【版权所有，侵权必究】【原创不易，请尊重版权】ng.net【未经授权禁止转载】
- leave-active-class 【本文受版权保护】本文作者：唐霜，转载请注明出处。
他们的优先级高于普通的类名，这对于 Vu【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】e 的过渡系统和其他第三方 CSS 动画【作者：唐霜】【原创内容，转载请注明出处】库，如 Animate.css 结合使用十分有用。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】示例：
【本文受版权保护】【本文受版权保护】【版权所有，侵权必究】【作者：唐霜】<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【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】onend 或 animationend转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net ，这取决于给元素应用的 CSS 规则。【原创不易，请尊重版权】【原创内容，转载请注明出处】如果你使用其中任何一种，Vue 能自动识【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】别类型并设置监听。
【未经授权禁止转载】【本文首发于唐霜的博客】但是，在一些场景中，你需要给同一个元素同【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net时设置两种过渡动效，比如 animati【未经授权禁止转载】转载请注明出处：www.tangshuang.neton 很快的被触发并完成了，而 tran【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。sition 效果还没结束。在这种情况中【原创内容，转载请注明出处】未经授权，禁止复制转载。，你就需要使用 type 特性并设置 a【版权所有，侵权必究】【版权所有，侵权必究】nimation 或 transitio【版权所有，侵权必究】【本文受版权保护】n 来明确声明你需要 Vue 监听的类型【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。。
【原创内容，转载请注明出处】【原创不易，请尊重版权】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。JavaScript 钩子
可以在属性中声明 JavaScript 原创内容，盗版必究。原创内容，盗版必究。钩子
未经授权，禁止复制转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。【转载请注明来源】<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
这些钩子函数可以结合 CSS trans未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】itions/animations 使用【原创不易，请尊重版权】【版权所有，侵权必究】，也可以单独使用。
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【版权所有，侵权必究】当只用 JavaScript 过渡的时候【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。， 在 enter 和 leave 中，本文作者：唐霜，转载请注明出处。【本文受版权保护】回调函数 done 是必须的 。 否则，著作权归作者所有，禁止商业用途转载。【转载请注明来源】它们会被同步调用，过渡会立即完成。
【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ngnet】【版权所有，侵权必究】【转载请注明来源】推荐对于仅使用 JavaScript 过原创内容，盗版必究。【版权所有，侵权必究】渡的元素添加 v-bind:css=&#【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net8221;false”，Vu本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】e 会跳过 CSS 的检测。这也可以避免本文版权归作者所有，未经授权不得转载。【本文受版权保护】过渡过程中 CSS 的影响。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【本文受版权保护】ng.net【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ang.net一个使用 Velocity.js 的简单本文版权归作者所有，未经授权不得转载。【作者：唐霜】例子：
【作者：唐霜】【本文首发于唐霜的博客】<!--Velocity works very much like jQuery.animate and isa great option for JavaScript animations-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
},
{ complete: done }
)
}
}
})
初始渲染的过渡
可以通过 appear 特性设置节点的在【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】初始渲染的过渡
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】<transition appear> <!-- ... --> </transition>
这里默认和进入和离开过渡一样，同样也可以本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net自定义 CSS 类名。
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ngnet】【原创内容，转载请注明出处】【原创内容，转载请注明出处】<transition appear appear-class="custom-appear-class" appear-active-class="custom-appear-active-class"> <!-- ... --> </transition>
自定义 JavaScript 钩子：
著作权归作者所有，禁止商业用途转载。【转载请注明来源】<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook"> <!-- ... --> </transition>
多个元素的过渡
我们之后讨论 多个组件的过渡, 对于原生标签可以使用 v-if/v-原创内容，盗版必究。【未经授权禁止转载】else 。最常见的多标签过渡是一个列表【原创不易，请尊重版权】【版权所有，侵权必究】和描述这个列表为空消息的元素：
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ng.net转载请注明出处：www.tangshua未经授权，禁止复制转载。【本文首发于唐霜的博客】ng.net【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items found.</p> </transition>
可以这样使用，但是有一点需要注意：
未经授权，禁止复制转载。【本文首发于唐霜的博客】原创内容，盗版必究。【访问 www.tangshuang.n【原创不易，请尊重版权】【作者：唐霜】et 获取更多精彩内容】当有相同标签名的元素切换时，需要通过 k【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ey 特性设置唯一的值来标记以让 Vue【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】 区分它们，否则 Vue 为了效率只会替【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net换相同标签内部的内容。即使在技术上没有必【转载请注明来源】【版权所有，侵权必究】要，给在 <transition&【本文受版权保护】【原创内容，转载请注明出处】gt; 组件中的多个元素设置 key 是原创内容，盗版必究。【版权所有，侵权必究】一个更好的实践。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。示例:
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition>
在一些场景中，也可以给通过给同一个元素的原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】 key 特性设置不同的状态来代替 v-【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】if 和 v-else，上面的例子可以重【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】写为：
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>
使用多个 v-if 的多个元素的过渡可以转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】重写为绑定了动态属性的单个元素过渡。 例转载请注明出处：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>
可以重写为：
【转载请注明来源】【原创不易，请尊重版权】【版权所有，侵权必究】<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【版权所有】唐霜 www.tangshuang.net过渡中，两个按钮都被重绘了，一个离开过渡著作权归作者所有，禁止商业用途转载。【作者：唐霜】的时候另一个开始进入过渡。这是 <著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。transition> 的默认行为【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。 – 进入和离开同时发生。
转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ng.net【版权所有】唐霜 www.tangshu【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。在元素绝对定位在彼此之上的时候运行正常。【未经授权禁止转载】【本文受版权保护】然后，我们加上 translate 让它本文作者：唐霜，转载请注明出处。【作者：唐霜】们运动像滑动过渡。
【未经授权禁止转载】未经授权，禁止复制转载。同时生效的进入和离开的过渡不能满足所有要转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。求，所以 Vue 提供了 过渡模式
【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ngnet】【版权所有，侵权必究】原创内容，盗版必究。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netang.net- in-out: 新元素先进行过渡，完成之【原创不易，请尊重版权】【原创内容，转载请注明出处】后当前元素过渡离开。 【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【本文受版权保护】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- out-in: 当前元素先进行过渡，完成【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】之后新元素过渡进入。 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ang.net
用 out-in 重写之前的开关按钮过渡【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。：
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
只用添加一个简单的特性，就解决了之前的过【原创不易，请尊重版权】【未经授权禁止转载】渡问题而无需任何额外的代码。
【转载请注明来源】【转载请注明来源】【关注微信公众号：wwwtangshua原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netngnet】原创内容，盗版必究。in-out 模式不是经常用到，但对于一【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net些稍微不同的过渡效果还是有用的。将之前滑转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net动淡出的例子结合。
【本文受版权保护】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ng.net【本文受版权保护】【转载请注明来源】多个组件的过渡
多个组件的过渡简单很多 – 【原创不易，请尊重版权】【转载请注明来源】我们不需要使用 key 特性。相反，我们未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net只需要使用动态组件:
【原创内容，转载请注明出处】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ng.net【访问 www.tangshuang.n未经授权，禁止复制转载。【作者：唐霜】et 获取更多精彩内容】<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;
}
列表过渡
目前为止，关于过渡我们已经讲到：
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。- 单个节点 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】
- 同一时间渲染多个节点中的一个 【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【原创内容，转载请注明出处】【原创不易，请尊重版权】
那么怎么同时渲染整个列表，比如使用 v-本文作者：唐霜，转载请注明出处。【转载请注明来源】for ？在这种场景中，使用 <t未经授权，禁止复制转载。【作者：唐霜】ransition-group> 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】组件。在我们深入例子之前，先了解关于这个转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。组件的几个特点：
【本文受版权保护】本文作者：唐霜，转载请注明出处。【转载请注明来源】【转载请注明来源】- 不同于 <transition&g未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nett;， 它会以一个真实元素呈现：默认为一【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】个 <span>。你也可以通未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net过 tag 特性更换为其他元素。 【原创内容，转载请注明出处】【转载请注明来源】
- 内部元素 总是需要 提供唯一的 key 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。属性值 【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
列表的进入和离开过渡
现在让我们由一个简单的例子深入，进入和离【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。开的过渡使用之前一样的 CSS 类名。
【版权所有】唐霜 www.tangshu【本文受版权保护】原创内容，盗版必究。ang.net【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ngnet】<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 获取更多精彩内容】【未经授权禁止转载】问题。
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua【未经授权禁止转载】【原创内容，转载请注明出处】ngnet】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ang.net列表的位移过渡
<transition-group【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。> 组件还有一个特殊之处。不仅可以未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。进入和离开动画，还可以改变定位。要使用这【转载请注明来源】【关注微信公众号：wwwtangshuangnet】个新功能只需了解新增的 v-move 特【作者：唐霜】【版权所有】唐霜 www.tangshuang.net性，它会在元素的改变定位的过程中应用。像未经授权，禁止复制转载。原创内容，盗版必究。之前的类名一样，可以通过 name 属性【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】来自定义前缀，也可以通过 move-cl本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ass 属性手动设置。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。v-move 对于设置过渡的切换时机和过转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】渡曲线非常有用，你会看到如下的例子：
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.flip-list-move {
transition: transform 1s;
}
这个看起来很神奇，内部的实现，Vue 使著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】用了一个叫 FLIP 简单的动画队列使用 transform转载请注明出处：www.tangshuang.net原创内容，盗版必究。s 将元素从之前的位置平滑过渡新的位置。
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。我们将之前实现的例子和这个技术结合，使我本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。们列表的一切变动都会有动画过渡。
【原创内容，转载请注明出处】【原创内容，转载请注明出处】<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【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】 。作为替代方案，可以设置为 displ本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ay: inline-block 或者放【版权所有，侵权必究】【作者：唐霜】置于 flex 中。
未经授权，禁止复制转载。【本文首发于唐霜的博客】列表的渐进过渡
通过 data 属性与 JavaScri【本文受版权保护】未经授权，禁止复制转载。pt 通信 ，就可以实现列表的渐进过渡：
【作者：唐霜】【转载请注明来源】转载请注明出处：www.tangshua【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】ng.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>转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】; 或者 <transition-【未经授权禁止转载】【本文首发于唐霜的博客】group> 作为根组件，然后将任【版权所有，侵权必究】【本文受版权保护】何子组件放置在其中就可以了。
【原创内容，转载请注明出处】【原创内容，转载请注明出处】【原创内容，转载请注明出处】使用 template 的简单例子：
【版权所有，侵权必究】【本文受版权保护】Vue.component('my-special-transition', {
template: `
<transition
name="very-special-transition"
mode="out-in"
v-on:before-enter="beforeEnter"
v-on:after-enter="afterEnter"
>
<slot></slot>
</transition>
`,
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
函数组件更适合完成这个任务：
【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【本文受版权保护】未经授权，禁止复制转载。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 中即使是过渡也是数据驱动的！未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。动态过渡最基本的例子是通过 name 特【转载请注明来源】【本文受版权保护】性来绑定动态值。
转载请注明出处：www.tangshua【本文受版权保护】【原创不易，请尊重版权】ng.net【原创不易，请尊重版权】【本文首发于唐霜的博客】<transition v-bind:name="transitionName"> <!-- ... --> </transition>
当你想用 Vue 的过渡系统来定义的 C本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。SS 过渡/动画 在不同过渡间切换会非常转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】有用。
未经授权，禁止复制转载。【版权所有，侵权必究】【原创内容，转载请注明出处】【原创内容，转载请注明出处】所有的过渡特性都是动态绑定。它不仅是简单本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】的特性，通过事件的钩子函数方法，可以在获【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】取到相应上下文数据。这意味着，可以根据组著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】件的状态通过 JavaScript 过渡本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】设置不同的过渡效果。
【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ang.net【关注微信公众号：wwwtangshua【作者：唐霜】【本文受版权保护】ngnet】本文作者：唐霜，转载请注明出处。<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.tangshua【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ng.net【访问 www.tangshuang.n【转载请注明来源】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】过渡状态
Vue 的过渡系统提供了非常多简单的方法原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。设置进入、离开和列表的动效。那么对于数据本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。元素本身的动效呢，比如：
【未经授权禁止转载】未经授权，禁止复制转载。- 数字和运算 未经授权，禁止复制转载。【转载请注明来源】【版权所有】唐霜 www.tangshu【作者：唐霜】本文作者：唐霜，转载请注明出处。ang.net【本文首发于唐霜的博客】
- 颜色的显示 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】
- SVG 节点的位置 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】未经授权，禁止复制转载。
- 元素的大小和其他的属性 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
所有的原始数字都被事先存储起来，可以直接【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】转换到数字。做到这一步，我们就可以结合 本文版权归作者所有，未经授权不得转载。【作者：唐霜】Vue 的响应式和组件系统，使用第三方库【转载请注明来源】【版权所有】唐霜 www.tangshuang.net来实现切换元素的过渡状态。
未经授权，禁止复制转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有】唐霜 www.tangshuang.netang.net【关注微信公众号：wwwtangshua原创内容，盗版必究。【未经授权禁止转载】ngnet】状态动画 与 watcher
通过 watcher 我们能监听到任何数【未经授权禁止转载】原创内容，盗版必究。值属性的数值更新。可能听起来很抽象，所以转载请注明出处：www.tangshuang.net【转载请注明来源】让我们先来看看使用Tweenjs一个例子【作者：唐霜】【版权所有】唐霜 www.tangshuang.net：
转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netng.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()
}
}
})
当你把数值更新时，就会触发动画。这个是一【转载请注明来源】【作者：唐霜】个不错的演示，但是对于不能直接像数字一样【本文首发于唐霜的博客】【本文首发于唐霜的博客】存储的值，比如 CSS 中的 color【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】 的值，通过下面的例子我们来通过 Col【本文受版权保护】【转载请注明来源】or.js 实现一个例子：
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ang.net【作者：唐霜】【访问 www.tangshuang.n【作者：唐霜】【本文受版权保护】et 获取更多精彩内容】转载请注明出处：www.tangshua【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ng.net<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 的过渡组件一样，数据背后状【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】态转换会实时更新，这对于原型设计十分有用本文版权归作者所有，未经授权不得转载。【作者：唐霜】。当你修改一些变量，即使是一个简单的 S本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】VG 多边形也可是实现很多难以想象的效果本文作者：唐霜，转载请注明出处。【转载请注明来源】。
原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ngnet】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ngnet】See this fiddle for the complete co【版权所有，侵权必究】【作者：唐霜】de behind the above 【版权所有，侵权必究】【转载请注明来源】demo.
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。通过组件组织过渡
管理太多的状态转换会很快的增加 Vue 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】实例或者组件的复杂性，幸好很多的动画可以【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】提取到专用的子组件。我们来将之前的示例改本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。写一下：
【转载请注明来源】原创内容，盗版必究。【关注微信公众号：wwwtangshua【转载请注明来源】【版权所有】唐霜 www.tangshuang.netngnet】<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 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。vue-router过渡效果
<router-view> 【原创内容，转载请注明出处】【本文受版权保护】是基本的动态组件，所以我们可以用 <【转载请注明来源】本文作者：唐霜，转载请注明出处。;transition> 组件给它【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】添加一些过渡效果：
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ngnet】<transition> <router-view></router-view> </transition>
<transition> 的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】所有功能 在这里同样适用。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】单个路由的过渡
上面的用法会给所有路由设置一样的过渡效果原创内容，盗版必究。【本文受版权保护】，如果你想让每个路由组件有各自的过渡效果【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，可以在各路由组件内使用 <tra【转载请注明来源】未经授权，禁止复制转载。nsition> 并设置不同的 n转载请注明出处：www.tangshuang.net【未经授权禁止转载】ame。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
}
const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}
基于路由的动态过渡
还可以基于当前路由与目标路由的变化关系，【转载请注明来源】原创内容，盗版必究。动态设置过渡效果：
【关注微信公众号：wwwtangshua【转载请注明来源】本文版权归作者所有，未经授权不得转载。ngnet】转载请注明出处：www.tangshua【转载请注明来源】【版权所有】唐霜 www.tangshuang.netng.net<!-- 使用动态的 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.netomponent 来定义全局组件，紧接着未经授权，禁止复制转载。【转载请注明来源】用 new Vue({ el: R【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】16;#container ‘转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net;}) 在每个页面内指定一个容器元素。
【版权所有，侵权必究】【转载请注明来源】这种方式在很多中小规模的项目中运作的很好【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】，在这些项目里 JavaScript 只【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。被用来加强特定的视图。但当在更复杂的项目【本文首发于唐霜的博客】【作者：唐霜】中，或者你的前端完全由 JavaScri【转载请注明来源】【原创内容，转载请注明出处】pt 驱动的时候，下面这些缺点将变得非常本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。明显：
【本文首发于唐霜的博客】原创内容，盗版必究。- 全局定义(Global definiti著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ons) 强制要求每个 componen原创内容，盗版必究。【作者：唐霜】t 中的命名不得重复 【本文首发于唐霜的博客】原创内容，盗版必究。【作者：唐霜】著作权归作者所有，禁止商业用途转载。
- 字符串模板(String templat【本文受版权保护】【未经授权禁止转载】es) 缺乏语法高亮，在 HTML 有多本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】行的时候，需要用到丑陋的 \ 【版权所有，侵权必究】【转载请注明来源】
- 不支持CSS(No CSS suppor【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett) 意味着当 HTML 和 JavaS【未经授权禁止转载】本文作者：唐霜，转载请注明出处。cript 组件化时，CSS 明显被遗漏 【关注微信公众号：wwwtangshua【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netngnet】【作者：唐霜】【原创内容，转载请注明出处】转载请注明出处：www.tangshua未经授权，禁止复制转载。未经授权，禁止复制转载。ng.net
- 没有构建步骤(No build step原创内容，盗版必究。本文作者：唐霜，转载请注明出处。) 限制只能使用 HTML 和 ES5 著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】JavaScript, 而不能使用预处理本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net器，如 Pug (formerly Ja【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。de) 和 Babel 未经授权，禁止复制转载。原创内容，盗版必究。
文件扩展名为 .vue 的 single【本文首发于唐霜的博客】【版权所有，侵权必究】-file components(单文件本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】组件) 为以上所有问题提供了解决方法，并转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net且还可以使用 Webpack 或 Bro【本文受版权保护】未经授权，禁止复制转载。wserify 等构建工具。
【版权所有，侵权必究】【版权所有，侵权必究】【本文受版权保护】本文作者：唐霜，转载请注明出处。现在我们获得：
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】原创内容，盗版必究。- 完整语法高亮 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】未经授权，禁止复制转载。
- CommonJS 模块 【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netngnet】未经授权，禁止复制转载。
- 组件化的 CSS 原创内容，盗版必究。【转载请注明来源】
正如我们说过的，我们可以使用预处理器来构【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】建简洁和功能更丰富的组件，比如 Jade著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，Babel (with ES2015 原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netmodules)，和 Stylus。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】转载请注明出处：www.tangshua【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ng.net转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ng.net这些特定的语言只是例子，你可以只是简单地著作权归作者所有，禁止商业用途转载。【转载请注明来源】使用 Babel，TypeScript，原创内容，盗版必究。【作者：唐霜】SCSS，PostCSS –【转载请注明来源】【本文首发于唐霜的博客】 或者其他任何能够帮助你提高生产力的预处未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net理器。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】起步
针对刚接触 JavaScript 模块开发系统的用户
有了 .vue 组件，我们就进入了高级 本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】JavaScript 应用领域。如果你没【版权所有，侵权必究】【未经授权禁止转载】有准备好的话，意味着还需要学会使用一些附著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。加的工具：
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。- Node Package Manager转载请注明出处：www.tangshuang.net【版权所有，侵权必究】 (NPM): 阅读 Getting Started guid【本文首发于唐霜的博客】【原创不易，请尊重版权】e 直到 10: Uninstalling【原创不易，请尊重版权】【版权所有，侵权必究】 global packages章节. 转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netng.net【未经授权禁止转载】【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ang.net
- Modern JavaScript wi【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】th ES2015/16: 阅读 Bab转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】el 的 Learn ES2015 guide. 你不需要立刻记住每一个方法，但是你可著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】以保留这个页面以便后期参考。 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net
在你花一些时日了解这些资源之后，我们建议【关注微信公众号：wwwtangshuangnet】【作者：唐霜】你参考 webpack-simple 。只要遵循指示，你就能很快的运行一个用【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net到 .vue 组件，ES2015 和 热【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net重载( hot-reloading ) 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的Vue项目!
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ng.net原创内容，盗版必究。这个模板使用 Webpack，一个能将多个模块打包成最终应用的模块打原创内容，盗版必究。【转载请注明来源】包工具。 这个视频 介绍了Webpack的更多相关信息。 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】学习了这些基础知识后， 你可能想看看 这个在 Egghead.io上的 高级 【原创不易，请尊重版权】原创内容，盗版必究。Webpack 课程.
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netng.net【作者：唐霜】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ng.net在 Webpack中，每个模块被打包到 【原创内容，转载请注明出处】【本文受版权保护】bundle 之前都由一个相应的 “lo本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ader” 来转换，Vue 也提供 vue-loader 插件来执行 .vue 单文件组件 的转【原创不易，请尊重版权】未经授权，禁止复制转载。换. 这个 webpack-simple 模板已经为你准备好了所有的东西，但是如【原创内容，转载请注明出处】【原创不易，请尊重版权】果你想了解更多关于 .vue组件和 We【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netbpack 如何一起运转的信息，你可以阅【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】读 vue-loader 的文档。
【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【转载请注明来源】ngnet】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ang.net针对高级用户
无论你更钟情 Webpack 或是 Br原创内容，盗版必究。未经授权，禁止复制转载。owserify，我们为简单的和更复杂的本文版权归作者所有，未经授权不得转载。【本文受版权保护】项目都提供了一些文档模板。我们建议浏览 github.com/vuejs-tem本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netplates，找到你需要的部分，然后参考 READM著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netE 中的说明，使用 vue-cli 工具生成新的项目。
【未经授权禁止转载】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。模板中使用 Webpack ，一个模块加载器加载多个模块然后构建成转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】最终应用。为了进一步了解 Webpack【原创不易，请尊重版权】未经授权，禁止复制转载。, 可以看 官方介绍视频。如果你有基础，可以看 在 Egghead.io 上的 Webp【本文受版权保护】【本文首发于唐霜的博客】ack 进阶教程。
【未经授权禁止转载】原创内容，盗版必究。【访问 www.tangshuang.n【版权所有，侵权必究】【原创不易，请尊重版权】et 获取更多精彩内容】vue-loader
通过vue-loader对.vue进行预本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。处理。vue-loader是webpac【未经授权禁止转载】【本文受版权保护】k的一个插件，它可以对你的.vue文件进转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】行预处理，即它把你的style部分进行预【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。编译之后，处理成css，把templat【未经授权禁止转载】【未经授权禁止转载】e部分编译成vue需要的模板，把scri【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】pt部分编译为es的javascript【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】。我们看下如何在webpack的conf【本文首发于唐霜的博客】【本文首发于唐霜的博客】ig文件中进行配置：
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【本文受版权保护】et 获取更多精彩内容】{
module: {
loaders: [
{test: /\.vue$/, loader: 'vue-loader'},
],
},
}
.vue里面还支持预处理的其他语言来写，本文作者：唐霜，转载请注明出处。【转载请注明来源】比如style用scss来写，templ【转载请注明来源】【版权所有】唐霜 www.tangshuang.netate用jade来写，script用co【未经授权禁止转载】原创内容，盗版必究。ffee来写。那么在对.vue进行编译时转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，就需要提前预编译这些语言。因此，你还得未经授权，禁止复制转载。【未经授权禁止转载】安装对应的预编译模块，比如scss，你得本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。安装编译scss要用的node-sass未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。：
【版权所有，侵权必究】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ang.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.net参考代码，如果你在使用中遇到什么问题，可著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net以在下方留言，让我们一起讨论你的问题。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【关注微信公众号：wwwtangshua【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ngnet】著作权归作者所有，禁止商业用途转载。vuex
vuex和react的flux对应，借鉴转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。了Flux、Redux、和 The Elm Architecture。它是一个专为 Vue.js 应用程序开原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。发的状态管理模式，你可以通过这里深入阅读。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。什么是vuex
Vuex 是一个专为 Vue.js 应用【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状原创内容，盗版必究。【原创不易，请尊重版权】态，并以相应的规则保证状态以一种可预测的【作者：唐霜】本文作者：唐霜，转载请注明出处。方式发生变化。Vuex 也集成到 Vue未经授权，禁止复制转载。【本文受版权保护】 的官方调试工具 devtools extension，提供了诸如零配置的 time-trav【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。el 调试、状态快照导入导出等高级调试功原创内容，盗版必究。未经授权，禁止复制转载。能。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【作者：唐霜】【关注微信公众号：wwwtangshua【未经授权禁止转载】【未经授权禁止转载】ngnet】简单的说，vuex就是用一个全局单例模式原创内容，盗版必究。未经授权，禁止复制转载。管理组件的共享状态，即用一个全局变量实现转载请注明出处：www.tangshuang.net【版权所有，侵权必究】多个关联组件的状态管理，这样让组件之间发【作者：唐霜】【原创内容，转载请注明出处】生的事件可以更统一的在一个地方管理起来。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ng.net【本文首发于唐霜的博客】说到底，vuex是vue的一个插件，实现【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】组件之间的状态管理。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【本文首发于唐霜的博客】ang.net编者按：vue是渐进式框架，所谓“渐进式【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】”就是说你需要的时候才用，不需要的时候不【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net用，所以，当你的应用足够复杂的时候，才用【未经授权禁止转载】【本文受版权保护】vuex，小应用其实没必要使用。
未经授权，禁止复制转载。【本文受版权保护】vuex有一个概念叫“状态”，说白了，它【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】就是一个变量state，被挂在store著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】上面，所谓状态，其实也就是上面说的共享的本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。数据，只不过这些数据是统一由vuex来管本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】理，在不同的组件内都可以使用，并且可以更【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】新，不过要用commit来更新，不可以直未经授权，禁止复制转载。【原创内容，转载请注明出处】接更新state。
【版权所有，侵权必究】【本文首发于唐霜的博客】【版权所有，侵权必究】每一个 Vuex 应用的核心就是 sto著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。re（仓库）。”store&【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】#8221; 基本上就是一个容器，它包含【未经授权禁止转载】未经授权，禁止复制转载。着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】同：
【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ang.net本文作者：唐霜，转载请注明出处。- Vuex 的状态存储是响应式的。当 Vu未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。e 组件从 store 中读取状态的时候本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】，若 store 中的状态发生变化，那么【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】相应的组件也会相应地得到高效更新。 【转载请注明来源】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ng.net本文作者：唐霜，转载请注明出处。
- 你不能直接改变 store 中的状态。改【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】变 store 中的状态的唯一途径就是显【作者：唐霜】原创内容，盗版必究。式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。变化，从而让我们能够实现一些工具帮助我们转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。更好地了解我们的应用。 【访问 www.tangshuang.n【未经授权禁止转载】原创内容，盗版必究。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】
State
state就是vuex里面的状态，说白了转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，就是用来保存各个数据的挂载点。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。单一状态树
Vuex 使用 单一状态树 —— 是的，转载请注明出处：www.tangshuang.net原创内容，盗版必究。用一个对象就包含了全部的应用层级状态。至【原创不易，请尊重版权】【未经授权禁止转载】此它便作为一个『唯一数据源(SSOT)』原创内容，盗版必究。【原创不易，请尊重版权】而存在。这也意味着，每个应用将仅仅包含一【作者：唐霜】【原创不易，请尊重版权】个 store 实例。单一状态树让我们能【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】够直接地定位任一特定的状态片段，在调试的【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。过程中也能轻易地取得整个当前应用状态的快【转载请注明来源】原创内容，盗版必究。照。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【本文受版权保护】单状态树和模块化并不冲突 —— 在后面的【原创内容，转载请注明出处】【原创不易，请尊重版权】章节里我们会讨论如何将状态和状态变更事件【转载请注明来源】【关注微信公众号：wwwtangshuangnet】分布到各个子模块中。
转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netng.net【版权所有，侵权必究】组件中获得状态
那么我们如何在 Vue 组件中展示状态呢【本文受版权保护】【原创内容，转载请注明出处】？由于 Vuex 的状态存储是响应式的，【作者：唐霜】【本文首发于唐霜的博客】从 store 实例中读取状态最简单的方【原创内容，转载请注明出处】【版权所有，侵权必究】法就是在计算属性中返回某个状态：
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ng.net【访问 www.tangshuang.n【原创不易，请尊重版权】原创内容，盗版必究。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
之所以要放在计算属性中，是因为计算属性会本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。追踪自己的依赖，当依赖发生变化时，计算属本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。性也跟着变化。每当 store.stat【本文受版权保护】转载请注明出处：www.tangshuang.nete.count 变化的时候, 都会重新求【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。取计算属性，并且触发更新相关联的 DOM【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。。
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【本文受版权保护】ang.net未经授权，禁止复制转载。然而，这种模式导致组件依赖的全局状态单例【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。。在模块化的构建系统中，在每个需要使用 【本文受版权保护】【版权所有】唐霜 www.tangshuang.netstate 的组件中需要频繁地导入，并且未经授权，禁止复制转载。【转载请注明来源】在测试组件时需要模拟状态。
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】Vuex 通过 store 选项，提供了【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】一种机制将状态从根组件『注入』到每一个子【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】组件中：
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。et 获取更多精彩内容】Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: ` <div class="app"> <counter></counter> </div> ` })
通过在根实例中注册 store 选项，该【版权所有，侵权必究】转载请注明出处：www.tangshuang.net store 实例会注入到根组件下的所有本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net子组件中，且子组件能通过 this.$s未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nettore 访问到。让我们更新下 Coun【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ter 的实现：
原创内容，盗版必究。【本文首发于唐霜的博客】const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。态都声明为计算属性会有些重复和冗余。为了未经授权，禁止复制转载。【原创不易，请尊重版权】解决这个问题，我们可以使用 mapSta【转载请注明来源】本文版权归作者所有，未经授权不得转载。te 辅助函数帮助我们生成计算属性，让你【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。少按几次键：
【作者：唐霜】【关注微信公众号：wwwtangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ngnet】【本文首发于唐霜的博客】// 在单独构建的版本中辅助函数为
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.tangshua【作者：唐霜】原创内容，盗版必究。ng.net【原创内容，转载请注明出处】【原创内容，转载请注明出处】【转载请注明来源】computed: mapState([ // 映射 this.count 为 store.state.count 'count' ])
组件仍保有局部状态
使用 Vuex 并不意味着你需要将所有的【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】状态放入 Vuex。虽然将所有的状态放到本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net Vuex 会使状态变化更显式和易调试，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net但也会使代码变得冗长和不直观。如果有些状转载请注明出处：www.tangshuang.net【本文受版权保护】态严格属于单个组件，最好还是作为组件的局【转载请注明来源】【作者：唐霜】部状态。你应该根据你的应用开发需要进行权未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。衡和确定。
【访问 www.tangshuang.n原创内容，盗版必究。【本文受版权保护】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。Getters
有时候我们需要从 store 中的 st本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netate 中派生出一些状态，例如对列表进行【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。过滤并计数：
【转载请注明来源】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件需要用到此属性，我们要么复【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】制这个函数，或者抽取到一个共享函数然后在【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。多处导入它 —— 无论哪种方式都不是很理【版权所有，侵权必究】【转载请注明来源】想。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】Vuex 允许我们在 store 中定义转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】『getters』（可以认为是 stor【版权所有】唐霜 www.tangshuang.net【转载请注明来源】e 的计算属性）。Getters 接受 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netstate 作为其第一个参数：
【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【本文受版权保护】ang.net【未经授权禁止转载】未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【本文受版权保护】原创内容，盗版必究。ngnet】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原创内容，盗版必究。【作者：唐霜】etters 对象：
【原创不易，请尊重版权】未经授权，禁止复制转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getters 也可以接受其他 gett著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ers 作为第二个参数：
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。原创内容，盗版必究。ang.net未经授权，禁止复制转载。getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我们可以很容易地在任何组件中使用它
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ang.net未经授权，禁止复制转载。原创内容，盗版必究。computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 原创内容，盗版必究。转载请注明出处：www.tangshuang.netstore 中的 getters 映射到转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】局部计算属性
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。个名字，使用对象形式：
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【未经授权禁止转载】【转载请注明来源】ng.netmapGetters({
// 映射 this.doneCount 为 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
Mutations
更改 Vuex 的 store 中的状态【转载请注明来源】【版权所有】唐霜 www.tangshuang.net的唯一方法是提交 mutation。Vu【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】ex 中的 mutations 非常类似【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。于事件：每个 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 的本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net mutation 时，调用此函数。”要原创内容，盗版必究。【作者：唐霜】唤醒一个 mutation handle转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。r，你需要以相应的 type 调用 st本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ore.commit 方法：
【版权所有，侵权必究】原创内容，盗版必究。【作者：唐霜】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ng.netstore.commit('increment')
提交Payload
你可以向 store.commit 传入【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。额外的参数，即 mutation 的 载【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。荷（payload）：
【原创不易，请尊重版权】原创内容，盗版必究。【转载请注明来源】未经授权，禁止复制转载。// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
在大多数情况下，载荷应该是一个对象，这样本文作者：唐霜，转载请注明出处。原创内容，盗版必究。可以包含多个字段并且记录的 mutati【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】on 会更易读：
【未经授权禁止转载】【作者：唐霜】转载请注明出处：www.tangshua【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】ng.net【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】原创内容，盗版必究。ngnet】// ...
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
对象风格的提交方式
提交 mutation 的另一种方式是直本文作者：唐霜，转载请注明出处。【未经授权禁止转载】接使用包含 type 属性的对象：
未经授权，禁止复制转载。【未经授权禁止转载】【本文首发于唐霜的博客】【版权所有，侵权必究】store.commit({
type: 'increment',
amount: 10
})
当使用对象风格的提交方式，整个对象都作为【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。载荷传给 mutation 函数，因此 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】handler 保持不变：
【本文首发于唐霜的博客】【版权所有，侵权必究】mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
Mutations需遵守Vue的响应规则
既然 Vuex 的 store 中的状态【未经授权禁止转载】【转载请注明来源】是响应式的，那么当我们变更状态时，监视状【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】态的 Vue 组件也会自动更新。这也意味转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。着 Vuex 中的 mutation 也【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】需要与使用 Vue 一样遵守一些注意事项本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。：
【版权所有】唐霜 www.tangshu【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ang.net【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【作者：唐霜】转载请注明出处：www.tangshua原创内容，盗版必究。原创内容，盗版必究。ng.net- 最好提前在你的 store 中初始化好所转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。有所需属性。 【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【本文受版权保护】ang.net【转载请注明来源】【本文首发于唐霜的博客】
- 当需要在对象上添加新属性时，你应该使用 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】Vue.set(obj, ‘【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】newProp’, 123) 原创内容，盗版必究。【原创不易，请尊重版权】
使用常量替代Mutation事件类型
使用常量替代 mutation 事件类型【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。在各种 Flux 实现中是很常见的模式。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。这样可以使 linter 之类的工具发挥未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。作用，同时把这些常量放在单独的文件中可以【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。让你的代码合作者对整个 app 包含的 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】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
}
}
})
用不用常量取决于你 —— 在需要多人协作【作者：唐霜】【关注微信公众号：wwwtangshuangnet】的大型项目中，这会很有帮助。但如果你不喜【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】欢，你完全可以不这样做。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。mutation必须是同步函数
一条重要的原则就是要记住 mutatio转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netn 必须是同步函数。为什么？请参考下面的【未经授权禁止转载】【原创内容，转载请注明出处】例子：
【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
现在想象，我们正在 debug 一个 a【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netpp 并且观察 devtool 中的 m本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netutation 日志。每一条 mutat【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ion 被记录，devtools 都需要【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。捕捉到前一状态和后一状态的快照。然而，在本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net上面的例子中 mutation 中的异步【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】函数中的回调让这不可能完成：因为当 mu【原创不易，请尊重版权】【版权所有，侵权必究】tation 触发的时候，回调函数还没有【本文首发于唐霜的博客】【原创内容，转载请注明出处】被调用，devtools 不知道什么时候【原创内容，转载请注明出处】【版权所有，侵权必究】回调函数实际上被调用 —— 实质上任何在本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。回调函数中进行的的状态的改变都是不可追踪【版权所有，侵权必究】【原创不易，请尊重版权】的。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。在组件中提交Mutations
你可以在组件中使用 this.$stor本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nete.commit(‘xxx&【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】#8217;) 提交 mutation，原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】或者使用 mapMutations 辅助【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。函数将组件中的 methods 映射为 本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】store.commit 调用（需要在根【转载请注明来源】【作者：唐霜】节点注入 store）。
【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。et 获取更多精彩内容】原创内容，盗版必究。【原创内容，转载请注明出处】【原创内容，转载请注明出处】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，【转载请注明来源】【转载请注明来源】不同在于：
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。- Action提交mutation，而不是转载请注明出处：www.tangshuang.net【转载请注明来源】直接变更state 【原创不易，请尊重版权】【版权所有，侵权必究】
- Action可以包含异步操作 【原创不易，请尊重版权】【访问 www.tangshuang.n【作者：唐霜】原创内容，盗版必究。et 获取更多精彩内容】【本文首发于唐霜的博客】未经授权，禁止复制转载。
让我们来注册一个简单的 action：
未经授权，禁止复制转载。【原创内容，转载请注明出处】const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment') // 注意，须要先注册mutations
}
}
})
Action 函数接受一个与 store【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。 实例具有相同方法和属性的 contex【作者：唐霜】【原创不易，请尊重版权】t 对象，因此你可以调用 context【本文受版权保护】【未经授权禁止转载】.commit 提交一个 mutatio未经授权，禁止复制转载。【未经授权禁止转载】n，或者通过 context.state原创内容，盗版必究。【本文受版权保护】 和 context.getters 来【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net获取 state 和 getters。当【作者：唐霜】【本文受版权保护】我们在之后介绍到 Modules 时，你【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net就知道 context 对象为什么不是 【作者：唐霜】【版权所有】唐霜 www.tangshuang.netstore 实例本身了。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。实践中，我们会经常会用到 ES2015 【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】的 参数解构 来简化代码（特别是我们需要未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net调用 commit 很多次的时候）：
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。actions: {
increment ({ commit }) {
commit('increment')
}
}
分发Action
Action 通过 store.disp本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。atch 方法触发：
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。store.dispatch('increment')
乍一眼看上去感觉多此一举，我们直接分发 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】mutation 岂不更方便？实际上并非【转载请注明来源】转载请注明出处：www.tangshuang.net如此，还记得 mutation 必须同步本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】执行这个限制么？Action 就不受约束【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net！我们可以在 action 内部执行异步【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】操作：
【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【本文受版权保护】ngnet】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
Actions 支持同样的载荷方式和对象【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net方式进行分发：
【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【原创内容，转载请注明出处】ang.net【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ang.net著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】// 以载荷形式分发
store.dispatch('incrementAsync', { amount: 10})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
来看一个更加实际的购物车示例，涉及到调用【本文首发于唐霜的博客】未经授权，禁止复制转载。异步 API 和 分发多重 mutati原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ons：
转载请注明出处：www.tangshua原创内容，盗版必究。【作者：唐霜】ng.net转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.netactions: {
checkout ({ commit, state }, products) {
// 把当前购物车的物品备份起来
const savedCartItems = [...state.cart.added]
// 发出结账请求，然后乐观地清空购物车
commit(types.CHECKOUT_REQUEST)
// 购物 API 接受一个成功回调和一个失败回调
shop.buyProducts(
products,
// 成功操作
() => commit(types.CHECKOUT_SUCCESS),
// 失败操作
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
注意我们正在进行一系列的异步操作，并且通【本文受版权保护】【版权所有】唐霜 www.tangshuang.net过提交 mutation 来记录 act未经授权，禁止复制转载。【转载请注明来源】ion 产生的副作用（即状态变更）。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】在组件中分发Action
你在组件中使用 this.$store.【原创不易，请尊重版权】【本文首发于唐霜的博客】dispatch(‘xxx&【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net#8217;) 分发 action，或者【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net使用 mapActions 辅助函数将组本文作者：唐霜，转载请注明出处。【转载请注明来源】件的 methods 映射为 store【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】.dispatch 调用（需要先在根节点【本文受版权保护】【作者：唐霜】注入 store）：
【本文受版权保护】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
]),
...mapActions({
add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
})
}
}
Actions异步回调通知
Action 通常是异步的，那么如何知道【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 action 什么时候结束呢？更重要的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net是，我们如何才能组合多个 action，【未经授权禁止转载】【作者：唐霜】以处理更加复杂的异步流程？
【原创不易，请尊重版权】转载请注明出处：www.tangshua【本文受版权保护】转载请注明出处：www.tangshuang.netng.net首先，你需要明白 store.dispa【转载请注明来源】转载请注明出处：www.tangshuang.nettch 可以处理被触发的action的回【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net调函数返回的Promise，并且stor【转载请注明来源】著作权归作者所有，禁止商业用途转载。e.dispatch仍旧返回Promis【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.nete：
【本文受版权保护】未经授权，禁止复制转载。actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
现在你可以：
【版权所有】唐霜 www.tangshu【未经授权禁止转载】【本文首发于唐霜的博客】ang.net转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ng.net【作者：唐霜】store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以：
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
最后，如果我们利用 async / aw本文版权归作者所有，未经授权不得转载。【本文受版权保护】ait 这个 JavaScript 即将【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】到来的新特性，我们可以像这样组合 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 在不著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】同模块中可以触发多个 action 函数【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。。在这种情况下，只有当所有触发函数完成后转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。，返回的 Promise 才会执行。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。Modules
使用单一状态树，导致应用的所有状态集中到转载请注明出处：www.tangshuang.net【版权所有，侵权必究】一个很大的对象。但是，当应用变得很大时，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。store 对象会变得臃肿不堪。
【版权所有，侵权必究】【转载请注明来源】为了解决以上问题，Vuex 允许我们将 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】store 分割到模块（module）。【本文受版权保护】【作者：唐霜】每个模块拥有自己的 state、muta【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】tion、action、getters、本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】甚至是嵌套子模块——从上至下进行类似的分【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】割：
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】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.netetter，接收的第一个参数是模块的局部【原创内容，转载请注明出处】【原创内容，转载请注明出处】状态。
原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ngnet】著作权归作者所有，禁止商业用途转载。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【转载请注明来源】一 mutation 或 action。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net你可以通过添加前缀或后缀的方式隔离各模块【未经授权禁止转载】本文作者：唐霜，转载请注明出处。，以避免名称冲突。你也可能希望写出一个可【版权所有】唐霜 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转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。tore.registerModule 本文版权归作者所有，未经授权不得转载。【转载请注明来源】方法注册模块：
【版权所有】唐霜 www.tangshu【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ang.net【原创内容，转载请注明出处】【作者：唐霜】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netng.netstore.registerModule('myModule', {
// ...
})
模块的状态将是 store.state.【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】myModule。
原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】模块动态注册功能可以让其他 Vue 插件【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】为了应用的 store 附加新模块，以此【版权所有，侵权必究】【本文首发于唐霜的博客】来分割 Vuex 的状态管理。例如，vu【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ex-router-sync 插件可以集【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net成 vue-router 与 vuex，转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】管理动态模块的路由状态。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。你也可以使用 store.unregis【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。terModule(moduleName转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。) 动态地卸载模块。注意，你不能使用此方【未经授权禁止转载】【转载请注明来源】法卸载静态模块（在创建 store 时声【本文受版权保护】本文作者：唐霜，转载请注明出处。明的模块）。
【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。【版权所有，侵权必究】ang.net未经授权，禁止复制转载。小结
本章讲vue，其实就是一直在反复谈论如何【本文首发于唐霜的博客】原创内容，盗版必究。在组件之间共享数据。vuex通过一个中间【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】的数据存储仓库store来实现组件之间的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。数据交换。你可以使用一个全局变量保存这个【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。store，然后就可以在所有地方使用这个【原创内容，转载请注明出处】【原创不易，请尊重版权】store。
【本文首发于唐霜的博客】【转载请注明来源】【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ngnet】如果要在组件中局部使用，你须要把这个st【原创不易，请尊重版权】【作者：唐霜】ore传入到根实例，这样在每一个组件里面原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。都可以使用this.$store.sta【本文受版权保护】转载请注明出处：www.tangshuang.nette来访问共享状态。这个状态和视图是联动【原创内容，转载请注明出处】【原创内容，转载请注明出处】的，当状态在一个组件中被更改，那么其他组转载请注明出处：www.tangshuang.net原创内容，盗版必究。件中如果使用到这个状态，那么视图也会跟着原创内容，盗版必究。转载请注明出处：www.tangshuang.net更改。
原创内容，盗版必究。【原创内容，转载请注明出处】不过就像前面在探讨prop属性的时候一样【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，你不能直接通过修改this.$stor【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】e.state上的某个值来修改状态，你必本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。须在store被创建的时候就先确定好要准【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。备哪些数据用来共享，并且写好对应的mut未经授权，禁止复制转载。【本文首发于唐霜的博客】ations，在组件内使用this.$s未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。tore.commit来提交mutati原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ons，达到修改state的目的。com【未经授权禁止转载】未经授权，禁止复制转载。mit提交是修改state的唯一方法。
【本文受版权保护】【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【版权所有，侵权必究】但是所有的mutations操作必须是同【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net步的，要异步操作，就必须使用action【未经授权禁止转载】本文作者：唐霜，转载请注明出处。s，和mutations使用方法一样，a本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ctions也必须在创建store时定义本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net好，在组件内使用this.$store.【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。dispatch来分发某一个action【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】。而在action函数体内，也必须通过c未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ommit来修改state。
【版权所有，侵权必究】原创内容，盗版必究。【转载请注明来源】【访问 www.tangshuang.n【作者：唐霜】【未经授权禁止转载】et 获取更多精彩内容】其他
vue-cli
vue官方提供了一个命令端工具vue-c未经授权，禁止复制转载。【原创内容，转载请注明出处】li来快速创建、编译你的组件，你可以通过这里深入阅读。
【转载请注明来源】【作者：唐霜】本文作者：唐霜，转载请注明出处。服务端渲染
vue2.0版本之后，开始支持服务端渲染未经授权，禁止复制转载。【版权所有，侵权必究】。简单的来说，服务端渲染就跟以前我们直接【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net用php输出html差不多，但是对于前后【作者：唐霜】未经授权，禁止复制转载。端都是vue的node服务器环境而言，服未经授权，禁止复制转载。【本文受版权保护】务端渲染可以实现后端渲染完之后，前端可以【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net获知哪里是由服务端渲染的，这样前端就不用未经授权，禁止复制转载。【原创内容，转载请注明出处】自己渲染了。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】未经授权，禁止复制转载。编者不是很看好服务端渲染，它使得开发的逻原创内容，盗版必究。【未经授权禁止转载】辑变得很难理解，而且如果开发时考虑服务端【版权所有，侵权必究】【本文首发于唐霜的博客】渲染，不得不考虑一些原本编程中不需要思考原创内容，盗版必究。原创内容，盗版必究。的问题，这其实也违背了编程本身的乐趣。如著作权归作者所有，禁止商业用途转载。【本文受版权保护】果你看“生命周期”一章，就会发现，很多钩【未经授权禁止转载】【本文首发于唐霜的博客】子函数在服务端渲染的时候不被调用，这使得【版权所有，侵权必究】【原创内容，转载请注明出处】你在编程的时候，原本对生命周期的理解会变本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。得被怀疑。
【作者：唐霜】【原创不易，请尊重版权】后记
本书作为vue的中文教程，主要是为了帮助【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。那些想要尽快学会vue，使用vue进行编【转载请注明来源】【未经授权禁止转载】程的同学准备的，所以里面涉及的内容更偏向原创内容，盗版必究。【本文受版权保护】于实用性和可理解性。大部分内容都是从官网本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。或对应的api文档中拷贝过来，同时加上自【作者：唐霜】【版权所有，侵权必究】己的话，使得对应的知识点更容易理解一些。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。但是毕竟不可能做到完美，肯定还会有不足之本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】处，如果你在阅读中有什么疑问或不懂的地方著作权归作者所有，禁止商业用途转载。【转载请注明来源】，请在下方的留言框中留言，我会第一时间解【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。答你。
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ng.net【本文首发于唐霜的博客】如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。
2017-05-04 | vue