Komunikacija izmedju komponenti tip “parent <---> child”

Uvod

emit-props

U okviru Vue.js svaka komponenta ima svoj izolovani domen, direktna komunikacija izmedju dve komponente po default-u nije dozvoljena, tako da se za razmenu podataka koriste odgovarajuće mehanizmi.
Komunikacija izmedju parent i child komponente može da se odvija u oba smera ali koristeći različite mehanizme. U smeru od parenta ka child komponenti podatak se prosledjuje kroz atribut child taga, a u smeru od child komponente ka parent komponenti se prosledjuje uz custom event.

Treba naglasiti da u zavisnosti od tipa prosledjenog podatka zavisi da li je komunikacija jednosmerna ili dvosmerna. U slučaju podataka primitivnog tipa ova komunikacija je jednosmerna, jer child komponenta čak i da napravi promenu nad prosledjenim podatkom to neće uticati na parent komponentu. Medjutim ako se proslede podaci referentog tipa (nizovi ili objekat), onda promena takvog podatka u child komponenti će se primetiti i iz roditeljske komponente jer obe “posmatraju” isto mesto u memoriji.


Continue reading…

Uvod u Vue.js komponente

Šta su komponente?

vue komponente

Definicija

Komponente su jedna od najmoćnijih funkcija Vue.js i odličan način da se razbije kompleksnost aplikacije na manje delove. Komponente nam pomažu da enkapsuliramo kod koji se može koristiti više puta u aplikaciji (“reusable” Vue instance). Svaki custom HTML tag koji predstavlja instancu komponente mora da ima konstruktorsku funkciju na osnovu koje se generiše, a takvo definisanje konstruktorske funkcije komponente se naziva registrovanje komponente.

Implementacija komponenti u aplikaciju

Nakon definisanja konstruktora komponente, implementacija novih instanci u aplikaciji je veoma jednostavna. Za implementaciju je dovoljno ugraditi custom tag sa nazivom komponente u okviru HTML-a i on će sa sobom “doneti” svoje HTML elemente, svu logiku, i stajling definisan u komponenti.

Primer

Komponente mogu imati više instanci, što se može videti u narednom primeru, gde se komponeta integriše u HTML na dva mesta, sa custom tagom <button-counter></button-counter>:


Continue reading…

Direktive v-show & v-once & v-cloak

v-show

Direktiva “v-show” se koristi za uslovno prikazivanje elementa. Iako “v-show” uvek generiše HTML elemenat na kome se nalazi (elemenat se vidi u inspektoru), prikazaće ga na korisničkom interfejsu tek ako je stanje direktive true v-show="true" u suprotnom elemenat neće biti prikazan jer ima svojstvo display:none. Isti krajnji rezultat na korisničkom interfejsu bi dobili korišćenjem direktive “v-if”, medjutim u pozadini se ove dve direktive krucijalno razlikuju, u slučaju v-if="false", element nije samo sakriven već potpuno nestaje iz DOM-a.

Kada koristiti “v-show”

Ako imamo puno elemenata koji bi trebali biti vidljivi u zavisnosti od nekih dinamičkih podataka, savetuje se da koristimp atribut v-shov, jer dodavanje ili uklanjanje elemenata u DOM-u prilično skupa operacija, pa mnogo takvih operacija može uticati na performanse aplikacije. S druge strane, ako elemente treba uslovno da se izvrše samo jednom, recimo, prilikom pokretanja aplikacije onda koristite atribut v-if.

v-if vs v-show

v-cloak

“v-cloak” je atribut koji nakon dodavanja elementu, nestaje kada se Vue instanca generiše. Stoga se koristi da se uz pomoć nje targetira elemenat sve dok se instanca ne generiše. Najčešće se koristi da bi se targetirao element u CSS-u, nakon čega se tom elementu dedeli svojstvo display: none, jer se tako sprečava prikazivanje elementa dok se instanca ne kreira.

Primer

Pošto će ova direktiva ostati na elementu sve dok se ne generiše Vue instanca, iskoristićemo je da preko nje targetiramo elemenat u tom periodu, da bi prikrili sadržaj:

Primer

Za sakrivanje dece:

