Vue.js

Dinamičke komponente

by

Sintaksa za dinamičke komponente Dinamičke komponente u Vue-u omogućavaju vam da navedete jedno mesto HTML-u kao placeholder za različite komponente, nakon čega user/aplikacija može dinamički birati koju želi komponentu da prikaže. Sintaksa dinamičkih komponenti veoma liči na sintaksu „slot“ mehanizma, stim što u ovome slučaju je tzv. placeholder HTML elemenat <component></component>. Izbor željene komponente se … Read more

Prosledjivanje sadržaja sa slot elementom

by

Uvod 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 … Read more

Komunikacija izmedju susednih komponenti

by

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

Read more

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

by

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.

Read more

Šta su Vue.js komponente?

by

Kreiranje komponente Poznato je da čak i kod najjednostavnijih aplikacija nije dobro držati ceo kod u jednom fajl, već je bolje razbiti ga na više celina jer se na taj način pojednostavljuje aplikacija i omogućava bolja preglednost kao i lakši debuging. Upravo su komponente odličan način da se razbije kompleksnost aplikacije na manje delove. Pored … Read more

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

by

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 … Read more

Direktiva v-if

by

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

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 … Read more

Direktiva v-for

by

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

Read more

Direktiva v-model

by

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:

Read more