Håndtering af begivenheder i Vue

Lad os nu køre vores metode ved en eller anden begivenhed. For at tilknytte en begivenhed til et DOM-element, skal du bruge direktivet v-on.

I denne direktiv skal du efter kolon angive navnet på begivenheden, og værdien skal være navnet på metoden, der skal kaldes, når begivenheden indtræffer.

Lad os prøve det i praksis. Lad os sige, at vi har følgende metode:

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

Lad os sige, at vi har følgende knap:

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

Lad os gøre det sådan, at ved et klik på denne knap kaldes metoden show:

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

Normalt bruger alle den korte version af v-on. Den repræsenteres af symbolet @ foran begivenhedens navn:

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

Lav en knap, hvor der ved klik på den via alert vises den aktuelle dato.

Modificer den forrige opgave, så alert ikke vises ved klik, men ved at føre musen over knappen.