Cilj okvira je pružiti takve značajke koje programerima olakšavaju i ubrzavaju razvojni proces. Vue.js je takav JavaScript obogaćen značajkama koji pruža brojne ugrađene funkcije i smjernice za brzi razvojni proces. Ali, moraju doći neki scenariji kada vam je potrebna neka funkcionalnost koja nije dostupna u okviru, pa morate sami izgraditi.
U ovom ćemo postu naučiti i pogledati ugrađene smjernice koje pruža Vue.js, a naučit ćemo i stvoriti i koristiti vlastitu Vue direktivu po mjeri.
Direktiva
Direktive su atributi koje možete povezati s DOM elementima, prefiksirani klauzulom "v-" koja pomaže knjižnici da zna da je to posebna vrsta sintakse koja se koristi za izvršavanje nekih zadataka. Direktive se obično koriste za izravnu manipulaciju DOM-om. Neke od najčešće korištenih i najpoznatijih direktiva su "v-if", "v-for" i "v-show".
Direktive se koriste za primjenu učinaka na DOM elemente, ali reaktivno. Razumijemo to na primjeru:
Direktiva „v-if“
Možete pregledati tekst.
U gornjoj oznaci, "v-if" je direktiva koja će izbrisati ili dodati oznaku odlomka "
", Ovisi o istinitosti varijable" showText ".
"V-show" Direktiva
Slično tome, imamo "v-show" direktivu koja može izvoditi istu gore opisanu funkcionalnost:
Možete pregledati tekst.
Suptilna razlika između "v-if" i "v-show" je u tome što "v-if" ne prikazuje element tijekom učitavanja stranice ako vezana varijabla nije istinita i učitava se kad varijabla postane istinita. Suprotno tome, "v-show" će prikazati element tijekom učitavanja web stranice, ali ga sakriti. Dakle, "v-if" je vremenski učinkovit pri učitavanju stranice i oduzima vrijeme kada varijabla postane istinita. Mora prikazati cijeli element dok je "v-show" vremenski učinkovit prema istinitosti varijable koja oduzima vrijeme u trenutku učitavanja web stranice.
U redu! Pogledajmo direktivu koja uzima argument.
"V-bind" direktiva
Druga najčešće korištena direktiva je "v-bind", koja se koristi za interakciju i ažuriranje HTML atributa. Na primjer, ako želimo povezati neku varijablu s atributom "href" oznaku, atribut "href" možemo povezati ovako:
Direktiva „v-on“
Baš kao i "v-bind" direktiva, Vue pruža "v-on" direktivu za vezanje varijable za preslušavanje događaja pokrenutih u DOM-u. Na primjer, za preslušavanje događaja Click i vezivanje neke varijable za njega, sintaksa će ići ovako:
U obrnutim zarezima možemo pružiti izraz kao i funkcije.
Zaključak
Saznali smo o direktivama u Vueu i vidimo kako se koristiti direktivama u Vueu.js. Razgovarali smo o nekim od najčešće korištenih i osnovnih ugrađenih smjernica Vue-a.js, što puno pomaže i štedi ogromnu količinu vremena u razvoju.