Vue.js এর মৌলিক ধারণা

Vue.js একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য JavaScript ফ্রেমওয়ার্ক যা বিশেষ করে SPA (Single Page Application) ডেভেলপমেন্টে ব্যবহৃত হয়। এটি কম্পোনেন্ট ভিত্তিক আর্কিটেকচার, ডেটা বাইন্ডিং, রিয়্যাক্টিভিটি, এবং টেমপ্লেট সিনট্যাক্সের মাধ্যমে ডেভেলপারদের দ্রুত এবং কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Vue.js এর কিছু মৌলিক ধারণা সম্পর্কে আলোচনা করা হলো:

১. কম্পোনেন্ট ভিত্তিক আর্কিটেকচার

Vue.js একটি কম্পোনেন্ট ভিত্তিক ফ্রেমওয়ার্ক, যার মানে হল যে অ্যাপ্লিকেশনটি ছোট ছোট অংশ বা কম্পোনেন্টে ভাগ করা হয়। প্রতিটি কম্পোনেন্ট নিজে একটি পূর্ণাঙ্গ উপাদান যা HTML, CSS এবং JavaScript ধারণ করে। এই পদ্ধতিতে ডেভেলপাররা প্রতিটি কম্পোনেন্ট আলাদা ভাবে তৈরি, রিয়ুজ এবং মেইনটেইন করতে পারে, ফলে অ্যাপ্লিকেশনটির স্কেলেবিলিটি এবং ব্যবস্থাপনা সহজ হয়ে যায়।

কম্পোনেন্টের উদাহরণ:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js Component',
      message: 'This is a reusable component!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

এখানে, একটি কম্পোনেন্টের মধ্যে HTML (টেমপ্লেট), JavaScript (লজিক), এবং CSS (স্টাইলিং) রয়েছে।

২. রিয়্যাক্টিভ ডেটা মডেল

Vue.js এর রিয়্যাক্টিভ ডেটা মডেল একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। যখন আপনি Vue ইনস্ট্যান্সের ডেটা পরিবর্তন করেন, Vue তা স্বয়ংক্রিয়ভাবে DOM-এ রিফ্লেক্ট করে। এর ফলে ডেটা এবং UI এর মধ্যে একটি সরাসরি সম্পর্ক তৈরি হয়, এবং এটি ডেভেলপমেন্টের সময়কার ভুল কমিয়ে দেয়।

রিয়্যাক্টিভ ডেটার উদাহরণ:

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">Change Message</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    methods: {
      updateMessage() {
        this.message = 'Message Updated!';
      }
    }
  });
</script>

এখানে, message ডেটা প্রপার্টি পরিবর্তন হলে Vue.js তা স্বয়ংক্রিয়ভাবে DOM-এ আপডেট করে, ফলে আপনার UI নতুন ডেটা অনুযায়ী রিফ্লেক্ট হয়।

৩. ডেটা বাইন্ডিং

ডেটা বাইন্ডিং Vue.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। এটি আপনাকে Vue ইনস্ট্যান্সের ডেটা এবং HTML টেমপ্লেটের মধ্যে সংযোগ তৈরি করতে সাহায্য করে। Vue.js দুই ধরনের ডেটা বাইন্ডিং সাপোর্ট করে:

• ইন্টারপোলেশন (Text Binding): HTML টেমপ্লেটে ডেটা প্রদর্শন করা।
• অ্যাট্রিবিউট বাইন্ডিং: HTML অ্যাট্রিবিউটগুলির জন্য ডেটা অ্যাসাইন করা।

উদাহরণ:

<div id="app">
  <p>{{ message }}</p>
  <a v-bind:href="url">Go to Vue.js</a>
</div>

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

এখানে, {{ message }} টেমপ্লেটের মধ্যে ডেটা বাইন্ডিং এবং v-bind:href="url" অ্যাট্রিবিউট বাইন্ডিং দেখানো হয়েছে।

৪. ডিরেকটিভস

Vue.js ডিরেকটিভস হলো বিশেষ HTML অ্যাট্রিবিউট যা Vue.js এর নিজস্ব লজিক বাস্তবায়ন করে। সাধারণত এই ডিরেকটিভস একটি v- দিয়ে শুরু হয় এবং এগুলি ডেটা বাইন্ডিং বা DOM ম্যানিপুলেশনের জন্য ব্যবহৃত হয়।

কিছু প্রধান ডিরেকটিভস:

