Arbeit mit Ereignissen

• 3 Minuten

Im Rahmen einer Anwendung sind Ereignisse Aktionen, die auftreten können, deren Auftretenszeitpunkt Sie jedoch nicht immer kennen. So wissen Sie z. B. bei einer Schaltfläche auf einer Seite, dass der Benutzer diese wahrscheinlich auswählen wird. Sie wissen jedoch nicht, wann er dies tun wird.

Daher müssen Sie wissen, wie Ereignisse behandelt werden, um eine Webanwendung zu erstellen. Hier erfahren Sie, wie Sie Ereignisse mithilfe von Vue.js verwalten.

v-on-Anweisung und @

Vue.js stellt eine Anweisung namens v-on bereit, die Sie an jedes beliebige Ereignis binden können, z. B. v-on:click. Da das Behandeln von Ereignissen eine Kernaufgabe darstellt, bietet Vue.js außerdem eine @-Kurzform für jedes Ereignis. Wenn Sie also ein Klick-Ereignis binden möchten, können Sie die @click-Kurzform verwenden.

Ereignishandler

Sie können Ereignishandler erstellen, indem Sie dem methods-Feld in einer Vue-Anwendung oder der -Komponente Funktionen hinzufügen. Das methods-Feld ähnelt data(), anstatt Zustandsobjekte zurückzugeben, verwaltet es jedoch eine Liste der verfügbaren Funktionen für Ihre Anwendung. Auf diese Funktionen können Sie in Ihrem HTML-Code auf die gleiche Weise verweisen, wie Sie es auch mit anderen JavaScript-Funktionen tun.

Wenn Sie einer Vue-App oder -Komponente eine Methode hinzufügen, verweist this auf die aktive Instanz. Alle Daten, die für die aktive Instanz verfügbar sind, z. B. name im folgenden Beispiel, sind über this zugreifbar.

Erstellen eines Ereignishandlers

Wenn Sie eine Methode erstellen möchten, die beim Aufrufen den Wert der name-Dateneigenschaft anzeigt, folgen Sie diesem Beispiel:

const app = Vue.createApp({
    data() {
        return {
            name: 'Cheryl'
        }
    },

    methods: {
        displayName() {
            console.log(this.name);
        }
    }
});

Da displayName() zur methods-Eigenschaft hinzugefügt wird, ist sie für die Vorlage verfügbar und kann an ein Ereignis gebunden werden.

Den Ereignishandler an ein Ereignis binden

Sie können die displayName()-Funktion an das click-Ereignis binden, indem Sie die @click-Kurzform verwenden. Wenn der Benutzer die Schaltfläche auswählt, wird die displayName()-Funktion aufgerufen.

<button type="button" @click="displayName">Display name</button>