Mit benutzerdefinierten Anweisungen können Sie die Funktionalität Ihrer Vue-Webseiten auf skalierbare und modulare Weise erweitern.
Direktiven sind Programmierkonstrukte, die angeben, wie Interpreter und Compiler Eingaben für eine Operation verarbeiten sollen. Vue-Direktiven erweitern die Funktionalität von HTML-Elementen in Vue-Vorlagen und ermöglichen eine direkte Manipulation des DOM.
Sie können Anweisungen in Vue verwenden, um unter anderem Ereignis-Listener hinzuzufügen. Sie fügen HTML-Elementen zusätzliche Attribute hinzu, um Anweisungen in Ihrer App zu verwenden.
Die Struktur von Vue-Anweisungen
Direktiven in Vue haben eine v- Präfix, um sie von regulären HTML-Attributen zu unterscheiden. Der v- Das Präfix teilt dem Vue-Compiler mit, dass es sich bei dem Attribut um eine Vue-Direktive handelt, damit er das Verhalten dieser Direktive verarbeiten und auf das HTML-Element anwenden kann.
Hier ist ein Beispiel, das die Verwendung von demonstriert V-Show Attribut, um den Inhalt eines anzuzeigen h2 Element:
"WAHR">Hallo Vue</h2>
Vue.js verfügt über viele weitere integrierte Anweisungen wie v-bind, v-wenn, Und v-on, sodass Sie Aufgaben wie ausführen können Datenbindung, bedingtes Rendern, Handhabung des Events, und mehr.
Definieren benutzerdefinierter Anweisungen in Vue
Sie können benutzerdefinierte Anweisungen definieren, um neue, wiederverwendbare Funktionen für Ihre Vue.js-Apps hinzuzufügen. Das Erstellen benutzerdefinierter Anweisungen erfordert zwei Hauptschritte. Zuerst registrieren Sie die Direktive lokal oder global. Anschließend definieren Sie das Verhalten der Direktive mit Lifecycle-Hooks.
Registrieren benutzerdefinierter Richtlinien
Sie können eine benutzerdefinierte Direktive in Vue je nach beabsichtigtem Umfang lokal oder global registrieren. Allerdings ist es üblicher, Richtlinien global zu registrieren. Dadurch wird sichergestellt, dass Anweisungen überall in Ihrer Vue-Anwendung verfügbar sind.
Sie können benutzerdefinierte Direktiven lokal registrieren, wenn Sie beabsichtigen, die benutzerdefinierte Direktive innerhalb einer einfachen Vue-Komponente zu verwenden. So können Sie sich registrieren v-changecolor Direktive vor Ort:
