vue 相关事件

Vue.js 提供了许多内置的事件处理机制，使得开发者能够轻松地处理组件内的用户交互。以下是一些常用的Vue事件相关概念和用法：

1. v-on 指令

• 简写形式：@ 是 v-on 的简写，用于绑定事件监听器。

  <button @click="doSomething">点击我</button>
  

• 方法调用：事件名称后跟一个等号及调用的方法名。

2. 事件修饰符

Vue提供了多种事件修饰符，用于改变事件的行为：

• .stop：调用 event.stopPropagation() 阻止事件冒泡。
• .prevent：调用 event.preventDefault() 阻止默认行为，如表单提交或链接跳转。
• .capture：使用事件捕获模式。
• .self：只有当事件是从元素本身（而非子元素）触发时才触发回调。
• .once：事件只触发一次。
• .passive：在支持的浏览器中，传递 { passive: true } 给 addEventListener。

3. 键盘事件修饰符

• .enter、.tab、.delete(或 .del) 等，监听特定按键。

4. 系统修饰键

Vue允许你在事件监听器中使用系统修饰键（如 ctrl, alt, shift, meta）的缩写：

• .ctrl
• .alt
• .shift
• .meta（在Mac上为 Command，Windows/Linux上为 Ctrl）

5. 自定义事件

Vue组件间通信的一种方式是使用自定义事件。在子组件中使用 $emit 触发事件，在父组件中使用 v-on 或 @ 监听。

• 子组件触发事件：

  this.$emit('eventName', eventData);
  

• 父组件监听事件：

  <child-component @eventName="parentMethod"></child-component>
  

6. 事件总线（Event Bus）

为了在非父子关系的组件间传递事件，可以创建一个“事件总线”——一个空的Vue实例，用作中央事件处理器。

7. .native 修饰符

用于监听原生DOM事件，而不是Vue组件上的自定义事件。

<div @click.native="handleClick"></div>

8. keyup, keydown, keypress

Vue同样支持原生的键盘事件，可以直接通过 @keydown, @keyup, @keypress 绑定。

9. v-model

虽然v-model主要用作双向数据绑定，但它也与事件紧密相关，实际上是input事件和:value属性的语法糖。

10. 事件参数

可以通过 $event 访问原生DOM事件对象。

<button @click="handleClick($event)">点击</button>

在方法中：

methods: {
  handleClick(event) {
    console.log(event.target);
  }
}

了解并熟练运用这些事件相关的概念和技巧，能让你在Vue开发中更加游刃有余地处理各种用户交互场景。