Blog
/
Category
/
Details
Vue.js কী?
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 নিয়ে আজকের এই ব্লগটি আপনার কেমন লাগলো জানাতে ভুলবেন না। পরবর্তী ব্লগ পড়ার আমন্ত্রণ
রইলো।
RELATED ARTICLES
টেকনোলজি না জানা কেউ কি DevOps শিখতে পারবে? || Can A Non_IT Person Learn DevOps? (DevOps Guideline for Non-IT Person)
বর্তমান টেক দুনিয়ায় DevOps (Development and Operations) একটি জনপ্রিয় প্রফেশান হিসেবে গড়ে উঠেছে। DevOps মূলত একটি প্রসেস যা সফটওয়্যার ডেভেলপমেন্ট এবং আইটি অপারেশনস টিমের মধ্যে কম্বাইন করে, যার ফলে ফাস্ট, রিলায়েবল এবং ইফেক্টিভ সফটওয়্যার ডেলিভারি এনশিউর হয়। DevOps-এ ডেভেলপ মানে কেবল টেকনিক্যাল স্কিল নয়, বরং টিম কোলাবোরেশন, কালচারাল চেঞ্জ এবং ডেভেলপ প্রসেসের ইউজের স্কিলও এতে ইনক্লুডেট। আজ আলোচনা করা হবে, Non-IT বা টেকনোলজিক ফিল্ডে না থাকা কেউ কি DevOps শিখতে পারবে? এবং এই প্রফেশানে সাকসেসফুলল
DevOps শেখা কি সহজ? || Is DevOps Easy to Learn? (DevOps Learning Guideline)
বর্তমান টেক দুনিয়ায় DevOps একটি বহুল আলোচিত ও গুরুত্বপূর্ণ আইডিয়া। সফটওয়্যার ডেভেলপমেন্ট ও আইটি অপারেশনের মধ্যে একটি ব্রিজ হিসেবে DevOps-এর ইনোভেশন হয়েছে। এটি সফটওয়্যার ডেভেলমেন্ট ও ডেলিভারির স্পীড বাড়ানোর জন্য অটোমেটিক টুলস ও প্র্যাকটিসের মাধ্যমে কাজ করে। এই DevOps শেখা কি সহজ? এই প্রশ্নের উত্তর অনেকাংশে নির্ভর করে একজন লার্নারের ব্যাকগ্রাউন্ড, এক্সপেরিয়েন্স এবং শেখার ইন্টারেস্টের উপর। আসুন এই বিষয়ে বিস্তারিত আলোচনার আগে আজকের টপিকগুলো জেনে নেই, DevOps কী? DevOps শেখার চ্যালেঞ্জ শেখা
DevOps এর কোন ল্যাঙ্গুয়েজটি বেস্ট? || Which Language is Best for DevOps? || (Best Language For DepOps)
DevOps বর্তমানে সফটওয়্যার ডেভেলপমেন্ট এবং আইটি অপারেশনসের কম্বাইন প্রসেস হিসেবে কাজ করছে। এর মূল উদ্দেশ্য হলো সফটওয়্যার ডেলিভারি প্রসেসকে ফাস্ট এবং কারেক্টলি কমপ্লিট করা, যেখানে ডেভেলপার এবং অপারেশন টিম কোলাবোরেটলি কাজ করে। DevOps প্রসেসে DevOps এর জন্য পারফেক্ট প্রোগ্রামিং ল্যাঙ্গুয়েজের সিলেক্ট করা অত্যন্ত গুরুত্বপূর্ণ কারণ এটি সিস্টেম অটোমেশন, কনফিগারেশন ম্যানেজমেন্ট, ইনফ্রাস্ট্রাকচার ম্যানেজমেন্ট এবং আরও বিভিন্ন কাজে হেল্পফুল হয়। DevOps-এর কাজের প্রসেসে ইউজ করার মতো বিভিন্ন প্রোগ্রামিং ল্
পাইথন কি বিগিনারদের জন্য শেখা সহজ? || Is Python Easy to Learn for Beginners || ( Python Guideline for Beginners)
প্রোগ্রামিংয়ের দুনিয়া বিগিনারদের জন্য অনেকটা কঠিন। প্রোগ্রামিংয়ে আগ্রহ থেকে ক্যারিয়ার হিসেবে অনেকেই প্রোগ্রামার হতে চায়। কিন্তু প্রোগ্রামার হওয়ার জার্নিটা এতো সহজ নয়। দিনের পর দিন কোডিং নিয়ে থাকতে থাকতে অনেকেই হাপিয়ে যায়। ঠিক তখন-ই বিগিনারদের এই কোডিংয়ের ঝামেলা থেকে চলে আসে পাইথন। প্রোগ্রামিং ল্যাঙ্গুয়েজের দুনিয়ায় সবচেয়ে সহজ প্রোগ্রামিং ল্যাঙ্গুয়েজ বলা হয় পাইথনকে। কিন্তু এই কথা কি আসলেই সত্যি? * কেন পাইথন শেখা সহজ? ● পাইথনের ইংরেজি সিনট্যাক্স ● পাইথন লজিকে ফোকাস করে ● পাইথন ফ্রি-তে ইউজ করা