一、事件处理

使用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 冲突）	@scroll.passive="handler"

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"