Vue.js কাস্টম ডিরেক্টিভস এবং ফিল্টারস

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

এখানে আমরা কাস্টম ডিরেক্টিভস এবং ফিল্টারস সম্পর্কে বিস্তারিত আলোচনা করব।

১. কাস্টম ডিরেক্টিভস

Vue.js এর কাস্টম ডিরেক্টিভস আপনাকে HTML উপাদানগুলির আচরণ পরিবর্তন করার ক্ষমতা দেয়। আপনি যখন কোনো বিশেষ আচরণ চান, যেমন মাউস হোভার, ফোকাস, অথবা ডম ম্যানিপুলেশন ইত্যাদি, তখন কাস্টম ডিরেক্টিভ তৈরি করতে পারেন।

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

Vue.js এ কাস্টম ডিরেক্টিভ তৈরি করার জন্য Vue.directive() মেথড ব্যবহার করতে হয়। এখানে একটি সাধারণ কাস্টম ডিরেক্টিভ তৈরির উদাহরণ দেওয়া হলো:

// main.js বা অন্য কোনো স্ক্রিপ্ট ফাইলে
Vue.directive('focus', {
  // ইনস্টল হওয়ার সময় ফাংশনটি কল হবে
  inserted: function(el) {
    // যখন এটি DOM এ ইনসার্ট হবে, তখন ইনপুট এলিমেন্টে ফোকাস করবে
    el.focus();
  }
});

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

<div id="app">
  <input v-focus>
</div>

এখানে v-focus ডিরেক্টিভটি ইনপুট এলিমেন্টে ফোকাস প্রয়োগ করবে যখন এটি পেজে লোড হবে।

কাস্টম ডিরেক্টিভের অন্যান্য ল্যাইফসাইকেল হুকস:

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

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value; // ডিরেক্টিভের ভ্যালু দ্বারা টেক্সটের রঙ পরিবর্তন
  }
});

এটি একটি কাস্টম v-color ডিরেক্টিভ তৈরি করবে, যা HTML এলিমেন্টের রঙ পরিবর্তন করতে ব্যবহার করা যাবে।

২. ফিল্টারস

Vue.js ফিল্টারস ডেটা প্রদর্শন করার সময় টেমপ্লেটে ডেটার ভ্যালু পরিবর্তন করতে ব্যবহৃত হয়। এটি সাধারণত টেক্সট ফর্ম্যাটিং, কেস চেঞ্জ, বা অন্য কোন ডেটা প্রসেসিংয়ের জন্য ব্যবহৃত হয়।

ফিল্টারস তৈরি করা:

Vue.js এ ফিল্টার তৈরি করার জন্য Vue.filter() মেথড ব্যবহার করা হয়। এখানে একটি সাধারণ ফিল্টার তৈরির উদাহরণ:

Vue.filter('capitalize', function(value) {
  if (!value) return '';
  return value.charAt(0).toUpperCase() + value.slice(1);
});

এই ফিল্টারটি কোনো স্ট্রিংয়ের প্রথম অক্ষরকে বড় অক্ষরে পরিবর্তন করবে।

ফিল্টার ব্যবহার:

<div id="app">
  <p>{{ message | capitalize }}</p> <!-- capitalize ফিল্টার ব্যবহার -->
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue.js!'
    }
  });
</script>

এখানে, {{ message | capitalize }} টেমপ্লেটে capitalize ফিল্টার ব্যবহার করা হয়েছে, যা hello, vue.js! স্ট্রিংটিকে Hello, vue.js! এ পরিবর্তন করবে।

ফিল্টারসের সীমাবদ্ধতা:

ফিল্টার শুধুমাত্র টেমপ্লেটে ব্যবহৃত হতে পারে এবং এতে অ্যাসিঙ্ক্রোনাস কোড বা অ্যারে/অবজেক্ট ম্যানিপুলেশন করা কঠিন হতে পারে। যদি বড় ডেটা প্রসেসিং বা জটিল লজিক প্রয়োজন হয়, তবে মেথড ব্যবহারের পরামর্শ দেওয়া হয়।

