DEV Community: Mukhriddin Khodiev (work)

001. JavaScriptga kirish

Mukhriddin Khodiev (work) — Tue, 20 Aug 2024 16:16:57 +0000

Dasturlash tillariga umumiy kirish

Dasturlash tillari kompyuter dasturlarini yaratishda ishlatiladigan asosiy vositalardir. Hozirgi kunda keng qo'llaniladigan ba'zi mashhur dasturlash tillari quyidagilar:

C, C++, C# – bu tillar tizim dasturlari, o'yinlar, va murakkab ilovalar yaratishda qo'llaniladi.
JavaScript, Java – JavaScript veb-ilovalar uchun, Java esa mobil va korporativ ilovalar uchun keng ishlatiladi.
Python, PHP, Go, Dart – Python sun'iy intellekt va tahlil uchun mashhur, PHP veb-saytlarni yaratishda qo'llaniladi, Go katta tizimlarda va Dart mobil ilovalar yaratishda ishlatiladi.

JavaScript tarixi

JavaScript 1995-yilda Brendan Eich tomonidan Netscape kompaniyasida atigi 10 kun ichida yaratilgan. Ushbu dasturlash tili dastlab Mocha deb nomlangan, keyinchalik LiveScript va nihoyat JavaScript deb nomlangan. Bu nomning tanlanishiga sabab, o'sha davrda Java dasturlash tili juda mashhur edi va Netscape bu ommaviylikdan foydalanmoqchi edi.

JavaScript ikki xil versiyada mavjud bo'lib, biri Netscape Navigator, ikkinchisi esa Microsoft kompaniyasining Internet Explorer 3 brauzeriga moslashtirilgan edi. Ushbu raqobat JavaScriptning vebda keng tarqalishiga olib keldi.

Nima uchun JavaScript?

JavaScript – dinamik tiplangan dasturlash tili. Bu shuni anglatadiki, o'zgaruvchilar oldindan aniq bir tipga ega bo'lishi shart emas va ular dastur ishlashi davomida har xil tiplarga o'zgarishi mumkin. JavaScriptning yana bir qancha afzalliklari:

Brauzerda ishlash qobiliyati – JavaScript asosiy veb texnologiyalaridan biri bo'lib, u mijoz tomonda ishlaydi va foydalanuvchi bilan interaktiv muhit yaratadi.
Oson o'rganish va keng qo'llanishi – JavaScriptni boshlang'ich dasturchilar uchun o'rganish nisbatan oson va u internetda eng ko'p qo'llaniladigan tillardan biridir.
Yuqori moslashuvchanlik – JavaScript HTML va CSS bilan birgalikda ishlatiladi va har xil veb-ilovalar yaratishda moslashuvchanlikni ta'minlaydi.

JavaScript nima qiladi?

JavaScript veb-brauzerlar uchun asosiy dasturlash tili bo'lib, u quyidagi uchta asosiy qismdan iborat:

ECMAScript – bu JavaScriptning standartlashtirilgan asosiy qismi bo'lib, sintaksis va asosiy funksiyalarni belgilaydi.
DOM (Document Object Model) – bu HTML va XML hujjatlarining tuzilishini boshqaradi. U foydalanuvchi harakatlarini (hodisalar: scroll, keyboard) va formalar bilan ishlashni boshqaradi.
BOM (Browser Object Model) – bu brauzerning o'ziga xos elementlarini, masalan, location, history, va notifications kabi funksiyalarni boshqaradi.

JavaScriptni ishlatib, siz foydalanuvchi interfeyslarini o'zgartirish, animatsiyalar yaratish, va veb sahifalarni dinamik qilish imkoniyatiga ega bo'lasiz. Masalan:

Toggle funksiyasi – elementlarni ko'rinishini o'zgartirish.
Navbar-shrink – skroll qilganda navigatsiya panelini kichraytirish.
Loading – yuklanish animatsiyalari yaratish.
AOS, Owl Carousel – animatsiyalar va slayderlarni boshqarish.
Dark and light mode – saytning qorong'i va yorug' rejimlarini yaratish.

JavaScript versiyalari

JavaScriptning rivojlanishi davomida bir qancha versiyalari yaratilgan:

ES5 (2009) – bu versiya ko'plab brauzerlarda to'liq qo'llab-quvvatlanadi va hozirgi kunda keng ishlatiladi.
ES6 (2015+) – bu versiya JavaScriptda katta o'zgarishlar kiritdi, jumladan, yangi sintaksis va funksiyalar.
Kelgusi versiyalar – har yili ECMAScriptning yangi versiyalari chiqmoqda va ular JavaScriptning yanada takomillashishiga yordam bermoqda.

JavaScript qayerda joylashtiriladi?

JavaScript kodlari HTML hujjatlarida uch xil usulda joylashtirilishi mumkin:

Inline – JavaScript kodini to'g'ridan-to'g'ri HTML teglarida yozish.
Internal – JavaScript kodini <script> teglar orasida HTML hujjatning ichida yozish.
External – JavaScript kodini alohida .js faylga yozib, HTML hujjatga ulash.

JavaScriptda kirish va chiqish

JavaScriptda kirish va chiqish operatsiyalari quyidagicha amalga oshiriladi:

Kirish: Foydalanuvchi ma'lumotlarini olish uchun prompt funksiyasi ishlatiladi.
Chiqish: Ma'lumotlarni ekranga chiqarish uchun innerHTML, document.write(), window.alert(), window.confirm(), yoki console.log() funksiyalari ishlatiladi.

Sintaksis va izohlar

JavaScriptda kodni to'g'ri yozish uchun sintaksisga e'tibor berish kerak:

Izohlar: Kod ichida tushuntirish yoki izohlar yozish uchun bir qatorli izohlar // va ko'p qatorli izohlar /* ... */ ishlatiladi.
Nuqtali vergul: Har bir JavaScript bayonoti (statement) oxirida ; belgisi qo'yiladi.
Bloklar: Kodni guruhlash uchun {} figurali qavslar ishlatiladi.
Ifodalar: Misol uchun, 3 + 4 bir ifoda (expression) bo'lib, natijasi 7 bo'ladi.
Oq joylar: Kodni o'qish oson bo'lishi uchun bo'sh joylar, yangi qatorlar va tab belgilar ishlatiladi.

Identifikatorlar va nomlash qoidalari

JavaScriptda o'zgaruvchi nomlarini tanlashda quyidagi qoidalarga amal qilish kerak:

