vue监听DOM事件

在Vue.js中，监听DOM事件通常通过`v-on`指令或者`methods`中定义的方法来实现。以下是基本步骤：

1. **使用v-on指令**: 你可以直接在HTML元素上绑定自定义事件，例如点击、鼠标移动等。例如：

   <button v-on:click="handleClick">点击我</button>

这里，`handleClick`是一个在Vue实例的`methods`对象中定义的方法。

2. **定义方法**:

   data() {
     return {
       //...
     }
   },
   methods: {
     handleClick() {
       // 事件处理逻辑
     }
   }

3. **阻止默认行为和冒泡**:
如果需要阻止默认行为（如表单提交）或阻止事件向上冒泡，可以在事件处理器中添加`.stop()`：

   handleClick(e) {
     e.preventDefault();
   }

4. **使用计算属性和响应式特性**:
如果你想在数据变化时自动更新视图，可以结合使用计算属性或者模板的`v-bind`绑定事件：

   <div @mouseenter="computedValue = true" @mouseleave="computedValue = false"></div>