Table of contents
- ভিউ জেস ব্যাসিক,ক্লাস বাইন্ডিংparent ,child components data passing,computed method,etc
ভিউ জেস ব্যাসিক,ক্লাস বাইন্ডিংparent ,child components data passing,computed method,etc
বিস্তারিত
আজকের ক্লাসে আমাদের vue.js এর বিস্তারিত আলোচনা করা হবে।
প্রথমেই আমরা প্রজেক্ট তৈরি করবো এবং কোন ,কোন বিষয় গুলো আমরা project এর সাথে default ভাবে add করবো এবং কোন জিনিষ টা কিভাবে কাজ করে চলুন জেনে নেই।
আমরা যদি প্রজেক্ট তৈরি করতে যায় তো আমাদের কাছে বেশ কিছু প্রশ্ন আসবে
আপনার প্রজেক্টের নাম।
Typescript --যদি আপনি কাজ করতে চান বা typescript এর সাপোর্ট চান তাহলে (yes) করবেন।
Jsx --আপনার প্রজেক্টে যদি react এর কোনো সাপোর্ট প্রয়োজোন হয় তাহলে (yes) করবেন।
route setup for single page application--রাউট যেহেতু আমাদের প্রয়োজন বিভিন্ন পেইজ এবং বিভিন্ন components গুলো লোড করার জন্য তাই এটা (yes) করবেন।
pinia আমাদের যখন অনেক বড় প্রজেক্ট হয়ে যাবে state-management এর অনেক প্রয়োজন হয়ে যায় তাই আপনার যদি মনে হয় তাহলে আপনি (yes) করবেন।তবে প্রথম অবসথায় এটা আমাদের প্রয়োজন হয় না।
তবে এটা হলো আমাদের Default state management.react এর জন্য যেমন default ভাবে context api দিয়ে হয়ে যায়। এবং বড় প্রজেক্টের ক্ষেত্রে redux use করে ঠিক nuxt এ convert হলে আমাদের
vuex যেটা আমাদের পরবর্তিতে প্রয়োজন হবে।তবে এটা vue তেও setup দেওয়া যায়।
vitest: এটা হলো টেস্টিং এর জন্য যেহেতু এটা advance তাই প্রয়োজন হয় না প্রাথমিক অবস্থায়।
cypress & playwright: এই দুইটাও testing এর জন্য তাই যেহেতু লাগছে না তাই No.
Eslint: এটা অনেক গুরুত্বপূর্ন মূলত কোড কোয়ালিটি মেইনটেইন এর জন্য এটা ব্যাবহার করা হয়।
এরপরে বাকি বিষয় গুলো আমার প্রথম ব্লগ পড়ে নিতে পারেন সেখানে খুব সুন্দর ভাবে গুছিয়ে বলা আছে।
তবে গত ক্লাসে আমি আমাদের App.vue পর্যন্ত বলেছিলাম ।এর সাথে আজকে আমাদের index.html file টা নিয়েও আপনাদের ধারনা দিচ্ছি ।
আমাদের সাইট টা ব্রাউজারে সুন্দর ভাবে সাজিয়ে তুলে এই index.html file তবে আমরা এই ফাইল এর মধ্যে কোন কোড করি না।
আর আপনি যদি করতে চান তাহলে সেটা bad practice হবে।
তাহলে আমাদের index.html file এর মধ্যে কিভাবে বিষয়গুলো শো করছে ।
আমাদের src এর মধ্যে main.js file টা আছে যা আমাদের index.html file এর মধ্যে লিংক করা ।
<script type="module" src="/src/main.js"></script>
এবং আমাদের main.js file এর সাথে আমাদের app.vue link করা এবং আমরা আমাদের যাবতীয় কোড বিভিন্ন components এবং আমাদের app.vue এর মধ্যেই করব।
এবং main.js file এর মধ্যে আমাদের vue এর যে application সেটা তৈরি করা।
তার আগে আমরা {createApp} Property import করেছি Vue থেকে।
import { createApp } from 'vue'
const app = createApp(App)
এবং আমাদের index.html file এর মধ্যে একটা div আছে সেই div এর id হলো #app
<div id="app"></div>
এবং এই আইডির কারনেই আমাদের সব ইনফরমেশন গুলো index.html file এর মধ্যে দিয়ে শো হচ্ছে আমাদের ব্রাউজারে।
router
এবার যদি আমাদের অন্য ফোল্ডার এর দিকে লক্ষ্য করি তাহলে দেখতে পাবো আরো কয়েকটা ফোল্ডার আমাদের তৈরি হয়েছে যেমন রাউট ।
রাউট কি আশা করি আপনারা ইতিমধ্যে খুব ভালোভাবেই জেনে গেছেন আমাদের লারাভেল প্রজেক্ট এ।সেইম ভাবেই মেইন থিম টা এখানেও কাজ করে শুধু সিন্টেক্স এর পরিবর্তন যা আমরা পরবর্তিতে ভাল ভাবে জানবো।
views
আমাদের app.vue file এর nav এর মধ্যে অন্য ফোল্ডার এর ফাইল গুলো লিংক করা আছে যা আমাদের ফ্রন্টেন্ড এর কন্টেন্ট বা ফ্রন্টেন্ড এ শো করানোর জন্য।
সেই ফাইল গুলো আমাদের views এর মধ্যে আছে।
এছাড়া যে অন্যান্য ফাইল গুলো রয়েছে
.gitignore --আমরা যখন আমাদের প্রজেক্ট github এ আপলোড করব তখনা আমাদের প্রজেক্টের creadential,database information গুলো এই ফাইল থেকে ignore করে রাখবো যেন আমাদের প্রজেক্টের ইনফরমেশন কেউ না জেনে যায় এবং ভবিষ্যতে এটাকে কেউ access করে।
package-lock.json & package.json: এই দুইটা ফাইল আমাদের প্রজেক্টে আমরা আর কি কি ব্যাবহার করছি সেটার ইনফরমেশন জেসন আকারে লেখা রয়েছে আমরা চাইলে সেগুলো আমাদের প্রয়োজন মত মডিফাই করে নিতে পারবো।
vite.config.js --এই ফাইল টা আমাদের css,js bind করে ফ্রন্টেন্ড এ শো করায় ।এবং এখান থেকে আমরা alias create করতে পারবো।
কিভাবে vue.js এ রাউট কাজ করে।
খুব সিম্পল ভাবে রাউট কাজ করে ভিউ তে।
<RouterLink to="/">Home</RouterLink>
আমাদের প্রথমেই <RouterLink></RouterLink> tag দিয়ে এর মধ্যে আমরা to="/about" দিয়ে declare করব। এবং file এর নাম দিয়ে দিব। ব্যাস আমাদের রাউট তৈরি।
এটা গেল ফ্রন্টেন্ড এর জন্য কিন্তু ব্যাকেন্ডে কিভাবে কাজ করবে ?
আমাদের router এর মধ্যে যে index.js file টা আছে আমরা যদি সেখানে দেখি।
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
]
})
একটা function এর মধ্যে array নিয়ে সেখানে path and name declare করা হয়েছে।
react এর রাউট এর সিন্টেক্স ও ঠিক এমন ই ।
<RouterView />
routerview এর কাজ হলো আমাদের route file গুলো কে শো করানো।আমি এই <RouterView /> টা কে যেখানে দেব সেখানেই আমাদের rout শো করবে।
<RouterView /> আমাদের কি কাজে লাগে ,কখন লাগে?
--মনে করুন যদি আপনার authentication user দের dashboard and guest layout আলাদা করতে চান তাহলে তখন আপনি <RouterView /> ব্যাবহার করে mount করে ভিন্ন ভিন্ন ভাবে শো করাতে পারবেন।
\==এবার আসি আমাদের views এর মধ্যে যে বিভিন্ন ধরনের পেইজের componenets রাখবো সেগুলো কে আমরা কিভাবে শো করাবো।
আমরা রাউট এর যে array আছে সেখানে
{
path: '/',
name: 'home',
component: HomeView
},
এভাবে একেক টা পেইজ এর জন্য declare করবো এবং আমরা এটাকে আমাদের ওই ফোল্ডার থেকে import করে নেব যেমন টা আমরা আমাদের লারাভেল এ করেছিলাম।
import HomeView from '../views/HomeView.vue'
এই import টা দুইভাবে করা যায় ।প্রথম টা ওপরের ওই নিয়মে এবং দ্বিতীয় টা componenet এর সাথেই।
component: () => import('../views/AboutView.vue')
--তবে এভাবে declare করার একটা কারন আছে সেটা হল আমরা যদি প্রথমের মত করে ডিক্লার করি তাহলে আমাদের প্রত্যেক টা পেইজ এ এই জাভাস্ক্রিপ্ট ফাইল গুলো লোড হবে এতে করে টাইম complexity বেড়ে যাবে ।
তাই আমাদের যেই পেইজ এ যতটুকু প্রয়োজন ততটুকু যদি আমরা লোড করি তাহলে আমাদের পেইজ গুলো লাইট ওয়েট হয় ।তাই প্রধানত এইভাবে ডিক্লার করা হয়।
এটা সবার উপরে করে নেব।এবং এখানে একটা বিষয় সেটা হল এই যে HomeView এটা আমরা আমাদের মত করে অন্য নামেও দিতে পারি তবে আমাদের কোডের সাথে মিল রেখে দিতে হবে যাতে আমাদের বুঝতে সহজ হয়।
এবার আসি আমাদের vue template এর মধ্যে কি কি থাকে সেটা নিয়ে।
-------------------------------------------------------------------
--আমাদের ভিউ টেমপ্লেট এর মধ্যে ৩ টা সেকশন থাকে
--template -------আমাদের টেমপ্লেটের মধ্যে যত html code আছে এখানে লিখব।
--script -------আমাদের টেমপ্লেটের মধ্যে যত javascript code আছে এখানে লিখব।
--style -------আমাদের টেমপ্লেটের মধ্যে যত Csscode আছে এখানে লিখব।
তবে এই কোড standard টা ভিউ এর ভার্সন অনুযায়ী বিভিন্ন রকম হতে পারে।
style section এ আরেকটু ভিন্নতা আছে সেটা হলো আমরা যদি
<style scopped>
</style>
তাহলে আমাদের নির্দিষ্ট পেইজের জন্য স্টাইল আলাদা আলাদা পাবে।
আর যদি
<style>
</style>
এভাবে লিখি তাহলে আমাদের এটা গ্লোবাল ভাবে পাবে।
তবে এটা bad practice তাহলে আমাদের যদি গ্লোবাল css লাগে তাহলে আমরা কিভাবে ব্যাবহার করব?
প্রথমেই আমাদের যে src এর মধে assets folder আছে তার মধ্যে আমাদের css folder করে সেখানে আমাদের একটা css file তৈরি করব এং সেই ফাইলের মধ্যে আমাদের যে গ্লোবাল css গুলা লাগবে সেখানে লিখবো এবং সেই
ফাইল টা আমাদের যে main.js file আছে সেখানে লিংক করে দেব।
background এ ভিউ কিভাবে কাজ করে থাকে ?
---------------------------------------------------
--আমরা যদি ভিউ এর লাইফসাইকেল দেখি তাহলে দেখতে পাব
আমাদের মেইন যে পেইজ ব্রাউজারে এসে ডাটা শো করে সেই পেইজের আগে ভিউ ৪ টা function কে কল করে সেগুলো হলোঃ
--beforeCreate
--Created
--beforeMount
--Mounted
এই ৪ টা ফাংশন কল করার পরেই আমাদের মেইন পেজ টা শো করে ।
এবং mount এর পরে ৪ টা ফাংশন কল করে সেগুলো হলোঃঃ
--beforeUpdate
--Updated
--যখন আমাদের mounted page এর ডেটা change হয় তখনা আমাদের এই দুই টা ফাংশন কল হয়।
--beforeMount
--Mounted
এই ২ টা ফাংশন আমরা যখন এক পেইজ থেকে অন্য পেইজে মুভ করব তখন আমাদের ব্রাউজারে রান হবে।
--components আমরা কিভাবে import করবো সেটা সম্পর্কে আগেই বলেছি এখন চলুন আমরা একটু জেনে নেই কত ভাবে আমারা ব্যাবহার করতে পারি।
আপনি চাইলে অনেকভাবে ব্যাবহার করতে পারবেন ।
মনে করুন আমাদের একটা কম্পোনেন্ট ব্যাবহার করলাম;
import HomeView from '../views/HomeView.vue'
আগেই বলেছি "HomeView" কে আপনারা বিভিন্ন নামে দিতে পারেন এবং সেটি আপনাদের component এর html ট্যাগ হয়ে যাবে যা আপনারা ব্যাবহার করতে পারবেন।
এবার আপনি "HomeView" কে
--<HomeView></HomeView>
--</HomeView>
--<homeview></homeview>
--</homeview>
যেহেতু এটা আমার camelcase এ লেখা তাই আমি আরেকভাবেও এটা কে ব্যাবহার করতে পারব ।
--<home-view>
এবার আসি আমি slot কিভাবে ব্যাবহার করব?
\=============================
--একই ধরনের style যদি আমার একের অধিক যায়গায় ব্যাবহার করা লাগে তাহলে আমরা slot কে ব্যাবহার করতে পারি।
<SlotComponent>
---write your content here.
</SlotComponent>
এবার আসি আমরা যদি একটা COMPONENTS এর মধ্য থেকে আরেকটা COMPONENT'S এ ডেটা পাঠাতে চায় তাহলে আমাদের কি করনীয়?
--প্রথমেই আমরা যে কম্পোনেন্ট থেকে ডেটা নিব সেখানে আমাদের props দিয়ে ডেটা পাঠাতে হবে এবং অবশ্যই মনে রাখতে হবে আমাদের ডেটা পাঠানোর সময় একটা করে ইউনিক কি পাঠাবেন।নাহলে আমাদের একটা এরর শো করবে।
যদি আপনি আপনার পোস্ট এ ইউনিক আইডি না খুজে পান তাহলে key="index" দিয়ে দেবেন।
<ul>
<single-post
v-for="(post, index) in posts"
:key="index"
:post="post"
/>
</ul>
এতখন যে ডেটা পাঠানোর প্রসেস ছিল সব গুলোই প্যারেন্ট থেকে চাইল্ড এ ।
এখন আমরা যদি চাইল্ড থেকে প্যারেন্ট এ কোন ডেটা পাঠাতে চায় তাহলে আমাদের কি করনিয়?
আমরা যদি চাইল্ড থেকে প্যারেন্ট এ কোন ডেটা পাঠাতে চায় তাহলে আমাদের ইমিট করে ডেটা পাঠাতে হবে।
<button @click="handleClick(post)">Delete Post</button>
handleClick(post) {
this.$emit('delete', post)
}
এখানে post টা আমাদের props থেকে পাওয়া।
এবং এই ডেটা যদি আমরা প্যারেন্ট থেকে ধরতে চাই তাহলে আমাদের
<single-post
v-for="(post, index) in posts"
:key="index"
:post="post"
@delete="handleDelete"
@fav="handleFav"
/>
এখন এখানে একটা বিষয় কাজ করে সেটা হলো @delete="handleDelete($event,true)"
এই handleDelete এর মধ্যে আমরা ডেটা পাঠাতে পারি যদি আমাদের অন্য কোন কাজে প্রয়োজন হয় যদিও আমরা ডেটা না পাঠালেও এখানে এই handleDelete কাজ করবে।
এবং ডেটা পাঠাতে হইলে আমাদের handleDelete($event,true) এভাবেই লিখতে হবে এবং যে প্যারেন্ট এ আমরা ডেটা ডিলেট করতে চাই সেইখানে আমাদের একটা ফাংশন লিখতে হবে মেথড এর মধ্যে।
methods: {
handleDelete(post) {
this.posts = this.posts.filter(p => p.id !== post.id)
},
ক্লাস বাইন্ডিং
\========
অনেক important একটা বিষয় হলো ক্লাস বাইন্ডিং এই জিনিষ টা আমরা অনেক সহজেই করে ফেলতে পারি ভিউতে ।
এটা অনেক টা ফেইসবুকে react এর মত কাজ করে।
<div
:class="{ 'fav' : post.fav }"
\>
প্রথমে চাইল্ড components এর মধ্যে এই কন্ডিশন দিয়ে দিবেন।
এরপর পোস্ট add করার জন্য emit করে ডেটা পাঠাবেন
<button @click="$emit('fav', post)">Fav Post</button>
এবং আপনার পোস্ট এর সেকশনে অবশ্যই সেটা true কি না false সেটা উল্লেখ করে দিবেন।
এই কোড গুলো আপনার প্যারেন্ট ফোল্ডার এর মধ্যে হবে।,
posts: [
{
id: 1,
title: "Post 1",
fav: true
},
{
id: 2,
title: "Post 2",
fav: false
},
{
id: 3,
title: "Post 3",
fav: true
}
],
for favourite & Unfavourite post
handleFav(post) {
this.posts = this.posts.map(p => {
p.fav = !p.fav
}
return p
})
}
ভিউ এর অনেক সুন্দর একটা মেথড আছে সেটা হলো Computed যেটা আমাদের রিয়েল টাইল ডেটা কাউন্ট করে আলাদা আলাদা করে শো করায়।
computed: {
favs() {
return this.posts.filter(post => post.fav)
},
unFavs() {
return this.posts.filter(post => !post.fav)
},
}
এটা আমাদের মেইন ডেটা তে শুধু মাত্র ফর লুপের ওখানে
-- v-for="(post, index) in favs"
--v-for="(post, index) in unFavs"
এই দুইটা লিখে বাকি structure same রাখলেও আমাদের সুন্দর ভাবে favourite গুলো আলাদা হবে
unfavourite গুলো আলাদা হবে।
যদিও অনেক বড় ক্লাস এবং ব্লগ তাই যদি একটু ধৈর্য ধরে পড়তে পারেন তাহলে আশা করি ভিউ এর অনেক কিছু ক্লিয়ার হয়ে যাবে এবং খুব সুন্দর ভাবে ব্যাসিক প্রজেক্ট শুরু করে দিতে পারবেন।
so be ptaient
keep learning
it's hard but not impossible.
___Rakibul Islam___