vue3鼠标悬停事件

Vue3 中的鼠标悬停事件通常通过 `v-on.mouseenter` 和 `v-on.mouseleave` 绑定到元素上实现。这两个指令用于监听鼠标进入和离开某个元素的事件。例如：

<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    鼠标悬停这里
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseEnter() {
      console.log('鼠标进入了元素');
    },
    
    handleMouseLeave() {
      console.log('鼠标离开了元素');
    }
  }
}
</script>

在这个例子中，当鼠标指针移入 `<div>` 元素时，`handleMouseEnter` 函数会被调用，鼠标离开时则会调用 `handleMouseLeave`。记住，在 Vue3 中使用的是点解操作符 `.on` 替代了模板绑定，比如 `v-on:`。