vue中【事件修饰符号】详解

在Vue中，事件修饰符是一种特殊的后缀，用于修改事件触发时的默认行为。以下是Vue中常见的事件修饰符的详细解释：

1. .stop
   • 调用event.stopPropagation()，阻止事件冒泡。
   • 当你在嵌套元素中都有相同的事件监听器（如click事件），并且只想让子元素的事件监听器触发，而不让父元素的事件监听器触发时，可以使用.stop修饰符。
2. .prevent
   • 调用event.preventDefault()，阻止事件的默认行为。
   • 例如，对于<a>标签的点击事件，默认行为是跳转到href指定的URL。如果你只想执行自定义的点击事件处理函数，而不希望页面跳转，可以使用.prevent修饰符。
   • @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。
3. .capture
   • 添加事件监听器时使用事件捕获模式。
   • 事件捕获是从外向内，即先触发父元素的事件监听器，再触发子元素的事件监听器。
4. .self
   • 只有当事件是从监听器绑定的元素本身（而不是子元素）触发时，才会触发回调。
   • 如果在嵌套元素上都有事件监听器，而只希望事件从父元素本身触发时才执行回调，可以使用.self修饰符。
5. .once
   • 事件只触发一次，然后移除事件监听器。
   • 例如，你可能希望某个按钮的点击事件只触发一次，之后就不再响应，这时可以使用.once修饰符。
6. .passive
   • 以{ passive: true }模式添加事件监听器，表示该函数不会调用event.preventDefault()。
   • 主要用于提高移动设备上的滚动性能。
7. 其他特定修饰符 (在Vue 3.x中引入)
   • .left、.right、.middle：分别表示只在鼠标左键、右键、中键点击时触发事件。
   • .exact：与其他修饰符一起使用时，确保所有修饰键都按下时触发。

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

     8.按键修饰符

• 在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
• 

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>