Eseménykezelők hozzárendelése Vue-ban

Most indítsuk el a metódusunkat valamilyen eseményre. Ahhoz, hogy egy eseményt egy DOM elemhez rendeljünk, a v-on direktívát kell használnunk.

E direktíva után kettősponttal az esemény nevét kell megadni, az értéke pedig annak a metódusnak a neve legyen, amelyet az esemény bekövetkeztekor meg kell hívni.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy a következő metódusunk van:

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

Tegyük fel, hogy a következő gombunk van:

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

Tegyük úgy, hogy a gombra kattintáskor a show metódus hívódjon meg:

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

Általában mindenki a rövidített változatot használja a v-on helyett. Ez a @ szimbólum az esemény neve előtt:

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