1. Template ใน Vue.js คืออะไร?

Template ใน Vue.js ใช้สำหรับกำหนดโครงสร้าง HTML ที่แสดงผลในหน้าจอ โดย Vue.js จะช่วยเชื่อมโยงระหว่างข้อมูล (Data) และการแสดงผล (View) อย่างมีประสิทธิภาพ

---

2. Syntax พื้นฐานใน Template

การแสดงค่าด้วย Interpolation

• การใช้ {{ }} เพื่อแสดงค่าจาก Data:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

ผลลัพธ์:

Hello Vue!

---

การใช้ Directives

Directives เป็นคำสั่งพิเศษใน Vue.js ที่เริ่มต้นด้วย v- เช่น v-bind, v-if, และ v-for

ตัวอย่าง:

1. v-bind: ใช้สำหรับผูกข้อมูลกับ Attribute ของ HTML เช่น class หรือ id

<template>
  <div>
    <a :href="url">Click Here</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org'
    };
  }
};
</script>

2. v-if และ v-else: ใช้สำหรับการแสดงผลแบบเงื่อนไข

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

3. v-for: ใช้สำหรับการวนลูปแสดงรายการ

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

ผลลัพธ์:

- Apple
- Banana
- Cherry

---

3. การ Binding Attribute ด้วย v-bind

v-bind ใช้สำหรับผูกค่าใน Data กับ Attribute ของ HTML เช่น class, id, href:

<template>
  <div :class="dynamicClass">This is a dynamic class example</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicClass: 'highlight'
    };
  }
};
</script>

<style>
.highlight {
  color: red;
  font-weight: bold;
}
</style>

ผลลัพธ์:
ข้อความจะมีสีแดงและตัวหนา

---

4. การ Binding ข้อมูลแบบสองทางด้วย v-model

v-model ใช้สำหรับการเชื่อมโยงข้อมูลแบบสองทาง เช่น การป้อนข้อมูลในฟอร์ม:

<template>
  <div>
    <input v-model="name" placeholder="Enter your name" />
    <p>Hello, {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  }
};
</script>

ผลลัพธ์:
เมื่อผู้ใช้กรอกชื่อในช่อง Input ข้อความจะแสดงผลตามข้อมูลที่ป้อน

---

5. ตัวอย่างการรวม Directives

<template>
  <div>
    <h1 :class="{ active: isActive }">Dynamic Class Example</h1>
    <p v-if="isActive">This text is visible when active.</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="toggleActive">Toggle Active</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active {
  color: green;
}
</style>

ผลลัพธ์:

• เมื่อ isActive เป็น true ข้อความจะมีสีเขียวและแสดงข้อความพิเศษ
• คลิกปุ่มเพื่อสลับสถานะการแสดงผล

---

6. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

• การใช้ Template ใน Vue.js
• การแสดงผลด้วย Interpolation
• การใช้ Directives เช่น v-bind, v-if, v-for, และ v-model
• การผูกข้อมูลแบบสองทาง

ในบทถัดไป เราจะเจาะลึกเกี่ยวกับ Data และ Methods เพื่อเพิ่มความสามารถในการควบคุม Component ของคุณ!