Reja: Kirish. I bob. Online kriptavalyuta ayirboshlash o’rni va ahamiyati Kurs ishi haqida ma’lumot

2. Asosiy qism.

2.1.Firebase ma’lumotlar Bazasi haqida ma'lumot

Firebase ma'lumotlari JSON moslamalarini aks ettiradi. Agar siz Firebase-dan ilovangizni ochsangiz

boshqaruv panelida + belgisini bosish orqali ma'lumotlarni qo'lda qo'shishingiz mumkin.

Biz oddiy ma'lumotlar tuzilishini yaratamiz. Quyidagi rasmni tekshirishingiz mumkin.

Oldingi bobda biz Firebase-ni dasturimizga uladik. Endi Firebase-ni

konsol.

Biz o'yinchi kollektsiyamizga mos yozuvlar yaratishimiz mumkin.

var ref = firebase.database (). ref ('futbolchilar');

console.log (ref);

Quyidagi natijani konsolda ko'rishimiz mumkin.

Ushbu bobda massivlarning Firebase vakili tushuntiriladi. Xuddi shu ma'lumotlardan foydalanamiz

oldingi bobdan.

Biz ushbu ma'lumotlarni quyidagi JSON daraxtini pleyer kollektsiyasiga yuborish orqali yaratishimiz mumkin.

['jon', 'amanda']

Buning sababi Firebase to'g'ridan-to'g'ri Arrays-ni qo'llab-quvvatlamaydi, lekin u bilan ob'ektlar ro'yxatini yaratadi

kalit nomlari sifatida butun sonlar.

Massivlardan foydalanmaslikning sababi, Firebase real vaqt ma'lumotlar bazasi sifatida ishlaydi va agar

bir nechta foydalanuvchilar bir vaqtning o'zida massivlarni boshqarishi kerak edi, natijada muammo bo'lishi mumkin

chunki indekslar doimiy ravishda o'zgarib turadi.

Firebase uni boshqarish usuli bilan kalitlar (indekslar) har doim bir xil bo'lib qoladi. Biz qilaolardik

o'chirish john va amanda hali ham kalit (indeks) 1ga ega bo'lar edi

Oxirgi bobimizda biz Firebase-da ma'lumotlarni qanday yozishni ko'rsatdik. Ba'zan kerak bo'ladi

ma'lumotlaringiz uchun noyob identifikatorga ega bo'ling. O'zingiz uchun noyob identifikatorlarni yaratmoqchi bo'lganingizda

ma'lumotlar, o'rnatilgan usul o'rniga surish usulidan foydalanishingiz kerak.

Key () usuli yordamida Firebase-dan har qanday kalitni olishimiz mumkin. Masalan, agar xohlasak

to'plam nomini oling, biz quyidagi parchadan foydalanishimiz mumkin

2.2. Vue js qismi haqida ma’lumot

VueJS - bu interaktiv veb-interfeyslarni rivojlantirish uchun ishlatiladigan ochiq manbali progressiv JavaScript-ramka. Bu veb-ishlab chiqarishni soddalashtirish uchun ishlatiladigan mashhur ramkalardan biridir. VueJS ko'rish qatlamiga e'tiborni qaratadi. Uni hech qanday muammosiz oldingi rivojlanish uchun katta loyihalarga osongina qo'shib qo'yish mumkin.

VueJS uchun o'rnatishni boshlash juda oson. Har qanday ishlab chiquvchi bir muncha vaqt ichida interaktiv veb-interfeyslarni osongina tushunishi va yaratishi mumkin. VueJS Google-ning sobiq xodimi Evan You tomonidan yaratilgan. VueJS-ning birinchi versiyasi 2014 yil fevral oyida chiqarilgan edi. Yaqinda GitHub-da 64 828 yulduzni tashkil etdi va uni juda mashhur qildi.

Xususiyatlari

Quyida VueJS-da mavjud bo'lgan xususiyatlar mavjud.

Virtual DOM

VueJS virtual DOMdan foydalanadi, u React, Ember va boshqalar kabi boshqa ramkalar tomonidan ham qo'llaniladi. DOMga o'zgartirishlar kiritilmagan, aksincha JavaScript ma'lumotlar tuzilmalari ko'rinishidagi DOM nusxasi yaratilgan. . Har qanday o'zgartirish kiritilishi kerak bo'lsa, ular JavaScript ma'lumotlar tuzilmalariga kiritiladi va ikkinchisi asl ma'lumotlar tuzilishi bilan taqqoslanadi. So'ngra oxirgi o'zgarishlar haqiqiy DOM-ga yangilanadi, foydalanuvchi o'zgarishini ko'radi. Bu optimallashtirish nuqtai nazaridan yaxshi, u arzonroq va o'zgarishlarni tezroq tezlikda amalga oshirish mumkin.

Ma'lumotlarni bog'lash

Ma'lumotlarni bog'lash xususiyati HTML atributlariga ishlov berish yoki qiymatlarni belgilash, uslubni o'zgartirish, VueJS-da mavjud bo'lgan v-bind deb nomlangan majburiy ko'rsatma yordamida sinflarni tayinlashga yordam beradi.

Komponentlar

Komponentlar - bu HTML-da qayta ishlatilishi mumkin bo'lgan maxsus elementlarni yaratishda yordam beradigan VueJS-ning muhim xususiyatlaridan biri.