• v-bind: HTML অ্যাট্রিবিউটের জন্য ডেটা বাইন্ডিং।
• v-if: কন্ডিশনাল রেন্ডারিং।
• v-for: লুপিং এর মাধ্যমে এলিমেন্ট তৈরি করা।
• v-model: টেমপ্লেট এবং ইনপুট ফিল্ডের মধ্যে ডেটা বাইন্ডিং।

উদাহরণ:

<div id="app">
  <p v-if="isVisible">This is a visible paragraph!</p>
  <button @click="toggleVisibility">Toggle Visibility</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

এখানে, v-if="isVisible" ডিরেকটিভের মাধ্যমে প্যারাগ্রাফটি কন্ডিশনাল রেন্ডারিং করা হচ্ছে।

৫. ইভেন্ট হ্যান্ডলিং

Vue.js ইভেন্ট হ্যান্ডলিং ব্যবস্থাও খুব সহজ। Vue ইভেন্ট হ্যান্ডলার সরাসরি টেমপ্লেটে @ অথবা v-on ডিরেকটিভ ব্যবহার করে যুক্ত করা হয়। এটি DOM ইভেন্টগুলোকে Vue ইনস্ট্যান্সের মেথডের সাথে যুক্ত করে।

উদাহরণ:

<div id="app">
  <button @click="increment">Click to Increment</button>
  <p>Count: {{ count }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment() {
        this.count++;
      }
    }
  });
</script>

এখানে, @click="increment" দ্বারা একটি বাটনে ক্লিক করার মাধ্যমে increment মেথড কল হচ্ছে।

সারাংশ

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

Vue.js এর দুটি মৌলিক ধারণা হল Vue ইনস্ট্যান্স এবং ডেটা বাইন্ডিং। এই দুটি ধারণা একটি Vue অ্যাপ্লিকেশন তৈরি এবং পরিচালনার জন্য অত্যন্ত গুরুত্বপূর্ণ। এখানে আমরা এগুলোর মূল বিষয় এবং কিভাবে এগুলো কাজ করে তা ব্যাখ্যা করব।

১. Vue ইনস্ট্যান্স

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

Vue ইনস্ট্যান্স তৈরি করা:

Vue ইনস্ট্যান্স তৈরির জন্য আপনাকে Vue কনস্ট্রাক্টর ব্যবহার করতে হবে। নিচে একটি সাধারণ Vue ইনস্ট্যান্স তৈরির উদাহরণ দেওয়া হলো:

// main.js বা আপনার স্ক্রিপ্ট ফাইলে
new Vue({
  el: '#app',           // DOM এলিমেন্টের সাথে সংযোগ স্থাপন
  data: {
    message: 'Hello, Vue!'  // ডেটা প্রপার্টি
  }
});

এই উদাহরণে:

• el: এটি Vue ইনস্ট্যান্সকে DOM এর একটি নির্দিষ্ট এলিমেন্টের সাথে সংযোগ করে। এখানে, Vue ইনস্ট্যান্সটি id="app" এর সাথে যুক্ত হবে।
• data: এটি একটি অবজেক্ট যেখানে আপনি অ্যাপের সমস্ত ডেটা সংরক্ষণ করবেন। এখানে একটি প্রপার্টি message রয়েছে, যার মান 'Hello, Vue!'।

Vue ইনস্ট্যান্স তৈরি হওয়ার পর, আপনি DOM-এর মধ্যে Vue এর ডেটা ব্যবহার করতে পারবেন।

২. ডেটা বাইন্ডিং

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

Vue.js দুই ধরনের ডেটা বাইন্ডিং সমর্থন করে:

২.১. ইন্টারপোলেশন (Text Binding)

এটি HTML এ {{ }} এর মাধ্যমে ডেটা বাইন্ডিং করা হয়। আপনি Vue ইনস্ট্যান্সের data থেকে ডেটা অ্যাক্সেস করতে পারবেন এবং তা HTML ট্যাগে প্রদর্শন করতে পারবেন।

<div id="app">
  <p>{{ message }}</p>   <!-- message ডেটা প্রপার্টি এখানে বাইন্ড করা হয়েছে -->
</div>

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

এখানে, {{ message }} হল ডেটা বাইন্ডিং। যখন message এর মান পরিবর্তিত হবে, তখন Vue.js তা স্বয়ংক্রিয়ভাবে DOM-এ আপডেট করবে।

২.২. অ্যাট্রিবিউট বাইন্ডিং (Attribute Binding)

আপনি HTML অ্যাট্রিবিউটগুলির জন্যও ডেটা বাইন্ডিং ব্যবহার করতে পারেন, যেমন href, src, class, style, ইত্যাদি। এই ধরনের বাইন্ডিংয়ের জন্য v-bind ডিরেকটিভ ব্যবহার করা হয়।

