vue a/q task-1

1-savol

O'zi nima uchun aynan Vue.js ? (umumiy loyiha yaratish ham ko'rib ketilsin)

O'zi nima uchun Vue.js degan savolga shahsiy fikrimni bildiradigan bo'lsam, shaxsan men vue.js ni o'rganishga kirishganim va bu ustida ishlayotganimning sababi Ustoz (ish beruvchim) buni ma'qul ko'rishlari va yangi loyihalarni shu framework orqali davom ettirishimizni aytganliklari, bundan tashqari uning ba'zi qulayliklari, ko'p kompaniyalar loyihalarini aynan shu framework ustiga qurayotganini ko'p ta'kidlashlari bo'ldi.

Umumiy fikrda qaraydigan bo'lsak, buni asli tan olmasam da haqiqatda ba'zi qulayliklari men oldin ishlab ko'rgan framework ya'ni React.js ga qaraganda qulayroq va yozilish jihatidan ham qisqaroq (vaqt masalasida tejamkor) ekan. Bilmimga ko'ra hali ham junior hisoblanmasligim sababidan vue.js react.js ga ko'ra loyihalarga qanday ijobiy ta'sir ko'rsata oladi, loyihaga keltiradigan foydalari nimalardan iborat yoki loyiha og'ir-yengil ishlashiga qanday ta'sir ko'rsata oladi bu haqida aniq bir fikrim yo'q.

Vue.js loyihasini yaratishga keladigan bo'lsak, (bu sizga umuman kerak bo'lmasa-da) men buni hozir sizga step by step ko'rsatib o'tib ketaman.

1-step

loyihamizni yaratib olish uchun birinchi bo'lib kompyuterimiz terminalini ochib quyidagi buyruqni yozamiz:

2-step

Bu buyruqdan so'ng terminal oynasida ? Project name: › vite-project kabi savol bilan qarshilashamiz, va bu yerga bo'lajak loyihamizning ismini kiritamiz. Masalan: todo-project

3-step

Terminal oynasida bizga quyidagi kabi variantlar beriladi, vue.js'ni tanlab enterni bosamiz.

4-step

5-step

Barcha savollarga muvaffaqiyatli javob bergandan so'ng bizga terminal mahsus buyruqlarni beradi, ularni terminalda run qilib loyihani ishlatishni boshlasak ham bo'laveradi.

2-savol

Vue.js da direktivalar bizga nima uchun kerak?

Vue.js'da direktivalar komponentlarning HTML atributlari ko'rinishida ishlatiladigan maxsus belgilar bo'lib, bizga asosan DOM da joylashgan elementlarga bog'lanib ularning hatti harakatlarini kuzatishimiz va boshqarishimiz uchun kerak bo'ladi.

3-savol

Oldingi savolda gaplashilgan vue.js irektivalari nimalardan iborat?

Vue.js'da direktivalar quyidagilardan iborat:

1. v-if va v-show direktivalari, elementlarni ko'rinishini boshqarish uchun ishlatiladi.
   <div v-if="isVisible">Bu matn faqat isVisible true bo'lsa ko'rinadi</div>
2. v-bind direktivasi, atributlarning dinamik ravishda yangilanib turishini ta'minlash uchun ishlatiladi.
   <img v-bind:src="imageSrc" alt="Image"> // vaqt kamligi uchun ko'p to'xtalolmadim
3. v-html direktivasi yordamida HTML matni komponentaning ichiga to'g'ridan-to'g'ri qo'shiladi va randerlanadi.
   template ichida:
   <ul v-html="htmlContent">script ichida: const htmlContent="hehe";
4. `v-bind` direktivasi atributlarning dinamik ravishda yangilanib turishini ta'minlaydi.
   <img class="image" v-bind:src="imgURL" v-bind:title="titlePhoto" alt="photo">
5. vfor list yoki array elementlarini takrorlash uchun ishlatiladi, buning yordamida bircil bo'lgan HTML strulturalarini qayta-qayta takrorlash ham mumkin bo'ladi.
   <li v-for="item in items" :key="item.id">{{ item.name }}</li>
6. `v-on` direktivasi yordamida hodisalarni (masalan, click, mousemove) boshqarish mumkin. Ishlatilishida bular komponentadagi funksiya yoki metodlarga bog'lanadi.
   yozilishi quyidagicha bo'ladi:
   `v-on:click="sayHello"` && `@click="sayHello"`. <button @click="sayHello">test 2</button> <button @mousemove="sayHello">test 2</button> // script const sayHello=()=>{ console.log("Hi there"); }
7. v-click
   `mousemove`, -> `v-on:mousemove="sayHello"` && `@mousemove="sayHello"`. // ulgurmayapman shu sababli tasnif yozib keta olmadim

4-savol

Vue.js da file'lar orasidagi importlar qanday (qay ko'rinishda) amalga oshiriladi?

Vue.js da logo img yoki file importlari haqida qisqacha aytib o'tib ketaman, ular shu ko'rinishda bo'ladi.

logo importi:
// import logo from "./assets/vue.svg"

file importi:
import HelloWorld from './components/HelloWorld.vue'

5-savol

ref nima va ishlatishdan ko'zlangan asosiy ustunligi nimada?

qisqacha tasnif beriladigan bo'lsa, refda `primative type` `(ibtidoiy tur)` dagi ma'lumotlar saqlanadi, ishlatishdan ustunligi yo'q menimcha, uni o'rniga reactive ishlatilgani yaxshi. (shoshdim uzur, rasmda import qolib ketipbti)

6-savol

reactive nima va ishlatishdan ko'zlangan asosiy ustunligi nimada?

data type -> non primativeeeee