Vue Directives

   อัปเดตล่าสุด Feb. 14, 2024

ใน Vue 3 คำสั่ง (Directives) เป็นวิธีพิเศษในการเพิ่มพฤติกรรม (behavior) เพิ่มเติมให้กับ Component โดยไม่ต้องเขียน JavaScript มากจนเกินไป โดย Directive ทำหน้าที่เหมือนคำแนะนำที่บอก Vue ว่าควรทำอะไรกับบางส่วนของ Template

ตัวอย่างคำสั่งพื้นฐานของ Vue Directives แบบต่าง ๆ

1. v-model: ผูกข้อมูล (Data Binding) ของอินพุตกับข้อมูลในคอมโพเนนต์ ตัวอย่าง เช่น

<template>
<input type="text" v-model="message" />
</template>

<script setup>
let message = "Hello!";
</script>


2. v-show & v-if  ใช้สำหรับควบคุมการแสดง Component ตัวอย่าง เช่น

<template></template>
<div v-show="isVisible">
<p>ข้อความนี้จะแสดงถ้า isVisible เป็นจริง</p>
</div>
<div v-if="isLoggedIn">
<p>ข้อความนี้จะแสดงถ้า isLoggedIn เป็นจริง</p>
</div>
</template>

<script setup>
let isVisible = false;
let isLoggedIn = true;
</script>


3. v-for ใช้สำหรับวนซ้ำ (loop) ข้อมูลของ Component ออกมา ตัวอย่าง เช่น 

<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>

<script setup>
let items = [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
];
</script>


แนวทางปฏิบัติที่ดีที่สุด (Best Practice)

  • ใช้คำสั่งอย่างเหมาะสม ไม่ยัดทุกอย่างลงไปในคำสั่งเดียว
  • ตั้งชื่อตัวแปรเพื่อความเข้าใจง่าย
  • ใช้คำสั่งเงื่อนไข (v-if) อย่างระมัดระวัง เพื่อป้องกันการคำนวณที่ไม่จำเป็น (ไม่ควรมี logic คำนวณใน Template มากจนเกินไป)




คอร์สเรียนแนะนำ