Vue.js

**Vue.js** (talaffuzi: /vjuː/, «vyu» — inglizcha *view* so'zidan) — foydalanuvchi interfeyslarini yaratish uchun mo'ljallangan ochiq manbali JavaScript freymvorki. U 2014-yilda sobiq Google muhandisi **Evan You** tomonidan yaratilgan va hozirda mustaqil hamjamiyat tomonidan qo'llab-quvvatlanadi.

Vue «progressiv freymvork» deb ataladi — ya'ni uni kichik loyihalarda oddiy kutubxona sifatida ham, katta korporativ tizimlarda to'liq freymvork sifatida ham ishlatish mumkin. GitHubda 208K+ yulduzga ega bo'lib, dunyodagi eng mashhur ochiq manbali loyihalardan biri hisoblanadi.

## Tarix
Evan You Googleda AngularJS bilan ishlagandan so'ng, Angular'ning og'ir tuzilmasidan ilhomlangan holda yengil alternativa yaratishga qaror qildi.

### Asosiy voqealar

* **2013-yil, dekabr** — birinchi prototip «VueJS» nomi bilan yaratilgan.

* **2014-yil, fevral** — 0.9 versiya ochiq manba sifatida chiqarilgan.

* **2015-yil, oktabr** — **Vue 1.0** («Evangelion») — birinchi stabil versiya.

* **2016-yil, sentabr** — **Vue 2.0** («Ghost in the Shell») — Virtual DOM, server tomonida renderlash (SSR) qo'shilgan.

* **2020-yil, sentabr** — **Vue 3.0** («One Piece») — TypeScriptda qayta yozilgan, Composition API, Teleport, Suspense, ko'p ildiz elementli komponentlar joriy qilingan.

* **2023-yil, dekabr** — **Vue 3.4** — yangilangan parser, reaktivlik tizimi optimallashtirilgan.

* **2024-yil, sentyabr** — **Vue 3.5** — reaktivlik tizimi qayta yozilgan, xotira sarfi 56% kamaygan, Lazy Hydration, `useTemplateRef()` qo'shilgan.

## Asosiy tushunchalar

### Komponentlar
Vue.js'da interfeys qayta ishlatilishi mumkin bo'lgan mustaqil **komponentlar**dan tuziladi. Har bir komponent o'zining HTML shabloni, JavaScript mantiqi va CSS stillariga ega bo'lishi mumkin.

Vue 3 da komponent yozishning ikki usuli mavjud:

**Composition API** (zamonaviy usul, tavsiya etiladi):
```html
<script setup>

import { ref } from 'vue'

const hisoblagich = ref(0)

function oshir() {

  hisoblagich.value++

}

</script>

<template>

  <button @click="oshir">

     marta bosildi

  </button>

</template>
```
**Options API** (klassik usul):
```javascript
export default {

  data() {

    return {

      hisoblagich: 0

    }

  },

  methods: {

    oshir() {

      this.hisoblagich++

    }

  }

}
```


### Reaktivlik tizimi
Vue'ning eng muhim xususiyatlaridan biri uning **reaktivlik tizimi**dir. Ma'lumotlar o'zgarganda interfeys avtomatik ravishda yangilanadi. Vue 3 da reaktivlik JavaScript Proxy asosida qurilgan:

* **<code>ref()</code>** — oddiy qiymatlar (son, matn, mantiqiy) uchun reaktiv o'zgaruvchi yaratadi.

* **<code>reactive()</code>** — obyektlar uchun reaktiv holat yaratadi.

* **<code>computed()</code>** — boshqa reaktiv qiymatlarga bog'liq hisoblangan xususiyat yaratadi.

* **<code>watch()</code>** va **<code>watchEffect()</code>** — reaktiv o'zgarishlarni kuzatadi.

```javascript
import { ref, computed } from 'vue'

const narx = ref(100)

const miqdor = ref(3)

const jami = computed(() => narx.value * miqdor.value) // avtomatik 300
```


### Shablon sintaksisi
Vue HTML asosidagi shablon sintaksisidan foydalanadi:

* **<code></code>** — matn interpolatsiyasi (mustache sintaksis).

* **<code>v-bind</code>** (yoki **<code>:</code>**) — HTML atributlarini reaktiv ma'lumotlarga bog'lash.

* **<code>v-on</code>** (yoki **<code>@</code>**) — DOM hodisalarini tinglash.

* **<code>v-if</code>**, **<code>v-else</code>**, **<code>v-show</code>** — shartli renderlash.

* **<code>v-for</code>** — ro'yxatlarni renderlash.

* **<code>v-model</code>** — ikki tomonlama ma'lumot bog'lash (formalar uchun).

```html
<template>

  <input v-model="ism" placeholder="Ismingiz" />

  <p v-if="ism">Salom, !</p>

  <ul>

    <li v-for="meva in mevalar" :key="meva">

      

    </li>

  </ul>

</template>
```


### Yagona fayllik komponentlar
Vue'da har bir komponent **<code>.vue</code>** kengaytmali yagona faylda yoziladi (Single-File Component — SFC). Bu faylda uchta bo'lim bo'ladi:

* **<code><template></code>** — HTML shabloni.

* **<code><script></code>** — JavaScript/TypeScript mantiqi.

* **<code><style></code>** — CSS stillari (`scoped` atributi bilan faqat shu komponentga tegishli qilinishi mumkin).

### Virtual DOM
Vue ham React kabi **Virtual DOM** texnologiyasidan foydalanadi. Lekin Vue 3 da kompilyator optimallashtirishlari qo'shilgan — statik elementlar ajratiladi va faqat dinamik qismlar qayta tekshiriladi, bu esa ishlash tezligini oshiradi.

## Ekotizim
Vue atrofida rasmiy va hamjamiyat tomonidan yaratilgan keng ekotizim mavjud:

### Rasmiy kutubxonalar

* **Vue Router** — sahifalar orasida navigatsiya uchun rasmiy router.

* **Pinia** — Vue 3 uchun rasmiy holat boshqaruvi kutubxonasi. Vuex o'rnini egallagan.

* **Vite** — Vue jamoasi tomonidan yaratilgan tezkor loyiha qurish va ishlab chiqish vositasi.

* **Vitest** — Vite asosidagi zamonaviy test freymvorki.

* **VueUse** — 200+ dan ortiq tayyor Composition API yordamchi funksiyalari.

### Freymvorklar

* **[[Nuxt]]** — Vue asosidagi to'liq stek freymvork. Server tomonida renderlash (SSR), statik generatsiya (SSG) va API marshrutlarini qo'llab-quvvatlaydi.

* **Quasar Framework** — bitta kod bazasidan veb, mobil va ish stoli ilovalari yaratish.

* **VitePress** — statik saytlar va texnik hujjatlar uchun generator.

### UI kutubxonalar

* **Vuetify** — Material Designga asoslangan komponentlar kutubxonasi.

* **Element Plus** — korxona darajasidagi Vue 3 UI kutubxonasi.

* **PrimeVue** — 90+ dan ortiq komponentli boy UI to'plami.

* **Naive UI** — TypeScript bilan yozilgan zamonaviy UI kutubxonasi.

## Vue va boshqa freymvorklar

## Vue ishlatadigan kompaniyalar
Vue.js dunyodagi ko'plab yirik kompaniyalar tomonidan ishlatiladi:

* **[[Alibaba]]** — elektron tijorat platformasi

* **[[Xiaomi]]** — texnologik kompaniya

* **[[GitLab]]** — dastur kodini boshqarish platformasi

* **[[Nintendo]]** — o'yin kompaniyasining veb xizmatlari

* **[[BMW]]** — avtomobil kompaniyasining veb tizimlari

* **[[Adobe]]** — Portfolio va boshqa veb xizmatlari

* **[[Grammarly]]** — matnni tekshirish xizmati

* **[[Baidu]]** — Xitoyning eng yirik qidiruv tizimi

* **Laravel** — PHP freymvorki Vue.js ni rasmiy frontend sifatida tavsiya qiladi

## Tashqi havolalar

* Rasmiy veb-sayt

* GitHub repozitoriyasi

* Vue.js o'rganish qo'llanmasi

* Nuxt — Vue asosidagi freymvork

## Eslatmalar

*