Vue的鼠标事件

当在Vue.js中处理鼠标事件时，你可以使用v-on指令来绑定和监听不同的鼠标事件。

<template>
  <div>
    <button v-on:mouseover="MouseOver">鼠标移入</button>
    <button v-on:mouseout="MouseOut">鼠标移出</button>
    <div v-on:mousedown="MouseDown">鼠标按下</div>
    <div v-on:mouseup="MouseUp">鼠标松开</div>
    <div v-on:mousemove="MouseMove">鼠标移动</div>
  </div>
</template>

<script>
export default {
  methods: {
    MouseOver() {
      console.log('鼠标移入');
    },
   MouseOut() {
      console.log('鼠标移出');
    },
    MouseDown() {
      console.log('鼠标按下');
    },
    MouseUp() {
      console.log('鼠标松开');
    },
    MouseMove() {
      console.log('鼠标移动');
    }
  }
}
</script>

我们使用v-on指令来分别绑定了mouseover、mouseout、mousedown、mouseup和mousemove事件。当鼠标在相应元素上触发这些事件时，绑定的方法会被调用，并在F12控制台输出相应的消息。

v-on指令也可以跟事件修饰符一起使用，例如.stop、.prevent等，来进一步定制鼠标事件的行为。