共计 3362 个字符，预计需要花费 9 分钟才能阅读完成。
常见的修饰符及作用如下：
- .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>