Tapahtumankäsittelijöiden liittäminen Vue:ssa

Käynnistetään nyt metodimme jonkin tapahtuman perusteella. Liittääksesi tapahtuman jollekin DOM-elementille, sinun tulee käyttää direktiiviä v-on.

Tässä direktiivissä kaksoispisteen jälkeen tulee määrittää tapahtuman nimi, ja arvoksi - metodin nimi, joka on kutsuttava tapahtuman sattuessa.

Kokeillaan käytännössä. Oletetaan, että meillä on seuraava metodi:

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

Oletetaan, että meillä on seuraava painike:

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

Tehdään niin, että napsautettaessa tätä painiketta kutsutaan metodia show:

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

Yleensä kaikki käyttävät lyhennettyä muotoa v-on. Se esitetään symbolilla @ ennen tapahtuman nimeä:

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