Erfahren Sie, wie Sie Ihr Event-Handling mit der v-on-Direktive von Vue verbessern.
Das Abhören von Benutzerereignissen ist ein wesentlicher Bestandteil jeder responsiven Web-App, und Vue-Apps bilden da keine Ausnahme. Vue bietet mit seiner v-on-Direktive eine einfache und effiziente Möglichkeit, Ereignisse zu verarbeiten.
Was ist Ereignisbindung in Vue?
Die Ereignisbindung ist eine Funktion von Vue.js, mit der Sie einen Ereignis-Listener an ein Ereignis anhängen können Dokumentobjektmodell (DOM) Element. Wenn ein Ereignis auftritt, löst der Ereignis-Listener eine Aktion oder Reaktion in Ihrer Vue-App aus.
Sie können eine Ereignisbindung in Vue mit dem erreichen v-on Richtlinie. Mit dieser Anweisung kann Ihre App auf Benutzerereignisse wie Klick-, Eingabe- oder Tastenereignisse warten.
So fügen Sie einen Ereignis-Listener an ein Element an: v-on, fügen Sie den Ereignisnamen als Parameter zur Direktive hinzu:
<html>
<Kopf>
<Skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis=„App“>
<Tastev-on: klicken=„Zähler++“>Klick michTaste>
<P>{{ Schalter}}P>
div>
<Skript>
const app = Vue.createApp({
Daten() {
zurückkehren {
Text: „Vue ist großartig!“,
Zähler: 0
}
}
})
app.mount('#app')
Skript>
Körper>
html>
Der obige Codeblock zeigt ein Beispiel einer Vue-App, die auf a lauscht klicken Fall. Der Codeblock verwendet a Taste um die zu erhöhen Schalter Wert in der Dateneigenschaft der Vue-Instanz um eins.
Der obige Codeblock bindet den JavaScript-Ausdruck Zähler++ zu den Schaltflächen klicken Veranstaltung mit der v-on Richtlinie. Vue verwendet die @ Zeichen als Abkürzung anstelle von v-on Richtlinie aufgrund v-onHäufige Verwendung:
<Taste @klicken=„Zähler++“>Klick michTaste>
Die Ereignisbindung in Vue ist nicht auf Klickereignisse beschränkt. Vue verarbeitet andere Ereignisse wie Tastendruckereignisse, Mouseover-Ereignisse und mehr.
Um eines dieser Ereignisse an das zu binden v-on Richtlinie, ersetzen Sie die klicken event mit dem Namen des gewünschten Events:
<Taste @keydown.enter=„Zähler++“>Klick michTaste>
Der obige Code richtet einen Ereignis-Listener ein Taste das hört auf die Taste nach unten Fall. Wenn eine beliebige Taste gedrückt wird, während die Schaltfläche den Fokus hat, wertet Vue dies aus Zähler++ Ausdruck.
In den meisten Vue-Apps können Sie komplexere Logik basierend auf bestimmten auftretenden Ereignissen verarbeiten. Ereignisse und Methoden arbeiten Hand in Hand, um App-Aktionen basierend auf einem Ereignis auszuführen.
Die Methodeneigenschaft in Optionsobjekt von Vue enthält wichtige Funktionen, die Ihre Vue-App für eine verbesserte Reaktionsfähigkeit benötigt. Mit der Eigenschaft „methods“ in Vue können Sie komplexe Logik basierend auf Ereignissen verarbeiten.
Hier ist ein Beispiel einer Vue-App, die von der Methodeneigenschaft verarbeitete Ereignisse anzeigt:
<html>
<Kopf>
<Skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis=„App“>
<Taste @klicken="Zuwachs">1 hinzufügenTaste>
<Taste @klicken="reduzieren">1 reduzierenTaste>
<P>{{ Schalter }}P>
div>
<Skript>
const app = Vue.createApp({
Daten() {
zurückkehren {
Text: „Vue ist großartig!“,
Zähler: 0
}
},
Methoden: {
Zuwachs(){
this.counter = this.counter + 1
},
reduzieren() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
Skript>
Körper>
html>
Die obige Vue-App zeigt, wie Ereignisse mit Methoden verknüpft werden. Die App verfügt über zwei Schaltflächen, auf die Benutzer klicken können, um den Zählerwert in der Dateneigenschaft zu erhöhen oder zu verringern.
Dies erreicht die App mit dem @klicken Richtlinie. Der @klicken Die Direktive verweist auf die Funktionen in der Methodeneigenschaft, um den Zählerwert zu manipulieren.
Wenn Sie ein Argument mit dem Klickereignis verknüpfen, können Sie die Inkrementierungs- und Reduzierungsmethoden anpassen, um den Zählerwert basierend auf dem Argument, das Sie an die Methode übergeben, hinzuzufügen oder zu verringern.
Etwa so:
<Körper>
<divAusweis=„App“>
<Taste @klicken=„Inkrement (5)“>Addiere 5Taste><Taste @klicken=„reduzieren (3)“>reduzieren 3Taste>
<P>{{ Schalter }}P>
div><Skript>
const app = Vue.createApp({
Daten() {
zurückkehren {
Text: „Vue ist großartig!“,
Zähler: 0
}
},
Methoden: {
Inkrement (Anzahl){
this.counter = this.counter + num
},
reduzieren (Anzahl) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
Skript>
Körper>
Dieser Codeblock erweitert die vorherige Vue-App und ermöglicht die Übergabe von Argumenten an die Methoden, die mit dem Click-Event-Listener auf der Schaltfläche verknüpft sind.
Die Methoden inkrementieren und reduzieren in der Vue-Instanz benötigen ein Argument num, um die Zählereigenschaft zu erhöhen oder zu reduzieren.
Dieses Beispiel zeigt, wie Sie mit Argumenten arbeiten können, wenn Sie Methoden mit Ereignissen in Vue verknüpfen. Die Verknüpfung von Methoden mit Ereignissen kann dazu beitragen, Vue-Apps interaktiver zu gestalten.
Erkundung der Verhinderungs- und Stopp-Modifikatoren in Vue
Mit Ereignismodifikatoren in Vue können Sie bessere Ereignis-Listener erstellen, die auf die spezifischen Anforderungen Ihrer Anwendung zugeschnitten sind. Um diese Ereignismodifikatoren zu nutzen, verketten Sie die Modifikatoren mit Ereignissen in Vue.
Zum Beispiel:
<form @einreichen.verhindern=„handleSubmit“>
<EingangTyp="Text"V-Modell="Text">
<TasteTyp="einreichen">EinreichenTaste>
form>
Der obige Codeblock verkettet die verhindern Modifikator für das Submit-Ereignis. Der verhindern Der Modifikator wird häufig bei der Arbeit mit Formularen in Vue verwendet.
Der verhindern Der Zweck des Modifikators besteht darin, das Standardverhalten der Formularübermittlung zu verhindern, das darin besteht, die Seite neu zu laden. Benutzen verhindern, Vue kann seine Prozesse währenddessen fortsetzen handleSubmit Die Methode kümmert sich um die Formularübermittlung.
Ein weiteres Beispiel für einen sehr nützlichen Modifikator ist der stoppen Ereignismodifikator. Der stoppen Der Ereignismodifikator verhindert, dass sich ein Ereignis weiter oben im DOM-Baum ausbreitet.
Normalerweise sprudelt das Ereignis eines untergeordneten HTML-Elements durch den DOM-Baum und aktiviert alle an übergeordnete Elemente angehängten Ereignis-Listener. Dies können Sie verhindern Ereignisausbreitung mit dem stoppen Modifikator und verhindern, dass das Ereignis weitere Ereignis-Listener auslöst.
Um zu verstehen, wie die stoppen Der Modifikator stoppt die Weitergabe von Ereignissen weiter oben in einem DOM-Baum. Betrachten Sie den folgenden Codeblock:
<Körper>
<divAusweis=„App“>
<div @klicken=„outerClick“Klasse="äußere">
<div @klicken.stoppen=„innerClick“Klasse="innere">
<Taste @klicken=„buttonClick“Klasse="Taste">Klick michTaste>
div>
div>
div>
<Skript>
const app = Vue.createApp({
Methoden: {
OuterClick() {
console.log('Äußerer Klick')
},
innerClick() {
console.log('Innerer Klick')
},
buttonClick() {
console.log('Schaltflächenklick')
}
}
});
app.mount("#app");
Skript>
Körper>
Der obige Codeblock verfügt über drei Ereignis-Listener, die an drei verschiedene Elemente angehängt sind. Der Taste Das Element befindet sich innerhalb des Div mit dem innere Klasse, während das Div mit dem innere Die Klasse befindet sich innerhalb des Div mit dem äußere Klasse.
Jedes der drei Elemente wartet auf a klicken Ereignis und protokolliert in der Konsole den Namen des angeklickten HTML-Elements. Nachfolgend finden Sie zusätzliche CSS-Stile für Klassen, um den obigen Codeblock leichter verständlich zu machen:
<Kopf>
<Stil>
.outer {
Polsterung: 20px;
Hintergrundfarbe: schwarz;
}
.innere {
Polsterung: 20px;
Hintergrundfarbe: grau;
}
Taste {
Polsterung: 10px;
Hintergrundfarbe: weiß;
Rand: 2 Pixel einfarbig schwarz;
Schriftgröße: 16px;
Schriftdicke: fett;
Cursor: Zeiger;
}
Stil>
Kopf>Beim Ausführen des Programms sieht die erstellte Vue-App folgendermaßen aus:
Beachten Sie, dass das Programm das aufruft, wenn Sie auf die Schaltfläche klicken SchaltflächeKlicken -Methode und protokolliert eine Nachricht an die Konsole. Das Programm ruft auch die auf innerClick Methode.
Das Programm ruft jedoch nicht auf äußerer Klick Methode, weil der Codeblock a hinzugefügt hat stoppen Modifikator für die innerClick Ereignis-Listener. Dadurch wird verhindert, dass sich das Ereignis weiter oben im DOM-Baum ausbreitet.
Ohne das stoppen Modifikator, das Programm ruft den auf SchaltflächeKlicken Methode, wenn Sie auf die Schaltfläche klicken, und das Ereignis breitet sich weiter im Baum aus und erreicht das innerClick Methode und dann die äußerer Klick Methode.
Umgang mit Ereignissen in Web-Apps
Sie haben gelernt, wie Sie mithilfe der Ereignisbindung in Vue Ereignis-Listener an Elemente anhängen und wie Sie Methoden aufrufen, wenn Ereignisse auftreten. Sie haben auch verstanden, wie Sie Ereignismodifikatoren verwenden, um das Ereignisverhalten anzupassen.
Web-Apps sind zur Ausführung von Funktionen auf bestimmte Benutzerereignisse angewiesen. JavaScript verfügt über viele integrierte Methoden zum Erfassen und Behandeln einer Vielzahl dieser Ereignisse. Diese Veranstaltungen helfen beim Erstellen interaktiver Apps.