事件处理

内联事件处理器

<button @click="count++">Add 1</button>

方法事件处理器

方法事件处理器会自动接收原生 DOM 事件

<button @click="greet">Greet</button>

向方法传入 event 事件变量

<button @click="warn('Form cannot be submitted yet.', $event)">

事件修饰符

.stop 阻止事件冒泡；

.prevent 阻止表单提交的默认行为（即，提交事件不再重载页面）；

.capture 内部元素事件触发前先在此处拦截处理，然后才交由内部元素处理；

.self  仅当 event.target 是元素本身时才会触发事件；

.once 点击事件最多只会被触发一次；

.passive 立即触发默认行为，能够提升移动端性能，和.prevent一起使用时.prevent会被忽略并警告 (事件的默认行为会立即执行，无需等待事件回调执行完毕)；

.native 监听组件的原生事件, 否则只能接收组件的自定义事件(子组件通过$emit触发的)，native修饰符只能用在组件上, 不能用在原生标签上；

注意: .stop和.prevent可以串联在一起使用,都会生效；

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

按键修饰符

1.0> Vue 为常用按键提供了别名：

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

2.0> 系统按键修饰符：用来触发鼠标或键盘事件，只有当按键被按下时才会触发。

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

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

3.0> 示例

a. 按下 `Enter` 时调用 `submit`

<input @keyup.enter="submit" />

b. 使用原生 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式：

<!-- 此处仅会在 $event.key 为 'PageDown' 时调用事件处理 -->
<input @keyup.page-down="onPageDown" />

c. 系统按键修饰符：

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

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

-> Vue官网事件修饰符详解

.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