vue中可以使用 v-on 指令绑定事件监听器，监听 DOM 事件，而在事件处理的程序中，为了能有更纯粹的数据逻辑，vue还提供了很多事件修饰符，来代替处理一些 DOM 事件细节。
我的其他文章，也可以了解一下：
【使用vue-cli（vue脚手架）快速搭建项目】：https://www.jianshu.com/p/1ee1c410dc67
【vue之父子组件间通信实例讲解（props、ref 、 emit ）】：
https://www.jianshu.com/p/91416e11f012
【vue之将echart封装为组件】：
https://www.jianshu.com/p/ec39019e2141
【理解vue实例的生命周期和钩子函数】：
https://www.jianshu.com/p/98517bd49179
事件修饰符：
- .stop：防止事件冒泡，等同于JavaScript中的event.stopPropagation()
- .prevent：防止执行预设的行为，等同于JavaScript中的event.preventDefault()
- .capture：捕获冒泡
- .self：将事件绑定到自身，只有自身才能触发
- .once：只触发一次
- .passive：不阻止事件的默认行为
（1）.stop
防止事件冒泡，通俗来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于JavaScript中的event.stopPropagation()。看看下面这个例子：
<!-- HTML -->
<div id="demo">
<div @click="outer" style="padding: 20px;background-color:deepskyblue">
<div @click="middle" style="padding: 10px;background-color: darkcyan">
<button @click="inner">click</button>
</div>
</div>
</div>
<!-- JS -->
var demo = new Vue({
el: '#demo',
methods: {
inner: function () {
console.log ('(1)inner')
},
middle: function () {
console.log ('(2)middle')
},
outer: function () {
console.log ('(3)outer')
}
}
})
这个例子中，在button标签外包了两层div，每层都绑定了监听器，监听click事件，这时候我们点击最内层的按钮，你从控制台可以看见，外面两层对应的点击事件也被触发了。
image.png
那如果我们给最内层按钮的事件绑定加上stop修饰符，像如下修改，就不会向上冒泡了
<button @click.stop="inner">click</button>
image.png
（2）.prevent
某些标签拥有自身的默认事件，比如<a>标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的，但不会因为stop而停止执行。阻止执行这类预设的行为，.prevent就派上用场了。
<a href="http://www.baidu.com" @click.prevent>点击跳转</a>
试试上面这个小例子，你会发现点击<a>标签的时候，不会再发生跳转了。
（3）.capture
捕获冒泡，即冒泡发生时，有.capture修饰符的dom元素会优先执行。我们还是用回stop时候的例子，正常情况下点击最内层按钮，控制台打印的信息是这样的：
image.png
我们稍作改变，将中间层的点击事件加上.capture修饰符
<div @click="outer" style="padding: 20px;background-color:deepskyblue">
<div @click.capture="middle" style="padding: 10px;background-color: darkcyan">
<button @click="inner">click</button>
</div>
</div>
这时候打印顺序发生改变了，中间层的信息被优先打印出来，然后再按正常顺序执行触发的事件
image.png
那多个.capture修饰符的时候呢？
<div @click.capture="outer" style="padding: 20px;background-color:deepskyblue">
<div @click.capture="middle" style="padding: 10px;background-color: darkcyan">
<button @click="inner">click</button>
</div>
</div>
image.png
结果是，带修饰符的从外到内依次执行，然后再按正常顺序执行触发的事件。
（4）.self
将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。
<!-- HTML -->
<div id="demo">
<div @click="outer" style="padding: 20px;background-color:deepskyblue">
<div @click.self="middle" style="padding: 10px;background-color: darkcyan">
<button @click="inner">click</button>
</div>
</div>
</div>
<!-- JS -->
var demo = new Vue({
el: '#demo',
methods: {
inner: function () {
console.log ('(1)inner')
},
middle: function () {
console.log ('(2)middle')
},
outer: function () {
console.log ('(3)outer')
}
}
})
给中间的div加上self修饰符，然后点击里层的按钮，发现中间层的事件没有被触发，直接跳过了：
image.png
而直接点深色部分，即中间层div对应的区域，才能触发其事件：
image.png
（5）.once
这个比较好理解，加上once修饰符以后事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。下面是不停点击按钮的效果：
<div @click="outer" style="padding: 20px;background-color:deepskyblue">
<div @click="middle" style="padding: 10px;background-color: darkcyan">
<button @click.once="inner">click</button>
</div>
</div>
image.png
（6）.passive
.passive是2.3.0 新增的修饰符，是用来告诉浏览器你不想阻止事件的默认行为。
这里涉及到一个问题，为什么需要告诉浏览器不阻止事件的默认行为？
原因是这样的，浏览器只会在每次触发监听器的时候，才去判断这次是否有调用preventDefault()来阻止默认行为。这样的判断，在某些场景下会影响交互，像用户通过手势滑动页面时，就没法迅速滚动了，而使用.passive就可以提前告诉浏览器，我们没有用preventDefault阻止默认动作，你也不用反复去判断了，从而提高性能解决卡顿。
网友评论