Gebeurtenisafhandelingen toevoegen in Vue

Laten we nu onze methode uitvoeren bij een gebeurtenis. Om een gebeurtenis aan een DOM-element toe te voegen, moet je de directive v-on gebruiken.

In deze directive moet je na de dubbele punt de naam van de gebeurtenis specificeren, en als waarde - de naam van de methode die moet worden aangeroepen wanneer deze gebeurtenis plaatsvindt.

Laten we het in de praktijk proberen. Stel dat we de volgende methode hebben:

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

Stel dat we de volgende knop hebben:

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

Laten we ervoor zorgen dat bij een klik op deze knop de methode show wordt aangeroepen:

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

Meestal gebruikt men de verkorte versie van v-on. Het is het symbool @ voor de gebeurtenisnaam:

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