Menambahkan Penangan Acara di Vue

Sekarang mari kita jalankan metode kita berdasarkan suatu acara. Untuk menambahkan acara ke suatu elemen DOM, kita perlu menggunakan direktif v-on.

Dalam direktif ini, setelah titik dua perlu ditentukan nama acara, dan nilainya adalah nama metode yang perlu dipanggil ketika acara tersebut terjadi.

Mari kita coba dalam praktik. Misalkan kita memiliki metode berikut:

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

Misalkan kita memiliki tombol berikut:

<template>
	<button>text</button>
</template>

Mari kita buat agar saat diklik pada tombol ini, metode show dipanggil:

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

Biasanya, semua orang menggunakan versi singkat dari v-on. Ini direpresentasikan oleh simbol @ sebelum nama acara:

<template>
	<button @click="show">text</button>
</template>

Buatlah tombol yang, ketika diklik, akan menampilkan tanggal saat ini melalui alert.

Modifikasi tugas sebelumnya sehingga alert muncul bukan saat diklik, tetapi saat kursor mouse diarahkan (hover) ke tombol.