To'g'ri nomlar: Nomlar faqat harflar, raqamlar, pastki chiziq yoki dollar belgisidan iborat bo'lishi kerak.
Raqamlar bilan boshlamaslik: O'zgaruvchi nomi raqam bilan boshlanmasligi kerak.
Qisqa va tavsifli nomlar: Nomlar qisqa va ma'noli bo'lishi kerak.
Kalit so'zlarni ishlatmaslik: Masalan, var, let, const, if, else, switch, function, new, class kabi so'zlar ishlatilmasligi kerak.
Katta va kichik harflar: JavaScriptda nomlar katta-kichik harflarga sezgir, masalan, a va A ikki xil nom hisoblanadi.

Nomlash uslublari:

PascalCase – Har bir so'zning bosh harfi katta qilib yoziladi, masalan, FirstName.
snake_case – So'zlar pastki chiziq bilan ajratiladi, masalan, first_name.
camelCase – Birinchi so'z kichik, keyingi so'zlar bosh harfi katta qilib yoziladi, masalan, firstName (tavsiya etiladi).
kebab-case – So'zlar chiziqcha bilan ajratiladi, masalan, first-name (JavaScriptda qo'llab-quvvatlanmaydi).

JavaScriptda o'zgaruvchilar

O'zgaruvchilar – ma'lumotlarni saqlash uchun idishlar (kontaynerlar) bo'lib, ular JavaScript dasturlarida muhim rol o'ynaydi. O'zgaruvchilarni e'lon qilish va ularga qiymat berish quyidagi usullar bilan amalga oshiriladi:

var – eski usul, bir necha marta e'lon qilinishi mumkin.
let – ES6 bilan kiritilgan yangi usul, faqat bir marta e'lon qilinishi mumkin.
const – Doimiy qiymat

li o'zgaruvchilar uchun ishlatiladi, ular bir marta e'lon qilinganidan keyin o'zgarmaydi.

Muhim tushunchalar:

E'lon qilish (declaration): O'zgaruvchini e'lon qilish, masalan, let x;.
Ishga tushirish (initialization): O'zgaruvchiga dastlabki qiymat berish, masalan, let x = 5;.
O'zlashtirish (assignment): O'zgaruvchiga yangi qiymat berish, masalan, x = 10;.

var va let o'rtasidagi farqlar:

var bilan e'lon qilingan o'zgaruvchilar qayta e'lon qilinishi mumkin, lekin let bilan e'lon qilingan o'zgaruvchilar bir marta e'lon qilinadi va keyin qayta e'lon qilinmaydi.

Doimiylar (constants):

const bilan e'lon qilingan o'zgaruvchilar doimiy bo'lib, ularni e'lon qilish paytida qiymat berilishi kerak va bu qiymat keyin o'zgartirilmaydi.
Doimiy o'zgaruvchilar nomlari odatda katta harflarda yoziladi, masalan, const PI = 3.14;.

typeof operatori:

Bu operator orqali o'zgaruvchining tipini aniqlash mumkin, masalan, typeof "Hello" natijasi string bo'ladi.

O'zgaruvchilarni almashtirish

O'zgaruvchilarning qiymatlarini bir-biri bilan almashtirish quyidagi kabi amalga oshiriladi:

let A = 10;
let B = 20;

let K = A;
A = B;
B = K;

Bu kodning natijasida A 20 ga, B esa 10 ga teng bo'ladi.

JavaScriptdagi operatorlar

JavaScriptda arifmetik va unar operatorlar mavjud:

Arifmetik operatorlar:
- + – qo'shish
- - – ayirish
- * – ko'paytirish
- / – bo'lish
- ** – daraja ko'tarish
- % – qoldiqli bo'lish
Unar operatorlar:
- +x – musbat son
- -x – manfiy son
- ++x – 1 ga oshirish (pre-increment)
- --x – 1 ga kamaytirish (pre-decrement)
- x++ – 1 ga oshirish (post-increment)
- x-- – 1 ga kamaytirish (post-decrement)

Manbalar

JavaScript haqida yanada batafsil ma'lumot olish uchun quyidagi manbalarga murojaat qilishingiz mumkin:

001. JavaScriptga kirish (mavzular)

Mukhriddin Khodiev (work) — Tue, 20 Aug 2024 16:08:19 +0000

Dasturlash tillari haqida umumiy ma'lumot
- Dasturlash tillari: C, C++, C#, JavaScript, Java, Python, PHP, Go, Dart.
JavaScript tarixi
- Brendan Eich tomonidan 1995-yilda 10 kun ichida Netscape kompaniyasida yaratilgan.
- Dastlabki nomi Mocha, keyin LiveScript, va nihoyat JavaScript (Java tilining mashhurligidan foydalanish uchun).
- Microsoft Internet Explorer 3 ni yaratib, Netscape ga raqobatdosh qildi. Natijada JavaScriptning 2 xil versiyasi paydo bo'ldi:
  1. Netscape Navigator JavaScript
  2. Internet Explorer JavaScript
Nima uchun JavaScript?
- Dinamik typed language (Dynamically typed language).
- Qo'shimcha afzalliklar va sabablar keltirilishi mumkin.
JavaScript nima qiladi?
- Web brauzerlarda JavaScriptning asosiy 3 qismi mavjud:
  1. ECMAScript
  2. DOM (Document Object Model) - scroll, keyboard kabi hodisalarni va formalarni boshqaradi.
  3. BOM (Browser Object Model) - brauzerga xos funksiyalarni boshqaradi, masalan, location va notifications.
- Mashhur funksiyalar va kutubxonalar:
  - Toggle, navbar-shrink, yuklanish animatsiyalari, AOS, Owl Carousel, qora/yengil rejim.
