Vue.js

Vue.js (talaffuzi: /vjuː/, «vyu» — inglizcha view so'zidan) — foydalanuvchi interfeyslarini yaratish uchun mo'ljallangan ochiq manbali JavaScript freymvorki^[1]. 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^[2].

Tarix

Evan You Googleda AngularJS bilan ishlagandan so'ng, Angular'ning og'ir tuzilmasidan ilhomlangan holda yengil alternativa yaratishga qaror qildi^[3].

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^[4].

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

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^[6].

Asosiy tushunchalar

Komponentlar

Vue.js'da interfeys qayta ishlatilishi mumkin bo'lgan mustaqil komponentlardan 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):

<script setup>

import { ref } from 'vue'

const hisoblagich = ref(0)

function oshir() {

  hisoblagich.value++

}

</script>

<template>

  <button @click="oshir">

    {{ hisoblagich }} marta bosildi

  </button>

</template>

Options API (klassik usul):

export default {

  data() {

    return {

      hisoblagich: 0

    }

  },

  methods: {

    oshir() {

      this.hisoblagich++

    }

  }

}

Reaktivlik tizimi

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

ref() — oddiy qiymatlar (son, matn, mantiqiy) uchun reaktiv o'zgaruvchi yaratadi.

reactive() — obyektlar uchun reaktiv holat yaratadi.

computed() — boshqa reaktiv qiymatlarga bog'liq hisoblangan xususiyat yaratadi.

watch() va watchEffect() — reaktiv o'zgarishlarni kuzatadi.

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:

{{ }} — matn interpolatsiyasi (mustache sintaksis).

v-bind (yoki :) — HTML atributlarini reaktiv ma'lumotlarga bog'lash.

v-on (yoki @) — DOM hodisalarini tinglash.

v-if, v-else, v-show — shartli renderlash.

v-for — ro'yxatlarni renderlash.

v-model — ikki tomonlama ma'lumot bog'lash (formalar uchun).

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

Yagona fayllik komponentlar

Vue'da har bir komponent .vue kengaytmali yagona faylda yoziladi (Single-File Component — SFC). Bu faylda uchta bo'lim bo'ladi:

<template> — HTML shabloni.

<script> — JavaScript/TypeScript mantiqi.

<style> — 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^[7].

Pinia — Vue 3 uchun rasmiy holat boshqaruvi kutubxonasi. Vuex o'rnini egallagan^[8].

Vite — Vue jamoasi tomonidan yaratilgan tezkor loyiha qurish va ishlab chiqish vositasi^[9].

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^[10].

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

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

Rasmiy veb-sayt

GitHub repozitoriyasi

Vue.js o'rganish qo'llanmasi

Nuxt — Vue asosidagi freymvork

Eslatmalar

↑ „Vue.js — The Progressive JavaScript Framework“. Qaraldi: 2026-yil 10-fevral.
↑ „vuejs/core — GitHub“. Qaraldi: 2026-yil 10-fevral.
↑ „Between the Wires: An interview with Vue.js creator Evan You“. freeCodeCamp (2017-yil 30-may).^{[sayt ishlamaydi]}
↑ „Vue 2.0 is Here!“ (2016-yil 1-oktyabr).
↑ „Vue 3 as the New Default“ (2022-yil 7-fevral).^{[sayt ishlamaydi]}
↑ „Announcing Vue 3.5“ (2024-yil 3-sentyabr).
↑ „Vue Router“. Qaraldi: 2026-yil 10-fevral.
↑ „Pinia — The intuitive store for Vue.js“. Qaraldi: 2026-yil 10-fevral.
↑ „Vite — Next Generation Frontend Tooling“. Qaraldi: 2026-yil 10-fevral.
↑ „Nuxt — The Intuitive Vue Framework“. Qaraldi: 2026-yil 10-fevral.

[1] „Vue.js — The Progressive JavaScript Framework“. Qaraldi: 2026-yil 10-fevral.

[2] „vuejs/core — GitHub“. Qaraldi: 2026-yil 10-fevral.

[3] „Between the Wires: An interview with Vue.js creator Evan You“. freeCodeCamp (2017-yil 30-may).^{[sayt ishlamaydi]}

[4] „Vue 2.0 is Here!“ (2016-yil 1-oktyabr).

[5] „Vue 3 as the New Default“ (2022-yil 7-fevral).^{[sayt ishlamaydi]}

[6] „Announcing Vue 3.5“ (2024-yil 3-sentyabr).

[7] „Vue Router“. Qaraldi: 2026-yil 10-fevral.

[8] „Pinia — The intuitive store for Vue.js“. Qaraldi: 2026-yil 10-fevral.

[9] „Vite — Next Generation Frontend Tooling“. Qaraldi: 2026-yil 10-fevral.

[10] „Nuxt — The Intuitive Vue Framework“. Qaraldi: 2026-yil 10-fevral.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]