Vue.js কী?

02 October 2023

1 min read

Vue (উচ্চারণ /vjuː/, ভিউ এর মতো ) হলোইউজার ইন্টারফেস তৈরির জন্য একটি জাভাস্ক্রিপ্ট
ফ্রেমওয়ার্ক। এটি স্ট্যান্ডার্ড এইচটিএমএল (HTML), সিএসএস (CSS) এবং জাভাস্ক্রিপ্টের
(JavaScript) উপরে তৈরি করা হয় যা একটি ঘোষণামূলক (declarative) এবং উপাদান-ভিত্তিক (component-
based) প্রোগ্রামিং মডেল সরবরাহ করে। আপনাকে দক্ষতার সাথে ইউজার ইন্টারফেস ডেভেলপ করতে
সহায়তা করে, হোক সেগুলো সহজ কিংবা জটিল।
একটি উদাহরণঃ
জেএস (js)
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
টেমপ্লেট (Template)
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
উপরের উদাহরণটি Vue এর দুটি মূল বৈশিষ্ট্য প্রদর্শন করে:
ঘোষণামূলক রেন্ডারিং (Declarative Rendering) Vue একটি টেমপ্লেট সিনট্যাক্স সহ স্ট্যান্ডার্ড
HTML প্রসারিত করে যা আমাদের জাভাস্ক্রিপ্ট অবস্থার উপর ভিত্তি করে HTML আউটপুটকে গঠন বর্ণনা
করতে দেয়।
প্রতিক্রিয়াশীলঃ Vue স্বয়ংক্রিয়ভাবে জাভাস্ক্রিপ্টের অবস্থার পরিবর্তনগুলো ট্র্যাক করে এবং পরিবর্তনগুলো
ঘটলে দক্ষতার সাথে DOM আপডেট করে৷

প্রগতিশীল ফ্রেমওয়ার্ক
Vue হলো এমন একটি ফ্রেমওয়ার্ক এবং ইকোসিস্টেম যেখানে ফ্রন্টএন্ড ডেভেলপমেন্টে প্রয়োজনীয় সকল
সাধারণ বৈশিষ্ট্যগুলো রয়েছে। কিন্তু ওয়েব অত্যন্ত বৈচিত্র্যময় ও বিস্তৃত। আমরা ওয়েবে যে জিনিসগুলি
তৈরি করি তার আকার এবং স্কেলেও ব্যাপক যা প্রতিনিয়ত পরিবর্তিত হচ্ছে। এই কথা মাথায় রেখে, Vue
নমনীয় এবং ক্রমবর্ধমানভাবে গ্রহণযোগ্য হওয়ার জন্য ডিজাইন করা হয়েছে। আপনার ব্যবহারের ক্ষেত্রে
নির্ভর করে, Vue বিভিন্ন উপায়ে ব্যবহার করা যেতে পারেঃ
বিল্ড স্টেপ (build step) ছাড়াই স্ট্যাটিক এইচটিএমএল (HTML) উন্নত করা-
● যেকোনো পৃষ্ঠায় ওয়েব উপাদান হিসেবে এম্বেড (Embed) বা যুক্ত করা
● একক-পৃষ্ঠা (Single-Page) অ্যাপ্লিকেশন (SPA)
● ফুলস্ট্যাক / সার্ভার-সাইড রেন্ডারিং (SSR)
● জ্যামস্ট্যাক (Jamstack) / স্ট্যাটিক সাইট জেনারেশন (SSG)
● ডেস্কটপ, মোবাইল, ওয়েবজিএল (WebGL) এবং আরও এমন টার্মিনালকে লক্ষ্য করে

একক ফাইল উপাদান (Single-File Components)
বেশিরভাগ বিল্ড-টুল-সক্ষম Vue প্রোজেক্টে, আমরা সিঙ্গল-ফাইল কম্পোনেন্ট নামে একটি HTML-এর
মতো ফাইল ফরম্যাট ব্যবহার করে Vue উপাদানগুলো লিখি (এটি *.vue ফাইল হিসাবেও পরিচিত, সংক্ষেপে
SFC )। একটি Vue SFC, নাম অনুসারে, একটি একক ফাইলে উপাদানের যুক্তি (জাভাস্ক্রিপ্ট), টেমপ্লেট
(এইচটিএমএল) এবং শৈলী (সিএসএস) অন্তর্ভুক্ত করে। পূর্ববর্তী উদাহরণটি যা SFC বিন্যাসে লেখা:

<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>