একাধিক ফিল্টার ব্যবহার:

একাধিক ফিল্টার ব্যবহার করা সম্ভব, তবে একটি পিপলাইনে তাদের সঠিকভাবে চেইন করতে হবে।

<p>{{ message | capitalize | reverse }}</p>

এখানে, reverse নামে একটি ফিল্টার তৈরি করতে হবে যা স্ট্রিংটিকে উল্টে ফেলবে। এতে capitalize এবং reverse ফিল্টার একসাথে ব্যবহার করা হচ্ছে।

৩. ফিল্টার এবং কাস্টম ডিরেক্টিভস এর মধ্যে পার্থক্য

• ফিল্টার: শুধুমাত্র ডেটার ভ্যালু প্রক্রিয়া বা ফরম্যাটিং করতে ব্যবহৃত হয়। এটি টেমপ্লেটে ব্যবহৃত হয় এবং সাধারণত displaying data বা rendering এর জন্য ব্যবহৃত হয়।
• কাস্টম ডিরেক্টিভ: DOM এলিমেন্টের আচরণ পরিবর্তন করার জন্য ব্যবহৃত হয়। এটি টেমপ্লেটের বাইরে কিছু নির্দিষ্ট DOM ম্যানিপুলেশন বা আচরণ নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যেমন এলিমেন্টের স্টাইলিং, ইনপুট হ্যান্ডলিং, ইত্যাদি।

সারাংশ

• কাস্টম ডিরেক্টিভস: Vue.js আপনাকে ডম এলিমেন্টের জন্য কাস্টম আচরণ নির্ধারণ করার সুযোগ দেয়। আপনি v- দিয়ে আপনার নিজস্ব ডিরেক্টিভ তৈরি করতে পারেন, যা DOM এ আচরণ পরিবর্তন করবে (যেমন ফোকাস, স্টাইলিং ইত্যাদি)।
• ফিল্টারস: ডেটা প্রক্রিয়াকরণ বা ফরম্যাটিং করার জন্য Vue.js ফিল্টারস ব্যবহার করতে পারেন। এটি মূলত টেমপ্লেটে ডেটার ভ্যালু পরিবর্তন করে প্রদর্শন করতে ব্যবহৃত হয়।

এগুলো Vue.js এর শক্তিশালী বৈশিষ্ট্য যা আপনাকে অ্যাপ্লিকেশনে কাস্টম লজিক প্রয়োগ করতে সাহায্য করে এবং ডেভেলপমেন্ট প্রক্রিয়াটি আরও কার্যকরী করে তোলে।

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 কাস্টম ডিরেকটিভ ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে উন্নত কাস্টম ফিচার যোগ করতে পারবেন।

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

• গ্লোবাল ডিরেকটিভস (Global Directives)
• লোকাল ডিরেকটিভস (Local Directives)

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

১. গ্লোবাল ডিরেকটিভস

গ্লোবাল ডিরেকটিভস হল সেই ডিরেকটিভগুলি যা আপনার পুরো Vue অ্যাপ্লিকেশনে ব্যবহৃত হতে পারে, একবার Vue ইনস্ট্যান্সে রেজিস্টার করার পর। Vue.js কিছু ডিফল্ট গ্লোবাল ডিরেকটিভস প্রদান করে যেমন v-bind, v-if, v-for, v-model ইত্যাদি। আপনি Vue ইনস্ট্যান্সে নতুন ডিরেকটিভ গ্লোবালি রেজিস্টারও করতে পারেন।

গ্লোবাল ডিরেকটিভসের উদাহরণ:

Vue.js এ কিছু ডিফল্ট গ্লোবাল ডিরেকটিভস এর উদাহরণ:

1. v-bind: একটি অ্যাট্রিবিউটের মান বাইন্ডিং করতে ব্যবহার করা হয়।

<div id="app">
  <a v-bind:href="url">Go to Vue</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>