JavaScript versiyalari
- ES5 (2009) - brauzerlar tomonidan keng qo'llaniladi.
- ES6 (2015+) - katta yangilanishlar kiritildi.
- Kelgusi versiyalar (Next ES) kutilmoqda.
JavaScript qanday qilib ishlatiladi ?
- JavaScript kodlari HTML hujjatlarida inline, ichki (internal) yoki tashqi (external) tarzda joylashtirib ishlatish mumkin.
JavaScriptda kirish va chiqish
- Kiritish : prompt orqali amalga oshiriladi.
- Chiqarish : innerHTML, document.write(), window.alert(), window.confirm(), va console.log() orqali amalga oshiriladi.
Sintaksis va izohlar (comments)
- Izohlar: bir qatorli izohlar uchun //, ko'p qatorli izohlar uchun /* ... */ ishlatiladi.
- Nuqtali vergul (semicolon), bloklar, ifodalar va oq joylarni (space, new line, tab) ishlatish haqida.
Identifikatorlar va nomlash qoidalari
- To'g'ri identifikatorlar uchun qoidalar: harflar, raqamlar, pastki chiziqlar yoki dollar belgilari ishlatilishi mumkin.
- Nomi yozish uslublari: PascalCase, snake_case, camelCase (tavsiya etiladi), va kebab-case (qo'llab-quvvatlanmaydi).
JavaScriptda o'zgaruvchilar

- O'zgaruvchilar — ma'lumotlarni saqlash uchun konteynerlardir.
- Turlari: `var`, `let`, `const` va ular bilan bog'liq tushunchalar haqida , masalan, e'lon qilish (declaration), ishga tushirish (initialization), va o'zlashtirish (assignment) kabi tushunchalar mavjud.
- `undefined`, `undeclared`, va tenglik (`=`) operatori.
- `var` va `let` o'rtasidagi farqlar.
- Doimiylar (constants) va `typeof` operatori.

O'zgaruvchilarni almashtirish
- O'zgaruvchilarni qanday almashtirish haqida misol kodi.
JavaScriptdagi operatorlar
- Arifmetik operatorlar: +, -, *, /, ** (daraja), % (qoldiqli bo'linish).
- Unar operatorlar: +x, -x, ++x, --x, x++, x--.
Manbalar
- JavaScript haqida ko'proq ma'lumot olish uchun quyidagi havolalarga murojaat qilish mumkin:

Welcome to JavaScript 0 to PRO course ! [ UZ]

Mukhriddin Khodiev (work) — Tue, 20 Aug 2024 10:53:34 +0000

Assalamu alaykum JavaScript darslarimizga xush kelibsiz! Bugundan sizlar bilan JavaScriptni mukammal o'rganishni boshlaymiz!

Mavzular: (JS ga kirish, Variables, Data Types)

JS nima?

JavaScript (JS) – bu veb-sahifalarni interaktiv qilish uchun ishlatiladigan dasturlash tili. HTML va CSS bilan birgalikda JavaScript veb-dasturlarning uch asosiy texnologiyalaridan biri hisoblanadi.

JS qanday ishlaydi?

JavaScript veb-brauzerlarda ishlaydi. Brauzer JavaScript dvigateli orqali JS kodini bajaradi. JavaScript-ni HTML-ga bog’lash uchun

<script> tegidan foydalaniladi.

<!DOCTYPE html>
<html>
<head>
  <title>My First JS</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log('Hello, World!');
  </script>
</body>
</html>

alert(), prompt(), confirm(), document.write(), textContent(), innerHTML, Template Literal

alert(): Oddiy xabar oynasini ko'rsatadi.
prompt(): Foydalanuvchidan ma'lumot kiritishni so'raydi.
confirm(): Foydalanuvchidan tasdiqlashni so'raydi.
document.write(): HTML hujjatiga matn yozadi.
textContent(): Elementning matn mazmunini olish yoki o'zgartirish uchun ishlatiladi.
innerHTML: Elementning ichki HTML tarkibini olish yoki o'zgartirish uchun ishlatiladi.
Template Literal: Qo’shimcha ma'lumotlarni birlashtirish uchun `backtick ( `) belgilaridan foydalaniladi.

`javascript let name = "John"; console.log(`Hello, ${name}!`); `

Variables - var, let, const

var: O'zgaruvchi e'lon qilishning eski usuli. Uning bloki cheklovi yo'q.
let: ES6+ usulda. Blok chekloviga ega.
const: O'zgarmas o'zgaruvchi yaratadi. O'zgaruvchi qayta belgilanishi mumkin emas.

"use strict"

Kod qat'iy rejimda bajarilishi uchun ishlatiladi. Bu ko'plab xatolarga yo'l qo'ymaslikda yordam beradi.

`javascript "use strict"; x = 3.14; // Xatolik, o'zgaruvchi e'lon qilinmagan `

Data Types

Primitive Types:

number: Raqamlar.
bigInt: Juda katta raqamlar.
string: Matn holatidagi ma'lumotlar.
boolean: True yoki false qiymatlar.
null: Bo'sh yoki mavjud bo'lmagan qiymat.
undefined: Qiymat belgilanmagan.
symbols: Unikal identifikatorlar.

NonPrimitive Types:

objects: key-value juftliklari ko'rinishidagi ma'lumotlar.
arrays: Bir necha ma'lumotni bir joyga to'plab saqlaydigan struktura.
functions: Ma'lum bir vazifani bajaradigan kodlar to'plami.

null vs undefined

null: Qo'l bilan qiymat sifatida "bo'sh" deb belgilangan.
undefined: O'zgaruvchiga qiymat berilmagan.

Matematik Operatorlar

+: Qo'shish
-: Ayirish
*: Ko'paytirish
/: Bo'lish
%: Qoldiq
**: Darajaga ko'tarish

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Vue.Js da Emit tushunchasi

Mukhriddin Khodiev (work) — Mon, 22 Jul 2024 21:58:28 +0000

Assalamu alaykum ! Vue.js da emit hodisalari yordamida komponentlar o'rtasida ma'lumot almashish imkoniyati mavjud. Emit hodisalari yordamida bola komponent ota komponentga ma'lumot yuborishi mumkin. Quyida emit hodisalari haqida batafsil ko'rib chiqamiz.

`emit` Hodisalarini Aniqlash (event handler)

emit hodisalarini aniqlash va ishlatish uchun defineEmits funksiyasidan foydalaniladi.

Gooo:

*Eventlarni aniqlash (event handler) *:
defineEmits funksiyasidan foydalanib, komponentda chiqariladigan eventlarni ahndel qilsihimiz mumkin.
Eventlarni chiqarish:
Eventlarni kerakli joyda emit funksiyasi yordamida chiqarish mumkin.

Quyida batafsil msiloda ko'ramiz:

Misol 1: Oddiy Event

Bola Komponent: ChildComponent.vue

<template>
  <button @click="notifyParent">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue'

// Eventlarni aniqlash
const emit = defineEmits(['myEvent'])

const notifyParent = () => {
  emit('myEvent', 'Assalamu alaykuuuum bratanim')
}
</script>

Ota Komponent: ParentComponent.vue

<template>
  <div>
    <ChildComponent @myEvent="handleMyEvent" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleMyEvent = (message) => {
  console.log(message) // Output: Assalamu alaykuuuum bratanim
}
</script>

Misol 2: Argumentlar bilan Event

Bola Komponent: ChildComponent.vue

<template>
  <button @click="sendData">Send Data</button>
</template>

<script setup>
const emit = defineEmits(['sendData'])

const sendData = () => {
  emit('sendData', { id: 1, name: 'Jonibek Davronov' })
}
</script>

Ota Komponent: ParentComponent.vue

<template>
  <div>
    <ChildComponent @sendData="receiveData" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const receiveData = (data) => {
  console.log(data) // Output: { id: 1, name: 'Jonibek Davronov' }
}
</script>

Misol 3: Validatsiya bilan Event

Bola Komponent: ChildComponent.vue

<template>
  <button @click="sendData">Send Validated Data</button>
</template>

<script setup>
const emit = defineEmits({
  // Event nomi va uni qabul qiladigan argumentlar uchun validatsiya
  sendData: (payload) => {
    if (typeof payload.id === 'number' && typeof payload.name === 'string') {
      return true
    } else {
      console.warn('Invalid payload')
      return false
    }
  }
})

const sendData = () => {
  emit('sendData', { { id: 1, name: 'Jonibek Davronov' })
}
</script>

Ota Komponent: ParentComponent.vue

<template>
  <div>
    <ChildComponent @sendData="handleValidatedData" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleValidatedData = (data) => {
  console.log(data) // Output: { id: 1, name: 'Jonibek Davronov' }
}
</script>

Xulosa o'laroq:

Vue.js da emit hodisalari yordamida komponentlar o'rtasida ma'lumot almashish mumkin ekan. defineEmits funksiyasidan foydalanib eventlarni aniqlash va emit funksiyasi yordamida eventlarni chiqarish mumkin (ota componentaga) . Bu hodisalar yordamida bola komponent ota komponentga ma'lumot yuborishi yoki xabar berishi mumkin. Eventlarni validatsiya qilish orqali, yuborilgan ma'lumotlarni to'g'ri ekanligiga ishonch hosil qilishimiz mumkin ekan.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Vue.js da Props tushunchasi

Mukhriddin Khodiev (work) — Mon, 22 Jul 2024 21:40:41 +0000

Props - Vue.js ning eng kerakli qismilaridan biri bo'lib, komponentlar aro ma'lumotni almashinish imkonini beradi. props-larni ishlatish setup funksiyasi ichida amalga oshiriladi. Quyida props-larni <script setup> bilan qanday ishlash haqida batafsil ko'rishimiz mumkin:

Props-larni aniqlash: Vue.js da props-larni aniqlash uchun defineProps funksiyasidan foydalaniladi. defineProps obyekti props-larning turlarini va xususiyatlarini belgilash uchun ishlatiladi.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// Props-larni aniqlash
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  message: {
    type: String,
    default: 'Default message'
  }
})
</script>

Bu yerda props obyekti title va message prop-larini aniqlaydi. title prop turi String va majburiy (required: true), message esa String turi va default qiymatga ega (Default message).

Props-larni ishlatish: defineProps funksiyasi orqali aniqlangan props-larni bevosita <template> ichida yoki <script setup> ichida ishlatish mumkin.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  message: {
    type: String,
    default: 'Default message'
  }
})

