vue2鼠标滑过按钮出现框

Vue2中可以通过绑定事件和属性来实现鼠标滑过按钮出现框的效果。

首先，在Vue组件的template中，可以使用v-bind指令绑定一个属性来控制框的显示与隐藏。比如：

<template>
  <div>
    <button @mouseenter="showBox=true" @mouseleave="showBox=false">按钮</button>
    <div v-if="showBox" class="box">这是一个框</div>
  </div>
</template>

在上述代码中，我们给按钮绑定了mouseenter和mouseleave事件，并分别在事件处理函数中设置showBox属性为true和false。在框的div元素中，使用v-if指令，通过showBox属性的值来决定框是否显示。

然后，在Vue组件的script中，声明showBox属性，并初始化为false，如下所示：

<script>
export default {
  data() {
    return {
      showBox: false
    }
  }
}
</script>

通过以上代码，我们在Vue组件中添加了一个data对象，并在对象中声明了showBox属性，并将其初始化为false。

最后，在CSS样式中，可以定义框的样式，比如：

<style>
.box {
  background-color: #eaeaea;
  padding: 10px;
  border: 1px solid #ccc;
  position: absolute;
  top: 30px;
  left: 0;
}
</style>

在上述代码中，我们定义了框的背景颜色、内边距、边框样式和位置。

通过以上步骤，我们就可以实现当鼠标滑过按钮时，显示一个框的效果了。