From 79b5f6da26609529254e558502fab0bea4822670 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 11 Oct 2022 09:39:47 +0800
Subject: [PATCH] doc: update `vue2.md`. (#5)

---
 docs/vue2.md | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 161 insertions(+)

diff --git a/docs/vue2.md b/docs/vue2.md
index fc8cd2b..51d8266 100644
--- a/docs/vue2.md
+++ b/docs/vue2.md
@@ -647,6 +647,167 @@ Jane Doe
 
 `2.2.0+` 的版本里，当在组件上使用 `v-for` 时，`key` 现在是必须的
 
+事件处理
+---
+
+### 监听事件
+
+```html {2}
+<div id="example-1">
+  <button v-on:click="counter += 1">
+    +1
+  </button>
+  <p>按钮已被点击 {{ counter }} 次。</p>
+</div>
+```
+
+```js
+var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    counter: 0
+  }
+})
+```
+
+### 事件处理方法
+<!--rehype:wrap-class=row-span-2-->
+
+```html {3}
+<div id="example-2">
+  <!-- `greet` 是在下面定义的方法名 -->
+  <button v-on:click="greet">
+    你好
+  </button>
+</div>
+```
+
+```js
+var example2 = new Vue({
+  el: '#example-2',
+  data: {
+    name: 'Vue.js'
+  },
+  // 在 `methods` 对象中定义方法
+  methods: {
+    greet: function (event) {
+      // `this` 在方法里指向当前 Vue 实例
+      alert('Hello ' + this.name + '!')
+      // `event` 是原生 DOM 事件
+      if (event) {
+        alert(event.target.tagName)
+      }
+    }
+  }
+})
+
+// 也可以用 JavaScript 直接调用方法
+example2.greet() // => 'Hello Vue.js!'
+```
+
+### 内联处理器中的方法
+<!--rehype:wrap-class=row-span-2-->
+
+```html {2,5}
+<div id="example-3">
+  <button v-on:click="say('hi')">
+    弹出 hi
+  </button>
+  <button v-on:click="say('what')">
+    弹出 what
+  </button>
+</div>
+```
+
+```js {4}
+new Vue({
+  el: '#example-3',
+  methods: {
+    say: function (message) {
+      alert(message)
+    }
+  }
+})
+```
+
+访问原始的 DOM 事件，用特殊变量 $event
+
+```html
+<button v-on:click="say('what', $event)">
+  提交
+</button>
+```
+
+```js
+methods: {
+  say: function (message, event) {
+    // 现在我们可以访问原生事件对象
+    if (event) {
+      event.preventDefault()
+    }
+    alert(message)
+  }
+}
+```
+
+### 事件修饰符
+
+```html
+<!-- 阻止单击事件继续传播 -->
+<a v-on:click.stop="doThis"></a>
+<!-- 提交事件不再重载页面 -->
+<form v-on:submit.prevent="submit"></form>
+<!-- 修饰符可以串联 -->
+<a v-on:click.stop.prevent="doThat"></a>
+<!-- 只有修饰符 -->
+<form v-on:submit.prevent></form>
+<!-- 添加事件监听器时使用事件捕获模式 -->
+<!-- 即内部元素触发的事件先在此处理 -->
+<!-- 然后交由内部元素进行处理 -->
+<div v-on:click.capture="doThis">...</div>
+<!-- 当 event.target 是当前元素自身时触发 -->
+<!-- 即事件不是从内部元素触发的 -->
+<div v-on:click.self="doThat">...</div>
+<!-- 点击事件将只会触发一次 -->
+<a v-on:click.once="doThis"></a>
+```
+
+### 事件修饰符 passive
+
+```html
+<!-- 滚动事件的默认行为(即滚动行为)会立即触发 -->
+<!-- 而不会等待 `onScroll` 完成  -->
+<!-- 包含 event.preventDefault() 的情况 -->
+<p v-on:scroll.passive="onScroll">...</p>
+```
+
+这个 `.passive` [修饰符](#v-on-事件修饰符)尤其能够提升移动端的性能。
+
+### 按键修饰符
+
+```html
+<!-- 在 key 是 Enter 时调用 vm.submit() -->
+<input v-on:keyup.enter="submit">
+<!-- 在 key 是 PageDown 时被调用 -->
+<input v-on:keyup.page-down="onPageDown">
+<!-- Alt + C -->
+<input v-on:keyup.alt.67="clear">
+<!-- Ctrl + Click -->
+<div v-on:click.ctrl="doSomething">
+```
+
+
+### .exact 修饰符
+
+```html
+<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button v-on:click.ctrl="onClick">
+<!-- 有且只有 Ctrl 被按下的时候才触发 -->
+<button v-on:click.ctrl.exact="ctrlClick">
+<!-- 没有任何系统修饰符被按下的时候才触发 -->
+<button v-on:click.exact="onClick">
+```
+
 Vue 2 API 参考
 ---