Hendelseshåndtering i Vue

La oss nå kjøre metoden vår basert på en hendelse. For å knytte en hendelse til et DOM-element, må du bruke direktivet v-on.

I dette direktivet, etter kolon, skal du spesifisere navnet på hendelsen, og verdien skal være navnet på metoden som skal kalles når denne hendelsen inntreffer.

La oss prøve i praksis. Anta at vi har følgende metode:

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

Anta at vi har følgende knapp:

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

La oss gjøre slik at ved klikk på denne knappen kalles metoden show:

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

Vanligvis bruker alle den forkortede varianten av v-on. Den representeres av symbolet @ foran hendelsens navn:

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

Lag en knapp hvor det ved klikk via alert vises gjeldende dato.

Endre den forrige oppgaven slik at alert vises ikke ved klikk, men ved hovering med musepekeren.