Vue টেমপ্লেট সিনট্যাক্স

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 স্বয়ংক্রিয়ভাবে নিয়ন্ত্রণ করবে।