Event-Handler in Vue anbringen

Lassen Sie uns nun unsere Methode durch ein Ereignis auslösen. Um einem DOM-Element ein Ereignis zuzuweisen, verwendet man die Direktive v-on.

In dieser Direktive gibt man nach dem Doppelpunkt den Namen des Ereignisses an, als Wert - den Namen der Methode, die beim Eintreten dieses Ereignisses aufgerufen werden soll.

Probieren wir es praktisch aus. Nehmen wir an, wir haben die folgende Methode:

methods: {
	show: function() {
		alert('!');
	}
}

Nehmen wir an, wir haben den folgenden Button:

<template>
	<button>text</button>
</template>

Lassen Sie uns dafür sorgen, dass bei einem Klick auf diesen Button die Methode show aufgerufen wird:

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

Normalerweise verwendet man die abgekürzte Variante von v-on. Sie wird durch das Symbol @ vor dem Ereignisnamen dargestellt:

<template>
	<button @click="show">text</button>
</template>

Erstellen Sie einen Button, bei dessen Klick das aktuelle Datum via alert ausgegeben wird.

Modifizieren Sie die vorherige Aufgabe so, dass der alert nicht beim Klicken, sondern beim Überfahren mit der Maus erscheint.