Vue.js ist eine sehr leistungsstarke, leicht zu erlernende und zugängliche Bibliothek, in der wir mit der Kenntnis von HTML, CSS und Javascript Webanwendungen erstellen können. Vue.js basiert auf der Kombination der besten Funktionen aus bereits bestehenden Angular- und React-Frameworks. Es ist ein progressives und reaktives Javascript-Framework, das zum Erstellen von UIs (User Interfaces) und SPAs (Single-Page Applications) verwendet wird. Aus diesem Grund lieben die Entwickler das Programmieren und fühlen sich bei der Entwicklung von Anwendungen in Vue.js frei und komfortabel Werfen Sie einen Blick auf Event Listening and Handling in Vue.js. Wir können die v-on-Direktive verwenden, um auf das DOM zu hören und die erforderlichen Aufgaben auszuführen. Es stellt auch viele Ereignishandler bereit. In diesem Artikel werden wir jedoch nur lernen und uns auf die Klickereignisse konzentrieren. Also lasst uns anfangen!
Genau wie das onClick-Ereignis von Javascript bietet Vue.js v-on:click für Listening-Ereignisse.
Die Syntax für das v-on:click-Ereignis sieht wie folgt aus:
< Taste v-on:klick='Funktionsname'>Klicken</ Taste >
Vue.js bietet auch eine Abkürzung @, anstatt v-on zu verwenden.
< Taste @klicken='Funktionsname'>Klick</ Taste >
Vue.js hört nicht damit auf, nur das Click-Ereignis abzuhören und die Funktion aufzurufen. Es erlaubt uns auch, jede arithmetische Operation oder alles, was mit Javascript zu tun hat, direkt in die Anführungszeichen zu schreiben. Genau wie dieser:
< Taste @klicken='Zahl += 1'>Hinzufügen</ Taste >
Vue.js bietet uns die Möglichkeit, die Methode oder Funktion in einer Inline-JavaScript-Anweisung aufzurufen, wie unten gezeigt:
< Taste @klicken='Nachricht('Hallo')'>Zeigen</ Taste >Mit den Event-Handlern von Vue.js können wir auch auf das DOM-Ereignis zugreifen, indem wir die Inline-Anweisung verwenden, indem wir die speziell bereitgestellte $event-Variable von Vue.js an das Argument der Methode übergeben, genau wie im folgenden Beispiel:
< Taste @klicken='message('Hallo', $ereignis)'>Senden</ Taste >
Vue.js bietet uns auch die Möglichkeit, mehrere Funktionen oder Methoden aufzurufen. Wir können mehr als eine Funktion aufrufen und sie durch Kommas trennen, wie in diesem Beispiel:
< Taste @klicken='first('Hallo'), second('Hi', $event) '>Senden</ Taste >Vue.js bietet auch Ereignismodifikatoren.
Ereignismodifikatoren
Wir müssen oft Modifikatoren zusammen mit den Ereignissen aufrufen. Vue.js bietet also einige der folgenden Modifikatoren:
.halt
Es stoppt die Übertragung des Klickereignisses.
< zu @click.stop='mach das'></ zu >.verhindern
Es verhindert, dass die Seite neu geladen oder umgeleitet wird.
< Form @submit.prevent='beim Senden'></ Form >.wenn
Es wird das Click-Ereignis nur einmal auslösen.
< zu @click.once='mach das'></ zu >.ergreifen
Es wird hauptsächlich verwendet, um den Ereignis-Listener hinzuzufügen.
< div @click.capture='mach das'> ...</ div >Wir können die Modifikatoren auch verketten. Beachten Sie jedoch, dass die Reihenfolge der Modifikatoren eine Rolle spielt und sich auf die Ergebnisse auswirkt.
< zu @click.stop.prevent='TU das'></ zu >Abschluss
In diesem Artikel haben wir die gesamten Konzepte zur Handhabung von Click-Ereignissen vom Noob- bis zum Ninja-Level behandelt. Wir haben die verschiedenen Syntaxen beim Schreiben von Klickereignissen und die verschiedenen Verwendungsmöglichkeiten von |_+_| . kennengelernt von Vue.js bereitgestellte Direktive für Entwickler und verschiedene Ereignismodifikatoren. Für weitere nützliche Inhalte wie diesen, die sich auf Vue.js beziehen, besuchen Sie weiterhin linuxhint.com.