Phenquestions
Ein Framework zielt darauf ab, solche Funktionen bereitzustellen, die den Entwicklungsprozess für die Entwickler einfacher und schneller machen. Vue.js ist ein solches funktionsreiches JavaScript-Framework, das viele integrierte Funktionen und Anweisungen bietet, um den Entwicklungsprozess schnell zu gestalten. Es müssen jedoch einige Szenarien auftreten, in denen Sie Funktionen benötigen, die vom Framework nicht verfügbar sind, sodass Sie Ihre eigenen erstellen müssen.
In diesem Beitrag lernen wir die eingebauten Anweisungen des Vue . kennen und werfen einen Blick darauf.js-Framework, und wir werden auch lernen, unsere eigene maßgeschneiderte Vue-Direktive zu erstellen und zu verwenden.
Richtlinie
Direktiven sind Attribute, die Sie mit den DOM-Elementen verknüpfen können, denen die Klausel „v-“ vorangestellt ist, die der Bibliothek hilft, zu erkennen, dass es sich um eine spezielle Art von Syntax handelt, die zum Ausführen einiger Aufgaben verwendet wird. Direktiven werden normalerweise zur direkten Manipulation von DOM . verwendet. Einige der am häufigsten verwendeten und bekanntesten Direktiven sind „v-if“, „v-for“ und „v-show“.
Die Direktiven werden verwendet, um Effekte auf DOM-Elemente anzuwenden, aber reaktiv. Lassen Sie es uns an einem Beispiel verstehen:
„v-if“-Richtlinie
Sie können den Text anzeigen.
Im obigen Tag ist das „v-if“ eine Anweisung, die das Absatz-Tag „
“, hängt von der Wahrhaftigkeit der Variablen „showText“ ab.
„v-show“-Richtlinie
In ähnlicher Weise haben wir die Anweisung „v-show“, die die oben beschriebene Funktionalität ausführen kann:
Sie können den Text anzeigen.
Der feine Unterschied zwischen „v-if“ und „v-show“ besteht darin, dass „v-if“ das Element beim Laden der Seite nicht rendert, wenn die gebundene Variable nicht wahr ist, und geladen wird, wenn die Variable wahr wird. Im Gegensatz dazu rendert „v-show“ das Element zur Ladezeit der Webseite, blendet es jedoch aus. „v-if“ ist also zeiteffektiv bei der Ladezeit der Seite und zeitaufwändig, wenn die Variable wahr wird. Es muss das gesamte Element rendern, während "v-show" zeiteffektiv auf die Richtigkeit der Variablen zum Laden der Webseite zeitaufwendig ist.
In Ordung! Schauen wir uns eine Direktive an, die das Argument übernimmt.
„v-bind“-Richtlinie
Eine weitere am häufigsten verwendete Direktive ist „v-bind“, die für die Interaktion und Aktualisierung der HTML-Attribute verwendet wird. Wenn wir zum Beispiel eine Variable an das „href“-Attribut des Tag können wir das „href“-Attribut wie folgt binden:
„v-on“-Richtlinie
Genau wie die „v-bind“-Direktive bietet Vue eine „v-on“-Direktive zum Binden der Variablen zum Abhören der im DOM ausgelösten Ereignisse. Um beispielsweise das Click-Ereignis abzuhören und eine Variable daran zu binden, würde die Syntax wie folgt aussehen:
In den Anführungszeichen können wir den Ausdruck sowie Funktionen angeben.
Fazit
Wir haben die Direktiven in Vue kennengelernt und sehen, wie man die Direktiven in Vue verwendet.js. Wir haben einige der am häufigsten verwendeten und grundlegenden integrierten Anweisungen von Vue . besprochen.js, was sehr hilft und enorm viel Zeit bei der Entwicklung spart.
