Asignación de manejadores de eventos en Vue

Ahora vamos a ejecutar nuestro método basado en algún evento. Para asignar un evento a algún elemento DOM, necesitamos usar la directiva v-on.

En esta directiva, después de los dos puntos se debe especificar el nombre del evento, y como valor - el nombre del método que debe ser llamado cuando ocurra ese evento.

Probemos en la práctica. Supongamos que tenemos el siguiente método:

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

Supongamos que tenemos el siguiente botón:

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

Hagamos que al hacer clic en este botón se llame al método show:

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

Normalmente todos usan la versión abreviada de v-on. Consiste en el símbolo @ antes del nombre del evento:

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

Cree un botón que, al hacer clic, muestre la fecha actual mediante alert.

Modifique la tarea anterior para que el alert no se muestre al hacer clic, sino al pasar el cursor del ratón por encima.