button {
font-weight: bold;
}
</style>
SFC হলো Vue-এর একটি সংজ্ঞায়িত বৈশিষ্ট্য এবং যা আপনার ব্যবহারের ক্ষেত্রে একটি বিল্ড সেটআপের
নিশ্চয়তা দেয় । Vue আপনার জন্য সমস্ত বিল্ড টুল সেটআপ পরিচালনা করে থাকে ।
API স্টাইল
Vue উপাদান দুটি ভিন্ন API স্টাইলে রচিত হতে পারে: Options API এবং Composition API ।
অপশন এপিআই (Options API)
অপশন এপিআই-এর সাহায্যে, আমরা ডেটা (data), পদ্ধতি (methods) এবং মাউন্টেডের (mounted) এর
মাধ্যমে একটি উপাদানের যুক্তি সংজ্ঞায়িত করি। এর একটি উদাহরণঃ

<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on this.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(The initial count is ${this.count}.)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>

</template>

কম্পোসিশন API (Composition API)
Composition API-এর সাহায্যে, আমরা ইমপোর্ট করা API ফাংশন ব্যবহার করে একটি উপাদানের যুক্তি
সংজ্ঞায়িত করে থাকি। SFC-তে, কম্পোজিশন API সাধারণত এর সাথে ব্যবহার করা হয় <script setup> এ।
অ্যাট্রিবিউট setup, Vue তে কম্পাইল-টাইম ট্রান্সফর্ম করে যা আমাদের কম বয়লারপ্লেটের সাথে
Composition API ব্যবহার করতে দেয়। উদাহরণস্বরূপ, ইমপোর্ট এবং শীর্ষ-স্তরের ভেরিয়েবল/ফাংশনে এই
<script setup> টেমপ্লেটে সরাসরি ব্যবহার করা যায়।
এখানে একই উপাদান এবং একই টেমপ্লেট ব্যবহার করে একটি উদাহরণ দেয়া হলো, কিন্তু এখানে
কম্পোজিশন API ব্যবহার করা হয়েছে <script setup> এর পরিবর্তেঃ

<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(The initial count is ${count.value}.)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>

আপনি কোনটি বেছে নেবেন?
উভয় API স্টাইল সাধারণ ব্যবহারের ক্ষেত্রে আপনার সম্পূর্ণ চাহিদা কভার করতে সক্ষম। এগুলো ঠিক
একই অন্তর্নিহিত সিস্টেম দ্বারা চালিত বিভিন্ন ইন্টারফেস। আসলে, Options API কম্পোজিশন API এর
উপরে প্রয়োগ করা হয়! Vue সম্পর্কে মৌলিক ধারণা এবং জ্ঞান দুটি স্টাইলে ভাগ করা হয়েছে।

অপশন এপিআই একটি "কম্পোনেন্ট ইন্সট্যান্স" এর ধারণাকে কেন্দ্র করে তৈরি(উদাহরণে দেখে বুঝতে
পারবেন), যা সাধারণত OOP ভাষার ব্যাকগ্রাউন্ড থেকে আগত ব্যবহারকারীদের জন্য একটি শ্রেণি-ভিত্তিক
মানসিক মডেলের (mental model) সাথে বেশি মানানসই।
কম্পোজিশন এপিআই একটি ফাংশন স্কোপে সরাসরি এবং প্রতিক্রিয়াশীল স্টেট ভেরিয়েবল (state variables)
এবং জটিলতা সামলাতে একসাথে একাধিক ফাংশন থেকে কম্পোজ করে থাকে । এটি আরও ফ্রি-ফর্ম এবং
কার্যকরভাবে ব্যবহার করার জন্য Vue-তে প্রতিক্রিয়া কীভাবে কাজ করে সেটা বোঝা প্রয়োজন।
Vue.js নিয়ে আজকের এই ব্লগটি আপনার কেমন লাগলো জানাতে ভুলবেন না। পরবর্তী ব্লগ পড়ার আমন্ত্রণ
রইলো।

Share this article

RELATED ARTICLES

What Are The Benefits Of Flutter App Development?

