vue事件绑定中的事件修饰符

在vue中，我们不需要操作Dom元素，可以很方便的绑定事件，其中就有事件修饰符来解决一些Dom事件的细节。

vue.js中给v-on（简写：@）提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

1..stop

会阻止冒泡。

<div style="height: 100px; width: 200px; background-color: yellow; line-height: 100px;">
<button @click.stop="son">点击</button>
</div>
<!-- 当点击了作为儿子的button时，会阻止它的冒泡，这样就影响不到div -->

2.prevent

会阻止默认行为发生

<a href="http://www.baibu.com" @click.prevent="show">跳转百度页面</a>
<!-- 这样点击了这个链接将不会跳转 -->

3.capture

捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按本来的顺序执行触发的事件。

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

4.self

将事件绑定到当前元素自身，只有当前元素自身才能触发，通常用于避免冒泡事件的影响

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat"></div>

 

5.once

设置事件只能触发一次

 

6.passive

passive 会告诉浏览器你不想阻止事件的默认行为。提早告诉，提高性能。