概况如下
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身触发时触发回调
- .once 事件只能触发一次
示例代码表现如下：
当点击 save button 的时候， 会冒烟弹出三句话 ，依次为
button > small_box > big_box
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;height: 200px;background-color: gold;}.box2{width: 200px;height: 100px;background-color: pink;margin:50px auto;}</style><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="pp" class="box" @click="big_box"><div class="box2" @click="small_box"><input type="button" :value=value :title=title @click="button"></div>
</div>
<div><script>var vue=new Vue({el:'#pp',data:{message: 'Hello,Vue',message2:'<h1>我是一个超大的head，请避让下</h1>' ,title:'我是一个可以点击的button',value:'SAVE',},methods:{big_box: function () {console.log("我是外层的")},small_box: function () {console.log("我是里层的")} ,button: function () {console.log("我只是一个button，请注意了")}}})</script></div>
</body>
</html>
显示的效果如下：
.stop 阻止冒泡
上边的示例已经表明存在 冒泡， 如果想阻止 冒泡 就需要在 button 加上.stop:
@click.stop=“button”
点点击 save button 的效果如下：
我只是一个button，请注意了
其他两个不显示出来， 但是如果点里层的，照样有冒炮 ，比如我点击里层的，外层也照样显示.
.prevent 阻止默认事件
什么是 默认事件呢 比如我写个 a 标签 他默认是跳转的， 如果加上 .prevent 就可以在跳转之前加上
自己的事件， 保证 显示咱们自己的行为.
下边我加个 a 标签 ，并绑定a 的事件 ，看看行为如何， 自己点击尝试下，
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;height: 200px;background-color: gold;}.box2{width: 200px;height: 100px;background-color: pink;margin:50px auto;}</style><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="pp" class="box" @click="big_box"><div class="box2" @click="small_box"><!--<input type="button" :value=value :title=title @click.stop="button">--><a href="https://www.baidu.com" @click="link">百度一下，你就知道</a></div>
</div>
<div><script>var vue=new Vue({el:'#pp',data:{message: 'Hello,Vue',message2:'<h1>我是一个超大的head，请避让下</h1>' ,title:'我是一个可以点击的button',value:'SAVE',},methods:{big_box: function () {console.log("我是外层的")},small_box: function () {console.log("我是里层的")} ,button: function () {console.log("我只是一个button，请注意了")},link: function () {alert("跳转之前要过我这关，否则别想过去")}}})</script></div>
</body>
</html>
行为如下：
当点击链接的是， 会执行我们的自己的link 方法，然后弹出一个框， 确定之后再 进行跳转。 这就是阻止默认行为. 如果没有 事件修饰符 ，你实现起来很麻烦 .
.capture 添加事件侦听器时使用事件捕获模式
这句话看起来比较难理解， 我举个例子就行了
比如 在点击button的时候， 默认先会执行 button 事件，然后 外层的box 事件，
如果在最外层加上了capture ，就会先执行 外层的box 事件， 再执行button 事件，
用.capture 跳过默认行为 ，优先执行。
示例代码修改的部分如下：
<div id="pp" class="box" @click.capture="big_box"><div class="box2" @click="small_box"><input type="button" :value=value :title=title @click="button"><!--<a href="https://www.baidu.com" @click="link">百度一下，你就知道</a>--></div>
看看执行结果：
我是外层的
我只是一个button，请注意了
我是里层的
.self 只当事件在该元素本身触发时触发回调
.self 只要学过python 都有感觉， 这个就是它自身， 只有当点击它的时候才能显示，别想从冒泡
获取。
比如 如果在最外层 加上.self, 当点击button 的时候，最外成不会触发到，只有点击最外层才能被触发，
如果不加上.self 会被冒泡.
修改代码如下：
<div id="pp" class="box" @click.self="big_box">
当点击button 的时候 最外层没有触发到.
总结： .self 和stop 有什么区别呢
- stop 会把全部的冒泡 干掉
- .self 只是针对自身.
.once 事件只能触发一次
这个更好理解，只能触发一次， 你再点击对我没有用。
修改如下：
<div id="pp" class="box" @click="big_box"><div class="box2" @click="small_box"><input type="button" :value=value :title=title @click.once="button"><!--<a href="https://www.baidu.com" @click="link">百度一下，你就知道</a>--></div>
</div>
就第一次的点击button 触发了， 再点击就不能生效
总结：
之所以有事件修饰符， 为了解决复杂的场景，让方法执行的顺序可控，更加灵活.