Vue.component('todo-item', {

props: ['todo'],

template: '

{{ todo.text }}

'

})
var app7 = new Vue({

el: '#app-7',

data: {

groceryList: [

{ id: 0, text: 'Овощи' },

{ id: 1, text: 'Сыр' },

{ id: 2, text: 'Что там ещё люди едят?' }

]

}

})

Voqealar bilan ishlash

v-on - bu VueJS-dagi voqealarni tinglash uchun DOM elementlariga qo'shilgan atribut.

Animatsiya / o'tish

VueJS HTML elementlariga qo'shilish / yangilash yoki DOMdan olib tashlashda ularga o'tishning turli usullarini taqdim etadi. VueJS-da o'tish effekti uchun elementga o'ralgan bo'lishi kerak bo'lgan ichki o'tish komponenti mavjud. Uchinchi tomon animatsiya kutubxonalarini osongina qo'shishimiz va interfeysga ko'proq interaktivlik qo'shishimiz mumkin.

Hisoblangan xususiyatlar

Bu VueJS-ning muhim xususiyatlaridan biridir. U foydalanuvchi interfeysi elementlariga kiritilgan o'zgarishlarni tinglashga yordam beradi va kerakli hisob-kitoblarni amalga oshiradi. Buning uchun qo'shimcha kodlashning hojati yo'q.

Shablonlar

VueJS DOM-ni Vue nusxasi ma'lumotlari bilan bog'laydigan HTML-ga asoslangan shablonlarni taqdim etadi. Vue shablonlarni virtual DOM Render funktsiyalariga kompilyatsiya qiladi. Render funktsiyalari shablonidan foydalanishimiz mumkin va buning uchun shablonni render funktsiyasi bilan almashtirishimiz kerak.

Direktivalar

VueJS-da v-if, v-else, v-show, v-on, v-bind va v-model kabi ichki ko'rsatmalar mavjud bo'lib, ular frontda turli xil harakatlarni bajarish uchun ishlatiladi.

Kuzatuvchilar

Kuzatuvchilar o'zgaruvchan ma'lumotlarga qo'llaniladi. Masalan, ariza kiritish elementlari. Bu erda biz qo'shimcha tadbirlarni kiritishimiz shart emas. Kuzatuvchi kodni sodda va tezkor qilish bilan har qanday ma'lumotlarni o'zgartirish bilan shug'ullanadi.

Yo'nalish

Sahifalar orasida navigatsiya vue-router yordamida amalga oshiriladi.

Engil

VueJS skript juda yengil va ishlash ham juda tez.

Vue-CLI

VueJS-ni buyruq satrida vue-cli buyruq satri interfeysi yordamida o'rnatish mumkin. Vue-cli yordamida loyihani osongina tuzish va kompilyatsiya qilishga yordam beradi.

Boshqa ramkalar bilan taqqoslash

Endi VueJS-ni React, Angular, Ember, Knockout va Polymer kabi boshqa ramkalar bilan taqqoslaylik.

VueJS v / s reaktsiyasi

Virtual DOM

Virtual DOM - bu DOM daraxtining virtual tasviri. Virtual DOM bilan haqiqiy DOM bilan bir xil bo'lgan JavaScript ob'ekti yaratiladi. DOM-ga o'zgartirish kiritilishi kerak bo'lgan har qanday vaqtda yangi JavaScript ob'ekti yaratiladi va o'zgarishlar kiritiladi. Keyinchalik ikkala JavaScript moslamalari taqqoslanadi va yakuniy o'zgarishlar haqiqiy DOM-da yangilanadi.

VueJS va React ikkalasi ham virtual DOM-dan foydalanadi, bu esa uni tezlashtiradi.

JSX shablonlari / s

VueJS html, js va CSS-dan alohida foydalanadi. VueJS uslubini yangi boshlovchi tushunishi va qabul qilishi juda oson. VueJS uchun shablonga asoslangan yondashuv juda oson.

Reakt jsx yondashuvidan foydalanadi. Hammasi ReactJS uchun JavaScript. HTML va CSS barchasi JavaScript-ning bir qismidir.

O'rnatish vositalari

React reaktiv dasturni yaratadi, VueJS esa vue-cli / CDN / npm dan foydalanadi. Ikkalasini ham ishlatish juda oson va loyiha barcha asosiy talablar bilan tuzilgan. React uchun veb-paket kerak, VueJS esa kerak emas. Biz CD-kutubxonasi yordamida VueJS-ni jsfiddle yoki codepen-ning istalgan joyida kodlash bilan boshlashimiz mumkin.

v-model="searchText"

@keydown.enter="search"

/>

Ommaboplik

React VueJS-dan mashhur. React bilan ishlash imkoniyati VueJS-dan ko'proq. React, ya'ni Facebook orqasida katta nom bor, bu uni yanada ommalashtiradi. React JavaScript-ning asosiy kontseptsiyasidan foydalanganligi sababli, u JavaScript-ning eng yaxshi amaliyotidan foydalanadi. React bilan ishlaydigan kishi, albatta, barcha JavaScript tushunchalari bilan juda yaxshi bo'ladi.

props: {

username: String,

},

computed: {

normalizedUsername: function () {

return this.username

.toLowerCase()

.replace(/\s+/, '-')

}

}

VueJS - bu rivojlanayotgan asos. Hozirda VueJS bilan ishlash imkoniyatlari React bilan taqqoslaganda kamroq. So'rov natijalariga ko'ra, ko'p odamlar VueJS-ga moslashmoqda, bu esa uni React va -ga nisbatan mashhurroq qilishi mumkin.