Aggiunta di gestori di eventi in Vue

Ora avviamo il nostro metodo in base a qualche evento. Per aggiungere un evento a un elemento DOM, è necessario utilizzare la direttiva v-on.

In questa direttiva, dopo i due punti, è necessario specificare il nome dell'evento, e come valore - il nome del metodo che deve essere chiamato al verificarsi di questo evento.

Proviamo nella pratica. Supponiamo di avere il seguente metodo:

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

Supponiamo di avere il seguente pulsante:

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

Facciamo in modo che al click su questo pulsante venga chiamato il metodo show:

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

Di solito tutti utilizzano la versione abbreviata di v-on. È rappresentata dal simbolo @ prima del nome dell'evento:

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

Crea un pulsante, al click del quale venga visualizzata la data corrente tramite alert.

Modifica il task precedente in modo che l'alert venga visualizzato non al click, ma al passaggio del mouse sopra il pulsante.