Event-Handling


Verzeichnis


Hörereignisse

Sie können den Befehl v-on verwenden, um das DOM zu überwachen Ereignis ausführen und bei Auslösung JavaScript-Code ausführen.

Beispiel: 

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Ergebnis:

2.gif


Ereignisverarbeitungsmethoden

Viele Ereignisverarbeitungslogiken sind jedoch komplizierter, also verwenden Sie sie einfach Es ist nicht möglich, JavaScript-Code innerhalb der v-on-Direktive zu schreiben. Daher kann v-on auch den Namen einer aufzurufenden Methode erhalten.

Beispiel: 

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

Ergebnis:

1.gif


Methoden in Inline-Handlern

Zusätzlich zur direkten Bindung an eine Methode kann sie auch inline sein Aufrufende Methode in JavaScript-Anweisung: 

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

Ergebnis:

3.gif


Manchmal ist es auch notwendig, auf den Inline-Anweisungsprozessor Raw zuzugreifen DOM-Ereignisse. Sie können es mit der speziellen Variablen $event an die Methode übergeben: 

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}


Ereignismodifikatoren

Aufruf event.preventDefault() in einem Event-Handler oder event.stopPropagation() ist eine sehr häufige Anforderung. Obwohl wir dies leicht in Methoden implementieren können, ist es besser, Methoden mit reiner Datenlogik zu haben, anstatt sich mit DOM-Ereignisdetails zu befassen.

Um dieses Problem zu lösen, stellt Vue.js den v-on Ereignismodifikator für bereit. Wie bereits erwähnt, werden Modifikatoren durch Anweisungssuffixe dargestellt, die mit einem Punkt beginnen.

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></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>

Bei der Verwendung von Modifikatoren ist die Reihenfolge des entsprechenden Codes wichtig; werden in der gleichen Reihenfolge generiert. Daher blockiert die Verwendung von v-on:click.prevent.self alle Klicks auf , während v-on:click.self.prevent nur Klicks auf das Element selbst blockiert.

2.1.4 Neu 

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

Im Gegensatz zu anderen Modifikatoren, die nur bei nativen DOM-Ereignissen funktionieren können, kann der Modifikator .once auch in benutzerdefinierten <🎜 verwendet werden > Komponentenereignisse . Wenn Sie die Dokumentation zu Ihren Komponenten nicht gelesen haben, machen Sie sich jetzt keine Sorgen.

2.3.0 Neu

Vue stellt auch den

-Modifikator bereit, der der -Option addEventListener in passive entspricht. .passive

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

Der Modifikator

kann insbesondere die Leistung auf Mobilgeräten verbessern. .passive

Verwenden Sie

und .passive nicht zusammen, da .prevent ignoriert wird und der Browser möglicherweise eine Warnung anzeigt. Denken Sie daran: .prevent teilt dem Browser mit, dass Sie das Standardverhalten des Ereignisses nicht blockieren möchten. .passive


Tastenmodifikatoren

Wenn wir auf Tastaturereignisse achten, brauchen wir oft um detaillierte Schlüssel zu überprüfen. Vue ermöglicht das Hinzufügen von Tastenmodifikatoren zu

beim Abhören von Tastaturereignissen: v-on

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

Sie können jeden gültigen Tastennamen, der durch

KeyboardEvent.key angezeigt wird, direkt in Kebab-Case als Modifikationssymbol umwandeln. 

<input v-on:keyup.page-down="onPageDown">

Im obigen Beispiel wird der Handler nur aufgerufen, wenn

gleich $event.key ist. PageDown


Schlüsselcode

Ereignisnutzung keyCode wurde veraltet und wird möglicherweise von den neuesten Browsern nicht unterstützt.

Die Verwendung der Funktion

ist ebenfalls zulässig: keyCode

<input v-on:keyup.13="submit">

Um bei Bedarf ältere Browser zu unterstützen, stellt Vue Aliase für die am häufigsten verwendeten Schlüsselcodes bereit:

  • .enter

  • .tab

  • .delete (Erfasst die Tasten „Löschen“ und „Rücktaste“)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

Es gibt einige Tasten (.esc und alle Pfeiltasten), die in IE9 einen anderen key Wert haben Wenn Sie IE9 unterstützen möchten, sollten diese integrierten Aliase bevorzugt werden.

Sie können auch global übergeben config.keyCodes ObjektBenutzerdefinierter Schlüsselmodifikator-Alias:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112


Systemmodifikatorschlüssel

2.1.0 Neu

Mit den folgenden Modifikatoren können Sie einen Listener implementieren, der nur dann Maus- oder Tastaturereignisse auslöst, wenn die entsprechende Taste gedrückt wird.

  • .ctrl

  • .alt

  • .shift

  • .meta

Hinweis: Auf der Mac-Systemtastatur entspricht Meta der Befehlstaste (?). Auf der Windows-Systemtastatur entspricht Meta der Windows-Logo-Taste (?). Auf Sun-Betriebssystemtastaturen entspricht Meta der durchgezogenen Gem-Taste (◆). Auf bestimmten anderen Tastaturen, insbesondere denen der MIT- und Lisp-Maschinen und ihren Nachfolgern, wie der Knight-Tastatur und der Space-Cadet-Tastatur, ist Meta als „META“ gekennzeichnet. Auf der Symbolik-Tastatur ist Meta als „META“ oder „Meta“ gekennzeichnet.

Zum Beispiel: 

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

Bitte beachten Sie, dass sich Zusatztasten von normalen Tasten unterscheiden, wenn sie zusammen mit dem Ereignis keyup verwendet werden gedrückt werden, wenn das Ereignis ausgelöst wird. Mit anderen Worten: ctrl kann nur ausgelöst werden, indem andere Tasten losgelassen werden, während keyup.ctrl gedrückt gehalten wird. Und durch einfaches Loslassen von ctrl wird das Ereignis nicht ausgelöst. Wenn Sie dieses Verhalten wünschen, verwenden Sie stattdessen ctrl für keyCode: keyup.17.


.exact.exact

Modifikatoren

2.5.0 Mit den neuen Modifikatoren .exact


können Sie Ereignisse steuern, die durch eine präzise Kombination von Systemmodifikatoren ausgelöst werden. 

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

Maustastenmodifikator

    2.2.0 Neu hinzugefügt

  • .left

    <🎜><🎜><🎜>

  • .right

  • .middle

Diese Modifikatoren beschränken die Handlerfunktion darauf, nur auf zu reagieren bestimmte Maustasten.


Warum auf Ereignisse in HTML achten?

Möglicherweise fällt Ihnen diese Art von Ereignis auf Der Zuhöreransatz steht im Widerspruch zur langjährigen Tradition der Interessenstrennung. Aber keine Sorge, da alle Vue.js-Ereignishandler und -Ausdrücke strikt an das ViewModel der aktuellen Ansicht gebunden sind, verursacht dies keine Wartungsschwierigkeiten. Tatsächlich hat die Verwendung von v-on mehrere Vorteile:

　1. Sie können die entsprechende Methode leicht im JavaScript-Code finden, indem Sie die HTML-Vorlage scannen.

　2. Da Sie Ereignisse in JavaScript nicht manuell binden müssen, kann Ihr ViewModel-Code eine sehr reine Logik sein, vollständig vom DOM entkoppelt und einfacher zu testen.

　3. Wenn ein ViewModel zerstört wird, werden alle Event-Handler automatisch gelöscht. Sie müssen sich keine Gedanken über die Reinigung machen.