在 Vue 中，修飾符（Modifiers）常用于自定義指令（Directives）和事件監聽（Event Listeners）中，以改變指令或事件監聽器的默認行為。以下是一些 Vue 中常用的修飾符：

1. 事件監聽修飾符

• .stop：阻止事件冒泡
• .prevent：阻止默認事件行為（如提交表單）
• .capture：使用事件捕獲模式
• .self：只有事件在該元素本身（而不是子元素）觸發時觸發回調
• .once：事件只觸發一次
• .passive：以 { passive: true } 模式調用 addEventListener。這主要用于改善移動端滾動性能。

示例：

<button @click.stop="handleClick">點擊我</button>
<form @submit.prevent="handleSubmit"><!-- 表單內容 -->
</form>

2. v-model 修飾符

• .lazy：將 input 事件替換為 change 事件，這意味著 v-model 不會在每次輸入時都更新，而是在輸入失去焦點或按下回車鍵時更新。
• .number：嘗試將用戶的輸入值轉換為數字。如果轉換失敗，則返回原始值。
• .trim：自動過濾用戶輸入的首尾空格。

示例：

<input v-model.lazy="message">
<input v-model.number="age" type="text">
<input v-model.trim="name">

3. 鍵盤事件修飾符

在監聽鍵盤事件時，你可以使用以下修飾符來檢測特定的鍵是否被按下：

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up、.down、.left、.right
• .ctrl、.alt、.shift、.meta

你可以將多個修飾符組合起來使用，如 @keyup.enter.ctrl。

示例：

<input @keyup.enter="submitForm">
<input @keydown.tab="switchTab">

4. 自定義指令修飾符

當你定義自定義指令時，你也可以在綁定指令時添加修飾符來改變其行為。這需要在自定義指令的定義中特別處理這些修飾符。

總結

Vue 的修飾符為開發者提供了在不需要編寫額外代碼的情況下改變事件或指令行為的能力，從而提高了開發效率和代碼的可讀性。