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

Direktiva v-on:

by

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

Read more

Direktiva v-bind:

by

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

Read more