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

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

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

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

methods: {
	show: function() {
		alert('!');
	}
}

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

<template>
	<button>κείμενο</button>
</template>

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

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

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

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

Δημιουργήστε ένα κουμπί, upon clicking which μέσω alert θα εμφανίζεται η τρέχουσα ημερομηνία.

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε το alert να εμφανίζεται όχι upon clicking, αλλά upon hovering