Prosledjivanje sadržaja sa slot elementom

Uvod

vue slot

Jedan od načina je da se prosledi sadržaj iz parent komponete je da se ubaci izmedju custom tag-a koji predstavlja instancu komponente. Ovaj mehanizam se koristi kada imamo slične komponente koje se razlikuju samo po sadržaju, jer tako izbegavamo pravljenje dve odvojene komponente.
Child komponenta prihvata prosledjen sadržaj, a “slot” elemenat joj definiše mesto u komponenti gde treba da se ubaci prosledjeni sadržaj.

Primer


Neimenovani slot

Ovo je najednostavniji način da se iz root Vue instance (ili parent komponente) prosledi neki sadržaj child komponenti. Taj sadržaj se prosledjuje imedju HTML taga-ova koji predstavlja instancu child komponente. Već je pomenuto da će sadržaje biti iskorišćen pri renderovanju instance na mestu gde se nalazi <slot></slot> elemenat.

Root instanca:

Komponenta

Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga

Kada se komponenta bude renderovala na mesto slot taga će doći prosledjeni sadržaj.

NAPOMENA:
Stilizovanje umetnutog sadržaja mora biti stilizovano iz child komponente.

Komponenti može da se prosledi i dinamički sadržaj:

Primer

A takva komponenta potpuno isto prihvata prosledjeni sadržaj i prikazuje ga na mestu slot taga. Stoga će na mestu HTML taga slot biti izrenderovan dinamički sadržaj, što je u ovom slučaju “<h3>Something bad happened.</h3>”

Imenovani slot

U slučaju da postoje više slotova, potrebno je svakom slot-u dodeliti naziv da bi se medjusobno razlikovali:

Root instanca

Komponenta

Komponenta prihvata prosledjeni sadržaj i prikazuje ga na mestu odgovarajućeg slot taga:

Podrazumevani slot

Treba naglasiti ukoliko jedan od slotova nema definisano ime on će se ponašati kao tzv. default-ni slot koji obeležava mesto gde će biti prikazan sav prosledjen sadržaj koji nije specifično obeležen.

Root instanca

Komponenta

Imenovan slot “<slot name="title"></slot>” prihvata svoj sadržaj u tagu koji je obeležen sa atributom slot=”title”, dok neimenovani slot prihvata sav neobeleženi prosledjeni sadržaj:



Komunikacija izmedju susednih komponenti

Uvod

Komunikacija izmedju “susednih” komponenti se može ostvariti na više načina, a izbor jednog od ponudjenih mehanizma najčešće zavisi od komplikovanosti aplikacije.

a) Komunikacija preko zajedničkog roditelja ($emit -> $on & atribut -> props )

Izvodljivo rešenje, ali je generalno loša ideja, jer se teško prati protok podataka a samim tim je otežano debag-ovanje.

b) Event bus ($emit & $on)

Brzo i jednostavno rešenje za aplikacije sa jednostavnom arhitekturom i manjim brojem komponenti.

c) Vuex (centralizovani state menadžment)

Kompleksno rešenje za kompleksne aplikacije

Continue reading…


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…