Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework

1. v-on-Ereignisüberwachung

Um DOM-Ereignisse abzuhören, verwenden Sie die Direktive v-on. Diese Direktive wird normalerweise direkt in der Vorlage verwendet und führt JavaScript-Code aus, wenn das Ereignis ausgelöst wird.

Grundlegende Verwendung der v-on-Direktive

(1) Verwenden Sie in HTML die Direktive v-on, gefolgt von allen nativen Ereignisnamen. Die grundlegende Verwendung ist wie folgt:

<button v-on:click="show">Anzeigen</button>

Binden Sie das Klickereignis an die Show-Methode. Wenn Sie auf die Schaltfläche „Anzeigen“ klicken, wird die Show()-Methode ausgeführt. Die Show()-Methode ist in der Vue-Instanz definiert.

(2) Bei Verwendung der v-on-Direktive bietet Vue.js eine Kurzform der v-on-Direktive, „@“. Der obige Code kann wie folgt umgeschrieben werden:

<button @click="show">Anzeigen</button>

(3) Die einfache Anwendung der v-on-Direktive ist wie folgt:

<div id="box">
			<!--Grundlegende Verwendung von v-on -->
			<button v-on:click="count1++">Zählen</button>
			<p>Der Button wurde {{count1}} Mal angeklickt</p>
			<!--Einfache Verwendung von v-on-->
			<button @click="count2++">Zählen</button>
			<p>Der Button wurde {{count2}} Mal angeklickt</p>
</div>
		   <Skripttyp="text/javascript">
				var vm = neuer Vue({
					el: "#Box",
					Daten:{
						Anzahl1:0,
						Anzahl2:0
					}
					
				});
			</Skript>

Die einfache Verwendung der v-on-Direktive wird unten gezeigt:

Methoden zur Ereignisbehandlung

Wenn Sie die v-on-Direktive verwenden, müssen Sie ein Ereignis über die v-on-Direktive an eine Methode binden, und die gebundene Methode wird in der Methodenoption als Ereignishandler definiert. Der Beispielcode lautet wie folgt:

<div id="box">
			<button v-on:click="show">Anzeigen</button>
		</div>
		   <Skripttyp="text/javascript">
				var vm = neuer Vue({
					el: "#Box",
					Daten:{
						Name: „Xiaoming“,
						Alter: 29,
						Beruf: 'Schauspieler'
					},
					Methoden:{
						anzeigen:Funktion(){
							Alarm('Name:'+dieser.Name+'Alter:'+dieses.Alter+'Beruf:'+dieser.Beruf);
						}
					}
					
				});
			</Skript>

Das Ergebnis der v-on-Direktive, die das Klickereignis an die Anzeigemethode bindet, ist wie folgt:

Verwenden von Inline-JavaScript-Anweisungen

(1) Neben der direkten Bindung an eine Methode unterstützt die Direktive v-on auch Inline-JavaScript-Anweisungen, allerdings kann immer nur eine Anweisung verwendet werden. Der Beispielcode lautet wie folgt:

<div id="box">
			<button v-on:click="show('Tomorrow's Star')">Anzeigen</button>
		</div>
		   <Skripttyp="text/javascript">
				var vm = neuer Vue({
					el: "#Box",
					Methoden:{
						anzeigen:Funktion(Nachricht){
							alert('Nachricht: ' + Nachricht);
						}
					}
					
				});

Das Ergebnis der Verwendung von Inline-JavaScript-Anweisungen wird unten angezeigt:

(2) Wenn Sie das native DOM-Ereignisobjekt in einer Inline-Anweisung abrufen müssen, können Sie der Methode eine spezielle Variable $event übergeben. Der Beispielcode lautet wie folgt:

<div id="box">
			<a href="http://www.baidu.com" rel="external nofollow" v-on:click="show('Der Stern von Morgen',$event)">{{message}}</a>
		</div>
		   <Skripttyp="text/javascript">
				var vm = neuer Vue({
					el: "#Box",
					Daten:{
						Nachricht: „Hallo“
					},
					Methoden:{
						anzeigen:Funktion(Nachricht1,e){
							e.preventDefault();
							Alarm (Nachricht1);
						}
					}
					
				});
			</Skript>

Zusätzlich zur Übergabe eines Wertes an die Methode show() wird auch eine spezielle Variable $event übergeben. Die Funktion dieser Variable besteht darin, das native DOM-Ereignis zu verarbeiten, wenn auf den Hyperlink geklickt wird, und die Methode preventDefault() anzuwenden, um zu verhindern, dass der Hyperlink springt. Wenn Sie auf den Hyperlink „Hallo“ klicken, wird ein Dialogfeld angezeigt und das Ausführungsergebnis ist wie in der folgenden Abbildung dargestellt:

