Sintaksa Vue.js direktiva
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.
|
1 2 3 |
<button v-on:click.stop="showDialog">Click Here!</button> // Zamena za event.stopPropagation() <input type=”text” v-on:keyup.enter=”pressedEnter”> //Dodatno definiše dugme za event |
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.