常见的修饰符及作用如下：
- .stop：阻止事件冒泡，等价于调用 event.stopPropagation()；
- .prevent：阻止默认事件，等价于 event.preventDefault()；
- .capture：以捕捉模式监听事件，即 addEventListener(event, fn, true)；
- .self：只有当 event.target 为本身时才登程，从外部元素冒泡进去时不触发；
- .once：绑定后只触发一次。
还有按键修饰符，简化了咱们对按键事件的解决。
- keyCode：如 @keyup.13，即监听 keyCode 为 13（回车键）的按键抬起事件。
别名：间接应用 keyCode 也比拟麻烦，毕竟咱们不会去记所有按键的 keyCode，这里给常见的按键提供了别名方便使用，如
@keyup.enter，常见的别名有：- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
零碎润饰键：润饰键与惯例按键会有所不同，在和
keyup事件一起用时，事件触发时润饰键必须处于按下状态。例如：@keyup.ctrl.enter，即为按住ctrl键，抬起enter键才会触发，单抬起ctrl不会被触发。Vue 总共蕴含以下四种零碎润饰键：- .ctrl
- .alt
- .shift
- .meta：Mac 零碎键盘上，meta 对应 command 键（⌘）。在 Windows 零碎键盘 meta 对应 Windows 徽标键 (⊞)。
另外，修饰符反对叠加，且按程序执行，例如：
@click.stop.prevent="doSth"即为阻止默认事件且阻止冒泡；@keyup.ctrl.enter即监听 ctrl+ 回车键开释事件；@click.self.prevent仅阻止对元素本身的默认事件，而@click.prevent.self则会阻止所有的默认操作（前面的.self其实没有起作用）。- v-text：更新元素的
textContent，与间接应用{{}}相比，能够防止 Vue 实例尚未作用于元素上，用户能间接看到{{ data }}这样的模板语法。 - v-html：更新元素的
innerHTML。 - v-pre: 跳过元素和其子元素的编译过程，放慢编译速度，如
<div v-pre>...</div>。 - v-cloak：放弃该属性存在于元素上，直到关联的实例完结编译，罕用于暗藏未编译的标签直到编译完结。例如：
v-once：只渲染元素和组件一次，随后即便触发重发渲染，该作用的元素或组件内的节点都将被视为动态内容，不会随之更新。
最早 Vue 在实现组件间通信的时候是采纳派发（dispatch，事件向上冒泡，触发后进行冒泡）和播送（broadcast，事件向下传递给所有后辈）的形式实现组件间通信。但这种形式在父子间通信时较为实用，但存在两个问题：
- 兄弟组件间通信流程过长：兄弟组件间通信须要通过父组件直达。例如，兄弟组件 A、B，父组件 C，A 派发事件冒泡到 C，C 承受到后再次播送到 A、B，B 监听到后触发本人的事件，流程相对而言较长。
- 通信流程依赖于 DOM 构造：派发和冒泡的流程都会依赖于组件间的构造，这样就造成了耦合，不利于组件的拆分。
所以在 Vue 2.0 后就勾销了这种通信形式的反对，而举荐应用事件总线的形式，在简略场景下，能够应用一个空的 Vue 实例作为事件总线，例如：
`var bus = new Vue()组件A:bus.$emit('action', data) // 触发action事件组件B:bus.$on('action', funtion (data) { ... }) // 监听action事件` 复制这样无论组件 A 在哪个地位，B 都能监听到 A 触发的 action 事件，与 DOM 构造就解耦了。在更加简单的场景下，咱们会应用状态治理: vuex 来进行开发~~~~
Vue.js 也提供了在父组件内渲染子组件数据的办法，那就是作用域插槽，通常会用在一些表格、列表类型的插件上，这样使用者就能够自定义渲染具体的每一项
// List.vue<ul> <slot name="item" v-for="item in items" :item="item"></slot></ul> // ListDemo.vue<list :items="items"> <template slot-scope="props" slot="item"> <li>{{ props.item.text }}</li> // 渲染具体属性的控制权交由给了父组件 // 在不扭转子组件的状况下，咱们能够依据父组件的状况，来渲染不同的属性，例如 props.item.value 之类 // 这比在子组件间间接渲染晋升了扩展性，但相对而言，子组件封装的能力也绝对削弱了（并不负责渲染的逻辑，都需父组件实现） </template></list>在父级中，须要应用具备slot-scope的<template>标签，示意它是作用域插槽的模板。slot-scope的值将被用作一个长期变量名，此变量接管从子组件传递过去的prop对象。<list :items="items"><li slot-scope="props" slot="item">{{ props.item }}</li></list>
1、如何了解Vue的作用域插槽
举个例子，比方我写了一个能够实现条纹相间的列表组件，公布后，使用者能够自定义每一行的内容或款式（一般的slot就能够实现这个工作）。而作用域插槽的要害之处就在于，父组件能接管来自子组件的slot传递过去的参数，具体看案例和正文。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue作用域插槽</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div id="app2"> <!-- 组件使用者只需传递users数据即可 --> <my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2"> <!-- props对象接管来自子组件slot的$index参数 --> <template slot="cont" scope="props"> <span>{{users[props.$index].id}}</span> <span>{{users[props.$index].name}}</span> <span>{{users[props.$index].age}}</span> <!-- 这里能够自定[编辑][删除]按钮的链接和款式 --> <a :href="'#edit/id/'+users[props.$index].id">编辑</a> <a :href="'#del/id/'+users[props.$index].id">删除</a> </template> </my-stripe-list> </div> <script> Vue.component('my-stripe-list', { /*slot的$index能够传递到父组件中*/ template: ` <div> <div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor"> <slot name="cont" :$index="index"></slot> </div> </div> `, props: { items: Array, oddBgcolor: String, evenBgcolor: String } }); new Vue({ el: '#app2', data: { users: [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 22}, {id: 3, name: '王五', age: 27}, {id: 4, name: '张龙', age: 27}, {id: 5, name: '赵虎', age: 27} ] } }); </script> </body></html>