Vue ডিরেক্টিভস (v-bind, v-model, v-if, v-for)

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

নিচে কিছু গুরুত্বপূর্ণ Vue.js ডিরেক্টিভস এবং তাদের ব্যবহার নিয়ে আলোচনা করা হলো:

১. v-bind

v-bind ডিরেক্টিভটি HTML অ্যাট্রিবিউটের মান ডাইনামিকভাবে বাইন্ড করার জন্য ব্যবহৃত হয়। এটি ডেটার মানকে সরাসরি HTML অ্যাট্রিবিউটের মানের সাথে যুক্ত করে, যাতে ডেটা পরিবর্তিত হলে অ্যাট্রিবিউটের মানও পরিবর্তিত হয়।

ব্যবহার:

<img v-bind:src="imageUrl" alt="Image">

এখানে, v-bind:src ডিরেক্টিভটি imageUrl ডেটা প্রপার্টির মানকে src অ্যাট্রিবিউটের সাথে বাইন্ড করছে। যখন imageUrl পরিবর্তিত হবে, তখন ছবি আপডেট হবে।

সংক্ষিপ্ত রূপ:

v-bind এর সংক্ষিপ্ত রূপ হল শুধুমাত্র : চিহ্ন ব্যবহার করা।

<img :src="imageUrl" alt="Image">

২. v-model

v-model ডিরেক্টিভটি ফর্ম ইনপুট এলিমেন্ট (যেমন, <input>, <textarea>, <select>) এর মানকে Vue.js ডেটা প্রপার্টির সাথে বাইন্ড করার জন্য ব্যবহৃত হয়। এটি দুই দিকের ডেটা বাইন্ডিং (two-way data binding) প্রদান করে, অর্থাৎ যখন ইনপুটের মান পরিবর্তিত হবে, তখন ডেটা প্রপার্টিও পরিবর্তিত হবে এবং vice versa।

ব্যবহার:

<input v-model="message">

এখানে, v-model="message" ডিরেক্টিভটি ইনপুট ফিল্ডের মানকে Vue ডেটা প্রপার্টি message এর সাথে বাইন্ড করছে। যদি ব্যবহারকারী ইনপুটে কিছু টাইপ করে, তাহলে message প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট হবে।

অন্যান্য ফর্ম এলিমেন্টে v-model:

v-model শুধু ইনপুট ফিল্ড নয়, অন্যান্য ফর্ম এলিমেন্ট যেমন চেকবক্স, রেডিও বাটন, সিলেক্ট ইত্যাদির জন্যও ব্যবহার করা যায়।

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

৩. v-if

v-if ডিরেক্টিভটি কন্ডিশনাল রেন্ডারিংয়ের জন্য ব্যবহৃত হয়। এটি DOM এ কোনো উপাদানকে শো বা হাইড করার জন্য একটি শর্ত (condition) পরীক্ষা করে। যদি শর্ত সত্য হয়, তাহলে উপাদানটি রেন্ডার হয়, অন্যথায় রেন্ডার হয় না।

ব্যবহার:

<p v-if="isVisible">এই প্যারাগ্রাফটি কেবল তখনই দেখানো হবে যখন isVisible সত্য হবে।</p>

এখানে, v-if="isVisible" ডিরেক্টিভটি পরীক্ষা করবে যে isVisible এর মান true কিনা। যদি isVisible সত্য হয়, তবে প্যারাগ্রাফটি রেন্ডার হবে, অন্যথায় রেন্ডার হবে না।

v-else:

v-if এর সাথে v-else ব্যবহার করা যেতে পারে অন্য একটি কন্ডিশনাল ব্লক তৈরি করতে।

<p v-if="isVisible">এটি দৃশ্যমান হবে যখন isVisible সত্য হবে।</p>
<p v-else>এটি দৃশ্যমান হবে যখন isVisible মিথ্যা হবে।</p>

৪. v-for

v-for ডিরেক্টিভটি লিস্ট বা অ্যারে এর ওপর লুপ চালিয়ে উপাদান তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি অ্যারে বা অবজেক্টের উপর ইটারেট করে, এবং প্রতিটি আইটেমের জন্য একটি নতুন উপাদান রেন্ডার করে।

ব্যবহার:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

এখানে, v-for="item in items" ডিরেক্টিভটি items অ্যারের প্রতিটি আইটেমের ওপর লুপ চালিয়ে <li> উপাদান তৈরি করবে। :key="item.id" হল একটি ভ্যালিডেশন যা Vue.js কে লুপের মধ্যে প্রতিটি উপাদানকে আলাদা আলাদা ট্র্যাক করতে সাহায্য করে, যাতে কার্যকরভাবে DOM আপডেট করা যায়।

অবজেক্টের ওপর v-for ব্যবহার:

v-for শুধু অ্যারের উপরই নয়, অবজেক্টের উপরও ব্যবহার করা যায়।

<ul>
  <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>

এখানে, v-for="(value, key) in object" ডিরেক্টিভটি অবজেক্টের প্রতিটি key-value জোড়া লুপ করবে এবং তার মান দেখাবে।

সারাংশ

• v-bind: HTML অ্যাট্রিবিউটের মান ডাইনামিকভাবে বাইন্ড করার জন্য ব্যবহৃত হয়।
• v-model: ফর্ম ইনপুটের মান এবং Vue ডেটা প্রপার্টির মধ্যে দুই দিকের বাইন্ডিং তৈরি করে।
• v-if: কন্ডিশনাল রেন্ডারিংয়ের জন্য ব্যবহৃত হয়, যাতে শর্ত অনুযায়ী উপাদানটি রেন্ডার বা হাইড হয়।
• v-for: একটি অ্যারে বা অবজেক্টের ওপর লুপ চালিয়ে উপাদান তৈরি করতে ব্যবহৃত হয়।

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