ใครที่เปลี่ยนจาก pure javascript หรือ JQuery ก็คงจะงงกับการจัดการ Event เมื่อ user ทำการ click หรือทำ action ต่างๆกับ Web Application วันนี้เรามาดูกันดีกว่าว่า vue.js มี directive อะไรบ้างเพื่ออำนวยความสะดวกให้เรา..
สำหรับการเรียกใช้ event ใน vue.js ก็จะมี 2 แบบดังนี้
<button v-on:click="DoThis">Click Me</button> // ปกติ
<button @click="DoThis">Click Me</button> // shorthand
ทั้งสองตัวทำงานเหมือนกันแค่ย่อจาก v-on เหลือ @ เท่านั้นเองในที่นี้ผมขอใช้ @ ยกตัวอย่างเพื่อให้อ่านง่าย และ เขียนน้อยสไตล์ผม
ตัวจัดการ event มีให้เราเลือกใช้หลายตัวมากๆแต่ขอยกตัวอย่างที่ใช้บ่อยๆแทนนะครับ
@click ใช้กับ event การ click จากเมาส์เช่นเมื่อ user click ให้ทำอะไร
@change เมื่อมีการเปลี่ยนค่าจาก input เช่น radio button, select, input
@blur เมื่อ user เอาเมาส์ออกจาก element ไปคลิกที่อื่น หรือ เปลี่ยน tab browser หรือ การกระทำใดๆที่ไม่ได้ focus อยุ่ที่ element นั้น
@focus เมื่อ element นั้นถูก focus อยู่ หรือ เอาเมาส์จิ้มค้างไว้นั้นละ
@inputเมื่อ element นั้นถูก input ค่าจาก keyboard
@keyup เมื่อ user ปล่อย key ที่กด
@keydown เมื่อ user กด key
@keypress เมื่อ user กด key
@mouseup เมื่อ user ปล่อยเมาส์
@mousedown เมื่อ user คลิกเมาส์
@mousewheel เมื่อ user เลื่อนลูกล้อตรงเมาส์
@submit เมื่อ user กดส่ง form
ตาลายกันเลยทีเดียวนี่แค่เอาที่ผมใช้บ่อยๆนะครับที่จริงมียัน drag, drop แต่ผมยังไม่ได้ลอง
Event Modifiers
หลังจากรู้จัก event กันไปแล้วเรามาดูต่อดีกว่าว่าทำอะไรได้อีก.. หลายๆครั้งเวลาเราเรียกให้ event ทำงานเราก็จะใช้ event.preventDefault() หรือ event.stopPropagation() เพื่อให้ตัว event ไม่ไป refresh เพจ, หรือ ทำคำสั่งล่วงหน้าโดยที่เรายังไม่ได้เช็ค logic ซึ่งใน vue.js 2 นั้นเราไม่ต้องมาเขียนอะไรยาวๆแบบนี้เพราะผมเองก็ search ทุกครั้งเพราะจำไม่ได้ ฮ่าๆๆ มาดูกันต่อเลย..ที่ event modifiers
// เรียกใช้ ปกติ
<div @click="xxx" >Event Me!!<div>
// .stop ให้หยุดทำการ execute event
<div @click.stop="xxx" >Event Me!!<div>
// .prevent หยุดการ reload, refresh page
<div @click.prevent="xxx" >Event Me!!<div>
// เราสามารถนำ Event Modifiers ที่ vuejs สร้างมาเขียนต่อกันได้
<div @click.stop.prevent="xxx" >Event Me!!<div>
// ตอนส่ง form ก็อย่าลืม .prevent ละไม่งั้นที่พิมพ์มาหายหมดแน่!!
<form @submit.prevent="xxx"></form>
// .self คือต้องเกิด event ที่ตัวมันเท่านั้นถึงจะทำงาน event ถ้าเกิด click children จะไม่ทำงานนะครับ
<div @click.self="xxx" >Event Me!!<div>
// .once ทำ event นี้ครั้งเดียวใช้ได้ในเวอร์ชั่น 2.1.4+
<div @click.once="xxx" >Event Me!!<div>.native
event ตัวนี้ผมมองข้ามมาหลายครั้งจนได้ใช้การทำงานของตัวนี้คือถ้าเรา import component มาแล้วเราใส่ event click บางครั้งมันจะไปเรียกตัว methods ข้างใน component เราสามารถสั่งให้มันทำงานใน parent หรือ root element ได้แบบนี้
// แบบนี้บางครั้งมันจะไปเรียก methods จากข้างใน component
<my-component @click="doThis"></my-component>
// แบบนี้มันจะเรียกฟังก์ชั่นจาก parent มันเท่านั้น
<my-component @click.native="doThis"></my-component>มีเคสนึงผมต้องการให้คลิก router-link เปลี่ยนหน้าแล้วปิด modal ที่เปิดอยู่ด้วยผมก็ลองใช้ @click ปกติไม่เกิดอะไรขึ้นผมเข้าใจว่ามันน่าจะไปทำงานในตัว router เลยผมเลยลองใส่แบบนี้
<router-link :to="{ name: 'profile' }" @click.native="closeModal"></router-link>ปรากฏว่ามันจะไปเรียก methods ก่อนที่จะเปลี่ยนหน้าอันนี้งานดีมากเผืิ่อใครชอบทำอะไรแปลกๆฮ่าๆ..
Key Modifiers
เมื่อเราต้องการให้ event รับคำสั่งจาก keyboard หรือ short cut เพื่อ trigger ให้ตัว event ทำงาน
// เมื่อกดปุ่มที่มี keycode = 13(Enter Key) จะทำงาน
<input @keyup.13="submit">ด้วยความที่ Vue.js ใจดีอยากให้ชีวิตเราง๊ายง่ายก็เลยทำ key แบบเข้าใจง่ายมาให้เราแบบนี้ และ มีหลายตัวให้เลือกใช้เช่นกัน
// .enter = keycode = 13 ง่ายขึ้นมานิดนึงไม่ต้องจำเลข
<input @keyup.enter=”submit”>
<input @keydown.space=”submit”>
<input @keypress.left=”do...”>.enter.tab.delete(ปุ่ม “Delete” และ “Backspace” ).esc.space.upลูกศรขึ้น.downลูกศรลง.leftลูกศรซ้าย.rightลูกศรขวา
ยังไม่หมดแค่นี้ในเวอร์ชั่น 2.1.0 ได้เพิ่มความสบายให้เราอีกขั้น
.ctrl.alt.shift.meta
อย่าลืมว่าเราสามารถเอา key พวกนี้มาต่อกันได้นะ เช่น
เมื่อกดปุ่ม Alt + C
<input @keyup.alt.67="clear">
เมื่อกดปุ่ม Ctrl + Click
<div @click.ctrl="doSomething">Do something</div>และ เมื่อมันง่ายขนาดนี้แล้วเวอร์ชั่น 2.2.0+ ก็เพิ่มมาอีกสำหรับเมาส์เลย ใช้กับ event ของ Mouse Button Modifiers เช่น @mousedown.left=”doThis”
.leftคลิกซ้าย.rightคลิกขวา.middleคลิก scroll
access the original DOM with $event
บางครั้งเมื่อคลิกหรือทำ event อะไรซักอย่างเราอยากเข้าถึง dom นั้นๆก็สามารถส่งตัวแปร $event เข้าไปใน function ได้ซึ่ง Vue.js ทำไว้ให้แล้ว
<template>
<div @click="doThis($event, 'Hello')">Click</div>
</template>
<script>
methods: {
doThis(event, text) {...}
}
</script>
