เนื้อหาในตอนที่แล้วเราได้รู้จักกับรูปแบบการแทรกข้อมูลเบื้องต้น จากตัวแปร
หรือ reactive state โดยใช้รูปแบบ {{ }} แต่วิธีนี้จะไม่สามารถแทรกเข้าไปในส่วน
ของ html attrubute ได้ แต่จะใช้วิธีแทรกโดยการกำหนด directive สำหรับ
ใช้งาน อย่างตัวอย่างที่ผ่านมาเราได้รู้จักกับ v-html ซึ่งเป็น directive สำหรับเชื่อม
ข้อมูลกับ template เพื่อรองกับให้สามารถแสดงรูปแบบ html ได้ แต่กรณีเราต้อง
การกำหนดเกี่ยวกับ atrribute ต่างๆ ใน html เช่นการกำหนด id เราจะใช้ directive
ที่ชื่อว่า v-bind
การใช้งาน Attribute Bindings
ดูตัวอย่าง
<div v-bind:id="dynamicId"></div>
ในตัวอย่างนี้ v-bind ถูกใช้เพื่อกำหนดค่า id attribute ของ <div> element โดยใช้ค่า
จาก dynamicId ซึ่งหมายถึงว่าค่าของ id จะถูกอัปเดตโดยอัตโนมัติเมื่อ dynamicId
ใน Vue instance เปลี่ยนแปลง
เพื่อให้เห็นภาพชัดเจน ปรับไฟล์ App.vue เป็นดังนี้
<script setup>
import { ref } from 'vue'
let dynamicId = ref('myid1');
// สมมติอีก 5 วินาทีต่อมาค่ามีการเปลี่ยนแปลง
setTimeout(function(){
dynamicId.value = 'myid2';
},5000);
</script>
<template>
<div v-bind:id="dynamicId"></div>
</template>
ผลลัพธ์ที่ได้ เมื่อโหลดมาครั้งแรก
<div id="myid1"></div> <!-- หลังจาก 5 วินาทีต่อ เมื่อค่ามีการเปลี่ยนแปลง template จะมีการเปลี่ยนแแปลง และค่า id จะเปลี่ยนเป็น myid2 --> <div id="myid2"></div>
แต่ถ้าเกิดค่าของ dynamicId เป็น null หรือ undefined ตัว id attribute ก็จะถูก
นำออกจาก div สมมติ เช่น เรากำหนดค่า เป็นดังนี้
setTimeout(function(){
dynamicId.value = null;
// หรือ dynamicId.value = undefined;
},5000);
สำหรับการใช้งาน v-bind directive เพื่อกำหนด attribute ให้กับ html นั้นเป็นรูปแบบ
การใช้งานที่มีใช้โดยทั่วไป จึงสามารถเขียนในรูปแบบกระชับ ได้โดยใช้เป็น : (โคล่อน) แล้วตาม
ด้วย attribute ที่ต้องการ อย่างตัวอย่างข้างต้นก็จะเป้น
<div :id="dynamicId"></div>
ก่อนจะไปต่อเพิ่มเติม มาทำความรู้จักกับคำว่า Directives ใน vuejs กันก่อน
Directives ใน vuejs คืออะไร
Directives ใน Vue.js เป็นคำสั่งที่เป็นคำสั่งพิเศษที่ใช้ในเทมเพลต (template) เพื่อจัดการ
กับ DOM ในวิธีที่สะดวกและอัตโนมัติ โดยปกติแล้ว Directives จะถูกใช้ในคำสั่งแบบ prefix v-
หรือก็คือขึ้นต้นด้วย v- ใน HTML เทมเพลต ซึ่ง Vue.js จะอ่านและแปลงคำสั่งดังกล่าวเป็นการ
ทำงานตามเงื่อนไขของ Directive นั้น ๆ
ตัวอย่างของ Built-in Directives ใน Vue.js:
1.v-if: ใช้เพื่อแสดงหรือซ่อน element ขึ้นอยู่กับเงื่อนไขที่กำหนด
2.v-for: ใช้สำหรับการทำซ้ำ element โดยอ้างอิงจากข้อมูลในอาร์เรย์หรือออปเจ็กต์
3.v-bind: ใช้เพื่อผูกข้อมูล (data) ใน Vue instance กับ attribute ของ element
4.v-on: ใช้เพื่อเป็น event listener ที่ใช้ในการตอบสนองต่อเหตุการณ์ต่าง ๆ เช่น click,
submit, mouseover เป็นต้น
5.v-model: ใช้เพื่อผูกข้อมูล (data) ใน Vue instance กับ input, textarea หรือ
select element เพื่อให้ข้อมูลอัปเดตโดยอัตโนมัติเมื่อผู้ใช้ป้อนข้อมูล
6.v-show: ใช้เพื่อแสดงหรือซ่อน element โดยอ้างอิงกับเงื่อนไขที่กำหนด แตกต่างจาก v-if
โดยวิธีการทำงาน
7.v-html: ใช้เพื่อเป็นการกำหนด innerHTML ของ element จากข้อมูลใน Vue instance
ซึ่งสามารถใช้สำหรับแสดงข้อมูล HTML ได้
8.v-pre: ใช้เพื่อบอก Vue.js ว่าไม่ต้องคอมไพล์ (compile) ตัวเนื้อหาของ element นี้
และ element ย่อย ๆ ที่อยู่ด้านใน
9.v-cloak: ใช้เพื่อป้องกันการแสดง template ที่ยังไม่ได้ถูกคอมไพล์ ซึ่งใช้ร่วมกับ CSS
ในการซ่อน template ในขณะที่ Vue.js กำลังโหลด
10.v-once: ใช้เพื่อทำให้ element นั้นเป็นครั้งเดียวเท่านั้น ซึ่งจะไม่ถูกคอมไพล์ใหม่หากข้อมูลใน
Vue instance เปลี่ยนแปลง
11.v-text: ใช้ในการกำหนดข้อความที่จะแสดงใน element โดยจะแทนที่ข้อความที่อยู่ภายใน
element นั้นด้วยข้อมูลที่ได้รับจาก Vue instance และจะอัปเดตข้อความตามข้อมูล
ที่เปลี่ยนแปลงใน Vue instance ใช้เมื่อต้องการแสดงข้อมูลแบบเป็นข้อความเท่านั้น
12.v-else: ใช้ในการกำหนดส่วนของเทมเพลตที่จะแสดงเมื่อเงื่อนไขของ v-if หรือ v-else-if
ก่อนหน้านั้นไม่เป็นเท็จ (false)
13.v-else-if: ใช้ในการกำหนดเงื่อนไขเพิ่มเติมในการตรวจสอบหลายเงื่อนไขเมื่อใช้ร่วมกับ v-if
และ v-else
14.v-slot: ใช้ในการกำหนดส่วนของ template ที่จะถูกใช้เป็น slot ใน component นั้น ๆ
ซึ่งเป็นส่วนที่เปิดโอกาสให้ส่ง element หรือข้อมูลเข้าไปใน component ที่มีการใช้ slot
15.v-memo:ใช้เพื่อ memoize หนึ่ง subtree ของเทมเพลต สามารถใช้กับทั้ง elements
และ components ได้ ใน directive นี้คาดหวังว่าจะได้รับอาร์เรย์ของค่าที่เป็น dependency
ที่มีความยาวคงที่เพื่อเปรียบเทียบสำหรับ memoization ถ้าค่าทุกตัวในอาร์เรย์เหมือนกับค่า
ที่มีการ render ครั้งล่าสุด การอัปเดตสำหรับ subtree ทั้งหมดจะถูกข้าม
Directives เป็นเครื่องมือที่สำคัญในการสร้างและจัดการกับเทมเพลตใน Vue.js ซึ่งช่วยให้
การทำงานกับ DOM เป็นไปอย่างมีประสิทธิภาพและสะดวกสบายมากยิ่งขึ้น
Boolean Attributes
ใน html attribute ยังมีอีกรูปแบบข้อมูลที่เป็นค่า จริงหรือเท็จ หรือค่า boolean เช่น disabled
ที่มีพบเห็นใช่กันบ่อย ตัวอย่าง ปุ่มที่กำหนดให้เป็น disabled
<script setup>
import { ref } from 'vue'
const isButtonDisabled = ref(true);
// สมมติอีก 5 วินาทีต่อมาค่ามีการเปลี่ยนแปลง
setTimeout(function(){
isButtonDisabled.value = false;
},5000);
</script>
<template>
<button :disabled="isButtonDisabled">Button</button>
</template>
อย่างไรก็ตามสำหรับการใช้งานกับฟอร์ม ปกติแล้วจะใช้ directive ที่ชื่อว่า v-model
เช่นตัวอย่าง checkbox
<script setup>
import { ref } from 'vue'
const checked = ref(true)
</script>
<template>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
</template>
เนื้อหาละเอียดเกี่ยวกับฟอร์ม เราจะได้ศึกษาต่อในลำดับต่อๆ ไปภายหลัง
Binding Multiple Attributes
การกำหนด attribute หลายๆ ค่าพร้อมกัน เราสามารถกำหนด object ข้อมูลที่ต้องการได้
ในกรณีนี้ เราจะไม่สามารถใช้รูปแบบกระชับในการเขียนได้ แต่จะใช้เป็น v-bind แทน โคล่อน
<script setup>
import { ref } from 'vue'
const objectOfAttrs = ref({
id: 'container',
class: 'wrapper'
})
// สมมติหลังจาก 5 วินาที เราต้องการเปลี่ยนค่า id
setTimeout(function(){
objectOfAttrs.value.id = 'container-2'
},5000)
</script>
<template>
<div v-bind="objectOfAttrs"></div>
</template>
ผลลัพ์ธที่ได้
<div id="container" class="wrapper"></div> <!-- สมมติหลังจาก 5 วินาที เราต้องการเปลี่ยนค่า id --> <div id="container-2" class="wrapper"></div>
*ข้อสังเกต สำหรับการเขียน javascript ใน vuejs เราสามารถละ เซมิโคล่อน ( ; )
ท้ายคำสั่ง โดยจะมีหรือไม่มีก็ได้ ขึ้นกับความถนัด
** การกำหนดตัวแปร หากไม่มีการใช้งานผ่านฟังก์ชั่น ref() เมื่อค่าเปลี่ยนแปลง จะไม่มีผล
กับการเรนเดอร์ template ใหม่ ยกตัวอย่างด้านล่าง
<script setup>
import { ref } from 'vue'
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
setTimeout(function(){
objectOfAttrs.id = 'container-2'
},5000)
</script>
<template>
<div v-bind="objectOfAttrs"></div>
</template>
การกำหนดโดยไม่ใช่้ ref() ค่า id property ของ objectOfAttrs จะมีการเปลี่ยนแปลง
เมื่อครบ 5 วินาที แต่ ค่าที่แสดงใน html จะไม่เปลี่ยนตาม หรือก็คือไม่มีการ render เมื่อมี
การเปลี่ยนแปลงข้อมูล
เนื้อหาในตอนนี้จะขอจบ template syntax เกี่ยวกับ attribute ไว้เพียงเท่านี้ก่อน
ติดตามต่อในตอนหน้า
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง