Vue.js 提供了一些事件修饰符，用于处理 DOM 事件的细节。事件修饰符是由点号（.）表示的后缀，放在事件名后面。例如 v-on:click.stop 或 @click.stop。
常用的事件修饰符9个
- .stop：阻止事件冒泡。
- .prevent：阻止默认行为。
- .capture：使用事件捕获模式。
- .self：只有当事件是从触发元素本身触发时才调用事件处理器。
- .once：只触发一次事件处理器。
- .passive：使用事件的被动模式。
- .left、.right、.middle：只在鼠标左键、右键或中键按下时触发事件处理器。
- .ctrl、.alt、.shift、.meta：只有在按下相应的键时才触发事件处理器。
- .exact：只有当事件是从精确的目标元素触发时才调用事件处理器。
代码示例，演示了如何使用事件修饰符：
<template>
<div>
<button @click.stop="handleClick">点击我</button>
<a href="#" @click.prevent="handleLinkClick">点击链接</a>
<input type="text" @keyup.enter="handleEnterKey">
<div @click.self="handleDivClick">点击这个 div</div>
<button @click.once="handleOnceClick">只点击一次</button>
<div @mousedown.left="handleLeftClick">点击鼠标左键</div>
<div @mousedown.ctrl="handleCtrlClick">按住 Ctrl 键点击</div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('按钮被点击');
},
handleLinkClick() {
console.log('链接被点击');
},
handleEnterKey() {
console.log('回车键被按下');
},
handleDivClick() {
console.log('div 被点击');
},
handleOnceClick() {
console.log('按钮被点击一次');
},
handleLeftClick() {
console.log('鼠标左键被点击');
},
handleCtrlClick() {
console.log('按住 Ctrl 键点击');
}
}
};
</script>
在这个示例中，我们使用了不同的事件修饰符来处理不同的事件。例如，@click.stop 会阻止事件冒泡，@click.prevent 会阻止默认行为，@click.self 只会在事件从触发元素本身触发时调用事件处理器，等等。
