Att lägga till händelsehanterare i Vue

Låt oss nu köra vår metod baserat på någon händelse. För att lägga till en händelse på något DOM-element behöver du använda direktivet v-on.

I detta direktiv, efter kolon, behöver du ange händelsens namn, och värdet ska vara namnet på metoden som ska anropas när händelsen inträffar.

Låt oss prova i praktiken. Anta att vi har följande metod:

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

Anta att vi har följande knapp:

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

Låt oss göra så att när man klickar på denna knapp anropas metoden show:

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

Vanligtvis använder alla en förkortad version av v-on. Den representeras av symbolen @ före händelsens namn:

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