Eseménykezelők hozzárendelése Vue-ban

Most indítsuk el a metódusunkat valamilyen eseményre. Ahhoz, hogy egy eseményt egy DOM elemhez rendeljünk, a v-on direktívát kell használnunk.

E direktíva után kettősponttal az esemény nevét kell megadni, az értéke pedig annak a metódusnak a neve legyen, amelyet az esemény bekövetkeztekor meg kell hívni.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy a következő metódusunk van:

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

Tegyük fel, hogy a következő gombunk van:

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

Tegyük úgy, hogy a gombra kattintáskor a show metódus hívódjon meg:

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

Általában mindenki a rövidített változatot használja a v-on helyett. Ez a @ szimbólum az esemény neve előtt:

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

Készítsen egy gombot, amelyre kattintva a alert az aktuális dátumot jeleníti meg.

Módosítsa az előző feladatot úgy, hogy a alert ne kattintáskor, hanem az egér rámutatásakor jelenjen meg.