<div id="app">
  <a v-bind:href="url">Click me!</a>  <!-- v-bind দিয়ে href অ্যাট্রিবিউটে বাইন্ডিং -->
</div>

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

এখানে v-bind:href="url" নির্দেশ করছে যে href অ্যাট্রিবিউটটি Vue ইনস্ট্যান্সের url ডেটা প্রপার্টির মান দ্বারা কনফিগার করা হবে।

২.৩. ইভেন্ট বাইন্ডিং (Event Binding)

Vue.js এ ইভেন্ট বাইন্ডিং করতে v-on ডিরেকটিভ ব্যবহার করা হয়। এটি DOM ইভেন্ট (যেমন click, keyup, change) কে Vue এর মেথড বা ফাংশনের সাথে যুক্ত করে।

<div id="app">
  <button v-on:click="changeMessage">Click me!</button>
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    methods: {
      changeMessage: function() {
        this.message = 'You clicked the button!';
      }
    }
  });
</script>

এখানে, v-on:click="changeMessage" ইভেন্ট বাইন্ডিং ব্যবহার করা হয়েছে, যা click ইভেন্টের সময় changeMessage মেথড কল করবে এবং message ডেটা প্রপার্টি পরিবর্তন করবে।

৩. ওয়াচার (Watchers) এবং কম্পিউটেড প্রপার্টি

Vue.js এর ডেটা বাইন্ডিংয়ের আরো দুটি গুরুত্বপূর্ণ ফিচার হল ওয়াচার এবং কম্পিউটেড প্রপার্টি। এগুলো ডেটা পরিবর্তনের উপর নির্ভর করে UI আপডেট করতে সাহায্য করে।

• কম্পিউটেড প্রপার্টি: এগুলি ডেটার উপর ভিত্তি করে মান গণনা করে এবং ডেটা পরিবর্তন হলে শুধুমাত্র নির্দিষ্ট প্রপার্টি রিফ্রেশ হয়।

  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
  