2. v-if: একটি উপাদান শো বা হাইড করার জন্য শর্ত নির্ধারণ করা হয়।

<div id="app">
  <p v-if="isVisible">This is visible</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    }
  });
</script>

3. v-for: লুপিং করার জন্য ব্যবহৃত হয়।

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: ['Apple', 'Banana', 'Orange']
    }
  });
</script>

এগুলি Vue.js এর গ্লোবাল ডিরেকটিভস এর কিছু সাধারণ উদাহরণ। তবে, Vue.js আপনাকে নিজের কাস্টম ডিরেকটিভও গ্লোবালি রেজিস্টার করার সুযোগ দেয়।

গ্লোবাল ডিরেক্টিভ রেজিস্টারিং:

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

এখানে focus একটি কাস্টম গ্লোবাল ডিরেকটিভ হিসেবে রেজিস্টার করা হয়েছে, যা যেকোনো উপাদানকে ফোকাস করবে যখন তা DOM এ ইনসার্ট হবে।

২. লোকাল ডিরেকটিভস

লোকাল ডিরেক্টিভস হল সেই ডিরেকটিভগুলি যা শুধু নির্দিষ্ট কম্পোনেন্টের মধ্যে ব্যবহার করা হয়। আপনি Vue.js এর কম্পোনেন্টে ডিরেকটিভটিকে লোকালি রেজিস্টার করতে পারেন, এবং এটি শুধুমাত্র ওই কম্পোনেন্টে কার্যকর হবে।

লোকাল ডিরেকটিভসের উদাহরণ:

লোকাল ডিরেকটিভ রেজিস্টার করা:

Vue.component('my-component', {
  template: `<input v-focus>`,
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  }
});

এখানে, focus ডিরেকটিভটি শুধুমাত্র my-component কম্পোনেন্টে ব্যবহারযোগ্য এবং এটি সেই কম্পোনেন্টে ইনপুট এলিমেন্টে ফোকাস করবে।

৩. গ্লোবাল এবং লোকাল ডিরেকটিভসের মধ্যে পার্থক্য

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

Vue.js এর সাহায্যে আপনি কাস্টম ডিরেকটিভস তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের নির্দিষ্ট কার্যকারিতাকে সম্পাদন করতে সহায়তা করবে। কাস্টম ডিরেকটিভ তৈরি করার সময় আপনি binding, hook functions, modifiers ইত্যাদি ব্যবহার করতে পারেন।

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

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value;
  }
});

new Vue({
  el: '#app',
  data: {
    textColor: 'red'
  }
});

এখানে, v-color ডিরেকটিভটি যেকোনো এলিমেন্টে রঙ পরিবর্তন করার জন্য ব্যবহার করা হয়েছে।

<div id="app">
  <p v-color="textColor">This is red text!</p>
</div>

এভাবে, Vue.js আপনাকে কাস্টম ডিরেকটিভ তৈরি করার জন্য অনেক flexibility প্রদান করে।

সারাংশ

• গ্লোবাল ডিরেকটিভস: পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহৃত হয় এবং একবার রেজিস্টার করলে তা সব কম্পোনেন্টে প্রযোজ্য হয়।
• লোকাল ডিরেকটিভস: নির্দিষ্ট কম্পোনেন্টের মধ্যে ব্যবহৃত হয় এবং তা শুধু সেই কম্পোনেন্টের মধ্যে কার্যকর হয়।
• কাস্টম ডিরেকটিভস: আপনার প্রয়োজন অনুযায়ী ডিরেকটিভ তৈরি করতে পারবেন, যা অ্যাপের কার্যকারিতা বৃদ্ধিতে সাহায্য করবে।

Vue.js এর ডিরেকটিভস আপনাকে ডোম ম্যানিপুলেশন, শর্তাধীন রেন্ডারিং, ইভেন্ট হ্যান্ডলিং ইত্যাদির জন্য অনেক সুবিধা প্রদান করে।

