Rámec si klade za cíl poskytnout takové funkce, které vývojářům usnadní a zrychlí proces vývoje. Vue.js je takový rámec JavaScript obohacený o funkce, který poskytuje mnoho vestavěných funkcí a směrnic pro rychlé provedení procesu vývoje. Ale musí přijít několik scénářů, když potřebujete nějakou funkcionalitu, která není k dispozici v rámci, takže si musíte vytvořit svůj vlastní.
V tomto příspěvku se naučíme a podíváme se na integrované směrnice poskytované Vue.js framework a také se naučíme vytvářet a používat naši vlastní směrnici Vue.
Směrnice
Direktivy jsou atributy, které můžete propojit s prvky DOM, s předponou klauzule „v-“, která pomáhá knihovně poznat, že se jedná o speciální typ syntaxe používané k provádění některých úkolů. Direktivy se obvykle používají pro přímou manipulaci DOM. Mezi nejpoužívanější a nejznámější směrnice patří „v-if“, „v-for“ a „v-show“.
Směrnice se používají k aplikaci efektů na prvky DOM, ale reaktivně. Pochopme to na příkladu:
Směrnice „v-if“
Můžete zobrazit text.
Ve výše uvedené značce je „v-if“ směrnice, která odstraní nebo přidá značku odstavce „
”, Záleží na pravdivosti proměnné“ showText ”.
Směrnice „v-show“
Podobně máme direktivu „v-show“, která může provádět stejné funkce popsané výše:
Můžete zobrazit text.
Jemný rozdíl mezi „v-if“ a „v-show“ spočívá v tom, že „v-if“ nevytvoří prvek při načítání stránky, pokud vázaná proměnná není pravdivá a načte se, když se proměnná stane pravdivou. Naproti tomu „v-show“ vykreslí prvek v době načítání webové stránky, ale skryje jej. „V-if“ je tedy časově efektivní v době načítání stránky a časově náročné, když se proměnná splní. Musí vykreslit celý prvek, zatímco „v-show“ je časově efektivní na pravdivost proměnné časově náročné v době načítání webové stránky.
V pořádku! Pojďme se podívat na směrnici, která vezme argument.
Směrnice „v-bind“
Další nejpoužívanější směrnicí je „v-bind“, která se používá k interakci a aktualizaci atributů HTML. Například pokud chceme vázat nějakou proměnnou na atribut „href“ v tag, můžeme vázat atribut „href“ takto:
Směrnice „v-on“
Stejně jako směrnice „v-bind“ poskytuje Vue směrnici „v-on“ pro vázání proměnné pro poslech událostí vystřelených v DOM. Například pro poslech události Click a navázání nějaké proměnné na ni by syntaxe vypadala takto:
V obrácených čárkách můžeme poskytnout výraz i funkce.
Závěr
Dozvěděli jsme se o směrnicích ve Vue a uvidíme, jak používat směrnice ve Vue.js. Diskutovali jsme o některých nejpoužívanějších a základních integrovaných směrnicích Vue.js, což hodně pomáhá a šetří obrovské množství času při vývoji.