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-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:
|
1 2 3 4 5 6 7 8 9 |
// HTML: <div id="app" v-cloak> {{ message }} </div> // CSS: #app[v-cloak] { display: none; } |
Primer
Za sakrivanje dece:
|
1 |
[v-cloak] > * { display:none } |
Primer
Za ubacivanje loadera:
|
1 |
[v-cloak]::before { content: "loading…" |
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.
|
1 2 3 4 5 |
<div class=”v-once”> ... ... statičiki sadržaj koji se ne menja ... </div> |
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:).