কাস্টম ডিরেক্টিভ তৈরি করা

Vue.js এ ডিরেকটিভস হলো এমন বিশেষ HTML অ্যাট্রিবিউট যা Vue এর আচরণ নির্ধারণ করতে সহায়তা করে। Vue.js অনেক বিল্ট-ইন ডিরেকটিভ (যেমন v-bind, v-if, v-for, ইত্যাদি) প্রদান করে, কিন্তু কখনও কখনও আপনার নিজস্ব কাস্টম ডিরেকটিভ তৈরি করার প্রয়োজন হতে পারে। কাস্টম ডিরেক্টিভ তৈরি করার মাধ্যমে আপনি Vue এর ডিফল্ট আচরণে অতিরিক্ত ফাংশনালিটি যোগ করতে পারবেন।

এখানে কাস্টম ডিরেকটিভ তৈরি করার পদ্ধতি আলোচনা করা হলো।

কাস্টম ডিরেক্টিভ তৈরি করা

Vue.js এ কাস্টম ডিরেকটিভ তৈরি করতে Vue.directive() মেথড ব্যবহার করা হয়। এই মেথডের মাধ্যমে আপনি একটি নতুন ডিরেকটিভ তৈরি করতে পারেন এবং তার বিভিন্ন হুকস (hooks) নির্ধারণ করতে পারেন।

কাস্টম ডিরেক্টিভের উদাহরণ:

ধরা যাক, আমরা একটি কাস্টম ডিরেকটিভ তৈরি করতে চাই যা কোনও এলিমেন্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে। আমরা এই ডিরেকটিভটি v-bg-color নামে তৈরি করব।

// main.js বা আপনার Vue ফাইলে
import Vue from 'vue';

// কাস্টম ডিরেকটিভ তৈরি
Vue.directive('bg-color', {
  // bind হুক - এটি প্রথমবার এলিমেন্টটি DOM এ যুক্ত হওয়ার সময় কল হয়
  bind(el, binding) {
    // ডিরেকটিভের জন্য ব্যাকগ্রাউন্ড রঙ সেট করা
    el.style.backgroundColor = binding.value;
  },
  // একটি অপশনাল হুক - যখন ডিরেকটিভের মান পরিবর্তিত হয়
  update(el, binding) {
    el.style.backgroundColor = binding.value;
  }
});

new Vue({
  el: '#app',
  data: {
    color: 'lightblue'
  }
});

এখানে, v-bg-color নামে একটি কাস্টম ডিরেকটিভ তৈরি করা হয়েছে। এটি এলিমেন্টে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে যেটি binding.value থেকে প্রাপ্ত হবে। এর মাধ্যমে আমরা কাস্টম ডিরেকটিভের একটি সাধারণ ব্যবহার দেখিয়েছি।

HTML টেমপ্লেটে কাস্টম ডিরেকটিভ ব্যবহার:

<div id="app">
  <div v-bg-color="color">
    This div has a background color set by a custom directive.
  </div>
  <button @click="color = 'pink'">Change Color</button>
</div>

এখানে, v-bg-color="color" ডিরেকটিভটি color ডেটা প্রপার্টির মান অনুযায়ী ব্যাকগ্রাউন্ড রঙ সেট করবে। আপনি button ক্লিক করে color এর মান পরিবর্তন করলে ব্যাকগ্রাউন্ড রঙও পরিবর্তিত হবে।

কাস্টম ডিরেকটিভের হুকস

Vue.js কাস্টম ডিরেকটিভে বেশ কিছু হুকস প্রোভাইড করে, যা নির্দিষ্ট সময়কালে কার্যকরী হয়। সেগুলোর মধ্যে কিছু গুরুত্বপূর্ণ হুকস হলো:

• bind: এটি ডিরেকটিভ প্রথমবার DOM এ যুক্ত হওয়ার সময় কল হয়। এই হুকটি একবারই কল হয়।
• inserted: এটি DOM এ এলিমেন্টটি ইনসার্ট করার পর কল হয়।
• update: এটি ডিরেকটিভের মান পরিবর্তিত হলে কল হয়।
• componentUpdated: এটি DOM এ এলিমেন্ট আপডেট হওয়ার পর কল হয়।
• unbind: এটি ডিরেকটিভ DOM থেকে সরানোর সময় কল হয়।

কাস্টম ডিরেকটিভে মান এবং আর্গুমেন্ট ব্যবহার

কাস্টম ডিরেকটিভে আর্গুমেন্ট এবং মান পাস করা যেতে পারে। binding.arg এবং binding.value এই দুটি প্রপার্টি ব্যবহার করে আপনি ডিরেকটিভের সাথে আর্গুমেন্ট এবং মান পাস করতে পারবেন।

উদাহরণ:

Vue.directive('focus', {
  bind(el, binding) {
    if (binding.arg === 'input') {
      el.focus();  // ইনপুট ফিল্ডে ফোকাস করবে
    } else {
      el.style.backgroundColor = binding.value;  // অন্য এলিমেন্টে ব্যাকগ্রাউন্ড রঙ সেট করবে
    }
  }
});

এখন এই ডিরেকটিভটি দুইভাবে ব্যবহার করা যাবে:

HTML:

<!-- ফোকাস করার জন্য -->
<input v-focus:input="'lightgreen'" />

<!-- ব্যাকগ্রাউন্ড রঙ পরিবর্তন করার জন্য -->
<div v-focus="'pink'">This div will have a pink background color.</div>

এখানে, v-focus:input আর্গুমেন্টের মাধ্যমে ইনপুট ফিল্ডে ফোকাস করা হবে এবং অন্য এলিমেন্টে ব্যাকগ্রাউন্ড রঙ সেট করা হবে।

কাস্টম ডিরেকটিভের ব্যবহার

1. UI Manipulation: কাস্টম ডিরেকটিভ ব্যবহার করে UI এর বিভিন্ন অংশ পরিবর্তন বা ম্যানিপুলেট করা যায়, যেমন ব্যাকগ্রাউন্ড রঙ, স্টাইল, এনিমেশন ইত্যাদি।
2. DOM Events: ডিরেকটিভ ব্যবহার করে DOM ইভেন্টগুলি নিয়ন্ত্রণ করা যায়, যেমন ক্লিক, হোভার, মাউস মুভ, ইত্যাদি।
3. Form Validation: কাস্টম ডিরেকটিভ ব্যবহার করে ফর্মের ইনপুট ভ্যালিডেশন করতে সহায়তা পাওয়া যায়।

সারাংশ

• Vue.js কাস্টম ডিরেকটিভ ব্যবহার করে আপনি Vue অ্যাপ্লিকেশনে নতুন বৈশিষ্ট্য যোগ করতে পারেন।
• কাস্টম ডিরেকটিভগুলিতে বিভিন্ন হুকস (bind, update, inserted, unbind) থাকে, যা DOM-এ পরিবর্তন করার সময় বিভিন্ন কার্যকলাপ সম্পন্ন করে।
• আর্গুমেন্ট এবং মান ব্যবহার করে কাস্টম ডিরেকটিভগুলির কার্যকারিতা বাড়ানো যায়।
• কাস্টম ডিরেকটিভে UI পরিবর্তন, DOM ইভেন্ট নিয়ন্ত্রণ, ফর্ম ভ্যালিডেশন ইত্যাদি কাজ করা যায়।

এভাবে Vue.js কাস্টম ডিরেকটিভ ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে উন্নত কাস্টম ফিচার যোগ করতে পারবেন।