Vue.js ফিল্টারস একটি খুবই শক্তিশালী ফিচার যা আপনাকে ডাটা রেন্ডার করার সময় সহজেই ফরম্যাটিং, প্রক্রিয়াকরণ বা পরিবর্তন করার সুবিধা দেয়। ফিল্টারস মূলত টেমপ্লেটের মধ্যে ডেটার মান পরিবর্তন করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি ডেটার উপস্থাপনা পরিবর্তন করতে পারেন, যেমন তারিখ ফরম্যাট পরিবর্তন, ক্যাপিটালাইজেশন, সংখ্যা ফরম্যাটিং ইত্যাদি।

Vue.js ফিল্টারস সাধারণত {{ value | filterName }} সিনট্যাক্স ব্যবহার করে প্রয়োগ করা হয়।

১. ফিল্টারস এর মৌলিক ব্যবহার

Vue.js এ ফিল্টারস ব্যবহার করার জন্য, আপনাকে একটি | (পাইপ) সিম্বল ব্যবহার করতে হবে, যা ফিল্টার এবং ডেটা মধ্যে একটি সংযোগ স্থাপন করে।

উদাহরণ:

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue!'
    },
    filters: {
      capitalize: function(value) {
        if (!value) return ''
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  });
</script>

এখানে, capitalize ফিল্টারটি message ডেটা প্রপার্টির প্রথম অক্ষরটি বড় বানায়। টেমপ্লেটে {{ message | capitalize }} দিয়ে এটি প্রদর্শিত হবে।

২. ডেটা ফরম্যাটিং ফিল্টারস

Vue.js এর মাধ্যমে আপনি বিভিন্ন ধরনের ডেটা ফরম্যাটিং করতে পারেন যেমন তারিখ ফরম্যাট, সংখ্যা ফরম্যাট, স্ট্রিং এর ক্ষেত্রে ক্যাপিটালাইজেশন ইত্যাদি।

উদাহরণ ১: তারিখ ফরম্যাটিং

আপনি একটি তারিখ ফিল্টার তৈরি করতে পারেন যা একটি তারিখকে নির্দিষ্ট ফরম্যাটে রেন্ডার করবে।

<div id="app">
  <p>{{ currentDate | formatDate }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      currentDate: new Date()
    },
    filters: {
      formatDate: function(value) {
        if (!value) return ''
        return value.toLocaleDateString()  // Date কে স্থানীয় ফরম্যাটে রেন্ডার করা
      }
    }
  });
</script>

এখানে, currentDate এর মান স্থানীয় তারিখ ফরম্যাটে রেন্ডার হবে।

উদাহরণ ২: মুদ্রা ফরম্যাটিং

একটি সংখ্যা কে মুদ্রা ফরম্যাটে পরিবর্তন করার জন্য আপনি একটি ফিল্টার ব্যবহার করতে পারেন।

<div id="app">
  <p>{{ amount | currency }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      amount: 12345.67
    },
    filters: {
      currency: function(value) {
        return '$' + value.toFixed(2)  // মুদ্রা হিসেবে মান প্রদর্শন করা
      }
    }
  });
</script>

এখানে, amount ফিল্টার করা হচ্ছে যাতে এটি একটি মুদ্রা ফরম্যাটে প্রদর্শিত হয়।

৩. একাধিক ফিল্টার ব্যবহার

Vue.js তে আপনি একাধিক ফিল্টার একসাথে ব্যবহার করতে পারেন। একাধিক ফিল্টার একটি পাইপলাইন হিসেবে কাজ করে, অর্থাৎ প্রথম ফিল্টারটি একটি মান পরিবর্তন করবে এবং দ্বিতীয় ফিল্টারটি তা আরো পরিবর্তন করবে।

উদাহরণ:

<div id="app">
  <p>{{ message | capitalize | exclamation }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue'
    },
    filters: {
      capitalize: function(value) {
        return value.charAt(0).toUpperCase() + value.slice(1)
      },
      exclamation: function(value) {
        return value + '!'  // শেষে এক্সক্লেমেশন চিহ্ন যোগ করা
      }
    }
  });