// Props-larni ishlatish
console.log(props.title)
console.log(props.message)
</script>

Prop-larni type va validation: defineProps yordamida prop-lar turlarini va validatsiyasini belgilash mumkin. Vue 3 validatsiya uchun typelar berishimiz mumkin, masalan String, Number, Boolean, Array, Object ...

<script setup>
const props = defineProps({
  id: {
    type: Number,
    required: true
  },
  user: {
    type: Object,
    default: () => ({ name: 'Johon', age: 30 })
  }
})
</script>

Yuqoridagi misolda id prop Number turi va majburiy, user prop esa Object turi va default qiymatga ega bo'ladi.

default qiymat Vue 3 da props-lar uchun oldindan belgilangan qiymatlarni aniqlash imkonini beradi. Agar props komponentga yuborilmasa, Vue default qiymatni ishlatadi. Bu ancha qulay chunki bu komponentni ishlatishni soddalashtiradi va xavfsizoq bo'aldi.

Keyingi maqolada Vue3 da emit haiqda gaplashamiz.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Vue.js da "watch" ning vazifasi va qanday ishlaydi ?

Mukhriddin Khodiev (work) — Thu, 18 Jul 2024 22:16:32 +0000

Vue.js da watch funksiyasi qanday ishlaydimva va vazifasi nima?

watch dan foydalanish juda qulay. watch funksiyasi Vue komponentida qaysidir ma'lumot (state) o'zgarishini kuzatib, kerakli vazifalarni bajarish imkonini beradi. Quyida oddiy misol orqali tushuntiraman:

<template> qismi: Bu yerda UI elementlar joylashadi.
<script setup> qismi: Bu yerda komponentning skript qismi joylashadi.

Keling, oddiy bir misolni ko'rib chiqaylik. Bu misolda biz bir input elementiga kiritilgan qiymatni kuzatamiz va har safar qiymat o'zgarganda console'ga log da elon qilamiz:

<template>
  <div>
    <input v-model="name" placeholder="Ismingizni kiriting">
    <p>Ismingiz: {{ name }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// name o'zgaruvchisini e'lon qilamiz
const name = ref('')

// name o'zgaruvchisini kuzatamiz
watch(name, (newValue, oldValue) => {
  console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
})
</script>

Asosiy tushunchalar:

ref bilan o'zgaruvchi e'lon qilish: ref yordamida o'zgaruvchi yaratamiz. Bu o'zgaruvchi reaktsion bo'lib, uning qiymati o'zgarsa, Vue avtomatik ravishda komponentni qayta render qiladi.

   const name = ref('')

watch funksiyasi: watch funksiyasi birinchi argument sifatida kuzatiladigan o'zgaruvchini, ikkinchi argument sifatida esa callback funksiyani qabul qiladi. Callback funksiyasining birinchi argumenti yangi qiymat, ikkinchi argumenti esa eski qiymatdir.

   watch(name, (newValue, oldValue) => {
     console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
   })

watch funksiyasi yordamida siz har qanday reaktsion o'zgaruvchini (shu jumladan ref, reactive yoki computed o'zgaruvchilarni) kuzatishingiz mumkin. Bu metod komponentdagi ma'lumotlar o'zgarganda aniq amalni bajarishga imkon beradi.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Vue.js da ( ref va reactive) farqi

Mukhriddin Khodiev (work) — Mon, 08 Jul 2024 00:53:30 +0000

Vue.js-daref va reactive hook-larini tanlashda qaysi biri qulayroq ekanligini aniqlashda, ularning farqlarini va qanday holatlarda foydalanishni tushunish kerak . Har ikkala hook ham reaktiv ma'lumotlar yaratish uchun ishlatiladi, lekin ularning ishlash usuli va qo'llanilishi jichcha farq qiladi.

