事件修饰符顾名思义是对事件的修饰。
常见的事件修饰符有
prevent阻止默认事件比如说有一个a标签里面写了一个href网址，在click点击事件后面加了一个prevent。原本默认点击连接会跳转网址，但是加上prevent就会阻止跳转了。
once事件只触发一次比如说一个button里面有一个click点击事件绑定了once修饰符，对应方法里面写上我执行了，你点击button按钮就只能执行一次，不加这个修饰符能执行多次。
stop阻止事件冒泡比如说定义了两个父子div盒子都有click点击事件，但是里面的点击事件使用stop修饰符修饰了，此时点击里面的盒子就只会执行里面盒子对应的方法，不会执行外面盒子执行的方法。不加这个stop阻止冒泡修饰符的话外面的盒子对应的方法也会一次执行。
capture使用事件的捕获模式比如定义了两个父子div盒子都有click点击事件，但是父亲盒子的点击事件使用capture事件的捕获修饰符进行修饰了，此时点击里面的盒子会依次进行外层盒子的方法在执行内层盒子的方法。
此时正好可以说一下js的事件流机制。浏览器的事件处理分为捕获阶段和冒泡阶段。默认情况下，捕获时由外向内依次捕获，冒泡是由内向外依次冒泡，事件的处理是在冒泡阶段进行的。
self当事件的目标为自身时才会触发还是定义了两个父子div盒子都有click点击事件，但是父亲盒子的点击事件使用self事件修饰符修饰，此时点击内部的盒子，原版本会冒泡执行，先执行里面的方法，再执行外面盒子的方法，但是外面的盒子加上了self修饰符，所以说外面的方法是不会执行的。除非点击外面的盒子才会执行外面的方法，也就是当事件的目标为自身时才会触发。
passive立即执行默认行为比如给一个ulli列表添加一个鼠标滚轮事件@wheel，事件对应的方法要打印10000次，如果加上了passive事件修饰符，它会立即出现鼠标滚轮，而不会执行回调函数。如果不加的话就会等回调函数执行完再有鼠标滚轮。
passive会立即执行默认行为而无需等待事件的回调执行完毕
<!-- 准备好一个容器 -->
<div id="root">
<h2>我的名字叫{{name}}</h2>
<!-- 1.prevent阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent='hello'>点击提示信息1</a><br>
<!-- 2.stop阻止事件冒泡 -->
<div @click="hello">
<button @click.stop="hello">点击提示信息2</button>
</div>
<!-- 3.once件只触发一次,触发完了就失效 -->
<button @click.once="hello">点击提示信息3</button>
<!-- 4.capture捕获阶段处理事件(默认的是冒泡阶段处理事件) 这个意思就是说外边的div在捕获阶段就处理事件了-->
<div @click.capture="showInfo(1)">111111
<div @click="showInfo(2)">22222</div>
</div>
<!-- 5.self只有event.target是当前操作的元素时才触发事件,也就是冒泡不管用了(类似阻止冒泡?)-->
<div @click.self="hello">111111
<div @click="hello">22222</div>
</div>
<!-- 6.passive事件的默认行为立即执行，无需等待事件的回调执行完毕-->
<!-- 加上这个的话,不用等待creazyShow函数执行完毕,滚动条就可以流畅滚动-->
<ul @wheel.passive="creazyShow">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: 'zzy',
age: 18
},
methods: {
hello(e) {
// e.preventDefault(); //阻止默认事件的js写法
// e.stopPropagation(); //阻止事件冒泡的js写法
alert('DJ drop the beat');
},
showInfo(val) {
console.log(val);
},
creazyShow() {
for (let i = 0; i < 100000; i++) {
console.log('我输出完了你再滚动');
}
}
}
})
</script>