• ওয়াচার: এই ফিচারটি আপনার ডেটার উপর নজর রাখে এবং যখন ডেটার মান পরিবর্তিত হয়, তখন নির্দিষ্ট কাজটি সম্পন্ন করে।

  watch: {
    message: function(newVal, oldVal) {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`);
    }
  }
  

সারাংশ

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

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

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

১. ডাটা বাইন্ডিং (Data Binding)

Vue.js টেমপ্লেটে ডাটা বাইন্ডিং সম্ভব, যা ডেটাকে HTML এলিমেন্টগুলির সাথে সংযুক্ত করে।

১.১. টেক্সট বাইন্ডিং (Text Binding)

HTML ট্যাগের ভিতরে ডাইনামিক ডেটা প্রদর্শন করতে {{ }} সিঙ্কট্যাক্স ব্যবহার করা হয়। এটি Vue.js এর ইন্টারপোলেশন সিনট্যাক্স হিসেবে পরিচিত।

<div id="app">
  <h1>{{ message }}</h1>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});

এই কোডে {{ message }} এ ব্যবহার করা ডাটা বাইন্ডিং এর মাধ্যমে message ভেরিয়েবলটি HTML ট্যাগে রেন্ডার হবে।

১.২. এট্রিবিউট বাইন্ডিং (Attribute Binding)

HTML অ্যাট্রিবিউটগুলোর মান ডাইনামিকভাবে পরিবর্তন করার জন্য :attribute="value" সিনট্যাক্স ব্যবহার করা হয়। সাধারণত, v-bind ডিরেকটিভের শর্টহ্যান্ড হিসেবে এটি ব্যবহৃত হয়।

<img :src="imageSrc" alt="Vue logo">

JavaScript:

new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://vuejs.org/images/logo.png'
  }
});

এখানে :src অ্যাট্রিবিউটটি imageSrc ডাটাকে বাইন্ড করে, ফলে ছবিটি ডাইনামিকভাবে রেন্ডার হবে।

২. ভি-ডিরেকটিভস (v-Directives)

Vue.js এর টেমপ্লেটে বিভিন্ন ধরনের ডিরেকটিভ ব্যবহার করা হয়, যা HTML ট্যাগগুলির আচরণ নিয়ন্ত্রণ করতে সাহায্য করে। কিছু প্রচলিত ডিরেকটিভের মধ্যে রয়েছে:

২.১. v-bind

এটি একটি HTML অ্যাট্রিবিউটের মান বাইন্ড করতে ব্যবহৃত হয়। যেমন, একটি ছবি বা লিংকের হাইপারলিঙ্কের মান।

<a v-bind:href="url">Click here</a>

JavaScript:

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

২.২. v-if এবং v-else

এই ডিরেকটিভ ব্যবহার করে আপনি টেমপ্লেটের কোনো অংশ শর্তসাপেক্ষে রেন্ডার করতে পারেন।

<p v-if="isVisible">This text is visible!</p>
<p v-else>This text is visible when the first is hidden.</p>

JavaScript:

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

২.৩. v-for

এটি একটি লুপ ডিরেকটিভ, যা একটি ডাটা এরে বা অবজেক্টের উপর লুপ করে HTML টেমপ্লেট রেন্ডার করে।

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

JavaScript:

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Orange' },
      { id: 3, name: 'Banana' }
    ]
  }
});

এখানে v-for ডিরেকটিভটি items অ্যারে থেকে প্রতিটি আইটেমকে <li> ট্যাগে রেন্ডার করবে।

২.৪. v-model

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

<input v-model="message">
<p>{{ message }}</p>

JavaScript:

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});

এখানে ইনপুট ফিল্ডে টাইপ করার সাথে সাথে message ডাটাও আপডেট হয়ে যাবে।

৩. ইভেন্ট হ্যান্ডলিং (Event Handling)

Vue.js টেমপ্লেটে ইভেন্ট হ্যান্ডলিংও করা যায়, যেমন ক্লিক, মাউসওভার ইত্যাদি।

৩.১. v-on

এটি ইভেন্ট হ্যান্ডলিং ডিরেকটিভ যা HTML এলিমেন্টের সাথে ইভেন্ট (যেমন click, submit, keydown) অ্যাটাচ করতে ব্যবহৃত হয়।

<button v-on:click="showMessage">Click me</button>

JavaScript:

new Vue({
  el: '#app',
  methods: {
    showMessage() {
      alert('Button clicked!');
    }
  }
});

এখানে v-on:click ডিরেকটিভের মাধ্যমে ক্লিক ইভেন্টে showMessage মেথডটি কল করা হচ্ছে।

৩.২. শর্টহ্যান্ড সিনট্যাক্স

v-on এবং v-bind এর শর্টহ্যান্ডও রয়েছে:

• v-on এর জন্য @ ব্যবহার করা হয়:

  <button @click="showMessage">Click me</button>
  

• v-bind এর জন্য : ব্যবহার করা হয়:

  <img :src="imageSrc" alt="Vue logo">
  

৪. কন্ডিশনাল রেন্ডারিং (Conditional Rendering)

Vue.js টেমপ্লেটে কিছু অংশ শর্তসাপেক্ষে রেন্ডার করা যায়, যেমন v-if, v-else, v-show ডিরেকটিভ ব্যবহার করে।

৪.১. v-show

v-show ডিরেকটিভের মাধ্যমে শর্তসাপেক্ষে এলিমেন্টকে প্রদর্শন বা আড়াল করা যায়, কিন্তু এটি CSS এর মাধ্যমে কাজ করে। অর্থাৎ, এলিমেন্টটি DOM থেকে সরানো হয় না, শুধুমাত্র এর ভিজিবিলিটি নিয়ন্ত্রণ করা হয়।

<p v-show="isVisible">This text is visible!</p>

JavaScript:

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

সারাংশ

Vue.js টেমপ্লেট সিনট্যাক্স HTML এর মতোই, কিন্তু এতে অনেক শক্তিশালী ফিচার রয়েছে যা ডাইনামিক ডেটা, ইভেন্ট হ্যান্ডলিং এবং কন্ডিশনাল রেন্ডারিং সহজভাবে সমর্থন করে। Vue.js এর টেমপ্লেট সিনট্যাক্সের মূল সুবিধা হলো এটি declarative, অর্থাৎ আপনি কী চাইছেন তা নির্দিষ্ট করবেন, কিভাবে তা কার্যকর হবে তা Vue.js স্বয়ংক্রিয়ভাবে নিয়ন্ত্রণ করবে।

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 অ্যাপ্লিকেশন তৈরি করার সময় অত্যন্ত গুরুত্বপূর্ণ এবং প্রতিটি ডিরেক্টিভের সঠিক ব্যবহার আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী ও ডাইনামিক করতে সাহায্য করবে।

Vue.js এ কম্পিউটেড প্রপার্টিজ (Computed Properties) এবং ওয়াচারস (Watchers) দুটি গুরুত্বপূর্ণ ফিচার যা ডেটা ম্যানিপুলেশন এবং ভিউ আপডেট করার সময় ব্যবহৃত হয়। এই দুটি ভিন্নভাবে কাজ করে তবে তাদের উদ্দেশ্য একই — যখন ডেটাতে পরিবর্তন হয়, তখন ভিউকে স্বয়ংক্রিয়ভাবে আপডেট করা।

১. কম্পিউটেড প্রপার্টিজ (Computed Properties)

কম্পিউটেড প্রপার্টি হলো এমন একটি প্রপার্টি যা অন্য ডেটা প্রপার্টি বা স্টেটের উপর নির্ভরশীল এবং সেই ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে আপডেট হয়। কম্পিউটেড প্রপার্টি সাধারণত কোনো স্টেট বা ডেটার উপর ভিত্তি করে ডাইনামিক ভ্যালু তৈরি করে।

কীভাবে কাজ করে:

কম্পিউটেড প্রপার্টি সাধারণত getter ফাংশন হিসেবে ব্যবহৃত হয়, যা ভিউতে ব্যবহৃত হওয়ার সময় কার্যকর হয়।

উদাহরণ:

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // কম্পিউটেড প্রপার্টি fullName
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

ব্যাখ্যা:

• এখানে fullName একটি কম্পিউটেড প্রপার্টি যা firstName এবং lastName এর উপর ভিত্তি করে একটি পূর্ণ নাম তৈরি করে।
• যখন firstName বা lastName পরিবর্তিত হয়, fullName স্বয়ংক্রিয়ভাবে আপডেট হয়।

কম্পিউটেড প্রপার্টির সুবিধা:

• এটি ক্যাশে করা হয়। অর্থাৎ, যখন নির্দিষ্ট ডেটা (যেমন firstName বা lastName) পরিবর্তিত হয়, তখন শুধুমাত্র সেই প্রপার্টি আপডেট হয়, পুরো ভ্যালু পুনরায় ক্যালকুলেট হয় না।
• এটি পারফর্মেন্স অপটিমাইজেশন করতে সাহায্য করে, বিশেষ করে বড় এবং জটিল প্রোজেক্টে।

২. ওয়াচারস (Watchers)

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

কীভাবে কাজ করে:

ওয়াচার নির্দিষ্ট ডেটা প্রপার্টির উপর নজর রাখে এবং যখন সেটি পরিবর্তিত হয়, তখন একটি কাস্টম কার্যক্রম (callback function) চালায়।

উদাহরণ:

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="message" placeholder="Type something">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    // message প্রপার্টির পরিবর্তন হলে ওয়াচার ট্রিগার হবে
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>

ব্যাখ্যা:

• এখানে message একটি ডেটা প্রপার্টি এবং watch অবজেক্টে আমরা message এর পরিবর্তন ট্র্যাক করছি।
• যখন message পরিবর্তিত হয়, তখন ওয়াচার ফাংশনটি ট্রিগার হয় এবং পুরোনো এবং নতুন মান কনসোল লগ করা হয়।

ওয়াচারের সুবিধা:

• ওয়াচার সাধারণত অ্যাসিনক্রোনাস কার্যক্রমের জন্য উপযুক্ত, যেমন API কল, ডেটা লোডিং বা কোনো নির্দিষ্ট অ্যাকশন ট্রিগার করা।
• এটি অ্যাসিনক্রোনাস অপারেশনে সহায়ক হতে পারে, যেখানে আপনি ডেটা পরিবর্তনের পর কোনো কাজ সম্পাদন করতে চান।

কম্পিউটেড প্রপার্টি এবং ওয়াচারস এর তুলনা

কখন কম্পিউটেড প্রপার্টি ব্যবহার করবেন?

• যখন আপনি একটি ডেরিভেটিভ ভ্যালু চান যা অন্যান্য ডেটা প্রপার্টি থেকে ক্যালকুলেট করা হয়।
• যখন আপনি ডেটা পরিবর্তন হলে বারবার কম্পিউটেশন না করে কেবলমাত্র ক্যাশে করা ফলাফল চান।

কখন ওয়াচার ব্যবহার করবেন?

• যখন আপনি ডেটার পরিবর্তন ট্র্যাক করতে চান এবং তার ভিত্তিতে কোনো কার্যক্রম সম্পাদন করতে চান, যেমন API কল বা অতিরিক্ত অ্যাসিনক্রোনাস কাজ।
• যখন ডেটার পরিবর্তন চেক করে, বিশেষ কোনো কার্যক্রম চালাতে হবে, যেমন ফর্ম ভ্যালিডেশন বা ডেটাবেস আপডেট।

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