事件处理

1、事件修饰符

• .stop

• .prevent

• .capture

• .self

• .once

• .passive

注：修饰符可以串联，使用修饰符时顺序很重要；相应的代码会以同样的顺序产生

如：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

 

2、按键修饰符——v-on在监听键盘事件时添加按键修饰符

全部的按键别名：

• .enter（keyCode:13）

• .tab（keyCode:9）

• .delete （捕获“删除”和“退格”键）（keyCode:8,46）

• .esc（keyCode:27）

• .space（keyCode:32）

• .up（keyCode:38）

• .down（keyCode:40）

• .left（keyCode:37）

• .right（keyCode:39）

如：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

相当于：<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

 

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112

 

3、系统修饰键——实现仅在按下相应键盘时才触发鼠标或键盘事件的监听器

• .ctrl

• .alt

• .shift

• .meta

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

4、.exact修饰符——控制由精确的系统修饰符组合触发的事件

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

5、鼠标按键修饰符——会限制处理函数仅响应特定的鼠标按钮

• .left

• .right

• .middle