Phenquestions
Cieľom rámca je poskytnúť také funkcie, ktoré vývojárom uľahčia a urýchlia vývojový proces. Vue.js je taký funkciami obohatený rámec JavaScriptu, ktorý poskytuje mnoho vstavaných funkcií a smerníc na rýchle uskutočnenie procesu vývoja. Musia však prísť niektoré scenáre, keď potrebujete nejaké funkcie, ktoré rámec neposkytuje, takže si musíte vytvoriť svoj vlastný.
V tomto príspevku sa dozvieme a pozrieme sa na vstavané smernice poskytované Vue.js framework a taktiež sa naučíme vytvárať a používať našu vlastnú Vue smernicu na mieru.
Smernice
Direktívy sú atribúty, ktoré môžete prepojiť s prvkami DOM. Pred nimi je klauzula „v-“, ktorá pomáha knižnici spoznať, že ide o špeciálny typ syntaxe používanej na vykonávanie niektorých úloh. Direktívy sa zvyčajne používajú na priamu manipuláciu s DOM. Medzi najpoužívanejšie a najznámejšie smernice patria „v-if“, „v-for“ a „v-show“.
Tieto smernice sa používajú na aplikáciu efektov na prvky DOM, ale reaktívne. Poďme to pochopiť na príklade:
Smernica „v-if“
Môžete zobraziť text.
V značke vyššie je „v-if“ smernica, ktorá odstráni alebo pridá značku odseku „
”, Závisí od pravdivosti premennej“ showText ”.
Smernica „v-show“
Podobne máme smernicu „v-show“, ktorá môže vykonávať rovnakú funkcionalitu opísanú vyššie:
Môžete zobraziť text.
Jemný rozdiel medzi „v-if“ a „v-show“ spočíva v tom, že výraz „v-if“ nevytvára prvok pri načítaní stránky, ak viazaná premenná nie je pravdivá, a načíta sa, keď sa premenná stane pravdivou. Naopak, „v-show“ vykreslí prvok v čase načítania webovej stránky, ale skryje ho. „V-if“ je teda časovo efektívne v čase načítania stránky a časovo náročné, keď sa premenná splní. Musí vykresliť celý prvok, zatiaľ čo „v-show“ je časovo efektívny z hľadiska pravdivosti premennej, časovo náročnej pri načítaní webovej stránky.
Dobre! Pozrime sa na smernicu, ktorá argumentuje.
Smernica „v-bind“
Ďalšou najbežnejšie používanou smernicou je „v-bind“, ktorá sa používa na interakciu a aktualizáciu atribútov HTML. Napríklad, ak chceme viazať nejakú premennú na atribút „href“ v tag, môžeme viazať atribút „href“ takto:
Smernica „v-on“
Rovnako ako smernica „v-bind“, Vue poskytuje smernicu „v-on“ na viazanie premennej na počúvanie udalostí vyvolaných v DOM. Napríklad na počúvanie udalosti Click a viazanie nejakej premennej na ňu by syntax vyzerala takto:
V obrátených čiarkach môžeme poskytnúť výraz, ako aj funkcie.
Záver
Dozvedeli sme sa o smerniciach vo Vue a zistili sme, ako ich používať vo Vue.js. Diskutovali sme o niektorých najpoužívanejších a základných zabudovaných smerniciach Vue.js, čo veľmi pomáha a šetrí pri vývoji obrovské množstvo času.