</script>

এখানে, প্রথমে capitalize ফিল্টারটি message কে কেপিটালাইজ করবে এবং তারপর exclamation ফিল্টারটি এক্সক্লেমেশন চিহ্ন যোগ করবে।

৪. ফিল্টারসের সীমাবদ্ধতা

• ফিল্টারস শুধুমাত্র টেমপ্লেটের মধ্যে ব্যবহৃত হয়: Vue.js ফিল্টারস শুধুমাত্র টেমপ্লেটের মধ্যে ব্যবহৃত হতে পারে, সেগুলি মেথডের মধ্যে বা JavaScript কোডের মধ্যে ব্যবহার করা যায় না।
• পারফরম্যান্স: ফিল্টারস ছোট কাজের জন্য উপযুক্ত, তবে বড় এবং জটিল লজিকের জন্য মেথড বা কম্পিউটেড প্রপার্টি ব্যবহার করা উচিত।

৫. বুস্টেড ফিল্টারস: কম্পিউটেড প্রপার্টি বা মেথড ব্যবহার করা

যখন আপনার ফিল্টার আরো জটিল বা বেশি হিসাবপ্রবণ হয়, তখন Vue.js কম্পিউটেড প্রপার্টি অথবা মেথড ব্যবহার করার পরামর্শ দেয়। কারণ ফিল্টারসের মাধ্যমে অনেক জটিল গণনা বা কার্যক্রম করা হয় না, বরং কম্পিউটেড প্রপার্টি বা মেথড এসব কাজের জন্য উপযুক্ত।

উদাহরণ: কম্পিউটেড প্রপার্টি ব্যবহার করা

<div id="app">
  <p>{{ computedCurrency }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      amount: 12345.67
    },
    computed: {
      computedCurrency: function() {
        return '$' + this.amount.toFixed(2)
      }
    }
  });
</script>

এখানে computedCurrency একটি কম্পিউটেড প্রপার্টি যা amount এর মানকে মুদ্রা হিসেবে ফরম্যাট করে।

সারাংশ

• ফিল্টারস Vue.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ডেটা ফরম্যাটিং বা প্রক্রিয়াকরণ করতে সহায়তা করে।
• এটি টেমপ্লেটে ডেটা প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়, যেমন তারিখ ফরম্যাটিং, সংখ্যা ফরম্যাটিং, স্ট্রিং কনভার্সন ইত্যাদি।
• একাধিক ফিল্টার একসাথে ব্যবহার করা যায় এবং Vue.js এর ফিল্টারস সাধারণত ছোট প্রক্রিয়াকরণের জন্য উপযুক্ত, বড় লজিকের জন্য কম্পিউটেড প্রপার্টি বা মেথড ব্যবহার করা উচিত।

Vue.js ফিল্টারস একটি শক্তিশালী বৈশিষ্ট্য, যা ডেটার মান কনভার্ট বা পরিবর্তন করার জন্য ব্যবহৃত হয়। এটি সাধারণত টেমপ্লেটের মধ্যে ব্যবহৃত হয়, যেখানে ডেটাকে সহজে ফরম্যাট করা বা ম্যানিপুলেট করা যায়। কিন্তু, Vue.js এর ফিল্টারস কিছু লিমিটেশন এবং ভালো ব্যবহার সম্পর্কিত কিছু নিয়মাবলী রয়েছে, যা নিশ্চিত করে যে আপনার অ্যাপ্লিকেশনটি স্কেলেবল এবং পারফরম্যান্সে উপযোগী থাকে। নিচে ফিল্টারস সম্পর্কিত লিমিটেশন এবং সেরা প্র্যাকটিস নিয়ে আলোচনা করা হলো।

১. Vue.js ফিল্টারস কি?

