Sündmuste käitlejate lisamine Vue's

Käivitame nüüd oma meetodi mõne sündmuse korral. Selleks, et lisada sündmus mõnele DOM elemendile, tuleb kasutada direktiivi v-on.

Selles direktiivis tuleb pärast koolonti määrata sündmuse nimi, ja väärtuseks - meetodi nimi, mida tuleb kutsuda sündmuse toimumisel.

Proovime seda praktikas. Olgem meil järgmine meetod:

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

Olgem meil järgmine nupp:

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

Teeme nii, et klõpsates sellel nupul kutsutakse välja meetod show:

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

Tavaliselt kasutatakse lühendatud varianti v-on. See on sümbol @ enne sündmuse nime:

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