Vue misollari

Vue bilan tanishuv

Oddiy "Hello World" dasturini yaratish Matn interpolatsiyasi bilan dastur yaratish

v-bind direktivasi

<div> elementini klassga bog‘lash <img> elementini rasm fayliga bog‘lash Shrift o‘lchamini o‘zgartirish Shrift o‘lchamini boshqa usulda o‘zgartirish Shrift o‘lchamini yana bir boshqa usulda o‘zgartirish Fon rangini o‘zgartirish Fon rangini o‘zgartirish uchun v-bind va JavaScript shartidan foydalanish <div> elementini klassga bog‘lash <div> elementini klassga shartli ravishda bog‘lash <div> elementini data xususiyati yordamida klassga shartli ravishda bog‘lash v-bind ning qisqa yozuvidan foydalanish Input range elementi yordamida shaffoflikni o‘zgartirib, rasmni ochish v-for bilan yaratilgan rasmlar bosilganda klass biriktirish class va v-bind:class bilan berilgan CSS qoidalari birlashtirilishini ko‘ramiz v-bind:class yordamida vergul bilan ajratib, bir nechta klass berish mumkin CSS qoidalari v-bind:style bilan camelCase va kebab-case yozuvlarining ikkalasidan foydalanib belgilanadi Klasslar massiv sintaksisi bilan biriktiriladi

v-bind: batafsil tushuntirish

v-if direktivasi

Data xususiyatiga qarab matnni shartli ravishda ko‘rsatish Taqqoslashga qarab matnni shartli ravishda ko‘rsatish v-if, v-else-if va v-else yordamida matnni shartli ravishda ko‘rsatish Muayyan matnda 'pizza' so‘zi bo‘lsa, xabar ko‘rsatish Muayyan matnda 'pizza' so‘zi bo‘lsa, xabar va rasm ko‘rsatish Muayyan matnda 'pizza' yoki 'burrito' so‘zi bo‘lsa, turli xabar va rasmlarni ko‘rsatish

v-if: batafsil tushuntirish

v-show direktivasi

Data xususiyatiga qarab <div> elementini ko‘rsatish yoki yashirish v-show va v-if o‘rtasidagi farqlarni o‘rganish

v-show: batafsil tushuntirish

v-for direktivasi

Massiv asosida ro‘yxatni render qilish Massiv asosida rasmlarni render qilish Massiv asosida rasmlar va matnni render qilish Massiv asosida matnni render qilishda indeksni olish Massivdagi obyektlar asosida matnni render qilishda indeksni olish

v-for: batafsil tushuntirish

v-on direktivasi

Hisoblagichni oshirish uchun tugmani bosish Chiroqni yoqish va o‘chirish uchun tugmani bosish Har safar matn kiritish (input) hodisasi qayd etilganda hisoblagich oshadi Har safar sichqoncha ko‘rsatkichi harakati hodisasi qayd etilganda tasodifiy fon rangi hosil qilinadi v-for bilan yaratilgan elementlar uchun click hodisasi v-on:click bilan sozlanadi v-on ning qisqa yozuvi @ ishlatiladi

v-on: batafsil tushuntirish

Metodlar

Metod "Hello World!" matnini yozadi Metod sichqoncha ko‘rsatkichi pozitsiyasini event obyektidan oladi Metod sichqoncha ko‘rsatkichi pozitsiyasiga qarab fon rangini o‘zgartiradi Metod input maydonidagi matnni daftar sahifasi rasmiga yozadi Turli tugmalar bosilganda metod turli argument qiymatlari bilan chaqiriladi Metod argument sifatida ham matn, ham event obyekti bilan chaqiriladi Ko‘plab tugmalar bitta metodni turli argumentlar bilan chaqiradi

Metodlar: batafsil tushuntirish

Hodisa modifikatorlari

.once modifikatori tugma bosilganda alert faqat bir marta chiqishini ta’minlaydi keydown klaviatura hodisasi bosilgan tugmani ekranga yozadigan metodni chaqiradi .s modifikatori 'S' tugmasi bosilganda alert chiqaradi .s va .ctrl modifikatorlari 'S' va 'ctrl' tugmalari bir vaqtda bosilganda alert chiqaradi <div> elementi sichqonchaning o‘ng tugmasi bilan bosilganda fon rangi o‘zgaradi 'ctrl' tugmasi bosib turilgan holda <div> elementi sichqonchaning o‘ng tugmasi bilan bosilganda fon rangi o‘zgaradi O‘ng tugma bosilganda ochiladigan menyu .prevent modifikatori bilan to‘xtatiladi 'shift' tugmasi bosib turilgan holda chap tugma bosilsa, rasm o‘zgaradi

Hodisa modifikatorlari: batafsil tushuntirish

v-model direktivasi

