详解 Vue3 中的鼠标事件 mousemove、mouseover 和 mouseout - 两个，mouseover - 鼠标移动事件

mouseover事件是指鼠标指针进入元素时触发的事件。通过在HTML模板中使用v-on指令来绑定mouseover事件。

示例代码如下：

<template>
  <div>
    <div @mouseover="handleMouseOver">鼠标悬停在这里</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseOver() {
      console.log('鼠标悬停在元素上');
    }
  }
}
</script>

在上面的示例中，在div元素上使用了@mouseover指令，将其绑定到一个名为handleMouseOver的方法上。当鼠标悬停在该元素上时，handleMouseOver方法会被调用，并输出一条信息。

需要注意的是，由于Vue 3使用了Composition API，可以将mouse事件与其他响应式数据和方法结合使用。例如，可以在handleMouseOver方法中修改data中的某个值来实现一些交互效果。

<template>
  <div>
    <div @mouseover="handleMouseOver">鼠标悬停在这里</div>
    <p v-if="isHovered">鼠标已经悬停在元素上</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({
      isHovered: false
    });

    const handleMouseOver = () => {
      data.isHovered = true;
    };

    return {
      data,
      handleMouseOver
    }
  }
}
</script>

在上面的示例中，使用了reactive函数将data对象包装成响应式对象，并通过调用handleMouseOver方法来修改isHovered的值。根据isHovered的值，我们可以条件地渲染一个p元素。

这就是Vue 3中使用mouseover事件的基本介绍。