事件修饰符与按键修饰符

1.事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。看看都有哪些修饰符：

1. .stop：调用event.stopProgagation()，阻止冒泡事件。
2. .prevent：调用event.preventDefault()，阻止默认事件。
3. .capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。
4. .self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。
5. .once：事件只能触发一次，比如只能单击按钮一次。
6. .passive：执行默认方法。一般用在滚动监听比如：@scoll，@touchmove，@mousemove等事件，因为在滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滚动的流畅度。
7. .left：按鼠标左键时触发。
8. .right：按鼠标右键时触发。
9. .middle：按鼠标中间键时触发。

注：passive和prevent冲突，不能同时绑定在一个监听器上。

事件修饰符的基本用法

代码如下：

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 --> 
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
<!--会阻止所有单击-->
<div @click.prevent.self="doThis">...</div>
<!--只会阻止对元素自身的单击-->
<div @click.self.prevent="doThis">...</div>

2.按键修饰符

在监听键盘事件时，经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符：

1. .enter：enter键
2. .tab：tab键
3. .delete：(捕获“删除”和“退格”按键) 删除键
4. .esc：取消键
5. .space：空格键
6. .up：上
7. .down：下
8. .left：左
9. .right：右

可以用以下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

1. .ctrl：ctrl键
2. .alt：alt键
3. .shift：shift键
4. .meta：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

3.系统修饰键

exact修饰符

exact修饰符允许你控制由精确的系统修饰符组合触发的事件。