ทำความรู้จัก Attribute Bindings และ Directives ใน VueJS

บทความใหม่ เดือนนี้ โดย Ninenik Narkdee
v bind boolean attributes directives vuejs attribute bindings

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ v bind boolean attributes directives vuejs attribute bindings

ดูแล้ว 189 ครั้ง


เนื้อหาในตอนที่แล้วเราได้รู้จักกับรูปแบบการแทรกข้อมูลเบื้องต้น จากตัวแปร
หรือ 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 ไว้เพียงเท่านี้ก่อน 
ติดตามต่อในตอนหน้า 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง






เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