Analyse der Ereignisverarbeitung in Vue

Dieser Artikel teilt Ihnen die Analyse der Ereignisverarbeitung in Vue mit. Freunde in Not können sich darauf beziehen.

Ziel:

1. Kompetent in Ereignisüberwachungsmethoden, vertraut mit Ereignisverarbeitungsmethoden und verschiedenen Ereignismodifikatoren

2. Die Bedeutung verstehen von Listening-Ereignissen in HTML

Listening-Events (v-on)

1. ähnelt gewöhnlichen on, wie z. B. v-on:click oder @click entspricht gewöhnlichem onclick, v-on ruft die Methoden in den Vue-Instanzmethoden auf

2. v-on kann nicht nur Methoden aufrufen, sondern auch einige js-Ausdrücke ausführen Die Formel

3. kann auf das DOM-Ereignis des Elements zugreifen, indem die spezielle Variable $event

Ereignismodifikator

1. Modifier

   .stop // Ereignisweitergabe verhindern
   .prevent // Standardverhalten verhindern
   .capture // Ereigniserfassungsmodus verwenden (zuerst selbst verarbeiten und dann zur Verarbeitung an interne Elemente übergeben)
   .self // Wird ausgelöst, wenn event.target das aktuelle Element selbst ist (durch andere Elemente verursachte Ereignisse werden nicht wirksam)
   .once // Kann nur einmal ausgelöst werden
   .passive // ​​​​Let Der Standardverhaltensauslöser wird sofort
   

2. Modifikator nach dem Ereignisnamen hinzugefügt und kann verkettet werden, oder nur der Modifikator

例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

Schlüsselereignismodifikator

1. Tastaturereignis

@keydown // Tastaturdruckereignis
@keyup // Tastaturfreigabeereignis

2. Modifikator (Tastenalias)

.enter
.tab
.delete (erfasst die Tasten „Löschen“ und „Rücktaste“)
.esc
.space
.up
.down
.left
.right

Darüber hinaus können Sie den Tastenmodifikator-Alias ​​über das globale config.keyCodes-Objekt anpassen:

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

3. Änderung der Systemsteuerungskombination

.ctrl
.alt
. Shift
.meta

 <!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<p @click.ctrl="doSomething">Do something</p>

Warum auf Ereignisse in HTML achten

Im Wesentlichen sind alle Ereignisbehandlungsmethoden und -ausdrücke von Vue.js streng an das ViewModel der aktuellen Ansicht gebunden

Mit v -on bietet die folgenden Vorteile:

1. Es ist bequem, die durch die Vorlage gebundenen Ereignisse anzuzeigen und die entsprechende Methode im js-Code leicht zu finden

2. Ereignisse müssen nicht manuell mit js gebunden werden, vom Dom entkoppelt, einfach zu testen

3. Wenn ein ViewModel zerstört wird, werden alle Ereignishandler automatisch gelöscht, ohne sie zu löschen.

Verwandte Empfehlungen:

Analyse der Klassen- und Stilbindung sowie der Bedingungen und Listenwiedergabe in Vue

Vorlage für Vue-Syntax , berechnete Eigenschaften, Analyse von Zuhörern

Das obige ist der detaillierte Inhalt vonAnalyse der Ereignisverarbeitung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!