Vue3学习笔记-事件-4
一、事件处理
使用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" |