การผูกตัวจัดการเหตุการณ์ใน Vue

ตอนนี้เรามาเริ่มเรียกใช้เมธอดของเราเมื่อ เกิดเหตุการณ์บางอย่างกัน เพื่อที่จะผูก เหตุการณ์กับองค์ประกอบ DOM บางตัว คุณต้องใช้ directive v-on

ใน directive นี้ หลังจากเครื่องหมาย colon คุณต้องระบุชื่อของเหตุการณ์ และค่าของมันคือชื่อเมธอด ที่ต้องการเรียกเมื่อ เหตุการณ์นั้นเกิดขึ้น

มาลองทำในทางปฏิบัติกัน สมมติว่าเรามีเมธอดต่อไปนี้:

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

สมมติว่าเรามี ปุ่มต่อไปนี้:

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

มาทำให้เมื่อคลิก ที่ปุ่มนี้แล้วเรียกเมธอด show กัน:

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

โดยปกติแล้ว ทุกคนจะใช้รูปแบบย่อของ v-on ซึ่งก็คือ สัญลักษณ์ @ วางไว้หน้า ชื่อเหตุการณ์:

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

สร้างปุ่มที่เมื่อคลิก จะแสดงวันที่ปัจจุบันผ่าน alert

ปรับเปลี่ยนโจทย์ที่แล้ว โดยให้ alert ปรากฏไม่ใช่เมื่อคลิก แต่เมื่อเลื่อนเมาส์มาวางเหนือ