Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

• 示例说明

1.prevent：阻止默认事件

阻止默认事件， 比如a标签阻止跳转，此时执行alert语句后没有跳转

<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

showInfo(e){
	alert('同学你好！')
},

2.stop：阻止事件冒泡

在不使用stop时，点击button的点击事件，会冒泡到父亲上，可以看到showInfo方法执行了两次

<div class="demo1" @click="showInfo">
	<button @click="showInfo">点我提示信息</button>
</div>

使用stop时，点击button的点击事件，不会冒泡到父亲触发showInfo方法

<div class="demo1" @click="showInfo">
	<button @click.stop="showInfo">点我提示信息</button>
</div>

修饰符是可以连续写，比如a标签@click加修饰符prevent说明a标签阻止跳转，此时执行alert语句后没有跳转，同时加修饰符.stop说明a标签的showInfo事件，不会冒泡到父亲触发showInfo事件

<div class="demo1" @click="showInfo">
	 <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>
</div>

3.事件只触发一次

事件只触发一次，再次点击不会被触发

<button @click.once="showInfo">点我提示信息</button>

4.capture：使用事件的捕获模式；

<div class="box1" @click.capture="showMsg(1)">
	div1
	<div class="box2" @click="showMsg(2)">
		div2
	</div>
</div>

showMsg(msg){
  console.log(msg)
},

当父容器box1点击事件，正常输出1

父容器box1点击事件加修饰符.capture后，先输出1再输出2，说明子容器box2点击事件后就先捕获父容器的点击事件后，再执行子容器本身的点击事件

5.self：只有event.target是当前操作的元素时才触发事件；

<div class="demo1" @click.self="showMsg('div')">
	<button @click="showMsg('btn')">点我提示信息</button>
</div>

showMsg(msg){
  console.log(msg)
},

给div的点击事件加修饰符.self，只有点击div才会执行自己的点击事件

同时点击button自己，才会执行自己的点击事件，
所以从某种程度来说也会阻止冒泡

6.passive：使事件的默认行为立即执行，无需等待事件回调执行完毕；

先准备结构样式

<ul class="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

<style>
	*{
		margin-top: 20px;
	}
	.list{
		width: 200px;
		height: 200px;
		background-color: rgb(156, 96, 156);
		overflow: auto;
	}
	li{
		height: 100px;
	}
</style>

@scrolll是滚动条滚动事件

@scroll是给滚动条加的滚动事件，在容器上面用鼠标的滚轮滚动或者键盘上的上下键或者直接滚动滚动条，只要触发滚动条滚动，每滚动一次触发一下@scroll事件

<ul @scroll="demo" class="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

demo(){
  console.log('滚动了')
}

@wheel是鼠标滚轮滚动事件

就算滚动条到顶或者到底了，滚动条没地方滚且滚不动了，只要鼠标滚轮继续往下滚，就会触发@wheel事件。
但是鼠标点击滚动条滚动，点击键盘上的上下键是不会触发@wheel事件的

@wheel和@wheel.passive

先准备方法

demo(){
	for (let i = 0; i < 10000; i++) {
		console.log('#')
	}
	console.log('累坏了')
}

• @wheel

<ul @wheel="demo" class="list">
 	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

可以看到@wheel，会等demo回调执行中途才执行滚动的默认行为

• @wheel.passive

<ul @wheel.passive="demo" class="list">
 	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

可以看出@wheel.passive可以立即执行事件的默认行为，无需等待事件回调执行完毕

总结

@wheel默认等滚动事件回调执行中途或执行完才执行滚动事件的默认行为；
@wheel.passive可以让事件的默认行为立即执行，无需等待事件回调执行完毕