Sintaksa Vue.js direktiva

v-direktive

Direktive su komande koje možemo zakačiti na DOM element, koriste se za low-level pristup HTML elementu, i njegovu kontrolu ponašanja. Upravo zahvaljujući direktivama i interpolaciji, svaki HTML koji je pod jurisdikcijom Vue.js, je ipak nešto više od običnog HTML-a.
Da bi Vue.js znao kada je u pitanju direktiva, one su obeležene na poseban način. Specifičan prefiks je glavna naznaka biblioteci da je u pitanju direktiva, i stavlja se ispred naziva svake direktive:

v-

Pored prefiksa, svaka direktiva ima jedinstven naziv koji joj predodredjuje ponašanje i funkcionalnost koju treba da ima.

v-example

Medjutim sam naziv nije dovoljan za bilo kakvu funkcionalnost, pa se pored naziva direktive uvek prosledjuje i neka vrednost (svaka direktiva zna šta joj je činiti sa tom vrednosti).

v-example="value"

Za neke direktive ni prosledjena vrednost nije dovoljna, pa moramo da jasnije definišemo direktivu tako što ćemo joj proslediti i argument:

v-example:arg="value"

Pored svega nabrojanog u nekim slučajevim kod nekih direktiva postoji mogućnost da modifikujemo standardno ponašanje direktive. Modifikatori su posebni postfiksovi kojima prethodi tačka.

v-example:arg.modifier="value"

Modifikatori direktiva

Modifikatori direktive (eng.modifiers) su posebni postfiksi koji se nadovezuju korišćenjem tačke na neku od direktiva, i svojim postojanjem ukazuju na to da direktiva treba da bude izmenjena na neki poseban način.

Pregled Vue.js direktiva

Direktive ugradjene u Vue.js:

Naziv Skraćena sintaksa Primena Primer
v-bind : Dinamičko vezivanje HTML atributa za neko data svojstvo <div v-bind:style="{ background: color }"></div>
v-on @ Dadaje event listener HTML elementu <button v-on:click="nekiEventHandler"></button>
v-model Nema skraćenu sintaksu Omogućava povezivanje input-a i data svojstva u oba smera tzv. “two-way data binding” <textarea v-model="message" ></textarea>
v-if
v-else-if
v-else
Nema skraćenu sintaksu Kondicionalno renderovanje HTML-a <g v-if="vrednost === 5"></g>
v-show Nema skraćenu sintaksu Prikazuje ili sakriva element (uvek postoji u DOM-u za razliku od v-if koji renderuje elemenat tek ako je zadovoljen uslov) <child v-show=showComponent></child>
v-pre Nema skraćenu sintaksu Štampa sadržaj bez komapjliranja <div v-pre>{{ sadrzaj bez metoda }}</div>
v-text Nema skraćenu sintaksu Ažurira tekst elementa <span v-text="msg"></span>
isti efekat kao string interpolacija
<span>{{msg}}</span>
v-html Nema skraćenu sintaksu Ažurira HTML elementa <div v-html="nekiHtml"</div>
v-once Nema skraćenu sintaksu Samo jednom renderuje elemenat (nema re renderovanja) <div class=v-once>Samo jednom se renderuje</div>

U Vue.js postoji mogućnost da programer sam definiše nove tzv. custom direktive, ali to je naprednija tema i biće kasnije obradjena u nekom od članaka.

Podelite:

Ostavite komentar