เทคนิคขั้นสูง: การสร้าง Custom Directives และพัฒนา Plugin ใน Vue.js

1. Custom Directives คืออะไร?

Custom Directives ใน Vue.js ช่วยให้คุณสามารถสร้างคำสั่ง (Directives) ของตัวเองเพื่อเพิ่มความสามารถเฉพาะตัวให้กับ Component เช่น การจัดการ DOM โดยตรง หรือการเพิ่มฟีเจอร์ที่ไม่สามารถทำได้ด้วย Directives ที่มีอยู่แล้ว เช่น v-if, v-for หรือ v-bind

---

2. การสร้าง Custom Directives

2.1 ตัวอย่างการสร้าง Directive แบบง่าย

โค้ด:

<template>
  <div>
    <h1 v-focus>Hello Vue.js!</h1>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};
</script>

คำอธิบาย:

• v-focus เป็น Directive ที่ทำให้ Element ถูก Focus ทันทีเมื่อถูก Mounted
• ใช้ Hook mounted เพื่อเข้าถึง DOM และเรียก el.focus()

---

2.2 การสร้าง Directive พร้อม Parameter

โค้ด:

<template>
  <div>
    <p v-color="'red'">This text is red.</p>
    <p v-color="'blue'">This text is blue.</p>
  </div>
</template>

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

คำอธิบาย:

• v-color เป็น Directive ที่เปลี่ยนสีของข้อความตามค่าที่ส่งเข้ามาผ่าน binding.value

---

2.3 การใช้ Directive แบบ Global

โค้ดใน main.js:

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('uppercase', {
  mounted(el) {
    el.style.textTransform = 'uppercase';
  }
});

app.mount('#app');

การใช้งานใน Component:

<template>
  <p v-uppercase>This text will be uppercase.</p>
</template>

คำอธิบาย:

• v-uppercase เป็น Directive แบบ Global ที่ทำให้ข้อความใน Element เป็นตัวพิมพ์ใหญ่

---

3. การพัฒนา Plugin ใน Vue.js

Plugins ช่วยเพิ่มฟีเจอร์หรือฟังก์ชันที่สามารถใช้งานได้ทั่วทั้งแอปพลิเคชัน เช่น การจัดการ API, การจัดการ State, หรือการเพิ่ม Utility Functions

---

3.1 การสร้าง Plugin เบื้องต้น

โค้ด Plugin:

// plugins/myPlugin.js
export default {
  install(app) {
    app.config.globalProperties.$greet = (name) => `Hello, ${name}!`;
  }
};

การติดตั้ง Plugin:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './plugins/myPlugin';

const app = createApp(App);
app.use(myPlugin);
app.mount('#app');

การใช้งานใน Component:

<template>
  <div>{{ greetMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      greetMessage: ''
    };
  },
  mounted() {
    this.greetMessage = this.$greet('Vue.js');
  }
};
</script>

คำอธิบาย:

• myPlugin เพิ่มฟังก์ชัน $greet ที่สามารถเรียกใช้งานได้ในทุก Component

---

3.2 การสร้าง Plugin สำหรับ API

โค้ด Plugin:

// plugins/api.js
import axios from 'axios';

export default {
  install(app) {
    const apiClient = axios.create({
      baseURL: 'https://api.example.com',
      timeout: 1000
    });

    app.config.globalProperties.$api = apiClient;
  }
};

การติดตั้ง Plugin:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import apiPlugin from './plugins/api';

const app = createApp(App);
app.use(apiPlugin);
app.mount('#app');

การใช้งานใน Component:

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

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  async mounted() {
    const response = await this.$api.get('/users');
    this.users = response.data;
  }
};
</script>

คำอธิบาย:

• apiPlugin สร้าง Instance ของ Axios และเพิ่มเข้าไปใน Global Properties เพื่อให้ใช้งานได้ทุกที่

---

4. สรุป

ในบทนี้ คุณได้เรียนรู้วิธีสร้าง Custom Directives เพื่อเพิ่มความสามารถพิเศษให้กับ DOM และการพัฒนา Plugin เพื่อเพิ่มฟีเจอร์ที่สามารถใช้งานได้ทั่วทั้งแอปพลิเคชัน Vue.js เทคนิคเหล่านี้ช่วยให้คุณสามารถพัฒนาแอปพลิเคชันที่ยืดหยุ่นและขยายได้ง่าย

ในบทถัดไป เราจะพูดถึงการจัดการแอปพลิเคชัน Vue.js ในการทำงานร่วมกับ Microservices และระบบที่ซับซ้อน!