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:

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

Supponiamo di avere il seguente pulsante:

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

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

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

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