Vue.js

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

 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 
XususiyatVueReactAngularTuriProgressiv freymvorkKutubxonaTo'liq freymvorkTilJavaScript / TypeScriptJavaScript / TypeScriptTypeScript (majburiy)DOMVirtual DOMVirtual DOMIncremental DOMMa'lumot oqimiIkki tomonlama (v-model)Bir tomonlamaIkki tomonlamaO'lcham (gzip)~33 KB~42 KB~143 KBO'rganish qiyinligiOsonO'rtaQiyinYaratuvchiEvan YouMetaGoogle

 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 

Turkum:Veb-das
Turkum:JavaScript kutubxonalari
Turkum:Veb-freymvorklar
Turkum:Frontend
Turkum:Javascript
Turkum:Veb-saytlar
Turkum:Pages with unreviewed translations