`ref`

Qulayliklari

Oddiy qiymatlar uchun mos: ref asosan primitive turlar (string, number, boolean) uchun qulay. Masalan, count, message kabi oddiy qiymatlar uchun.
DOM elementlariga murojaat qilish: ref DOM elementlarini saqlash va ularga murojaat qilish uchun ishlatiladi. Masalan, <div ref="myDiv"></div>.
Qiymatga kirish oson: ref bilan ishlashda, .value orqali qiymatga kirish va uni o'zgartirish mumkin.

Misol


import { ref } from 'vue';

const count = ref(0);
count.value++; // Qiymatni oshirish

`reactive`

Qulayliklari

Murakkab ma'lumot tuzilmalari uchun mos: reactive object yoki array kabi murakkab tuzilmalarga ega bo'lgan ma'lumotlar uchun qulay. U butun ob'ekt yoki massivni reactive (reaktiv) qiladi.
Objectlar bilan ishlash: reactive objectning barcha xususiyatlarini reaktiv qiladi, shuning uchun to'g'ridan-to'g'ri xususiyatlarga kirish va ularni o'zgartirish mumkin.

Misol

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});
state.count++; // Qiymatni oshirish
state.name = 'Vue 3'; // Xususiyatni o'zgartirish

`ref` va `reactive` farqlari

Qiymat turi:
- ref oddiy qiymatlar uchun mos va .value orqali ularga kiriladi.
- reactive complex holatga ega object yoki array uchun mos va to'g'ridan-to'g'ri xususiyatlarga kiriladi.
Qo'llanilish holatlari:
- ref primitive turlar (string, number, boolean) va DOM elementlari uchun ishlatiladi.
- reactive object yoki array kabi murakkab tuzilmalar uchun ishlatiladi.
Reaktivlik:
- ref faqat bitta qiymatni reaktiv qiladi.
- reactive butun bir object yoki array ni reaktiv qiladi, shu jumladan uning barcha xususiyatlarini.

Tanlash qachon qulay

Agar sizda oddiy qiymat bo'lsa yoki DOM elementiga murojaat qilish kerak bo'lsa, ref dan foydalaning.
Agar sizda ko'p xususiyatlarga ega bo'lgan object yoki array bo'lsa, reactive dan foydalaning.

Umumiy misol

Quyida ref va reactive ni birgalikda qo'llash misoli keltirilgan:

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Todos:</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <input v-model="newTodoText" placeholder="New todo" />
    <button @click="addTodo">Add Todo</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const message = ref('Hello, Vue 3!');
const todos = reactive([
  { id: 1, text: 'Learn Vue 3' },
  { id: 2, text: 'Build something awesome' }
]);
const newTodoText = ref('');

function addTodo() {
  todos.push({ id: todos.length + 1, text: newTodoText.value });
  newTodoText.value = '';
}
</script>

Ushbu misol ref va reactive hook-larini qanday birgalikda ishlatish mumkinligini ko'rsatadi. Tanlov qaysi turdagi ma'lumotlar bilan ishlayotganingizga bog'liq bo'ladi.

PS: Yuqridagi rasmda nega bunday demoqda , 🤔🤔🫢🫢🙄🙄🙄😩😫😫 , video darsda javob berib o'taman bu haiqda :)

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

(JavaScript Proxy vs Object.define Property) Vue.js dagi reaktivlikni ortida nima turadi va qanday ishlaydi ?

Mukhriddin Khodiev (work) — Mon, 08 Jul 2024 00:20:53 +0000

Assalamu alaykum! ahli O'zbek Vue community! Keling bugun Vue.js da reaktivlik qanday ishlaydi , minde sizlarga tushuntirsam :)

Bismillah!

Hamma gap JavaScriptda , ya'ni Object.defineProperty va Proxy JavaScript-da obyektlarni manipulyatsiya qilish va eshitish uchun ishlatiladigan ikki xil mexanizmdir. Vue2 ** va **Vue3 reaktivlik tizimlarida bu ikkalasi qanday qo'llanilishi haqida gaplashamiz.

`Object.defineProperty`

Xususiyatlari

Xususiyatlar holatini kuzatish: Object.defineProperty biror obyektda mavjud bo'lgan xususiyatlarni (property) larni kuzatish uchun ishlatiladi. Bu xususiyatlarni o'qish va yozish uchun getter va setterlarni belgilash imkonini beradi.
*Biroz cheklov bor aynan bu metodda *: Bu usul faqat mavjud xususiyatlar uchun ishlaydi va yangi xususiyatlar (property) qo'shilganda avtomatik kuzatilmaydi.
Vue2 da ishlatilishi: Vue2 reaktivlik tizimi Object.defineProperty asosida qurilgan. Bu har bir xususiyat uchun getter va setterlarni yaratish orqali o'zgarishlarni kuzatadi.

Misol

let data = {};
Object.defineProperty(data, 'count', {
  get() {
    console.log('Getting value');
    return count;
  },
  set(newValue) {
    console.log('Setting value');
    count = newValue;
  }
});

data.count = 5; // Setting value
console.log(data.count); // Getting value

`Proxy`

Xususiyatlari

Obyekt holatini kuzatish: Proxy obyekt darajasida kuzatish imkonini beradi, ya'ni butun obyektni "proxylash" mumkin va bu obyektning har qanday xususiyatiga kirish yoki uni o'zgartirish kuzatiladi.
Qo'llash: Proxy yangi xususiyatlar qo'shilganda yoki olib tashlanganda ham kuzatilishini ta'minlaydi.
Vue3 da ishlatilishi: Vue 3 reaktivlik tizimi Proxy asosida qurilgan. Bu Vue2 ga nisbatan samarali va kengroq ko'lamli kuzatish imkonini beradi.

Misol

let data = {
  count: 0
};

