Att lägga till händelsehanterare i Vue

Låt oss nu köra vår metod baserat på någon händelse. För att lägga till en händelse på något DOM-element behöver du använda direktivet v-on.

I detta direktiv, efter kolon, behöver du ange händelsens namn, och värdet ska vara namnet på metoden som ska anropas när händelsen inträffar.

Låt oss prova i praktiken. Anta att vi har följande metod:

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

Anta att vi har följande knapp:

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

Låt oss göra så att när man klickar på denna knapp anropas metoden show:

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

Vanligtvis använder alla en förkortad version av v-on. Den representeras av symbolen @ före händelsens namn:

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

Skapa en knapp som, när man klickar på den, visar det aktuella datumet via alert.

Modifiera den föregående uppgiften så att alert visas inte vid klick, utan när musen förs över knappen.