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:

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

Supongamos que tenemos el siguiente botón:

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

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

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

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