Event-Handler in Vue anbringen

Lassen Sie uns nun unsere Methode durch ein Ereignis auslösen. Um einem DOM-Element ein Ereignis zuzuweisen, verwendet man die Direktive v-on.

In dieser Direktive gibt man nach dem Doppelpunkt den Namen des Ereignisses an, als Wert - den Namen der Methode, die beim Eintreten dieses Ereignisses aufgerufen werden soll.

Probieren wir es praktisch aus. Nehmen wir an, wir haben die folgende Methode:

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

Nehmen wir an, wir haben den folgenden Button:

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

Lassen Sie uns dafür sorgen, dass bei einem Klick auf diesen Button die Methode show aufgerufen wird:

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

Normalerweise verwendet man die abgekürzte Variante von v-on. Sie wird durch das Symbol @ vor dem Ereignisnamen dargestellt:

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