vue中的修饰符

        在 Vue 中，修饰符（Modifiers） 是一些以 . 开头的特殊后缀，用于改变指令的默认行为。它们通常用于 v-on（事件监听）和 v-model（表单绑定）等指令，简化代码并增强功能。        

一、事件修饰符（v-on 或 @）

用于处理 DOM 事件，控制事件的触发方式：

1. 常用事件修饰符

2. 按键修饰符

用于监听键盘事件：

<input @keyup.enter="submit" />  <!-- 回车键触发 -->
<input @keyup.esc="cancel" />   <!-- ESC 键触发 -->

        支持按键别名：.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。 

3. 系统修饰键

组合按键触发：

<button @click.ctrl="handleCtrlClick">Ctrl + Click</button>
<input @keyup.ctrl.enter="submit" />  <!-- Ctrl + Enter 触发 -->

        支持：.ctrl、.alt、.shift、.meta（Mac 的 ⌘ 键）。

二、v-model 修饰符

用于表单输入的双向绑定优化：

三、鼠标修饰符

用于鼠标按钮的精确控制：

<button @click.left="leftClick">左键</button>
<button @click.right="rightClick">右键</button>
<button @click.middle="middleClick">中键</button>

四、自定义修饰符

可以通过 config.keyCodes 自定义按键修饰符：

Vue.config.keyCodes = {
  f1: 112,
  upArrow: 38
};

<input @keyup.f1="showHelp" />

总结