1. .stop
1）用途
用于阻止事件冒泡。当一个子元素的事件被触发时，默认情况下该事件会向上冒泡到父元素。使用.stop修饰符可以阻止这种冒泡行为。
2）示例
<template>
<div @click="parentMethod">
<button @click.stop="childMethod">点击我</button>
</div>
</template>
<script>
export default {
name: 'TestVue',
setup() {
const childMethod = async () => {
console.log('childMethod')
}
const parentMethod = () => {
console.log('parentMethod')
}
return { childMethod, parentMethod }
}
}
</script>
当按钮被点击时，childMethod会被执行，但是事件不会冒泡到父元素的parentMethod。
3）运行结果
而如果没有.stop修饰符，childMethod和parentMethod都会被执行，运行结果：
2. .prevent
1）用途
阻止默认行为。例如，在表单提交时，浏览器会默认重新加载页面，使用.prevent修饰符可以阻止这种默认行为。
2）示例
<template>
<form @submit.prevent="submitForm">
<input type="text">
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
name: 'TestVue',
setup() {
const submitForm = async () => {
console.log('表单提交')
}
return { submitForm }
}
}
</script>
当表单提交按钮被点击时，submitForm方法会执行，但是页面不会重新加载，因为默认的表单提交行为被阻止了。
3）运行结果
页面不会重新加载，而且控制台输出'表单提交'：
如果不使用.prevent修饰符，页面会重新刷新，表单中原来输入框中的123不见了，控制台也没有输出：
3. .capture
1）用途
与事件冒泡相反，它是在事件捕获阶段处理事件。事件捕获是从最外层元素向目标元素传播事件的阶段。
2）示例
<template>
<div @click.capture="outerMethod">
<div @click="innerMethod" style="background-color: yellow;">
内部元素
</div>
</div>
</template>
<script>
export default {
name: 'TestVue',
setup() {
const outerMethod = async () => {
console.log('outerMethod执行');
}
const innerMethod = async () => {
console.log('innerMethod执行');
}
return {
outerMethod,innerMethod
}
}
}
</script>
当内部元素被点击时，首先会执行outerMethod，然后再执行innerMethod（从外到内事件捕获）。
3）运行结果
如果没有.capture修饰符，它会先执行innerMethod，再向外冒泡到父元素，执行outerMethod：
4. .self
1）用途
只有当事件是元素自身触发时才会执行对应的方法，而不是由子元素冒泡触发的时间。
2）示例
<template>
<div @click.self="divMethod" style="background-color: yellow;">
<button @click="buttonMethod" style="margin: 100px;background-color: red;">按钮</button>
</div>
</template>
<script>
export default {
name: 'TestVue',
setup() {
const divMethod = async () => {
console.log('divMethod执行');
}
const buttonMethod = async () => {
console.log('buttonMethod执行');
}
return {
divMethod, buttonMethod
}
}
}
</script>
当按钮被点击时，buttonMethod会执行，但是divMethod不会执行，因为事件是由按钮（子元素）触发的，不是div自身触发的。当直接点击div元素时，divMethod才会执行。
3）运行结果
点击按钮时，buttonMethod执行，控制台输出：
当单独点击div（黄色区域）时，divMethod执行，控制台输出：
5. .once
1）用途
事件只会被触发一次。之后再触发相同的事件源时，绑定的方法不会再执行。
2）示例
<template>
<button @click.once="clickOnceMethod">只点击一次</button>
</template>
<script>
export default {
name: 'TestVue',
setup() {
const clickOnceMethod = async () => {
console.log('clickOnceMethod执行');
}
return { clickOnceMethod }
}
}
</script>
无论点击按钮多少次，只有第一次的时候执行clickOnceMethod函数。
3）运行结果
只有第一次的时候会在控制台输出，clickOnceMethod执行：
如果去掉.once修饰符，每点击一次，clickOnceMethod都会被执行一次，控制台右侧显示输出的次数为12次，说明点击了12次就调用了12次：
6. 按键修饰符
1）用途
.enter、.tab、.delete、.esc、.space等。
用于监听特定按键的时间，比如.enter是监听用户按下回车键，.delete监听按下删除键...
2）示例
<template>
<input @keyup.enter="submitInput">
</template>
<script>
export default {
name: 'TestVue',
setup() {
const submitInput = async () => {
console.log('submitInput执行');
}
return { submitInput }
}
}
</script>
3）运行结果
当点进输入框，并按下回车后，会在控制台输出submitInput执行：
7. 系统修饰符
.ctrl、.alt、.shift、.meta（在Mac上是Command键，在Windows上是Windows键）
1）用途
可以组合使用来监听特定的按键组合事件。
2）示例
<template>
<input @keyup.ctrl.enter="ctrlEnterMethod">
</template>
<script>
export default {
name: 'TestVue',
setup() {
const ctrlEnterMethod = async () => {
console.log('ctrlEnterMethod执行');
}
return { ctrlEnterMethod }
}
}
</script>
该示例为监听Ctrl+Enter组合键。
3）运行结果
当点进输入框，同时按下Ctrl和Enter键后，函数执行，输出：
8. 鼠标修饰符
.left、.right、.middle
1）用途
用于区分鼠标的不同按键点击事件。
2）示例
<template>
<div @mousedown.left="leftClickMethod">
按下鼠标左键执行方法
</div>
</template>
<script>
export default {
name: 'TestVue',
setup() {
const leftClickMethod = async () => {
console.log('leftClickMethod执行');
}
return { leftClickMethod }
}
}
</script>
3）运行结果
在div区域按下鼠标左键后，会执行leftClickMethod函数，控制台输出：
同理可以换成.right、.middle。