Vue3事件处理知识汇总
编程小白也能懂的Vue事件处理指南 – 详细知识点讲解 + 实例演示
1基础事件绑定
在Vue中，使用 v-on 指令（简写为 @）来监听DOM事件。
就像给元素添加一个”耳朵”，当该元素上发生指定事件（如点击）时，Vue就会执行相应的方法。
<!-- 完整写法 -->
<button v-on:click="sayHello">打招呼</button>
<!-- 简写形式（更常用） -->
<button @click="sayHello">打招呼</button>{{ message }}
2内联事件处理
简单的事件处理可以直接写在模板里，不需要在methods中定义方法。
注意：只适合非常简单的逻辑，复杂逻辑还是推荐使用methods。
<button @click="count++">增加计数</button>
当前计数: {{ count }}当前计数: {{ count }}
3访问原始事件对象
有时需要访问原始的DOM事件对象（例如获取鼠标位置）。
可以使用特殊变量 $event 将它传入方法。
<button @click="showEventInfo($event)">
显示事件信息
</button>{{ eventInfo }}
4事件修饰符
修饰符是以点开头的特殊后缀，用于改变事件处理的行为。
可以理解为给事件添加的”特殊条件”或”后处理”。
<div @click.stop="handleClick"></div>
<form @submit.prevent="onSubmit"></form>
<div @click.capture="handleClick"></div>
<div @click.self="handleClick"></div>
<button @click.once="doSomething"></button>
<div @touchmove.passive="onTouchMove"></div>
外部区域 (点击背景触发)
{{ modifierMessage }}
5按键修饰符
用于监听键盘事件，如按下特定键时触发。
常用按键修饰符：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
<input
@keyup.enter="submitForm"
@keyup.esc="clearInput"
placeholder="按Enter提交，Esc清除"
>{{ keyMessage }}
6系统修饰键
用于组合键操作，如按下Ctrl+点击、Alt+Enter等。
常用修饰键：.ctrl, .alt, .shift, .meta（Mac上的Command键或Windows上的Win键）
⚠️ 注意：这些按键需要与其他按键一起使用才有效，单独按下系统修饰键不会触发事件。
<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Ctrl+点击我</div>
<!-- Alt + Enter -->
<input @keyup.alt.enter="specialSubmit">{{ systemMessage }}
7鼠标按钮修饰符
用于监听特定的鼠标按键。
常用按键：.left（左键）, .right（右键）, .middle（中键/滚轮）
⚠️ 右键点击事件需要注意：浏览器通常会显示默认的上下文菜单，你可能需要同时使用 .prevent 修饰符来阻止它
<!-- 左键点击 -->
<div @click.left="leftClick">左键点击区</div>
<!-- 右键点击（阻止默认右键菜单） -->
<div @click.right.prevent="rightClick">右键点击区</div>在此区域点击不同鼠标按钮
(右键点击已被阻止默认菜单)
{{ mouseMessage }}