编辑“︁Vue.js事件处理”︁

= Vue.js事件处理 =

== 介绍 ==
'''Vue.js事件处理'''是Vue框架中响应用户交互的核心机制，通过`v-on`指令（简写为`@`）实现DOM事件监听。当用户触发点击、输入等操作时，Vue会执行对应的JavaScript方法。与原生事件处理相比，Vue提供了更简洁的语法和自动的`this`绑定。

== 基础语法 ==
=== 直接内联处理 ===
<syntaxhighlight lang="html">
<button v-on:click="counter++">增加计数</button>
<p>当前值: {{ counter }}</p>
</syntaxhighlight>

=== 方法处理器 ===
更推荐将逻辑封装在methods中：
<syntaxhighlight lang="html">
<button @click="greet">打招呼</button>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
methods: {
  greet(event) {
    alert('Hello Vue!');
    console.log(event.target.tagName); // 输出: BUTTON
  }
}
</syntaxhighlight>

== 事件修饰符 ==
Vue提供特殊后缀实现常见DOM事件处理需求：

{| class="wikitable"
! 修饰符 !! 等效原生代码 !! 示例
|-
| `.stop` || `event.stopPropagation()` || `<a @click.stop="doThis">`
|-
| `.prevent` || `event.preventDefault()` || `<form @submit.prevent="onSubmit">`
|-
| `.once` || 自动移除监听器 || `<button @click.once="doThis">`
|}

== 按键修饰符 ==
监听特定键盘事件：
<syntaxhighlight lang="html">
<input @keyup.enter="submit" />
<!-- 等效于 -->
<input @keyup.13="submit" />
</syntaxhighlight>

常用按键别名：`.enter`, `.tab`, `.esc`, `.space`

== 系统修饰键 ==
组合键监听示例：
<syntaxhighlight lang="html">
<button @click.ctrl.exact="onCtrlClick">仅Ctrl+点击触发</button>
</syntaxhighlight>

== 实际案例 ==
=== 购物车操作 ===
<syntaxhighlight lang="html">
<div id="app">
  <button @click="addToCart(item)">加入购物车</button>
  <button @click.right.prevent="showContextMenu(item)">右键查看详情</button>
</div>
</syntaxhighlight>

=== 表单验证 ===
<syntaxhighlight lang="html">
<form @submit.prevent="validateForm">
  <input @blur="validateField('email')" v-model="email">
  <button type="submit">提交</button>
</form>
</syntaxhighlight>

== 高级用法 ==
=== 自定义事件 ===
子组件触发事件：
<syntaxhighlight lang="javascript">
this.$emit('custom-event', payload)
</syntaxhighlight>

父组件监听：
<syntaxhighlight lang="html">
<child-component @custom-event="handleEvent" />
</syntaxhighlight>

=== 事件总线模式 ===
创建全局事件中心：
<syntaxhighlight lang="javascript">
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
</syntaxhighlight>

组件间通信：
<syntaxhighlight lang="javascript">
// 发送方
EventBus.$emit('notification', message)

// 接收方
EventBus.$on('notification', (msg) => {
  console.log(msg)
})
</syntaxhighlight>

== 原理图解 ==
<mermaid>
sequenceDiagram
    participant User
    participant DOM
    participant VueInstance
    User->>DOM: 点击按钮
    DOM->>VueInstance: 触发v-on绑定
    VueInstance->>Methods: 调用对应方法
    Methods-->>DOM: 更新数据
    DOM-->>User: 渲染变化
</mermaid>

== 性能考虑 ==
* 使用`.passive`修饰符优化滚动性能
* 及时销毁组件内的事件监听（`beforeDestroy`钩子中移除）
* 避免在模板中编写复杂表达式

== 常见问题 ==
'''Q: 为什么方法中的`this`能访问到数据？'''<br>
A: Vue自动将所有methods的`this`绑定到组件实例。

'''Q: 如何传递原始DOM事件？'''<br>
A: 使用`$event`变量：
<syntaxhighlight lang="html">
<button @click="warn('Form cannot be submitted.', $event)">
  提交
</button>
</syntaxhighlight>

== 总结 ==
Vue的事件处理系统通过：
# 简化的`v-on`语法
# 智能的`this`绑定
# 修饰符体系
# 自定义事件机制
实现了声明式的事件管理，比原生事件处理更高效且易于维护。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]