Vue Directives

ใน 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 มากจนเกินไป)