v-model yordamida xaridlar ro‘yxatiga yangi mahsulotlar qo‘shish mumkin v-model taqdim etadigan ikki tomonlama bog‘lash (two-way binding) imkoniyatini o‘rganish Checkbox boolean data xususiyatini o‘zgartiradi Xaridlar ro‘yxati Mahsulotlarni topilgan deb belgilash mumkin bo‘lgan xaridlar ro‘yxati Dinamik restoran buyurtma formasi Radio tugmalar yordamida sevimli hayvonni tanlash, <input type="radio"> Checkbox’lar yordamida yoqtirgan taomlaringizni tanlash, <input type="checkbox"> Ochiladigan ro‘yxatdan avtomobil tanlash, <select> Bir nechta avtomobil tanlash, <select multiple> Faqat o‘qiladigan forma maydoni, <input type="file"> Bo‘yni kiritish, <input type="range"> Rang tanlash, <input type="color"> Mahsulot haqida sharh yozish, <textarea>

v-model: batafsil tushuntirish

Hisoblangan xususiyatlar

Matn joriy holatni aks ettirishi uchun checkbox dinamik qilinadi Checkbox’ning joriy holati matni 'yes' yoki 'no' bo‘ladi

Hisoblangan xususiyatlar: batafsil tushuntirish

Kuzatuvchilar

20 va 60 oralig‘idagi qiymatlarni tanlab bo‘lmasligi uchun watcher ishlatiladi Watcher yangi va eski qiymatlarni kirish argumentlari sifatida oladi E-mail manzil to‘g‘riligini tasdiqlash uchun yangi va eski qiymatlardan foydalaniladi

Kuzatuvchilar (watchers): batafsil tushuntirish

Shablonlar

"Hello World!" template konfiguratsiya opsiyasi yordamida ko‘rsatiladi

Shablonlar: batafsil tushuntirish

SFC sahifalari

Juda oddiy SFC sahifasi

SFC sahifalari: batafsil tushuntirish

Komponentlar

Komponent uch marta ishlatiladi Har bir komponentning o‘z hisoblagichi bor Props’li komponentlar v-for bilan yaratiladi Props’li komponentlar v-for va key atributi bilan yaratiladi Ushbu xato misol key atributi zarurligini ko‘rsatadi Ushbu misol key atributi muammolarni hal qila olishini ko‘rsatadi

Komponentlar: batafsil tushuntirish

Props

Props komponentda massiv sifatida belgilanadi Komponentda ikkita prop atributi belgilanadi Taom sevimli yoki sevimli emasligini belgilash uchun boolean prop ishlatiladi props konfiguratsiya opsiyasi obyekt sifatida belgilanadi 'foodIsFavorite' data xususiyatini tugma bilan almashtirish (toggle) mumkin

Props: batafsil tushuntirish

Emit

Komponent boolean sevimli holatini emit qiladi Emit qilingan boolean sevimli holatni App.vue qabul qiladi Emit qilingan boolean sevimli holat App.vue’da qabul qilinadi va yangilanadi

Emit: batafsil tushuntirish

Fallthrough atributlari

style atributi komponentga o‘tadi (fallthrough) style atributi komponentga o‘tadi va inline stil bilan birlashtiriladi Fallthrough atributlar qayerga tegishli ekanini belgilash uchun $attrs obyekti ishlatiladi

Fallthrough atributlari: batafsil tushuntirish

Scoped stil berish

Boshqacha belgilanmagan bo‘lsa, belgilangan stil global bo‘ladi scoped atributi yordamida stil lokal qilib belgilanadi

Scoped stil berish: batafsil tushuntirish

Mahalliy komponentlar

main.js’da belgilangan komponentlar global miqyosda mavjud Faqat lokal mavjud bo‘lishi uchun komponentlarni boshqa komponent ichida belgilash mumkin

Mahalliy komponentlar: batafsil tushuntirish

Slotlar

"Hello World!" komponent slot’i ichida qabul qilinadi Kartochkasimon o‘ram yaratish uchun komponent slot’i ishlatiladi Boshqa kartochkasimon o‘ram yaratish uchun komponent slot’i ishlatiladi Slot zaxira (fallback) kontent bilan ishlatiladi Bitta komponentda ikkita slot ishlatiladi Kontentni to‘g‘ri joyga yo‘naltirish uchun slotlarga nom beriladi Agar slot’ning nomi bo‘lmasa, u standart (default) slot bo‘ladi Slot aniq ravishda standart (default) slot sifatida belgilanadi Kontentni muayyan slot’ga yo‘naltirish uchun v-slot direktivasi ishlatiladi v-slot ning qisqa yozuvi — # Scoped slot’dan ma’lumot qabul qilish v-for bilan yaratilgan scoped slot’lar ota komponentga ma’lumot yuboradi Obyektlar massividan yaratilgan scoped slot’lar ota komponentga ma’lumot yuboradi Matn scoped slot’dan v-bind direktivasisiz yuboriladi Scoped slot’larga nom beriladi Nomlangan scoped slot’lar App.vue’ga turli ma’lumotlar yuboradi.

Slotlar: batafsil tushuntirish

Dinamik komponentlar

