Προσθήκη Χειριστών Γεγονότων στο Vue

Ας εκτελέσουμε τώρα τη μέθοδό μας με βάση κάποιο γεγονός. Για να προσθέσετε ένα γεγονός σε κάποιο στοιχείο DOM, πρέπει να χρησιμοποιήσετε την οδηγία v-on.

Σε αυτήν την οδηγία, μετά την άνω και κάτω τελεία πρέπει να καθορίσετε το όνομα του γεγονότος, και ως τιμή - το όνομα της μεθόδου που πρέπει να κληθεί όταν συμβεί αυτό το γεγονός.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε την ακόλουθη μέθοδο:

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

Ας υποθέσουμε ότι έχουμε το ακόλουθο κουμπί:

App.vue<template>
  <button>κείμενο</button>
</template>

Ας κάνουμε έτσι ώστε με κλικ σε αυτό το κουμπί να καλείται η μέθοδος show:

App.vue<template>
  <button v-on:click="show">κείμενο</button>
</template>

Συνήθως όλοι χρησιμοποιούν τη συντομευμένη μορφή της v-on. Αυτή αντιπροσωπεύεται από το σύμβολο @ πριν από το όνομα του γεγονότος:

App.vue<template>
  <button @click="show">κείμενο</button>
</template>