ফ্লাটার অ্যাপ ডেভেলপমেন্টের সুবিধা || What Are The Benefits Of Flutter App Development? || About Flutter App Benefits টেকনোলজির ব্যবহার মানুষের জীবনকে আগের তুলনায় অনেক সহজ করেছে। ধরুন, আপনি যদি কোডিং লেখা ছাড়াই, কোনো অ্যাপের মাধ্যমে , একটা লাইন ইনপুট দিলেন, আর সাথে সাথে এর নির্ভুল একটা কোড পেয়ে যান, তাহলে কি আপনার আর কোডিং শেখার  মতো কাজটি আর করতে হবে? আপনি নিশ্চয়ই আর কোডিং শিখতে যাবেন না। কেননা, মানুষ যে উপায়ে সহজে ও নির্ভুল ভাবে কোন একটি কাজ করতে পারে, সে সেটিই সবসময় ইউজ করে। তাই বর্তমানে ক

11 July 2024

1 min read

ফ্লাটার কি ফ্রন্টেড নাকি ব্যাকেন্ড? ।। Is Flutter Frontend Or Backend (Uses of Flutter)?

অ্যাপ ডেভেলমেন্টের এই যুগে কতশত ফ্রেমওয়ার্কের আলাপ আসে আর যায়, তবে কিছু কিছু ফ্রেমওয়ার্ক যেন অ্যাপ ডেভেলমেন্টের জগতকেই পালটে দেয়। ২০১৫ সালে গুগলের আনা একটি ফ্রেমওয়ার্ক ফ্লাটার ঠিক তেমনি একটি ফ্রেমওয়ার্ক। মোবাইল অ্যাপ ডেভেলমেন্টকে টার্গেট করে ডেভেলপ করা এই ফ্রেমওয়ার্কটির পটেনশিয়াল দিনদিন বেড়েই চলছে।  আর এই অ্যাপ ডেভেলপমেন্টের ক্ষেত্রে, যে দুইটি সাইড সুপ্রিমেসি নিয়ে আছে সেগুলো হল: ফ্রন্টএন্ড এবং ব্যাকএন্ড।  ফ্রন্টএন্ড হল চকচকে ঝকঝকে ইন্টারফেস যার সাথে ইউজাররা ইন্টারঅ্যাক্ট করে, আর ব্যাকএন্ড মূলত

08 July 2024

1 min read

ডাটা সায়েন্টিস্ট হওয়ার ৮ টি স্টেপ

আপনার কি মনে হচ্ছে না, ডেটা সাইনটিস্ট হওয়ার এখনি সময়? একবার চারপাশে খেয়াল করুন তো! তাহলে দেখতে পাবেন ডেটা সায়েন্স এখন সব জায়গায়। একের পর এক, ওয়ার্ল্ডওয়াইড কোম্পানিগুলো সবচেয়ে ডাইভার্স প্রবলেমগুলোর সলিউশনের জন্য ডেটা সায়েন্সের দিকে ঝুঁকছে।  এই পরিস্থিতি ডেটা সাইনটিস্টদের জব সেক্টর ও স্যালারি স্ট্রাকচার কিন্তু খুবই অ্যাডভান্টেজ পজিশনে আছে। তাই আর দেরি কেন?? ৮ টি স্টেপ ফলো করে, আপনিও হতে পারেন একজন ডাটা সায়েন্টিস্ট। 1. Learn data wrangling, data visualization, and reporting  আপনি যখন ডেটা সায

15 May 2024

দ্য ফিউচার অফ আর্টিফিশিয়াল ইন্টেলিজেন্স

আমি যদি সাম্প্রতিক সময়ের কথা বলি সেখানে কৃত্রিম বুদ্ধিমত্তা (আর্টিফিশিয়াল ইন্টেলিজেন্স) বা AI বেশ বিপ্লব ঘটিয়েছে। হেলথকেয়ার থেকে শুরু করে ট্রান্সপোর্ট, এডুকেশন থেকে শুরু করে এন্টারটেইনমেন্ট এর ক্ষেত্রে AI এর ব্যবহার ব্যাপক। আর তাই ধীরে ধীরে আমরা নির্ভর হয়ে পড়ছি AI এর উপর। কিন্তু এই প্রযুক্তির ভবিষ্যৎ কী? আর্টিফিশিয়াল ইন্টেলিজেন্স আমাদের জীবনকে আরও ভালো করে তুলতে ব্যবহার করা হবে নাকি আমাদের অস্তিত্বের জন্য হুমকি সৃষ্টি করবে? এই প্রশ্নের উত্তর দেওয়ার আগে আমি একটি সাম্প্রতিক ডাটা শেয়ার করি। 2023

13 May 2024

অনলাইন লাইভ স্কিল ডেভেলপমেন্ট প্ল্যাটফর্ম।

ডাউনলোড করুন ওস্তাদ অ্যাপ

কমিউনিটি -এর সাথে কানেক্টেড থাকতে