1.vue的事件修饰符有哪些
.stop.prevent.self.capture.once.passive
2.使用方法
.stop，相当于原生写法中的event.stopPropagation()，用于阻止事件冒泡
<template>
<div @click="father">
<button @click.stop="son"></button>
</div>
</template>
<script setup>
function father(){
console.log("call me father")
}
function son(){
console.log("call me son")
}
</script>
//输出结果
//call me son
//因为stop防止子元素的click事件冒泡到父元素，所以不会call me father.prevent，相当于原生写法中的event.preventDefault()，用于阻止默认事件
<template>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
</template>.self
<template>
<div @click.self="father">
<button @click="son">按钮</button>
</div>
</template>
<script setup>
function son(){
console.log("call me son")
}
function father(){
console.log("call me father")
}
</script>
//点击按钮，输出 "call me son"
//点击div，输出"call me father"
//这里是有别于stop的，添加了self修饰符的事件，只有事件触发到本身，才会执行事件.capture，添加该事件修饰符，如果有内部事件被触发，会优先执行当事件（即添加了.capture的事件优先执行）
<template>
<div @click.capture="father">
<button @click="son">按钮</button>
</div>
</template>
<script setup>
function son(){
console.log("call me son")
}
function father(){
console.log("call me father")
}
</script>
//点击按钮，优先输出 "call me father"，在输出"call me son"
//若是不加.capture，则先输出"call me son"，再输出"call me father".once，添加了该事件修饰符，事件仅会触发一次
<template>
<button @click="fn">按钮</button>
</template>
<script setup>
function fn(){
console.log("call me fn")
}
</script>
//点击按钮，输出 "call me fn"
//再次点击按钮，不会再有输出.passive，添加了该事件修饰符，主要应用于scroll事件，提升滚动性能
<template>
<div @scroll.passive="onScroll">...</div>
</template>这里根据官方文档的描述，我说句实话，根本看不懂
因此我去搜索了一下，这篇文章说的非常好，推荐大家看一下，很快就能理解Vue事件处理:.passive修饰符与应用场景_vue passive-CSDN博客
大概意思就是某些场景下我们会往scroll事件里添加event.preventDefault()，浏览器也默认我们会加入peventDefault()，所以每次滚动事件产生时都会去查询是否有preventDefault()，也就是每次滑动都会去做这个操作，我们是没办法跳过的，Vue就一顿操作，给我们提供了这个修饰符，只要加了这个.passive，内核线程就会跳过查询preventDefault()的操作，从而提高性能！
但是这个.passive是不能与.prevent混用的，否则会出现警告，并且忽略.prevent
3.链式调用
链式调用就大有讲究了，请大家先看代码，顺便思考一下点击按钮1和按钮2的输出内容
<template>
<div @click="container" style="background-color:blue;padding:20px">
<div @click.self.stop="children" style="background-color:red;padding:10px">
<button @click="fn1">按钮1</button>
<button @click="fn2">按钮2</button>
</div>
</div>
</template>
<script setup>
function fn1(){
console.log(111)
}
function fn2(){
console.log(222)
}
function container(){
console.log('all')
}
function children(){
console.log("children")
}
</script>下面是开古时刻：依次输出111, all 和 222, all
看到中间那层@click.self.stop=“children”，这便是链式调用的使用方式，意思是，点击到了自己才会触发，且不冒泡，所以当我们触发该层的点击事件是，仅输出"children"
但是大家别以为到这里就完了！！
如果我们调转链式调用的顺序，结果就完全不同了，大家可以再思考一下点击按钮1和按钮2的输出内容
<template>
<div @click="container" style="background-color:blue;padding:20px">
<div @click.stop.self="children" style="background-color:red;padding:10px">
<button @click="fn1">按钮1</button>
<button @click="fn2">按钮2</button>
</div>
</div>
</template>
<script setup>
function fn1(){
console.log(111)
}
function fn2(){
console.log(222)
}
function container(){
console.log('all')
}
function children(){
console.log("children")
}
</script>下面又是开古时刻：依次输出111 和 222
这里是优先执行了禁止冒泡(.stop)，再执行了(.self)，也就是按钮1，按钮2最多只能冒泡到children，所以按道理会输出"111","children"和"222","children"，但由于链式调用了.self，也就是只有触发children本身才会输出children，因此只会输出111和222
除此之外，还有其他链式调用的方法，但是大家一定要理解这个调用顺序，下面是官方文档的例子
由于prevent不太能从代码上体现得出，因此我用了.stop和.self
想不到小小一个事件修饰符也能如此深奥，下面我将继续完善剩余的按键修饰符与鼠标按键修饰符
