vue事件处理（修饰符）

事件修饰符：

在vue中为了只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节，vue.js提供了事件修饰符。

• .stop 阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

• .prevent 提交事件不再重载页面

<form v-on:submit.prevent></form>

• .capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

• .self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的

<div v-on:click.self="doThat">...</div>

• .once 点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

• .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，这其中包含 `event.preventDefault()` 的情况

<div v-on:scroll.passive="onScroll">...</div>

注：修饰符可以串联，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<a v-on:click.stop.prevent="doThat"></a>

按键修饰符：

vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

• enter
• page-down
• ...

//只有在 `key` 是 `Enter` 时调用 `vm.submit()`
<input v-on:keyup.enter="submit">
//处理函数只会在 $event.key 等于 PageDown 时被调用
<input v-on:keyup.page-down="onPageDown">

​

系统修饰键：       

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

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

注：请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态

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

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符：

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