Vue এর পরিচিতি
Vue একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। এটি একটি <script> ট্যাগ সহ একটি HTML পৃষ্ঠায় যোগ করা যেতে পারে।
Vue নির্দেশাবলী সহ HTML বৈশিষ্ট্য প্রসারিত করে এবং এক্সপ্রেশন সহ HTML এর সাথে ডেটা আবদ্ধ করে।
Vue একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক
Vue হল জাভাস্ক্রিপ্টে লেখা একটি অগ্রণী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।
Vue-এর অনুরূপ ফ্রেমওয়ার্কগুলি প্রতিক্রিয়া এবং কৌণিক, তবে Vue শুরু করা অনেক হালকা এবং সহজ।
Vue একটি জাভাস্ক্রিপ্ট ফাইল হিসাবে বিতরণ করা হয়, এবং একটি স্ক্রিপ্ট ট্যাগ সহ একটি ওয়েব পৃষ্ঠাতে যোগ করা যেতে পারে:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>কেন Vue শিখবেন?
- এটা সহজ এবং ব্যবহার করা সহজ.
- এটি সহজ এবং জটিল উভয় প্রকল্পই পরিচালনা করতে পারে।
- এর ক্রমবর্ধমান জনপ্রিয়তা এবং ওপেন সোর্স সম্প্রদায়ের সমর্থন।
- সাধারণ জাভাস্ক্রিপ্টে আপনাকে লিখতে হবে কিভাবে এইচটিএমএল এবং জাভাস্ক্রিপ্ট সংযুক্ত আছে, কিন্তু Vue-তে আপনি নিশ্চিত হন যে একটি সংযোগ আছে এবং Vue বাকিটির যত্ন নেয়।
- এটি টেমপ্লেট-ভিত্তিক সিনট্যাক্স, দ্বিমুখী ডেটা বাঁধাই এবং একটি কেন্দ্রীভূত রাষ্ট্র পরিচালনার বৈশিষ্ট্যযুক্ত একটি দক্ষ বিকাশ প্রক্রিয়ার জন্য অনুমতি দেয়।
দ্রষ্টব্য:
যদি এই পয়েন্টগুলির মধ্যে কিছু বুঝতে অসুবিধা হয়, চিন্তা করবেন না, আপনি এই টিউটোরিয়ালের শেষে বুঝতে পারবেন।
অপশন এপিআই
Vue-তে কোড লেখার দুটি ভিন্ন উপায় আছে: অপশন এপিআই এবং কম্পোজিশন এপিআই।
মৌলিক ধারণাগুলি বিকল্প API এবং কম্পোজিট API উভয়ের জন্যই একই, তাই একটি শেখার পরে, আপনি সহজেই অন্যটিতে যেতে পারেন।
এই টিউটোরিয়ালে Options API কভার করা হয়েছে কারণ এটি নতুনদের জন্য সবচেয়ে সহায়ক এবং পরিচিত ফ্রেমওয়ার্ক হিসেবে বিবেচিত।
বিকল্প API এবং রচনা API-এর মধ্যে পার্থক্য সম্পর্কে আরও জানতে এই টিউটোরিয়ালের শেষে এই পৃষ্ঠাটি দেখুন।
আমার প্রথম পাতা
এখন আসুন শিখি কিভাবে আমাদের প্রথম Vue ওয়েব পেজ 5টি প্রাথমিক ধাপে তৈরি করা যায়:
- একটি মৌলিক HTML ফাইল দিয়ে শুরু করুন।
- Vue ওয়েবে id="app" সহ একটি <div> ট্যাগ যোগ করুন।
- Vue-তে লিঙ্ক করুন Vue-এর লিঙ্কে একটি <script> ট্যাগ যোগ করে কীভাবে এটি পরিচালনা করবেন তা ব্রাউজারকে বলুন।
- Vue ইনস্ট্যান্সের ভিতরে একটি <script> ট্যাগ যোগ করুন।
- Vue দৃষ্টান্তটিকে <div id="app"> ট্যাগের সাথে আবদ্ধ করুন।
এই ধাপগুলি বিস্তারিত, সম্পূর্ণ কোডটি 'Try It Yourself' উদাহরণ সহ নিচে দেওয়া আছে।
1HTML পৃষ্ঠা
একটি সাধারণ HTML পৃষ্ঠা দিয়ে শুরু করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
</body>
</html>2একটি <div> যোগ করুন
Vue-এর জন্য আপনার পৃষ্ঠায় একটি HTML উপাদান সংযুক্ত করা প্রয়োজন।
<body> ট্যাগের ভিতরে একটি <div> ট্যাগ রাখুন এবং এটিকে একটি আইডি দিন:
<body>
<div id="app"></div>
</body>3Vue লিঙ্ক যোগ করুন
ব্রাউজারকে আমাদের Vue কোড ব্যাখ্যা করতে সাহায্য করতে, এই <script> ট্যাগ যোগ করুন:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>4একটি Vue উদাহরণ যোগ করুন
এখন আমাদের Vue কোড যোগ করতে হবে।
এটিকে একটি Vue ইভেন্ট বলা হয় এবং এতে ডেটা এবং পদ্ধতি এবং অন্যান্য জিনিস থাকতে পারে, কিন্তু এখন এটিতে কেবল একটি বার্তা রয়েছে৷
আমাদের Vue উদাহরণটি এই <script> ট্যাগের শেষ লাইনে <div id="app"> ট্যাগের সাথে সংযুক্ত আছে:
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>5টেক্সট ইন্টারপোলেশন সহ 'বার্তা' প্রদর্শন করুন
পরিশেষে, আমরা টেক্সট ইন্টারপোলেশন ব্যবহার করতে পারি, একটি Vue সিনট্যাক্স যা ডাবল কোঁকড়া বন্ধনী সহ {{ }} ডেটার জন্য একটি প্রক্রিয়া হিসাবে।
<div id="app"> {{ message }} </div>ব্রাউজারটি Vue ইন্সট্যান্সের মধ্যে 'মেসেজ' বৈশিষ্ট্যে সংরক্ষিত পাঠ্যের সাথে {{ বার্তা }} প্রতিস্থাপন করে।
সম্পূর্ণ উদাহরণ: আমার প্রথম Vue পৃষ্ঠা!
আপনার নিজস্ব Vue সার্ভার পান
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>'Try it Yourself' বোতাম দিয়ে এই কোডটি পরীক্ষা করুন।
টেক্সট ইন্টারপোলেশন
টেক্সট ইন্টারপোলেশন হল যখন একটি ওয়েব পেজে দেখানোর জন্য Vue ইনস্ট্যান্স থেকে টেক্সট বের করা হয়।
ব্রাউজারটি এই কোড ধারণকারী একটি পৃষ্ঠা পায়:
<div id="app"> {{ message }} </div>তারপর ব্রাউজার Vue ইনস্ট্যান্সের 'মেসেজ' বৈশিষ্ট্যের ভিতরে পাঠ্য খুঁজে পায় এবং Vue কোডকে এতে অনুবাদ করে:
<div id="app">Hello World!</div>টেক্সট ইন্টারপোলেশনে জাভাস্ক্রিপ্ট
সাধারণ জাভাস্ক্রিপ্ট এক্সপ্রেশনগুলি ডাবল কোঁকড়া বন্ধনীর ভিতরেও লেখা যেতে পারে {{ }}।
উদাহরণ
একটি div উপাদানের ভিতরে বার্তাটিতে একটি র্যান্ডম নম্বর যোগ করতে JavaScript সিনট্যাক্স ব্যবহার করুন:
<div id="app">
{{ message }} <br>
{{'Random number: ' + Math.ceil(Math.random()*6) }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>শুরু করুন
এই টিউটোরিয়ালটি আপনাকে Vue এর মূল বিষয়গুলি শেখাবে।
এই টিউটোরিয়াল অনুসরণ করার জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের প্রাথমিক জ্ঞান প্রয়োজন।
ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
প্রশিক্ষণ:
'বার্তা' ডেটা অ্যাট্রিবিউট মান প্রদর্শন করতে টেক্সট ইন্টারপোলেশন ব্যবহার করুন।
<div id="app">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>