From a1daf05be67e95fb155d3b1bfce3d39a6986c5c1 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Tue, 11 Oct 2022 01:40:34 +0000 Subject: [PATCH] doc: update `vue2.md`. (#5) 79b5f6da26609529254e558502fab0bea4822670 --- docs/vue2.html | 125 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) diff --git a/docs/vue2.html b/docs/vue2.html index 57951ae9..c8c17331 100644 --- a/docs/vue2.html +++ b/docs/vue2.html @@ -472,6 +472,131 @@ ></my-component>

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的

+

事件处理

+

监听事件

+
<div id="example-1">
+  <button v-on:click="counter += 1">
+    +1
+  </button>
+  <p>按钮已被点击 {{ counter }} 次。</p>
+</div>
+
+
var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    counter: 0
+  }
+})
+
+

事件处理方法

+ +
<div id="example-2">
+  <!-- `greet` 是在下面定义的方法名 -->
+  <button v-on:click="greet">
+    你好
+  </button>
+</div>
+
+
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!'
+
+

内联处理器中的方法

+ +
<div id="example-3">
+  <button v-on:click="say('hi')">
+    弹出 hi
+  </button>
+  <button v-on:click="say('what')">
+    弹出 what
+  </button>
+</div>
+
+
new Vue({
+  el: '#example-3',
+  methods: {
+    say: function (message) {
+      alert(message)
+    }
+  }
+})
+
+

访问原始的 DOM 事件，用特殊变量 $event

+
<button v-on:click="say('what', $event)">
+  提交
+</button>
+
+
methods: {
+  say: function (message, event) {
+    // 现在我们可以访问原生事件对象
+    if (event) {
+      event.preventDefault()
+    }
+    alert(message)
+  }
+}
+
+

事件修饰符

+
<!-- 阻止单击事件继续传播 -->
+<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

+
<!-- 滚动事件的默认行为(即滚动行为)会立即触发 -->
+<!-- 而不会等待 `onScroll` 完成  -->
+<!-- 包含 event.preventDefault() 的情况 -->
+<p v-on:scroll.passive="onScroll">...</p>
+
+

这个 .passive 修饰符尤其能够提升移动端的性能。

+

按键修饰符

+
<!-- 在 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 修饰符

+
<!-- 即使 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 参考

全局配置