1. .stop

阻止事件继续传播，即防止事件冒泡到父元素。

<div @click.stop="handleClick">点击我</div>

2. .prevent

阻止事件的默认行为，比如阻止表单提交时的页面刷新。

<form @submit.prevent="handleSubmit">阻止默认提交</form>

3. .self

只在事件触发元素自身时触发事件处理器，而不是其子元素触发。

<div @click.self="handleClick">点击我</div>

4. .capture

使用事件捕获模式，即从外层元素向内层元素寻找目标元素时触发事件。

<div @click.capture="handleClick">使用捕获模式</div>

5. .once

确保事件处理器只被触发一次，然后自动解绑。

<button @click.once="handleClick">点击一次</button>

6. .passive

改善移动端性能，标记事件监听器永远不会调用 preventDefault()，可以提升滚动时的流畅度。

<div @touchmove.passive="handleTouchMove">处理触摸移动事件</div>

7. .enter

捕获 Enter 键的按下事件，通常用于表单的提交。

<input @keydown.enter="handleSubmit">

8. .tab

捕获 Tab 键的按下事件。

<input @keydown.tab="handleTab">

9. .delete

捕获 Delete 和 Backspace 键的按下事件。

<input @keydown.delete="handleDelete">

10. .esc

捕获 Esc 键的按下事件。

<input @keydown.esc="handleEsc">

11. .space

捕获 Space 键的按下事件。

<input @keydown.space="handleSpace">

12. .up, .down, .left, .right

捕获上下左右箭头键的按下事件。

<input @keydown.up="handleArrowUp">
<input @keydown.down="handleArrowDown">
<input @keydown.left="handleArrowLeft">
<input @keydown.right="handleArrowRight">

13. .ctrl, .alt, .shift, .meta

捕获 Ctrl、Alt、Shift、Meta（命令键，如 Command 键或 Windows 键）键的按下事件。

<input @keydown.ctrl="handleCtrl">
<input @keydown.alt="handleAlt">
<input @keydown.shift="handleShift">
<input @keydown.meta="handleMeta">

14. .left, .right, .middle

捕获鼠标左键、右键和中键的点击事件。

<div @mousedown.left="handleLeftClick">左键点击</div>
<div @mousedown.right="handleRightClick">右键点击</div>
<div @mousedown.middle="handleMiddleClick">中键点击</div>

这些事件修饰符和按键修饰符可以帮助你在 Vue 3 中更加精确地控制和处理用户的交互行为，提升应用的交互性和用户体验。

  关注公众号：资小库，问题快速答疑解惑