ফিল্টারস সাধারণত Vue.js এর টেমপ্লেটে ব্যবহৃত হয়, যা ডেটার মান পরিবর্তন করার জন্য সরল এবং পুনরাবৃত্তি উপায়ে ব্যবহৃত হয়। আপনি ফিল্টারস ব্যবহার করে যেমন স্ট্রিং-এর কেস পরিবর্তন, ডেটার ফরম্যাট পরিবর্তন, বা একটি নির্দিষ্ট শর্তে ডেটাকে ম্যানিপুলেট করতে পারেন।

ফিল্টারস এর উদাহরণ:

<!-- টেমপ্লেটের মধ্যে ফিল্টার ব্যবহার -->
<div id="app">
  <p>{{ message | uppercase }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue!'
    },
    filters: {
      uppercase(value) {
        return value.toUpperCase();
      }
    }
  });
</script>

এখানে, uppercase ফিল্টারটি message ডেটা প্রপার্টির মানকে বড় অক্ষরে পরিবর্তন করবে।

২. ফিল্টারস এর লিমিটেশনস (Limitations)

Vue.js এর ফিল্টারস কিছু লিমিটেশন বা সীমাবদ্ধতার কারণে শুধুমাত্র সহজ ব্যবহারেই সীমাবদ্ধ থাকে, এবং কিছু ক্ষেত্রে এগুলি পারফরম্যান্স বা সলিউশন হিসাবে উপযুক্ত নাও হতে পারে। নিম্নলিখিত কিছু সীমাবদ্ধতা রয়েছে:

২.১. অ্যালাইড টু টেমপ্লেটস

ফিল্টারস শুধু টেমপ্লেটের মধ্যে ব্যবহার করা যেতে পারে। এগুলি শুধুমাত্র ডেটা প্রপার্টির রেন্ডারিংয়ের জন্য প্রস্তুত করা হয়, এবং Vue.js এর অন্যান্য অংশ (যেমন কম্পোনেন্ট লজিক, মেথডস, ইত্যাদি) বা জাভাস্ক্রিপ্ট ফাংশনে ফিল্টারস ব্যবহার করা যায় না।

এটি অন্যান্য লাইব্রেরি বা সিস্টেমের তুলনায় সীমাবদ্ধতা হতে পারে, যেখানে ফিল্টার বা ডেটা ম্যানিপুলেশন সরাসরি কোডে ব্যবহৃত হতে পারে।

২.২. পারফরম্যান্স ইস্যু

ফিল্টারস ব্যবহারের মাধ্যমে আপনি টেমপ্লেটের মধ্যে বারবার ডেটা প্রসেস করতে পারেন। যখন বড় অ্যাপ্লিকেশনগুলোতে ফিল্টার অনেক বার ব্যবহৃত হয়, তখন এটি পারফরম্যান্স ইস্যু তৈরি করতে পারে। কারণ Vue.js প্রতিবার রেন্ডারিং-এর সময় ফিল্টার প্রক্রিয়া চালায়, যা বড় ডেটা বা বারবার রেন্ডার হলে অ্যাপ্লিকেশনটি ধীর হয়ে যেতে পারে।

২.৩. ডিবাগিং সমস্যা

ফিল্টারস শুধুমাত্র টেমপ্লেটের মধ্যে ব্যবহৃত হওয়ায়, এগুলোর ডিবাগিং কিছুটা কঠিন হতে পারে। যেহেতু ফিল্টার সরাসরি ফাংশনে কনভার্ট বা ডেটা ম্যানিপুলেট করে না, তাই এগুলোর কাজ ট্র্যাক করা বা ডিবাগ করা তুলনামূলকভাবে আরও জটিল হতে পারে।

২.৪. কেবল ডেটা প্রপার্টি পরিবর্তন

ফিল্টারস শুধুমাত্র প্রদত্ত ডেটা প্রপার্টির উপর কাজ করে, তবে যদি ডেটার সাথে কিছু গাণিতিক বা জটিল প্রক্রিয়া করতে হয়, যেমন অ্যারে ফিল্টারিং, ডেটা ফরম্যাটিং ইত্যাদি, সেক্ষেত্রে কম্পোনেন্ট মেথডস বা কম্পিউটেড প্রপার্টি ব্যবহার করা উচিত।