let proxyData = new Proxy(data, {
  get(target, property) {
    console.log(`Getting ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    target[property] = value;
    return true;
  }
});

proxyData.count = 5; // Setting count to 5
console.log(proxyData.count); // Getting count

`Object.defineProperty` va `Proxy` taqqoslash

Kuzatishning ko'lamini: Object.defineProperty faqat mavjud xususiyatlarni kuzatadi, yangi qo'shilgan xususiyatlarni avtomatik kuzatish qiyin. Proxy esa butun obyektni kuzatadi, shu jumladan yangi qo'shilgan xususiyatlarni ham.
Performans: Proxy samaraliroq bo‘lishi mumkin, chunki u obyektni bir marta proxylaydi va xususiyat darajasida ishlov bermaydi.
Moslashuvchanlik: Proxy ko'proq moslashuvchan bo‘lib, turli xil operatsiyalarni (masalan, xususiyatni o‘chirish) kuzatish imkonini beradi.

Vue reaktivlik tizimidagi farqlar

Vue 2: Object.defineProperty asosida qurilgan. Bu Vue 2 ning reaktivlik tizimini ba'zi cheklovlarga olib keladi, masalan, yangi xususiyatlarni kuzatishda muammo bor.
Vue 3: Proxy asosida qurilgan. Bu Vue 3 ning reaktivlik tizimini yanada kuchli va samarali qiladi, shu jumladan yangi xususiyatlarni va murakkab strukturalarni oson kuzatish imkonini beradi.

Yuqoridagi misollar Vue2 va Vue3 ning reaktivlik tizimlarining qanday ishlashini va qaysi texnologiyalarni qo'llaganligini ko'rsatadi. Bu farqlar Vue3 ni Vue2 ga nisbatan yanada kuchliroq va flexibility qiladi.

Quyida bu haqida rasmlarda ko'rib chiqamiz batafsil!

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Vue.js da reaktivlik (reactivity)

Mukhriddin Khodiev (work) — Sun, 07 Jul 2024 23:59:45 +0000

Vue3 da reaktivlik (reactivity) asosiy qismlardan biri hisoblanadi, bu dastur yoki saytimizning dinamikligini va interaktivligini ta’minlash uchun ishlatiladi. Vue3 da reaktivlik Vue'ning Composition API (versiyasi) orqali amalga oshiriladi. Bu "Composition API" (v3) Vue 2 dagi "Options API" bilan solishtirganda ancha tartibli ishlash va qulaylikni beradi.

Vue3 da reaktivlikning asosiy tushunchalari

reactive:
- reactive funksiyasi obyektlarni reaktiv holatga keltiradi. Bu shuni anglatadiki, obyektning har qanday o‘zgarishi avtomatik ravishda interfeysni yangilaydi.

   import { reactive } from 'vue';

   const state = reactive({
     count: 0
   });

   function increment() {
     state.count++;
   }

ref:
- ref funksiyasi oddiy qiymatlarni reaktiv holatga keltiradi. Bu oddiy statik saqlangan qiymatlarni, masalan, number yoki string array kabi datalarni reaktiv qilish uchun ishlatiladi.

   import { ref } from 'vue';

   const count = ref(0);

   function increment() {
     count.value++;
   }

computed:
- computed funksiya qaytaradigan qiymatlar uchun ishlatiladi. Ular boshqa reaktiv qiymatlarga bog‘liq bo‘lib, bog‘liq qiymatlar o‘zgarganda avtomatik ravishda qayta "render"lanadi.

   import { computed, ref } from 'vue';

   const count = ref(0);
   const double = computed(() => count.value * 2);

watch:
- watch funksiyasi reaktiv qiymatlar o‘zgarishlarini kuzatish uchun ishlatiladi. Bu biror o‘zgarish sodir bo‘lganda o'zgarishni "handle" qilishga yordam beradi.

   import { watch, ref } from 'vue';

   const count = ref(0);

   watch(count, (newValue, oldValue) => {
     console.log(`Count changed from ${oldValue} to ${newValue}`);
   });

Vue3 da reaktivlikning afzalliklari nimada ?

Optimallik va samaradorlik: Vue 3 da reaktivlik tizimi asosan Proxy asosida amalga oshirilgan bo‘lib, u Vue 2 dagi Object.defineProperty asosidagi yondashuvdan ko‘ra samarali hisoblanadi.
Moslashuvchanlik (flexibility) : Composition API Vue 3 da muhim bo‘lib, komponentlarning qayta foydalanish darajasini oshiradi va murakkabliklarni kamatiradi.
Modulizatsiya: Composition API ko‘p funksionallikni alohida modullarga ajratishga yordam beradi, bu kodni yanada o‘qishli va boshqarish oson bo‘lishiga olib keladi.

Vue3 da reaktivlik tizimi Vue da loyihalar ishlab chiqishda kuchli va oson desak bo'ladi , interaktiv va dinamik foydalanuvchi interfeyslarini (UI) ni yaratishda katta yordam beradi.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

Vue.js Loyihamizning tuzilmasi haqida.

Mukhriddin Khodiev (work) — Sat, 15 Jun 2024 20:53:28 +0000

Vue.js loyihasi Vite orqali yaratilganda, loyihaning tuzilmasi quyidagicha bo'ladi. Har bir katalog va faylning maqsadi va vazifalari haqida batafsil tanishamiz.

my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── vue.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

Loyihaning asosi

`node_modules/`

Bu katalogda loyihamizni barcha bog'liq package va modullari saqlanadi. npm install buyruği bajarilganda, barcha kerakli paketlar shu katalogga yuklanadi.

`public/`

Bu katalog loyihamizni umumiy statik fayllarini saqlaydi. Bu katalogdagi fayllar ilova tuzilayotganda o'zgartirilmasdan oxirgi tuzilmaga ko'chiriladi. Misol uchun, vite.svg fayli.

`src/`

Loyihamizning asosiy manba kodi shu katalogda joylashgan. Barcha komponentlar, stillar , rasmlar va boshqa resurslar shu yerda saqlanadi.

`src/assets/`

Bu katalogda loyihamizning rasmlari, shriftlar, va boshqa statik resurslari saqlanadi. Misol uchun, vue.svg fayli.

`src/components/`

Bu katalogda Vue komponentlari saqlanadi. Har bir komponent alohida .vue faylida saqlanadi. Misol uchun, HelloWorld.vue.

`src/App.vue`

Bu asosiy Vue komponentidir. Bu komponent ilovangizning asosiy tuzilishini va boshqa komponentlarni o'z ichiga oluvchi hisoblanadi.

`src/main.js`

Bu fayl ilovamzini ishga tushishi uchun kirish nuqtasi hisoblanadi. Bu faylda Vue ilovasi yaratiladi va asosiy komponent (App.vue) ni o'z ichida HTML faylga renderlaydi , bundan tashqar ba'zi css fayllarimizni global holatda ulashimiz mumkin bo'laadi.

import { createApp } from 'vue'
// import "./style.css" (misol)
import App from './App.vue'

createApp(App).mount('#app')

`.gitignore`

Bu faylda Git uchun qaysi fayl va kataloglarni versiya boshqaruviga qo'shmaslik kerakligini belgilab qo'yiladi. Misol uchun, node_modules va dist kataloglari.

`index.html`

Bu ilovamizga kirish uchun asosiy bo'lgan HTML fayl hisoblanadi. Bunda ilovangizni qayerda yuklash kerakligi belgilanadi.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

`package.json`

Bu faylda loyihamizning meta ma'lumotlari, bog'liqliklar (dependencies), skriptlar va boshqa sozlamalar saqlanadi. Misol uchun:

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  }
}

`README.md`

Bu fayl loyihamiz haqida ma'lumot beruvchi hujjatdir. Bu yerda loyihangizni qanday o'rnatish va ishlatish bo'yicha ko'rsatmalar beriladi.

`vite.config.js`

Bu faylda Vite konfiguratsiyasi saqlanadi. Bu faylda tuzilma jarayonini o'zgartirish va kengaytirish mumkin.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Qo'shimcha kataloglar va fayllar

1. `src/store/`

Agar ilovangizda Vuex yoki Pinia kabi davlat boshqaruv kutubxonalari foydalanilsa, bu katalogda global store boshqaruv fayllari saqlanadi.

2. `src/router/`

Agar ilovangizda Vue Router ishlatilsa, bu katalogda (sahifalar yo'llari , qoidalari ) saqlanadi.

3. `src/styles/`

Umumiy uslublar saqlanadigan katalog. Misol uchun, global CSS yoki SASS fayllar.

4. `src/utils/`

Umumiy yordamchi funksiyalar va boshqa umumiy kodlar uchun katalog.

Loyihani kengaytirish

Yuqoridagi tuzilma Vue.js ilovangizni boshlash uchun asosiy tuzilma (struktura) . Loyihamiz kattalashgani sayin, qo'shimcha kataloglar va fayllar qo'shishimiz mumkin. Modularizatsiya orqali kodni tashkil qilish, qayta foydalanish va boshqarish oson bo'ladi. Vue.js o'rganishda davom etamiz

Vite orqali Vue loyiha qurish.

Mukhriddin Khodiev (work) — Sat, 15 Jun 2024 20:16:59 +0000

** Demak Vite texnologiyasi yordamidan Vue loyiha qurishni o'rganamiz!

Vite — Vue.js ilovasini yaratish uchun tez va samarali texnologiya hisoblanadi. Quyida Vite yordamida Vue.js (app) yaratish jarayonini batafsil ko'rib chiqamiz.

1. Muhitni tayyorlash kerak (Preparation of the environment)
Birinchidan, kompyuteringizda Node.js o'rnatilganligiga ishonch hosil qiling. Node.js ni rasmiy saytidan yuklab olish mumkin.

2. Yangi Vue.js loyihasini yaratish:
a. Terminal yoki komanda qatori (Command Prompt) ni ochamiz
b. Loyihani yaratish uchun quyidagi buyruqni bajaring:

npm create vite@latest [loyiha_nomi]

Bu buyruq yangi Vite loyihasini my-app nomi bilan yaratadi va Vue.js shablonidan foydalanishni tanlaymiz.

va bu yerda JavaScriptni tanlaymiz (hozircha) keyinroq TypeScript yoki Nuxt uchun bemalol ishlab ketaveramiz o'rganish uchun JavaScriptdan boshlashimiz mumkin bo'ladi.

 cd my-app
  npm install
  npm run dev

yuqoridagi buyruq orqali biz kerakli "package" larni o'rnatib olib loyihamizni ishga tushurishimiz mukin bo'ladi.

npm run dev

Ushbu buyruqdan so'ng, terminalda mahalliy (local) server manzili ko'rsatiladi, odatda bu http://localhost:3000 yoki 5174 bo'ladi. Brauzeringizda ushbu manzilga o'tib, yangi Vue.js ilovamizni ko'rishimiz mumkin.

3. Loyiha Tuzilmasi
Loyiha yaratib, ochilganingizdan so'ng, loyiha tuzilmasi (strukturasi) quyidagicha bo'ladi:


my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── vue.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

Keyingi maqolada Vue.js loyihamizning tuzilmasi va fayllari , folderlarga, fayllarga qanday nom berish kerak .

Template syntax va direktivalar haqida.

Mukhriddin Khodiev (work) — Sat, 15 Jun 2024 19:47:31 +0000

Assalamu alaykum! Ushbu postda Vue.js loyihamizning umummiy tuzulmasi (strukturasi, fayllari) bilan tanishib chiqidik.

Endi navbat Vue.js loyihamizning asosiy sintaksis haqida gaplashamiz.

Vue.js template sintaksisi HTML ga o'xshaydi va Vue komponentlari ichida reaktiv ma'lumotlarni ko'rsatish va boshqarish uchun ishlatiladi. Yuqoridagi rasmda asosiy ketmaketlik qizil chiziq bilan belgilab sanab o'tilgan , ko'rib turganingizdek juda ham sodda va quyida Vue.js template sintaksisining asosiy jihatlarini batafsil ko'rishimzi mumkin:

Interpolatsiya

Matn Interpolatsiyasi

Matn interpolatsiyasi orqali komponent ma'lumotlarini HTML ichida ko'rsatish mumkin:


<script setup>
const message="Assalamu alaykum";
</script>

<template>
  <h1 class="title">{{ message }}</h1>
</template>

<style scoped>
  .title{
    color:#32cd32;
    text-align: center;
  }
</style>

Bu yerda {{ message }} orqali message o'zgaruvchisining qiymati HTMLda ko'rsatiladi.

HTML Interpolatsiyasi

Agar siz o'zgaruvchi qiymatini HTML sifatida kiritish kerak bo'lsa, v-html direktivasidan foydalaniladi:

<div v-html="rawHtml"></div>

va ushbu divni parent sifatida qabul qilib ichiga HTML elementlarimizni render qiladi.

Direktivalar

`v-bind`

Atributlarni dinamik ravishda bog'lash uchun ishlatiladi:

<img v-bind:src="imageSrc">
<!-- qisqacha sintaksis -->
<img :src="imageSrc">

`v-if`

Elementni shartli ravishda ko'rsatish uchun ishlatiladi:

<p v-if="seen"> Ushbu xabar ko'rinvottimi bro 😎 </p>

`v-else` va `v-else-if`

v-if bilan birga qo'llaniladi va shartlarga qarab elementni ko'rsatadi:

<p v-if="type === 'A'">A javob</p>
<p v-else-if="type === 'B'">B javob</p>
<p v-else>C javob</p>

`v-for`

Ro'yxatlarni iteratsiya (loop) qilish uchun ishlatiladi:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

itmes bu yerda array [] , item esa array elementi hisoblanadi , :key esa iteratsiya qilinayotgan elementni 'unique' qilish uchun ishlatiladi.

`v-on`

Hodisalarga qo'llaniladi, masalan, tugmalarni bosish:

<button v-on:click="doSomething">Bos</button>
<!-- qisqacha sintaksis 😎 -->
<button @click="doSomething">Bos</button>

Class va Style

`v-bind:class`

Dinamik ravishda classlarni qo'shish mumkin:

<div :class="{ active: isActive }"></div>
<div :class="[classA, classB]"></div>

`v-bind:style`

Dinamik stillarni qo'llash mumkin:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Ikki tomonlama bog'lanish

`v-model`

Form elementlari bilan ikki tomonlama bog'lanishni ta'minlaydi:

<input v-model="message" placeholder="Xabar kiriting">

Qo'shimcha Direktivalar

`v-show`

Elementni ko'rinishini boshqaradi, ammo DOMdan olib tashlamaydi:
ya'ni display:none; saqlaydi holos.

<p v-show="isShown">Ko'rinadigan xabar</p>

`v-pre`

Element va uning farzandlari (childlari) uchun remderlanishini to'xtatadi:

<span v-pre>{{ bu mustahkamlanmaydi }}</span>

`v-cloak`

Elementga Vue.js ilovasi to'liq yuklanmaguncha ko'rinishini to'xtatadi:

<div v-cloak>{{ message }}</div>

`v-once`

Element va uning farzandlarini (child elementlarini) faqat bir marta renderlaydi:

<span v-once>{{ bu faqat bir marta renderlaydi }}</span>

Qo'shimcha Misollar

Shartli Rendering

Vue.js da shartli rendering orqali elementlarni ko'rsatish yoki yashirish mumkin. v-if, v-else-if, va v-else direktivalari ishlatiladi:

<div v-if="type === 'A'">A javob</div>
<div v-else-if="type === 'B'">B javob</div>
<div v-else>C javob</div>

Ro'yxatni Iteratsiya Qilish

v-for direktivasi orqali ro'yxat elementlarini iteratsiya qilish mumkin:

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
</ul>

items=array;
item=arrayning elementi;
index=array elementining indeksi.

Form Elementlari

v-model direktivasi orqali form elementlari bilan ikki tomonlama bog'lanishni ta'minlash mumkin:

<input v-model="message" placeholder="Xabar kiriting">
<p>Yozilgan xabar: {{ message }}</p>

Template Sintaksisi orqali Ma'lumotlar Bindingi

Template sintaksisi orqali Vue.js komponentlarida ma'lumotlarni dinamik ravishda bog'lash juda sodda va qulay. Bu esa reaktiv ilovalarni yaratishda katta yordam beradi.

Vue.js template sintaksisi HTMLni kengaytirish orqali dinamik va reaktiv veb ilovalarni yaratishda kuchli vositalarni taqdim etadi. Bu direktivalar va interpolatsiyalar orqali ma'lumotlarni boshqarish va hodisalarga javob berish oson va samarali bo'ladi.

inshaaAlloh keyingi maqolalarda reactive data va bir qanncha ma'lumotlarni o'rganib olamiz.

DEV Community: Mukhriddin Khodiev (work)

001. JavaScriptga kirish

Dasturlash tillariga umumiy kirish

JavaScript tarixi

Nima uchun JavaScript?

JavaScript nima qiladi?

JavaScript versiyalari

JavaScript qayerda joylashtiriladi?

JavaScriptda kirish va chiqish

Sintaksis va izohlar

Identifikatorlar va nomlash qoidalari

JavaScriptda o'zgaruvchilar

O'zgaruvchilarni almashtirish

JavaScriptdagi operatorlar

Manbalar

001. JavaScriptga kirish (mavzular)

Welcome to JavaScript 0 to PRO course ! [ UZ]

Assalamu alaykum JavaScript darslarimizga xush kelibsiz! Bugundan sizlar bilan JavaScriptni mukammal o'rganishni boshlaymiz!

Mavzular: (JS ga kirish, Variables, Data Types)

JS nima?

JS qanday ishlaydi?

alert(), prompt(), confirm(), document.write(), textContent(), innerHTML, Template Literal

Variables - var, let, const

"use strict"

Data Types

Primitive Types:

NonPrimitive Types:

null vs undefined

Matematik Operatorlar

Vue.Js da Emit tushunchasi

emit Hodisalarini Aniqlash (event handler)

Gooo:

Misol 1: Oddiy Event

Misol 2: Argumentlar bilan Event

Misol 3: Validatsiya bilan Event

Xulosa o'laroq:

Vue.js da Props tushunchasi

Vue.js da "watch" ning vazifasi va qanday ishlaydi ?

Asosiy tushunchalar:

Vue.js da ( ref va reactive) farqi

ref

Qulayliklari

Misol

reactive

Qulayliklari

Misol

ref va reactive farqlari

Tanlash qachon qulay

Umumiy misol

(JavaScript Proxy vs Object.define Property) Vue.js dagi reaktivlikni ortida nima turadi va qanday ishlaydi ?

Object.defineProperty

Xususiyatlari

Misol

Proxy

Xususiyatlari

Misol

Object.defineProperty va Proxy taqqoslash

Vue reaktivlik tizimidagi farqlar

Vue.js da reaktivlik (reactivity)

Vue3 da reaktivlikning asosiy tushunchalari

Vue3 da reaktivlikning afzalliklari nimada ?

Vue.js Loyihamizning tuzilmasi haqida.

Loyihaning asosi

node_modules/

public/

src/

src/assets/

src/components/

src/App.vue

src/main.js

.gitignore

index.html

package.json

README.md

vite.config.js

Qo'shimcha kataloglar va fayllar

1. src/store/

2. src/router/

3. src/styles/

4. src/utils/

`emit` Hodisalarini Aniqlash (event handler)

`ref`

`reactive`

`ref` va `reactive` farqlari

`Object.defineProperty`

`Proxy`

`Object.defineProperty` va `Proxy` taqqoslash

`node_modules/`

`public/`

`src/`

`src/assets/`

`src/components/`

`src/App.vue`

`src/main.js`

`.gitignore`

`index.html`

`package.json`

`README.md`

`vite.config.js`

1. `src/store/`

2. `src/router/`

3. `src/styles/`

4. `src/utils/`

`v-bind`

`v-if`

`v-else` va `v-else-if`

`v-for`

`v-on`

`v-bind:class`

`v-bind:style`

`v-model`

`v-show`

`v-pre`

`v-cloak`

`v-once`