From 5bc44ac032392ba6fb173ae63d809a679c19c8f3 Mon Sep 17 00:00:00 2001
From: Xicheng Guo <xicheng_guo@wistron.com>
Date: Mon, 14 Oct 2024 15:29:43 +0800
Subject: [PATCH] update docs

---
 src/.vitepress/sidebars/vue.yaml             | 18 +++++++++++++++
 src/frontend/vue/event-handling/arguments.md | 13 +++++++++++
 src/frontend/vue/event-handling/handler.md   | 23 ++++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 src/frontend/vue/event-handling/arguments.md
 create mode 100644 src/frontend/vue/event-handling/handler.md

diff --git a/src/.vitepress/sidebars/vue.yaml b/src/.vitepress/sidebars/vue.yaml
index 300d065..19d7284 100644
--- a/src/.vitepress/sidebars/vue.yaml
+++ b/src/.vitepress/sidebars/vue.yaml
@@ -115,6 +115,24 @@
                 link: /frontend/vue/watch/watch-effect#watcheffect-的使用场景
               - text: 比较 watch 和 watcheffect
                 link: /frontend/vue/watch/watch-effect#比较-watch-和-watcheffect
+      - text: 事件监听
+        items:
+          - text: 事件处理器
+            link: /frontend/vue/event-handling/handler
+            items:
+              - text: 监听事件
+                link: /frontend/vue/event-handling/handler#监听事件
+              - text: 内联事件处理器
+                link: /frontend/vue/event-handling/handler#内联事件处理器
+              - text: 方法事件处理器
+                link: /frontend/vue/event-handling/handler#方法事件处理器
+          - text: 事件处理参数
+            link: /frontend/vue/event-handling/arguments
+            items:
+              - text: 访问自定义参数
+                link: /frontend/vue/event-handling/arguments#访问自定义参数
+              - text: 访问原生事件参数
+                link: /frontend/vue/event-handling/arguments#访问原生事件参数
       - text: 表单
         collapsed: true
         items:
diff --git a/src/frontend/vue/event-handling/arguments.md b/src/frontend/vue/event-handling/arguments.md
new file mode 100644
index 0000000..f0d848b
--- /dev/null
+++ b/src/frontend/vue/event-handling/arguments.md
@@ -0,0 +1,13 @@
+# 事件处理参数
+
+## 访问自定义参数
+
+内联事件处理器允许传入自定义参数以代替原生事件。
+
+<<< @/../projects/vue-sandbox/src/components/EventHandling/AccessCustomParameters.vue
+
+## 访问原生事件参数
+
+内联事件处理器允许接收一个特殊的`$event`参数或使用内联箭头函数来访问原生事件。
+
+<<< @/../projects/vue-sandbox/src/components/EventHandling/AccessEventParameter.vue
diff --git a/src/frontend/vue/event-handling/handler.md b/src/frontend/vue/event-handling/handler.md
new file mode 100644
index 0000000..3e5b3bf
--- /dev/null
+++ b/src/frontend/vue/event-handling/handler.md
@@ -0,0 +1,23 @@
+# 事件处理器
+
+## 监听事件
+
+使用`v-on`指令（简写为`@`）来监听 DOM 事件。
+
+例如：`v-on:click="handleClick"` 或 `@click="handleClick"`
+
+## 内联事件处理器
+
+事件被触发时执行内联的表达式语句。
+
+<<< @/../projects/vue-sandbox/src/components/EventHandling/InlineHander.vue
+
+## 方法事件处理器
+
+事件被触发时执行一个指向组件上定义的方法的属性名或是路径。
+
+:::tip
+方法事件处理器会自动接收原生 DOM 事件并触发执行。
+:::
+
+<<< @/../projects/vue-sandbox/src/components/EventHandling/MethodHandler.vue