৩. কনভার্সেশন্স এবং সেরা প্র্যাকটিস

ফিল্টারস ব্যবহারের সময় কিছু সেরা প্র্যাকটিস অনুসরণ করা উচিত, যাতে অ্যাপ্লিকেশনটি সহজ, স্কেলেবল এবং পারফরম্যান্সে উপযোগী থাকে।

৩.১. ফিল্টারস কমপ্লেক্স ফাংশন না বানানো

ফিল্টারস ব্যবহার করা যেতেই পারে, তবে এটি খুব বেশি জটিল বা লজিক্যাল ফাংশন যেমন ডেটা যাচাই, নেটওয়ার্ক কল, বা বড় ডেটা প্রসেসিংয়ের জন্য ব্যবহার করা উচিত নয়। এর পরিবর্তে, এমন কাজের জন্য কম্পিউটেড প্রপার্টি বা মেথডস ব্যবহার করুন।

৩.২. পারফরম্যান্সের জন্য কম্পিউটেড প্রপার্টি ব্যবহার করা

যদি আপনি কোনো ফিল্টারের মাধ্যমে ডেটা পরিবর্তন বা ফরম্যাট করতে চান, তবে সেই পরিবর্তনটি কম্পিউটেড প্রপার্টি বা মেথডস এ রাখুন, যাতে সেই কাজ শুধুমাত্র একবার করা হয় এবং পারফরম্যান্সে কোনো সমস্যা না হয়। Vue.js কম্পিউটেড প্রপার্টির মাধ্যমে কেবলমাত্র তখনই ফাংশনটি রি-রান করবে যখন প্রয়োজনীয় ডেটা পরিবর্তন হবে।

৩.৩. ডেটা প্রপার্টি এবং ফিল্টারস এর মধ্যে স্পষ্ট বিভাজন

ফিল্টারস হল UI উপাদানগুলির মধ্যে ডেটা দেখানোর জন্য, তাই সেগুলিকে শুধুমাত্র template বা computed প্রপার্টির মধ্যে ব্যবহার করুন। Business logic বা data processing এর জন্য মেথডস এবং কম্পিউটেড প্রপার্টি ব্যবহার করা উচিত।

৩.৪. অনেক ফিল্টার ব্যবহার করা এড়ানো

অতিরিক্ত ফিল্টার ব্যবহার আপনার টেমপ্লেটকে জটিল করে তুলতে পারে এবং পারফরম্যান্সে প্রভাব ফেলতে পারে। তাই শুধুমাত্র প্রয়োজনীয় ফিল্টারই ব্যবহার করা উচিত, বিশেষ করে বড় অ্যাপ্লিকেশনগুলোর ক্ষেত্রে।

সারাংশ

• ফিল্টারস Vue.js এর একটি শক্তিশালী বৈশিষ্ট্য, যা ডেটার মান কনভার্ট বা ফরম্যাট করার জন্য ব্যবহৃত হয়।
• তবে, ফিল্টারসের কিছু লিমিটেশন রয়েছে, যেমন পারফরম্যান্স ইস্যু, জটিল লজিক প্রয়োগ করা, এবং ডিবাগিং সমস্যা।
• এর সঠিক ব্যবহার নিশ্চিত করতে, কম্পিউটেড প্রপার্টি এবং মেথডস এর সাহায্যে বড় ডেটা প্রসেসিং বা লজিক পরিবর্তন করা উচিত, এবং ফিল্টারস শুধুমাত্র সোজা ফরম্যাটিং বা দেখানোর কাজের জন্য ব্যবহার করা উচিত।

Vue.js এর ফিল্টারস ব্যবহার করার সময় এই সেরা প্র্যাকটিসগুলো মেনে চললে অ্যাপ্লিকেশনটি আরও কার্যকরী এবং স্কেলেবল হবে।