Phenquestions
Un cadru își propune să ofere astfel de caracteristici care fac procesul de dezvoltare mai ușor și mai rapid pentru dezvoltatori. Vue.js este un astfel de cadru JavaScript îmbogățit cu caracteristici, care oferă multe funcții și directive încorporate pentru a face rapid procesul de dezvoltare. Dar, trebuie să apară anumite scenarii atunci când aveți nevoie de o anumită funcționalitate care nu este disponibilă de cadru, deci trebuie să vă construiți propriile.
În acest post, vom învăța și vom arunca o privire asupra directivelor încorporate furnizate de Vue.js, și vom învăța, de asemenea, să creăm și să folosim propria noastră directivă Vue personalizată.
Directivă
Directivele sunt atribute pe care le puteți lega cu elementele DOM, prefixate de clauza „v-” care ajută la cunoașterea bibliotecii că este un tip special de sintaxă utilizat pentru efectuarea unor sarcini. Directivele sunt de obicei utilizate pentru manipularea directă a DOM. Unele dintre cele mai folosite și faimoase directive sunt „v-if”, „v-for” și „v-show”.
Directivele sunt folosite pentru a aplica efecte asupra elementelor DOM, dar reactiv. Să o înțelegem cu un exemplu:
Directiva „v-dacă”
Puteți vizualiza textul.
În eticheta de mai sus, „v-if” este o directivă care va șterge sau va adăuga eticheta de paragraf „
”, Depinde de veridicitatea variabilei„ showText ”.
Directiva „v-show”
În mod similar, avem directiva „v-show” care poate îndeplini aceeași funcționalitate descrisă mai sus:
Puteți vizualiza textul.
Diferența subtilă dintre „v-if” și „v-show” este că „v-if” nu redă elementul în timpul încărcării paginii dacă variabila legată nu este adevărată și se încarcă când variabila devine adevărată. În schimb, „v-show” va reda elementul la timpul de încărcare al paginii web, dar îl ascunde. Deci, „v-if” este eficient în timp la încărcarea paginii și consumă mult timp când variabila devine adevărată. Trebuie să redea întregul element în timp ce „v-show” este eficient în funcție de veridicitatea variabilei care consumă timp la timpul de încărcare al paginii web.
Bine! Să aruncăm o privire la o directivă care ia argumentul.
Directiva „v-bind”
O altă directivă cea mai utilizată este „v-bind”, care este utilizată pentru interacțiunea și actualizarea atributelor HTML. De exemplu, dacă vrem să legăm o variabilă la atributul „href” al tag, putem lega atributul „href” astfel:
Directiva „v-on”
La fel ca directiva „v-bind”, Vue oferă o directivă „v-on” pentru legarea variabilei pentru ascultarea evenimentelor declanșate în DOM. De exemplu, pentru ascultarea evenimentului Click și legarea unei variabile la acesta, sintaxa ar merge astfel:
În virgulele inversate, putem furniza expresia, precum și funcții.
Concluzie
Am aflat despre directivele din Vue și vedem cum să folosim directivele din Vue.js. Am discutat despre unele dintre cele mai utilizate și de bază directive încorporate ale Vue.js, care ajută foarte mult și economisește o cantitate imensă de timp în dezvoltare.
