VUE JS IQ - Level 1 - Part 1

প্রশ্ন ১. Vue.js কী?
উত্তর:
Vue.js একটি প্রগতিশীল জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, যা একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে ব্যবহৃত হয়। এটি প্রধানত ব্যবহারকারীর ইন্টারফেস তৈরির জন্য ব্যবহৃত হয় এবং Reactivity এবং Components-এর উপর ভিত্তি করে কাজ করে।

প্রশ্ন ২. Vue-এর প্রধান বৈশিষ্ট্য কী কী?
উত্তর:
Vue.js এর প্রধান বৈশিষ্ট্যগুলো হলো:

• Declarative Rendering: ডাটা পরিবর্তনের সাথে সাথে ডম (DOM) আপডেট হয়।
• Components: কোড পুনরায় ব্যবহারযোগ্য করার জন্য ব্যবহার করা হয়।
• Directives: HTML ট্যাগে বিশেষ অ্যাট্রিবিউট যেমন v-bind, v-model ব্যবহার করা হয়।
• Reactivity System: ডাটার পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
• Routing এবং State Management: Vue Router এবং Vuex ব্যবহার করা হয়।

প্রশ্ন ৩. Vue instance কী এবং এর ভূমিকা কী?
উত্তর:
Vue instance হল Vue অ্যাপ্লিকেশনের মূল অংশ। এটি একটি Vue অ্যাপ্লিকেশনকে ডম (DOM) এর সাথে সংযুক্ত করে এবং ডাটা মডেল এবং ভিউয়ের মধ্যে সম্পর্ক স্থাপন করে।
উদাহরণ:

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

প্রশ্ন ৪. Computed Properties এবং Methods-এর মধ্যে পার্থক্য কী?
উত্তর:

1. Computed Properties:

• এটি নির্ভরশীল ডাটার ভিত্তিতে একটি ক্যাশড (cached) ভ্যালু রিটার্ন করে।
• এটি তখনই পুনর্গণনা করে, যখন নির্ভরশীল ডাটা পরিবর্তিত হয়।

2. Methods:

• এটি প্রতিবার কল করার সময় নতুন ভ্যালু রিটার্ন করে।
• এটি কোনো ক্যাশিং করে না।

উদাহরণ:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

প্রশ্ন ৫. Vue-তে v-for কীভাবে কাজ করে?
উত্তর:
v-for একটি ডিরেক্টিভ, যা একটি লুপ তৈরি করতে ব্যবহার করা হয়। এটি লিস্টের প্রতিটি আইটেমের জন্য একটি DOM এলিমেন্ট জেনারেট করে।
উদাহরণ:

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

প্রশ্ন ৬. Vue Lifecycle Hooks কী?
উত্তর:
Vue-তে একটি কম্পোনেন্টের লাইফসাইকেলের বিভিন্ন ধাপে কিছু মেথড থাকে, যেগুলোকে Lifecycle Hooks বলা হয়।
উদাহরণ:

• created: ডাটা ইনিশিয়ালাইজ করার জন্য।
• mounted: কম্পোনেন্ট DOM-এ যুক্ত হওয়ার পর।
• updated: কম্পোনেন্ট রি-রেন্ডার হওয়ার পর।
• destroyed: কম্পোনেন্ট DOM থেকে সরানোর সময়।

প্রশ্ন ৭. v-model কী?
উত্তর:
v-model একটি ডিরেক্টিভ, যা দুই দিকের ডাটা বাইন্ডিং (Two-way Data Binding) নিশ্চিত করে।
উদাহরণ:

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

প্রশ্ন ৮. Vue Router কী?
উত্তর:
Vue Router একটি লাইব্রেরি, যা Vue.js-এ রাউটিং ব্যবস্থাপনা করতে ব্যবহৃত হয়। এটি বিভিন্ন URL-এর ভিত্তিতে ভিউ পরিবর্তন করতে সাহায্য করে।
উদাহরণ:

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

প্রশ্ন ৯. Vuex কী এবং এর ব্যবহারের ক্ষেত্র কী?
উত্তর:
Vuex হলো একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা ডাটা এবং স্টেট সেন্ট্রালাইজড করে। এটি মূলত বৃহৎ অ্যাপ্লিকেশনগুলোতে ব্যবহৃত হয়, যেখানে ডাটার অনেক উৎস থাকে।

প্রশ্ন ১০. Vue-তে Event Handling কীভাবে করা হয়?
উত্তর:
Vue-তে ইভেন্ট হ্যান্ডলিং করার জন্য v-on ডিরেক্টিভ বা সংক্ষেপে @ ব্যবহার করা হয়।
উদাহরণ:

<button @click="handleClick">Click Me</button>

প্রশ্ন ১১. Vue.js-এ অ্যাসিনক্রোনাস ডাটা হ্যান্ডলিং কীভাবে করবেন?
উত্তর:
Vue.js-এ অ্যাসিনক্রোনাস ডাটা হ্যান্ডলিং করার জন্য API কল করতে Axios বা Fetch ব্যবহার করা হয়।
উদাহরণ:

methods: {
  async fetchData() {
    const response = await axios.get('https://api.example.com/data');
    this.data = response.data;
  }
}

প্রশ্ন ১২. Vue-তে watchers কী?
উত্তর:
watchers ডাটার পরিবর্তন পর্যবেক্ষণ করে এবং সেই অনুযায়ী কোড এক্সিকিউট করে।
উদাহরণ:

watch: {
  searchQuery(newVal, oldVal) {
    console.log('Search changed from', oldVal, 'to', newVal);
  }
}

প্রশ্ন ১৩. Composition API এবং Options API-এর মধ্যে পার্থক্য কী?
উত্তর:

1. Composition API:

• ফাংশন ভিত্তিক।
• Vue 3-এ পরিচিত হয়েছে।
• কোড আরও রিইউজেবল এবং মডুলার।

2. Options API:

• অবজেক্ট ভিত্তিক।
• Vue 2 এবং আগের ভার্সনে ব্যবহৃত হয়।

প্রশ্ন ১4. BAT & Rasel vai vue classes
উত্তর:
Link: https://docs.google.com/document/d/14iiUCLFdAxBhM3TAQL_e3D2ncLSU4HHwmLnaB7vbKNA/edit?tab=t.0