Vue.js sahifasining manbasini koʻrish

[[Fayl:Vue.js Logo 2.svg|thumb]]

'''Vue.js''' (talaffuzi: /vjuː/, «vyu» — [[Ingliz tili|inglizcha]] ''view'' so'zidan) — foydalanuvchi interfeyslarini yaratish uchun mo'ljallangan ochiq manbali [[JavaScript]] [[freymvork]]i<ref>{{Veb manbasi |url=https://vuejs.org |sarlavha=Vue.js — The Progressive JavaScript Framework |qaralgan sana=2026-02-10}}</ref>. 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. [[GitHub|GitHubda]] 208K+ yulduzga ega bo'lib, dunyodagi eng mashhur ochiq manbali loyihalardan biri hisoblanadi<ref>{{Veb manbasi |url=https://github.com/vuejs/core |sarlavha=vuejs/core — GitHub |qaralgan sana=2026-02-10}}</ref>.

== Tarix ==
Evan You [[Google|Googleda]] [[AngularJS]] bilan ishlagandan so'ng, Angular'ning og'ir tuzilmasidan ilhomlangan holda yengil alternativa yaratishga qaror qildi<ref>{{Veb manbasi |url=https://www.freecodecamp.org/news/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57f6/ |sarlavha=Between the Wires: An interview with Vue.js creator Evan You |ish=freeCodeCamp |sana=2017-05-30 }}{{Oʻlikhavola|date=may 2026 |bot=InternetArchiveBot |fix-attempted=yes }}</ref>.

=== 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<ref>{{Veb manbasi |url=https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8 |sarlavha=Vue 2.0 is Here! |ism=Evan You |sana=2016-10-01}}</ref>.

* '''2020-yil, sentabr''' — '''Vue 3.0''' («One Piece») — [[TypeScript|TypeScriptda]] qayta yozilgan, Composition API, Teleport, Suspense, ko'p ildiz elementli komponentlar joriy qilingan<ref>{{Veb manbasi |url=https://blog.vuejs.org/posts/vue-3-official-default |sarlavha=Vue 3 as the New Default |sana=2022-02-07 }}{{Oʻlikhavola|date=may 2026 |bot=InternetArchiveBot |fix-attempted=yes }}</ref>.

* '''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, <code>useTemplateRef()</code> qo'shilgan<ref>{{Veb manbasi |url=https://blog.vuejs.org/posts/vue-3-5 |sarlavha=Announcing Vue 3.5 |sana=2024-09-03}}</ref>.

== 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):<syntaxhighlight lang="html">

<script setup>

import { ref } from 'vue'

const hisoblagich = ref(0)

function oshir() {

  hisoblagich.value++

}

</script>

<template>

  <button @click="oshir">

    {{ hisoblagich }} marta bosildi

  </button>

</template>

</syntaxhighlight>'''Options API''' (klassik usul):<syntaxhighlight lang="javascript">

export default {

  data() {

    return {

      hisoblagich: 0

    }

  },

  methods: {

    oshir() {

      this.hisoblagich++

    }

  }

}

</syntaxhighlight>

=== 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.
<syntaxhighlight lang="javascript">

import { ref, computed } from 'vue'

const narx = ref(100)

const miqdor = ref(3)

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

</syntaxhighlight>

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

* '''<code><nowiki>{{ }}</nowiki></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).
<syntaxhighlight lang="html">

<template>

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

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

  <ul>

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

      {{ meva }}

    </li>

  </ul>

</template>

</syntaxhighlight>

=== 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 (<code>scoped</code> 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<ref>{{Veb manbasi |url=https://router.vuejs.org |sarlavha=Vue Router |qaralgan sana=2026-02-10}}</ref>.

* '''Pinia''' — Vue 3 uchun rasmiy holat boshqaruvi kutubxonasi. Vuex o'rnini egallagan<ref>{{Veb manbasi |url=https://pinia.vuejs.org |sarlavha=Pinia — The intuitive store for Vue.js |qaralgan sana=2026-02-10}}</ref>.

* '''Vite''' — Vue jamoasi tomonidan yaratilgan tezkor loyiha qurish va ishlab chiqish vositasi<ref>{{Veb manbasi |url=https://vite.dev |sarlavha=Vite — Next Generation Frontend Tooling |qaralgan sana=2026-02-10}}</ref>.

* '''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<ref>{{Veb manbasi |url=https://nuxt.com |sarlavha=Nuxt — The Intuitive Vue Framework |qaralgan sana=2026-02-10}}</ref>.

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

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

=== UI kutubxonalar ===

* '''Vuetify''' — [[Material Design|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 ==
{| class="wikitable"
!Xususiyat
!'''Vue'''
!'''[[React]]'''
!'''[[Angular]]'''
|-
|Turi
|Progressiv freymvork
|Kutubxona
|To'liq freymvork
|-
|Til
|JavaScript / TypeScript
|JavaScript / TypeScript
|TypeScript (majburiy)
|-
|DOM
|Virtual DOM
|Virtual DOM
|Incremental DOM
|-
|Ma'lumot oqimi
|Ikki tomonlama (v-model)
|Bir tomonlama
|Ikki tomonlama
|-
|O'lcham (gzip)
|~33 KB
|~42 KB
|~143 KB
|-
|O'rganish qiyinligi
|Oson
|O'rta
|Qiyin
|-
|Yaratuvchi
|Evan You
|[[Meta Platforms|Meta]]
|[[Google]]
|}

== 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 ==

* [https://vuejs.org Rasmiy veb-sayt]

* [https://github.com/vuejs/core GitHub repozitoriyasi]

* [https://vuejs.org/tutorial/ Vue.js o'rganish qo'llanmasi]

* [https://nuxt.com Nuxt — Vue asosidagi freymvork]

== Eslatmalar ==
{{manbalar|2}}
*
[[Turkum:Veb-das]]
[[Turkum:JavaScript kutubxonalari]]
[[Turkum:Veb-freymvorklar]]
[[Turkum:Frontend]]
[[Turkum:Javascript]]
[[Turkum:Veb-saytlar]]
[[Turkum:Pages with unreviewed translations]]