2. Modifikatoren für die Ereignisbehandlung

Der sogenannte Modifikator ist ein spezielles Suffix, das durch einen Punkt mit halber Breite gekennzeichnet ist. Vue.js bietet mehrere Modifikatoren für die v-on-Direktive, darunter Ereignismodifikatoren und Schlüsselmodifikatoren.
Ereignismodifikatoren <br /> In Ereignishandlern werden häufig die Methoden preventDefault() oder stopPropagation() aufgerufen, um bestimmte Funktionen zu implementieren. Um diese DOM-Ereignisdetails zu verarbeiten, stellt Vue.js Ereignismodifikatoren für die v-on-Direktive bereit. Häufig verwendete Ereignismodifikatoren und ihre Beschreibungen sind in der folgenden Tabelle aufgeführt:

Modifikatoren können in Reihe verwendet werden, und Sie können nur Modifikatoren verwenden, ohne Methoden zur Ereignisbehandlung zu binden. Ereignismodifikatoren werden wie folgt verwendet:

<!-- Verhindert die weitere Ausbreitung des Klickereignisses -->
<a v-on:click.stop="doSomething"></a>
<!-- Verhindert standardmäßig das Absenden des Formulars -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- Die Handlerfunktion wird nur aufgerufen, wenn das Ereignis vom aktuellen Element selbst ausgelöst wird -->
<div v-on:click.self="macheetwas"></div>
<!-- Verkettung von Modifikatoren, um die standardmäßige Übermittlung des Formulars und das Aufsteigen zu verhindern-->
<a v-on:click.stop.prevent="doSomething"></a>
<!-- Nur Modifikatoren, keine Ereignisbindung -->
<form v-on:submit.prevent></form>

Nachfolgend sehen Sie einen Beispielcode, der einen .stop-Modifikator anwendet, um das Aufsteigen von Ereignissen zu stoppen:

<div id="box">
			<div v-on:click="show('div-Ereignisauslöser')">
				<button v-on:click.stop="show('button event trigger')">Anzeigen</button>
			</div>
		</div>
		   <Skripttyp="text/javascript">
				var vm = neuer Vue({
					el: "#Box",
					Methoden:{
						anzeigen:Funktion(Nachricht){
							Alarm(Nachricht);
						}
					}
					
				});
			</Skript>

Wenn Sie auf die Schaltfläche „Anzeigen“ klicken, wird nur das Klickereignis dieser Schaltfläche ausgelöst. Wenn der Modifikator .stop in der Schaltfläche nicht verwendet wird, wird beim Klicken auf die Schaltfläche "Anzeigen" nicht nur das Klickereignis der Schaltfläche ausgelöst, sondern auch das Klickereignis des Div, und es werden zwei Dialogfelder angezeigt. Die Laufergebnisse sind in der folgenden Abbildung dargestellt:
(1) Verwenden Sie den Modifikator .stop:

(2) Klicken Sie auf „OK“, ohne den Modifikator „.stop“ zu verwenden:

Wichtige Modifikatoren

Zusätzlich zu Ereignismodifikatoren bietet Vue.js auch Tastenmodifikatoren für die v-on-Direktive, um auf Tastendrücke in Tastaturereignissen zu achten. Wenn ein Tastaturereignis ausgelöst wird, muss der keyCode-Wert der Taste erkannt werden. Der Code lautet wie folgt:

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

Wenden Sie die v-on-Direktive an, um das KeyUp-Ereignis der Tastatur zu überwachen. Der keyCode-Wert der Eingabetaste auf der Tastatur ist 13. Daher wird nach der Eingabe von Inhalten in das Textfeld die Methode submit() aufgerufen, wenn die Eingabetaste gedrückt wird.
Für den oben gezeigten Code können Sie dessen Alias ​​verwenden. Der Alias ​​der Eingabetaste ist Enter. Der Code lautet wie folgt:

<input v-on:keyup.enter="Senden">

Die von Vue.js bereitgestellten Aliase für häufig verwendete Schaltflächen werden in der folgenden Tabelle angezeigt:

Hinweis: Wir werden uns auch in Zukunft weiter mit dem Vue.js-Frontend-Framework befassen: Formularsteuerelementbindung. Ich hoffe, Sie werden es unterstützen und darauf achten.

Damit ist dieser Artikel über die Zusammenfassung der Ereignisbehandlung des Front-End-Frameworks Vue.js abgeschlossen. Weitere relevante Inhalte zur Ereignisbehandlung von Vue.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!