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 :

App.vuemethods: {
  show: function() {
    alert('!');
  }
}

Supposons que nous ayons le bouton suivant :

App.vue<template>
  <button>text</button>
</template>

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

App.vue<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 :

App.vue<template>
  <button @click="show">text</button>
</template>