vue 3 中可直接在单个元素上并列绑定多个事件指令，如 @mouseenter 和 @mouseleave；也可用 v-on 对象语法批量绑定；常配合响应式数据实现悬停效果；推荐优先使用 mouseenter/mouseleave 避免冒泡干扰。
在 Vue 3 中，为一个元素绑定多个不同类型的事件（比如 @mouseenter 和 @mouseleave）非常直接，只需在同一标签内并列写上多个事件指令即可。
同一元素写多个 @ 事件指令
Vue 允许你在单个元素上同时使用多个事件修饰符，语法清晰、互不干扰。例如：
<div>悬停区域</div>- 两个事件各自独立触发，
onEnter在鼠标进入时执行，onLeave在鼠标离开时执行 - 不需要额外封装或判断，Vue 会自动识别并绑定对应原生 DOM 事件
用对象语法批量绑定（适合事件较多时）
当事件类型多于三四个，或者需要动态控制绑定关系，推荐使用 v-on 的对象形式：
<div v-on="{ mouseenter: onEnter, mouseleave: onLeave, click: handleClick }"></div>- 所有事件名作为对象键，对应处理函数作为值
- 支持响应式更新：如果
onEnter被设为null或undefined，该事件将自动解绑
配合状态做样式或行为切换
常见用途是配合响应式数据实现悬停效果，比如卡片高亮、工具提示显示/隐藏：
- 在
data或ref中定义isHovered: false <div :class="{ 'bg-blue-50': isHovered }" true false></div>- 也可在
methods中封装逻辑，便于复用或加延迟、防抖等处理
注意区分 mouseenter/mouseleave 与 mouseover/mouseout
Vue 绑定的是标准 DOM 事件，所以语义很重要：
-
@mouseenter和@mouseleave不会冒泡，只在目标元素边界触发，适合精准悬停 -
@mouseover和@mouseout会冒泡，子元素进出也会触发，容易误判 - 除非有特殊需求，优先选
mouseenter/mouseleave
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
