一、事件处理
使用v-on或者@后面加事件：
<template>
<button v-on:click="addCount()">{
{count}}</button>
</template>二、事件传参
传event：
不传参时，默认自动接收
event传自定义参数时，需显式传递
$event
三、事件修饰符
1. 基础修饰符
| 修饰符 | 作用 | 示例 |
|---|---|---|
.stop |
阻止事件冒泡 | @click.stop="handler" |
.prevent |
阻止默认行为 | @submit.prevent="handler" |
.capture |
使用捕获模式（事件从外向内触发） | @click.capture="handler" |
.self |
仅当事件在元素自身触发时执行 | @click.self="handler" |
.once |
事件只触发一次 | @click.once="handler" |
.passive |
提升滚动性能（与 .prevent 冲突） |
|
2. 按键修饰符
| 修饰符 | 作用 | 示例 |
|---|---|---|
.enter |
回车键触发 | @keyup.enter="handler" |
.tab |
Tab 键触发 | @keydown.tab="handler" |
.esc |
ESC 键触发 | @keyup.esc="handler" |
.space |
空格键触发 | @keyup.space="handler" |
.up |
上箭头键触发 | @keyup.up="handler" |
.down |
下箭头键触发 | @keyup.down="handler" |
.left |
左箭头键触发 | @keyup.left="handler" |
.right |
右箭头键触发 | @keyup.right="handler" |
.ctrl |
Ctrl 键组合触发 | @click.ctrl="handler" |
.exact |
精确匹配按键组合（无其他键按下） | @click.ctrl.exact="handler" |
3. 鼠标修饰符
| 修饰符 | 作用 | 示例 |
|---|---|---|
.left |
鼠标左键触发 | @mousedown.left="handler" |
.right |
鼠标右键触发 | @mousedown.right="handler" |
.middle |
鼠标中键触发 | @mousedown.middle="handler" |
Vue 支持所有原生 DOM 事件，以下是一些常见事件：
| 事件类型 | 触发场景 | 示例 |
|---|---|---|
click |
点击元素 | @click="handler" |
dblclick |
双击元素 | @dblclick="handler" |
input |
输入框内容变化（实时触发） | @input="handler" |
change |
表单元素值变化（失焦后触发） | @change="handler" |
submit |
表单提交 | @submit="handler" |
keydown |
键盘按下 | @keydown="handler" |
keyup |
键盘释放 | @keyup="handler" |
mousedown |
鼠标按下 | @mousedown="handler" |
mouseup |
鼠标释放 | @mouseup="handler" |
mousemove |
鼠标移动 | @mousemove="handler" |
mouseenter |
鼠标进入元素 | @mouseenter="handler" |
mouseleave |
鼠标离开元素 | @mouseleave="handler" |
scroll |
元素滚动 | @scroll="handler" |
focus |
元素获得焦点 | @focus="handler" |
blur |
元素失去焦点 | @blur="handler" |