Gestion des événements dans Vue

Lançons maintenant notre méthode en réponse à un événement. Pour attacher un événement à un élément DOM, il faut utiliser la directive v-on.

Dans cette directive, après le deux-points, il faut spécifier le nom de l'événement, et comme valeur - le nom de la méthode qui doit être appelée lors du déclenchement de cet événement.

Essayons en pratique. Supposons que nous ayons la méthode suivante :

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

Supposons que nous ayons le bouton suivant :

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

Faisons en sorte qu'un clic sur ce bouton appelle la méthode show :

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

Généralement, tout le monde utilise la version abrégée de v-on. Elle est représentée par le symbole @ placé devant le nom de l'événement :

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

Créez un bouton qui, lors d'un clic, affichera la date actuelle via alert.

Modifiez la tâche précédente pour que alert ne se déclenche pas au clic, mais au survol de la souris.