Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 12: การใช้ Directive ใน Vue.js

1. Directive คืออะไร?

Directive ใน Vue.js เป็นคำสั่งพิเศษที่เริ่มต้นด้วย v- ใช้สำหรับการจัดการพฤติกรรมของ DOM (Document Object Model) เช่น การแสดง/ซ่อนองค์ประกอบ การทำงานกับข้อมูล และการจัดการ Event

2. Directive พื้นฐานใน Vue.js

2.1 v-bind

ใช้สำหรับผูกข้อมูลจาก JavaScript ไปยัง Attribute ของ HTML เช่น class, id, href

ตัวอย่าง:

<template>
  <div>
    <a :href="url">Visit Vue.js</a>
  </div>
</template>

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

ผลลัพธ์:
ลิงก์จะชี้ไปที่ https://vuejs.org

2.2 v-if, v-else, และ v-else-if

ใช้สำหรับการแสดงผลแบบเงื่อนไข

ตัวอย่าง:

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

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

ผลลัพธ์:

  • ถ้า isLoggedIn เป็น true จะแสดง “Welcome back!”
  • ถ้า isLoggedIn เป็น false จะแสดง “Please log in.”

2.3 v-show

ใช้สำหรับการซ่อนองค์ประกอบด้วยการตั้งค่า CSS display: none แทนการลบออกจาก DOM

ตัวอย่าง:

<template>
  <div>
    <p v-show="isVisible">This text is visible</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

ผลลัพธ์:

  • ข้อความจะแสดงหรือซ่อนตามค่า isVisible

2.4 v-for

ใช้สำหรับการวนลูปข้อมูล เช่น Array หรือ Object

ตัวอย่าง:

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

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

ผลลัพธ์:

  • 1. Apple
  • 2. Banana
  • 3. Cherry

2.5 v-model

ใช้สำหรับการ Binding ข้อมูลแบบสองทาง (Two-Way Binding)

ตัวอย่าง:

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

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

ผลลัพธ์:

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

3. การสร้าง Custom Directive

นอกจาก Directive ที่มีให้แล้ว คุณยังสามารถสร้าง Directive เองได้

ตัวอย่าง:

<template>
  <div>
    <p v-highlight="'yellow'">This text is highlighted</p>
  </div>
</template>

<script>
export default {
  directives: {
    highlight: {
      beforeMount(el, binding) {
        el.style.backgroundColor = binding.value;
      }
    }
  }
};
</script>

คำอธิบาย:

  • สร้าง Directive ชื่อ highlight
  • เปลี่ยนสีพื้นหลังขององค์ประกอบตามค่าที่ส่งเข้ามา

4. การใช้ Modifiers ใน Directive

Modifiers เป็นคำสั่งเพิ่มเติมที่ใช้กับ Directive เพื่อปรับเปลี่ยนพฤติกรรม

ตัวอย่าง:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="name" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    submitForm() {
      alert(`Submitted name: ${this.name}`);
    }
  }
};
</script>

คำอธิบาย:

  • ใช้ Modifiers .prevent เพื่อป้องกันการ Refresh หน้าจอเมื่อส่งฟอร์ม

5. สรุป

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

  • Directive พื้นฐาน เช่น v-bind, v-if, v-show, v-for, และ v-model
  • การสร้าง Custom Directive
  • การใช้ Modifiers เพื่อปรับแต่งพฤติกรรม Directive

ในบทถัดไป เราจะศึกษาการจัดการ State ด้วย Vuex เพื่อเพิ่มความสามารถในการจัดการข้อมูลในแอปพลิเคชัน!