事件修饰符

• .stop 停止冒泡
• .prevent 阻止默认事件
• .capture 捕获阶段触发事件
• .self e.target 与 e.currentTarget 是同一个元素时触发
• .once 事件只执行一次
• .passive 同 addEventListener 中的 passive 选项。

按键修饰符(用于键盘事件)

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰符(用于按下相应按键时才触发鼠标或键盘事件的监听器)

• .ctrl
• .alt
• .shift
• .meta

精确修饰符(控制由精确的系统修饰符组合触发的事件)

• .exact

鼠标按钮修饰符

• .left
• .right
• .middle

v-model 修饰符

• .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。

  可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步。

• .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。

  如果这个值无法被 parseFloat() 解析，则会返回原始的值。

• .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

额外修饰符

• .nativevue.js:634 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <button>.

  自定义组件上的事件，通常都是通过 $emit 来触发的。

  如果想要触发自定义组件上的原生事件，那么可以使用 .native 修饰符。

• .sync

  更加方便的更改自定义组件的 prop

  单纯的使用 prop 结合 $emit 实现父子组件间的通信，进而动态 prop，这种方式过于复杂化了。

  Vue 提供了 .sync 修饰符来简化这种场景实现。

  原始是：

  自定义组件上使用了 :title="title" 和 @update:title="title = $event"，组件内部调用 $emit('update:title', newTitle)

  简化之后：

  自定义组件上使用 :title.sync="title"，组件内部调用 $emit('update:title', newTitle)

  TIP

  在 Vue 的模板中，事件程序中的 $event 有两种场景含义：

  在原生 DOM 事件中，指代的是事件对象 e。

  在组件的自定义事件中，指代的是 $emit('name', val) 中的参数 val。