JavaScript + Vue js

Mavzu: JavaScript frameworklari: Vue.
VueJs ga kirish. Vue ning imkoniyatlari. Data Binding. Vue operatorlari. Formalar bilan ishlash. Ro’yhatlar.
Vue (talaffuz / vjuː / ko'rinishi kabi) - bu foydalanuvchi interfeyslarini yaratish uchun progressiv asosdir.

JavaScript + Vue.js: Javascript ob’ektga asoslangan (OOP) va mashhur dasturlash tili bo’lib, eng taniqli veb-ishlab chiqarish vositalaridan biridir. Uning yordami bilan barcha mavjud operatsion tizimlar va platformalar uchun chiroyli va funksional veb-sayt, mobil ilovalarni yaratishingiz mumkin. Bu til turli xil ajoyib xususiyatlarga ega va Internet Explorer, Opera, Google Chrome, Firefox va boshqa barcha brauzerlarga toʻgʻri keladi. Javascript Google, Amazon, Apple va boshqa yirik kompaniyalar tomonidan qo’llaniladigan trend texnologiyasidir. Progressiv freymvork Vue.js esa doirasi kichik havaskor loyihadan keng foydalaniladigan dasturchilar vositasiga aylandi. Hech qachon JavaScript freymvorklari bilan ishlamagan bo’lsangiz ham, u bilan ish boshlash juda oson boʻladi. Hozirgi kunda Alibaba, Xiaomi, PageKit va GitLab Vue.js bilan ish yuritadilar. Ushbu kurs yaratish jarayonida innovatsion yondashuv koʻrsatadigan koderlar uchun moʻljallangan.



Monolit ramkalardan farqli o'laroq, Vue bosqichma-bosqich amalga oshirish uchun mos keladi. Uning yadrosi, birinchi navbatda, boshqa kutubxonalar va mavjud loyihalar bilan integratsiyalashuvni osonlashtiradigan ko'rish darajasidagi muammolarni hal qiladi. Boshqa tomondan, Vue, zamonaviy vositalar va qo'shimcha kutubxonalar bilan birgalikda ishlatilsa, murakkab bitta sahifali dasturlarni (SPA, Single-Page Applications) yaratish uchun mutlaqo mos keladi.
Vue dan foydalanish uchun index.html fayl yaratib, unga quyidagi vue.js kutubxonani qo’shish kerak bo’ladi.

Vue.js yadrosida oddiy andozalardan foydalanib DOM-da ma'lumotlarni deklarativ ravishda namoyish etishga imkon beradigan tizim mavjud:

{{ message }}

var app = new Vue({
el: '#app',
data: {
message: 'Привет, Vue!'
}
})

Shunday qilib, biz birinchi Vue dasturimizni yaratdik! Bu shablonni oddiy ko'rsatishga o'xshaydi, lekin Vue juda ko'p ishlarni amalga oshirdi. Endi ma'lumotlar va DOM reaktiv ravishda bog'langan. Buni qanday tekshirish kerak? Brauzerda JavaScript konsolini oching (shu erda, ushbu sahifada) va app.message xususiyatini yangi qiymatga qo'ying. Siz darhol brauzerda tegishli o'zgarishlarni ko'rasiz.
Matn interpolyatsiyasidan tashqari, siz element atributlarini bog'lashingiz mumkin:

Наведи на меня курсор на пару секунд,
чтобы увидеть динамически связанное значение title!

var app2 = new Vue({

el: '#app-2',
data: {
message: 'Вы загрузили эту страницу: ' + new Date().toLocaleString()
}
})
Bu erda biz yangi narsa bilan uchrashamiz. V-bind atributi direktiv deb ataladi. Direktivalar v- bilan qo'shiladi, bu ularning o'ziga xos xususiyatini ko'rsatadi. Siz taxmin qilganingizdek, ular namoyish etilgan DOM-ga maxsus Vue-reaktiv xatti-harakatni qo'shadilar. Ushbu misolda, ko'rsatma "xabar elementini Vue misolida o'zgartirganda, ushbu elementning sarlavhasi qiymatini saqlab turing" deydi.
JavaScript konsolini oching va app2.message = 'yangi xabar' ni kiriting, siz bog'langan HTML kodi qanday o'zgarganini ko'rasiz - bizning holatlarimizda, atribut atributi - yangilangan.
Internet resurslar
https://ru.vuejs.org/v2/guide/instance.html