Vue.JS Kirish

Bu qo’llanma — Vue.js freymvorki bilan tanishtiruvchi kirish. Men, Farrukh Sherkulov, siz bilan birga zamonaviy veb-interfeyslarni qurishning eng ommabop vositalaridan biri bilan tanishaman. Vue.js — o’rganish oson, ammo kuchli JavaScript freymvork bo’lib, u interaktiv, tez va reaktiv foydalanuvchi interfeyslarini yaratishga imkon beradi.

Vue.js — 2014-yilda Evan You tomonidan yaratilgan, foydalanuvchi interfeyslarini qurish uchun mo’ljallangan progressiv JavaScript freymvork. U reaktivlik va komponentli arxitekturaga asoslanadi.

Nega Vue.js?

An’anaviy JavaScript’da sahifani yangilash uchun har bir elementni qo’lda topib o’zgartirish kerak edi. Vue.js buni butunlay o’zgartiradi: siz ma’lumotni o’zgartirasiz, Vue esa sahifani avtomatik yangilaydi. Bu reaktivlik deb ataladi va u interaktiv ilovalar yaratishni ancha soddalashtiradi.

Vue “progressiv” freymvork — uni oddiy sahifaga kichik qism sifatida qo’shish yoki butun katta ilovani unda qurish mumkin. Aynan shuning uchun u boshlovchilar uchun ham, tajribalilar uchun ham qulay.

Birinchi Vue ilova

Vue’ni oddiy HTML sahifaga qo’shib, birinchi reaktiv misolni ko’ramiz:

const app = Vue.createApp({
    data() {
        return { xabar: "Salom, UzbekDevs!" };
    }
});
app.mount("#ilova");

HTML tomonida esa {{ }} orqali ma’lumot ko’rsatiladi:

<div id="ilova">
    <h1>{{ xabar }}</h1>
</div>

Salom, UzbekDevs!

createApp Vue ilovasini yaratdi, data() reaktiv ma’lumotni belgiladi, {{ xabar }} esa uni sahifada ko’rsatdi. Agar xabar o’zgarsa, sahifa avtomatik yangilanadi.

Reaktivlik — Vue’ning yuragi

Vue’ning eng kuchli tomoni — reaktivlik. Ma’lumot o’zgarganda sahifa o’zi yangilanadi. Buni oddiy hisoblagichda ko’ramiz:

const app = Vue.createApp({
    data() {
        return { son: 0 };
    },
    methods: {
        oshir() { this.son++; }
    }
});

HTML’da tugma bosilganda son oshadi va ekranda darhol yangilanadi:

<div id="ilova">
    <p>Son: {{ son }}</p>
    <button @click="oshir">Oshirish</button>
</div>

Son: 0  →  (tugma bosilganda)  →  Son: 1

@click="oshir" tugmaga hodisa biriktirdi. Tugma bosilganda son oshadi va Vue ekranni avtomatik yangilaydi — qo’lda hech narsa qilish shart emas.

Vue imkoniyatlari

Vue nima taklif qilishini jadvalda ko’ramiz:

Xulosa

Kirish qismida Vue.js nima ekanini, uning reaktivlik va progressivlik xususiyatlarini, birinchi ilovani (createApp, data, {{ }}) va hodisalarni (@click) ko’rib chiqdik. Vue — interaktiv veb-interfeyslar qurishning zamonaviy va qulay vositasi.