Melampirkan Pengendali Peristiwa dalam Vue

Sekarang mari kita jalankan kaedah kita berdasarkan beberapa peristiwa. Untuk melampirkan peristiwa pada elemen DOM, anda perlu menggunakan arahan v-on.

Dalam arahan ini, selepas tanda titik dua anda perlu menentukan nama peristiwa, dan nilainya ialah nama kaedah yang perlu dipanggil apabila peristiwa itu terjadi.

Mari kita cuba dalam praktik. Katakan kita mempunyai kaedah berikut:

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

Katakan kita mempunyai butang berikut:

<template>
	<button>teks</button>
</template>

Mari kita buat agar apabila diklik pada butang ini, kaedah show dipanggil:

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

Biasanya semua orang menggunakan versi ringkas v-on. Ia mewakili symbol @ sebelum nama peristiwa:

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

Buat butang, yang apabila diklik akan memaparkan tarikh semasa melalui alert.

Ubah suai tugas sebelumnya agar alert dipaparkan bukan pada klik, tetapi apabila disorot dengan tetikus.