一、mouseover 和 mouseenter 的区别
1.mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout

2.mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave

案例代码

<template><divclass="hover-view"@mouseover="mouseover"@mouseenter="mouseenter"@mousemove="mousemove"@mouseout="mouseout"@mouseleave="mouseleave"@mousedown="mousedown"@mouseup="mouseup"></div>
</template><script>
export default {methods: {// 1、进入元素mouseover () {console.log('mouseover')},// 2、进入元素mouseenter () {console.log('mouseenter')},// 3、移动mousemove () {console.log('mousemove')},// 4、离开元素mouseout () {console.log('mouseout')},// 5、离开元素mouseleave () {console.log('mouseleave')},// 6、鼠标在元素上 按下mousedown () {console.log('mousedown')},// 7、鼠标在元素上 抬起mouseup () {console.log('mouseup')}}
}
</script><style>
.hover-view {width: 100px;height: 100px;background-color: red;
}
</style>