Primer

Za ubacivanje loadera:

NAPOMENA:
Direktiva “v-cloak” ne radi prilikom učitavanja remote podataka, već samo pri startovanju aplikacije. Takodje ne pokušavajte da učitavate veliki sadržaj čije bi učitavanje duže trajalo (npr. slike), jer je vreme generisanje Vue instance kratko, pa neće stići da se downloaduje ceo sadržaj.

v-once

Iako je rendering običnog HTML elementa veoma brz, ponekad ukoliko imamo komponentu koja sadrži puno statičkog sadržaja, treba izvršiti optimizaciju. Optimizacija se zasniva na korišćenju v-once direktive koja obezbedjuje samo jedno renderovanje sadržaja, dok se svaki drugi put vraća keširan sadržaj.

Iako izgleda veoma korisno, preporuka je da se ova direktiva koristi retko, zbog problema kada aplikaciju preuzme drugi developer, koji previdi postojanje direktive “v-once” i utroši sate provaljivajući zašto neće da mu se ažurira sadrža:).


Direktiva v-if

Uvod

Ove direktive se ugradjuju kao atribut u željene HTML elemente i mogu da zamene poznatu javascript sintaksu:

vue.js

Sintaksa i primeri

v-if

Koristi se za kondicionlno renderovanje elementa tj. može da doda i ukloni elemenat iz DOM-a.

NAPOMENA:
Ukoliko se direktiva “v-for” koristi zajedno sa “v-if” na istom elementu, direktiva “v-for” ima viši prioritet od “v-if.

v-else-if

Element za koji je zakačena direktiva "v-else-if" mora da stoji odmah iza HTML elmenata na koji je zakačena "v-if" direktiva, ako ovo nije ispoštovano Vue.js ga neće prepoznati.

v-else

Element za koji je zakačena direktiva "v-else" mora da stoji odmah iza HTML elmenata na kojima su zakačene "v-if" ili "v-else-if" direktive, ako ovo nije ispoštovano Vue.js ga neće prepoznati.

Primer

Pošto direktiva v-else mora da bude na elementu koji je odmah iza elementa koji ima “zakačenu” direktivu “if”, ukoliko imamo potrebu da utiče na više elemenata moramo da obavijemo željene elemente sa nekim “wrapper” elementom. Taj wrapper može biti “div” tag, ali je preporuka je da se koristi <template> tag, jer “ne zagadjuje” DOM (tag se ne renderuje ali njegov sadražaj da).



Direktiva v-for

Uvod

vue.js

Koristeći Vue.js direktivu “v-for” dinamički generišemo HTML tzv. izlistavanje (mapiranje) podataka. <div v-for="item in items">
Iako možda na prvi pogled izgleda logično da se direktiva stavi na parent element (“ul” ili “ol”), to ovde nije slučaj, kod Vue.js se direktiva “v-for” ugradjuje na HTML elemenat koji treba da se “izlistava”, tj. HTML elemenat na kojem je “zakačena” direktiva “v-for” će se koristiti kao template za renderovanje odgovarajućeg sadržaja.

Direktiva “v-for” koristi takozvanu “in-place patch” strategiju koja omogućava efikasno korišćenje resursa. Medjutim ovakav pristup u nekim slučajevima može da napravi problem u prikazivanju izlistanih elemenata, nakon njihovog sortiranja ili izmeni njihovog redosleda (npr. ako koristimo metodu koja meša redosled). Za ovaj problem postoji rešenje dodavanjem jedinstvenog “key” atributa svakom elementu, koji se “veže” (eng. “bind”) za taj element. U suštini dodavanje ovog dodatnog atributa je znak za Vue.js, da prati identitet svakog elementa i na taj način ispravno izvrši redefinisanje pozicije elementa. Za ključ treba izabrati neki jedinstveni podatak
v-bind:key="nekiJedinstveniParametar"
Preporuka je da se ovaj atribut obezbedi kad god je to moguće. Procitajte više o ovoj problematici na oficijelnoj strani ili na stranici “codingexplained.com” u clanku “Understanding-v-for-update-strategy”

Primer

Continue reading…


Direktiva v-model

Uvod

