Vue bilan tanishuv
Vue - bu JavaScript frameworkidir. Uni HTML sahifasiga <script> tegi bilan qo‘shish mumkin.
Vue HTML atributlarini Direktivlar bilan kengaytiradi va ma’lumotlarni HTML bilan ifodalar bilan bog‘laydi.
Vue - JavaScript freymvorki
Vue - JavaScript’da yozilgan front-end JavaScript freymvorki.
Vue-ga o‘xshash frameworklar React va Angulardir, ammo Vue engilroq va boshlash osonroq.
Vue JavaScript fayli sifatida tarqatiladi va veb-sahifaga skript yorlig‘i bilan qo‘shilishi mumkin:
<script
src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
Nega Vue-ni o‘rganing?
- Bu oddiy va ishlatish uchun qulay.
- U oddiy va murakkab loyihalarni bajarishga qodir.
- Uning mashhurligi ortib borayotgani va ochiq manbali hamjamiyat tomonidan qo‘llab-quvvatlanishi.
- Oddiy JavaScript-da biz HTML va JavaScript-ni QANDAY ulanganligini yozishimiz kerak, lekin Vue-da biz shunchaki ulanish mavjudligiga ishonch hosil qilishimiz va qolganlari bilan Vue-ga g‘amxo‘rlik qilishimiz kerak.
- U shablonga asoslangan sintaksis, ikki tomonlama ma’lumotlar bog‘lanishi (two-way data binding) va markazlashtirilgan state boshqaruvi (state management) orqali ishlab chiqish jarayonini yanada samarali qiladi.
Agar ushbu fikrlardan ba’zilarini tushunish qiyin bo‘lsa, tashvishlanmang, siz darsning oxirida tushunasiz.
Options API
Vue-da kod yozishning ikki xil usuli mavjud: Options API va The Composition API.
Asosiy tushunchalar Options API va Composition API uchun bir xil, shuning uchun birini o‘rganganingizdan so‘ng boshqasiga osongina o‘tishingiz mumkin.
Options API - bu qo‘llanmada yozilgan narsa, chunki u yangi boshlanuvchilar uchun qulayroq va taniqli tuzilishga ega.
Options API va Composition API o‘rtasidagi farqlar haqida ko‘proq ma’lumot olish uchun ushbu qo‘llanmaning oxiridagi ushbu sahifani ko‘rib chiqing.
Mening birinchi sahifam
Endi biz 5 asosiy bosqichda birinchi Vue veb-sahifamizni qanday yaratishni bilib olamiz:
- Oddiy HTML fayldan boshlang.
- Vue ulanishi uchun id="app" bilan <div> tegini qo‘shing.
- Vue havolasi bilan
<script>tegini qo‘shish orqali brauzerga Vue kodini qanday ishlatishni ayting. - Ichida Vue nusxasi (instance) bo‘lgan
<script>tegini qo‘shing. - Vue misolini
<div id="app">tegiga ulang.
Ushbu qadamlar quyida batafsil tavsiflangan, oxirida to‘liq kod "O‘zingiz sinab ko‘ring" misolida keltirilgan.
1-qadam: HTML sahifasi
Oddiy HTML sahifasidan boshlang:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
</body>
</html>
2-qadam: qo‘shing
Vue-ga ulanish uchun sahifangizda HTML elementi kerak.
<body> tegiga <div> tegini qo‘ying va unga identifikatorni bering:
<body>
<div id="app"></div>
</body>
3-qadam: Vue-ga havola qo‘shing
Brauzerimizga Vue kodimizni sharhlashda yordam berish uchun ushbu <script> tegini qo‘shing:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
4-qadam: Vue misolini qo‘shing
Endi biz Vue kodimizni qo‘shishimiz kerak.
Bu Vue misoli deb ataladi va ma’lumotlar, usullar va boshqa narsalarni o‘z ichiga olishi mumkin, ammo endi u faqat xabarni o‘z ichiga oladi.
Ushbu <script> tegidagi oxirgi qatorda bizning Vue nusxamiz <div id="app"> tegiga ulangan:
<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-qadam: Matn interpolatsiyasi bilan "xabar" ni ko‘rsatish
Va nihoyat, biz matn interpolyatsiyasidan, ikki jingalak qavsli {{ }} Vue sintaksisidan ma’lumotlar uchun joy ushlagich sifatida foydalanishimiz mumkin.
<div id="app"> {{ message }} </div>
Brauzer {{ message }} ni Vue misolidagi "message" xususiyatida saqlangan matn bilan almashtiradi.
Mana bizning birinchi Vue sahifamiz:
Misol: Mening birinchi Vue sahifam!
Quyidagi “O‘zingiz sinab ko‘ring” tugmasi bilan ushbu kodni sinab ko‘ring.
<!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>
O‘zingiz sinab ko‘ring »
Matn interpolatsiyasi
Matn interpolyatsiyasi - bu veb-sahifada ko‘rsatish uchun Vue misolidan matn olinsa.
Brauzer quyidagi kod bilan sahifani oladi:
<div id="app"> {{ message }} </div>
Keyin brauzer Vue misolining "xabar" xususiyati ichidagi matnni topadi va Vue kodini bunga tarjima qiladi:
<div id="app">Hello World!</div>
Matn interpolatsiyasida JavaScript
Oddiy JavaScript ifodalarini {{ }} juft jingalak qavslar ichida ham yozish mumkin.
Misol
Div elementi ichidagi xabarga tasodifiy raqam qo‘shish uchun JavaScript sintaksisidan foydalaning:
<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>
O‘zingiz sinab ko‘ring »
Ishni boshlash
Ushbu qo‘llanma sizga Vue asoslarini o‘rgatadi.
Ushbu qo‘llanmani bajarish uchun sizga HTML, CSS va JavaScript bilan asosiy tajriba kerak.
Ushbu qo‘llanmani davom ettirish uchun "Keyingi" tugmasini bosing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!