本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。

下面是Vue 3中常用的鼠标事件mousemove、mouseover和mouseout的详解。

鼠标移动事件会在鼠标指针在元素内部移动时触发。通过在模板中绑定@mousemove来监听鼠标移动事件。

具体使用方法如下：

在handleMouseMove方法中，可以通过event参数来获取关于鼠标移动事件的信息，例如鼠标的坐标等。

另外，Vue3还提供了@mousemove.stop修饰符，用于阻止事件继续传播。

这样，当鼠标在元素内部移动时，只会触发handleMouseMove方法，不会触发父元素的鼠标移动事件。

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

示例代码如下：

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

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

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

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

mouseout事件是鼠标指针从一个元素移出时触发的事件。它通常用于捕捉鼠标移出元素的操作，并执行相应的操作或逻辑。

使用v-on指令来监听mouseout事件。

下面是一个示例：

在上面的示例中，当鼠标移出元素时，handleMouseOut方法会被调用，并打印出一条消息。

需要注意的是，mouseout事件是冒泡事件，即其会从触发元素开始向上冒泡到最外层的父元素。如果需要阻止冒泡，可以使用event.stopPropagation()方法。

在上面的示例中，当鼠标从子元素移出时，会先触发子元素的mouseout事件，然后再触发父元素的mouseout事件。

Vue 3中的mouseout事件可以通过v-on指令来监听，并且可以在方法中执行相应的逻辑。它是一个冒泡事件，可以通过event.stopPropagation()方法阻止冒泡。