vue.js direktive

Korisničku akciju na view prosledjujemo aplikaciji sa direktivom “v-on:”, nakon obrade podataka radi ažuriranja korisničkog interfejsa prosledjujemo podake iz aplikacije interpolacijom ili direktivom v-bind. Svaki od navedenh pojedinačnih postupaka predstavlja prosledjivanja podataka u jednom smeru (eng. “one-way binding”). Medjutim polja za unos podataka su specifična, jer imaju potrebu za prosledjivanje podataka u oba smera (eng. “two-way binding”), stoga su na istom elementu potrebne obe direktive.
U narednom primeru se podaci iz forme prosledjuju data objektu sa “v-on:input” direktivom, dok se podaci izmenjeni iz same aplikacije ažuriraju vrednost u HTML inputu sa “v-bind:value” direktivom.

U okviru Vue.js postoji direktiva koja pokriva ovaj postupak pod nazivom “v-model”, sa čijim korišćenjem kod izgleda dosta jednostavnije, pa umesto:

koristimo pregledniju i jednostavniju sintaksu:


Continue reading…

Direktiva v-on:

Sintaksa

Vue pruža veoma lep način integrisanja event listener-a na bilo kom elementu DOM-a. Kao i kod ostalih metoda i event callback metode imaju direktan pristup Vue podacima koristeći “this” ključnu reč.

a) Standardna sintaksa

Da bismo event listener priključili bilo kojem HTML elementu, koristimo direktivu v-on: na koju nadovezujemo naziv vrste dogadjaja koji osluškujemo. Pored toga je potrebno da na kraju takve sintakse da “dodelimo” odgovarajuću event handler metodu.

Skraćeno pisanje sintakse

b) Objektna sintaksa za više “zakačenih” dogadjaja

Ova sintaksa se koristi kada “kačimo” više različitih dogadjaja na isti elemenat


Continue reading…

Direktiva v-bind:

Sintaksa

Kao što je pomenuto Vue.js može da dinamičiki generiše HTML koristeći neku od direktiva. Za dinamičko generisanje atributa HTML elementa se koristi direktiva “v-bind”.

Koristeći ovu direktivu možemo reaktivno da povežemo vrednost atributa sa “data” objektom:

Primer

Skraćeno pisanje direktive

Ova direktiva v-bind: ima skraćenu sintaksu koju predstavlja dvotačaka :

Primer


Continue reading…


HTML interpolacija u okviru Vue.js

Uvod

vue.js

Vue.js je MVVM framework, koji ima sistem kako da poveže “model” (podatke) sa odgovarajućim “view”. Sekcija “view” je kao i u drugim frontend bibliotekama ustvari HTML, ali sa dodatnim funkcionalnostima koje mu omogućavaju dinamičko prikazivanje model-a, a to su:

  • “interpolacija”
  • “direktive”

Deo HTML koda nad kojim se izvršava interpolacija se obeležava sa duplim vitičastim zagradam a takva sintaksa je poznata pod nazivom “Mustache syntax”. Sve što se nalazi u okviru duplih vitičastih zagrada će biti obradjeno od strane Vue.js i zamenjeno odgovarajućim rezultatom.

Interpolacija teksta

Ukoliko se izmedju zagrada nalazi tekst koji predstavlja neko svojstvo iz “data” objekta ova sintaksa će da prikaže u okviru HTML-a trenutnu vrednost iz tog svojstva. Pošto je “data” svojstvo specifično i ponaša se kao proxy prema vue instanci, nije potrebno koristi sintaksu this.data.svojstvo, već je dovoljan samo naziv svojsva. Najbitnija stvar vezana za interpolaciju teksta je da će Vue.js ponovno obraditi sve što je u okviru zagrada ukoliko dodje do promene podataka, nakon čega će automatski ažurirati HTML.

Sa ovakvim načinom se interpretira “data” kao običan tekst, ne kao HTML. Ukoliko je potrebno da se evaulira HTML onda se koristi direktiva “v-html”. Treba naglastiti da se interpolacija teksta ne može koristiti za interpretaciju atributa HTML taga, za to je neophodno da se koristi direktiva “v-bind”.

Continue reading…