事件修饰符

全局修饰符

使用场景：

在一些需要对某些事件进行阻止默认事件或者冒泡等等类似的操作的时候，就需要进行一定的处理，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀。包含以下这些：

.stop   // 阻止事件冒泡
.prevent // 阻止浏览器的默认事件
.self  // 忽略了事件冒泡和事件捕获的影响,只有直接作用在 该元素上的事件才会被调用
.capture  // 捕获
.once   // 事件只触发一次
.passive  //  .passive 会告诉浏览器你不想阻止事件的默认行为

另外，修饰语可以使用链式书写，如：<a @click.stop.prevent="doThat"></a>
使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用
@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

.stop、.prevent和.self

<!-- 单击事件将停止传递 -->
<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、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：

注： .passive 真正的目的是告诉浏览器，你可以不用去查询程序有没有阻止默认事件，这也就是.passive提前告诉浏览器的原因，提早告诉，提高性能。

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

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

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

另外还有按键修饰符

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

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

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

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

.ctrl
.alt
.shift
.meta

注意:

在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。

举例来说：

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

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

.exact 修饰符

.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。如：

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

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

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

鼠标按键修饰符

.left
.right
.middle

另外还有.native

一般情况下，父组件要监听子组件的事件，可以通过$emit的方式。但是如果父组件要监听子组件的原生事件，比如：input的focus事件。此时可以通过使用v-on的.native修饰符达到目的。

.native 可以在某组件的根元素上监听一个原生事件

从上面的语句可以看出，.native作用于组件的根元素。
所以如果需要监听的元素是作为根元素，此时.native完全适用
例如：
父组件

<template>
  <div id="app">
    <baseLabel  v-on:focus.native="onFocus"/>
  </div>
</template>

<script>
import baseLabel from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    baseLabel
  },
  methods: {
    onFocus() {
      console.log('监听到子组件根元素');
    }
  }
}
</script>

子组件：

<template>
    <input type="text"/>
</template>

<script>
export default {
  name: 'baseLabel',
}
</script>

浏览器打印：“监听到子组件根元素”

表单输入修饰符

.lazy​

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
即：添加.lazy后，input失去光标或者按下entry，数据才发生改变

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number​

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

<input v-model.number="age" />

如果该值无法被 parseFloat() 处理，那么将返回原始值。

number 修饰符会在输入框有 type="number" 时自动启用。

.trim​

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

<input v-model.trim="msg" />