App.vue qaysi komponent ko‘rsatilishini almashtiradi <KeepAlive> komponentisiz komponentlar keshlanmaydi <KeepAlive> komponenti komponentlarni keshlaydi <KeepAlive include="CompOne"> kodi bilan faqat ko‘rsatilgan komponent keshlanadi <KeepAlive exclude="CompOne"> kodi bilan ko‘rsatilgan komponent keshlanmaydi <KeepAlive> komponenti bilan ikkita komponent keshlanadigan qilib belgilanadi <KeepAlive> komponenti bilan oxirgi ochilgan ikkita komponent keshlanadigan qilib belgilanadi

Dinamik komponentlar: batafsil tushuntirish

Teleport

<div> elementi DOM’da <body> elementining yuqori (root) darajasiga ko‘chiriladi Teleport qilingan <div> elementi uchun scoped stil va skript baribir ishlaydi

Teleport: batafsil tushuntirish

HTTP so‘rovlari

Matnli fayl uchun GET so‘rovi yuboriladi va promise obyekti qabul qilinadi Matnli fayl uchun GET so‘rovi yuboriladi va response obyekti qabul qilinadi Matnli fayl uchun GET so‘rovi yuboriladi va faylning o‘zi qabul qilinadi JSON fayl uchun GET so‘rovi yuboriladi va yirik quruqlik sutemizuvchilari haqida ma’lumot qabul qilinadi JSON fayl uchun GET so‘rovi yuboriladi va tasodifiy yirik quruqlik sutemizuvchisi ko‘rsatiladi random-data-api.com API’dan tasodifiy foydalanuvchi olinadi random-data-api.com API’dan tasodifiy foydalanuvchi olinadi va unvoni, ismi hamda rasmi bilan ko‘rsatiladi axios kutubxonasi yordamida random-data-api.com API’dan tasodifiy foydalanuvchi olinadi

HTTP so‘rovlari: batafsil tushuntirish

Shablon ref’lari

<p> elementidagi matnni almashtirish uchun $refs obyekti ishlatiladi Bir <p> elementidagi matnni boshqasiga o‘tkazish uchun $refs obyekti ishlatiladi <input> elementidagi qiymatni <p> elementiga joylash uchun $refs obyekti ishlatiladi v-for bilan yaratilgan, ref atributiga ega <li> elementlari $refs obyektida massiv sifatida yig‘iladi

Shablon ref’lari: batafsil tushuntirish

Lifecycle (hayotiy sikl) hook’lari

Lifecycle hook’lari: batafsil tushuntirish

Provide/Inject

App.vue’da taqdim etilgan (provide) ma’lumot komponentga inject qilinadi va ko‘rsatiladi

Provide/Inject: batafsil tushuntirish

Marshrutlash

Komponentlar dinamik komponent yordamida almashtiriladi Komponentlar routing yordamida almashtiriladi

Marshrutlash: batafsil tushuntirish

Animatsiyalar

<div> elementi CSS transition xossasi yordamida aylantiriladi Doira shaklidagi <div> elementi CSS @keyframes xossasi yordamida chapdan o‘ngga sakraydi <p> elementi tugma yordamida ko‘rsatiladi/yashiriladi <Transition> komponenti ichidagi <p> elementi olib tashlanganda asta-sekin yo‘qoladi <p> elementi ko‘rsatilganda/yashirilganda sirpanib kiradi va chiqadi <p> elementi 'enter' va 'leave' paytida alohida fon ranglariga ega <Transition> komponentlarini farqlash uchun name prop’idan foydalanib, <p> elementlari turlicha animatsiya qilinadi after-enter hodisasi <div> elementining ko‘rsatilishini ishga tushiradi Almashtirish (toggle) tugmasi enter-cancelled hodisasini ishga tushiradi appear prop’i sahifa yuklangan zahoti <p> elementi animatsiyasini boshlaydi 'enter' va 'leave' animatsiyasi bilan rasmlarni varaqlash. Eski rasm olib tashlanishidan oldin yangi rasm qo‘shiladi 'enter' va 'leave' animatsiyasi bilan rasmlarni varaqlash. mode="out-in" eski rasm olib tashlanmaguncha yangi rasmlar qo‘shilishiga yo‘l qo‘ymaydi Komponentlar orasida almashish animatsiya qilinadi

Animatsiyalar: batafsil tushuntirish

v-for bilan animatsiyalar

<TransitionGroup> yordamida v-for bilan render qilingan ro‘yxatga yangi elementlar qo‘shiladi O‘yin toshlarini qo‘shish yoki olib tashlash mumkin, qo‘shilgan toshlar <TransitionGroup> yordamida animatsiya qilinadi O‘yin toshlarini qo‘shish yoki olib tashlash mumkin, qo‘shilgan va olib tashlangan toshlar <TransitionGroup> yordamida animatsiya qilinadi O‘yin toshlarini qo‘shish, olib tashlash, aralashtirish yoki saralash mumkin, barchasi <TransitionGroup> yordamida animatsiya qilinadi

v-for bilan animatsiyalar: batafsil tushuntirish

Composition API

Composition API bilan yozilgan: tugmani bosib, ombordagi yozuv mashinkalari sonini kamaytirish mumkin Options API bilan yozilgan: tugmani bosib, ombordagi yozuv mashinkalari sonini kamaytirish mumkin

Composition API: batafsil tushuntirish

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish