事件处理

监听事件

v-on 指令（简写为 @）来监听事件：

<!-- 简写 -->
<button @click="doSomething">Click Me</button>
<!-- 完整写法 -->
<button v-on:click="doSomething">Click Me</button>

基本使用

template

<!-- 执行表达式 -->
<div>{{ count }}</div>
<button @click="count++">Add 1</button>

<!-- 执行方法 -->
<button @click="fn1">Click Me</button>
<button @click="fn1()">Click Me</button>
<button @click="() => fn1()">Click Me</button>

<!-- 传参 -->
<button @click="fn2('hi')">Click Me</button>
<button @click="() => fn2('hi')">Click Me</button>

js

import { ref } from 'vue'

const count = ref(0)

const f1 = () => {
  console.log('fn1')
}
const f2 = (msg) => {
  console.log('fn2', msg)
}

访问 event 事件参数

template

<button @click="fn1">Click Me</button>
<button @click="fn1($event)">Click Me</button>
<button @click="e => fn1(e)">Click Me</button>

<button @click="fn2('hi', $event)">Click Me</button>
<button @click="e => fn2('hi', e)">Click Me</button>

js

const fn1 = (event) => {
  console.log(event)
}

const fn2 = (msg, event) => {
  console.log('fn2', msg, event)
}

事件修饰符

• .stop：相当于 event.stopPropagation()。
• .prevent：相当于 event.preventDefault()。
• .self：相当于 event.target === event.currentTarget。
• .capture：相当于 addEventListener 的捕获模式（useCapture）、{ capture: true } 选项。
• .once：相当于 addEventListener 的 { once: true } 选项。
• .passive：相当于 addEventListener 的 { passive: true } 选项。

<!-- 单击事件将停止传递 -->
<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>

按键修饰符

键盘按键修饰符

Vue 提供了别名：

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

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

<!--
  可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
  https://developer.mozilla.org/zh-CN/docs/Web/API/UI_Events/Keyboard_event_key_values
-->
<input @keyup.page-down="onPageDown" />

鼠标按键修饰符

Vue 提供了别名：

• .left
• .right
• .middle

.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>

动态事件

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>