Event
Listening to Events
ใช้ v-on หรือใช้ @ เพื่อรับ DOM Events
Event Modifiers
vue
<template>
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>
</template>| Event Modifier | คำอธิบายแบบเข้าใจง่าย |
|---|---|
.stop | เหมือนกับการสร้างกำแพงกั้น event ไม่ให้ไปกระทบ elements อื่นๆ ที่อยู่ด้านนอก เช่น คลิกปุ่มที่อยู่ในกล่อง แต่ไม่ต้องการให้ event ไปทำงานที่กล่องด้วย |
.prevent | ห้ามพฤติกรรมดั้งเดิมของ element นั้นๆ เช่น คลิกลิงก์แล้วไม่ให้เปิดไปหน้าใหม่ หรือกด submit form แล้วไม่ให้รีเฟรชหน้า |
.self | ทำงานเฉพาะเมื่อคลิกที่ element นั้นโดยตรงเท่านั้น เช่น มีปุ่มอยู่ในกล่อง ถ้าคลิกที่กล่อง event ทำงาน แต่ถ้าคลิกที่ปุ่ม event ของกล่องจะไม่ทำงาน |
.capture | จับ event ตั้งแต่ด้านนอกสุดก่อน แล้วค่อยๆ เข้าไปข้างใน เหมือนตำรวจดักจับคนร้ายตั้งแต่ประตูเมืองก่อนที่จะเข้าไปถึงตัวเมือง |
.once | ให้ event ทำงานแค่ครั้งเดียวแล้วหยุด เหมือนบัตรผ่านประตูใช้ครั้งเดียวแล้วทิ้ง พอใช้แล้วก็เข้าไม่ได้อีก |
.passive | บอกเบราว์เซอร์ว่า "ไม่ต้องกังวล ผมไม่ได้จะเปลี่ยนอะไร" ทำให้การ scroll หรือ swipe ทำงานได้ลื่นไหลขึ้น โดยเฉพาะบนมือถือ |