Wie implementiert man benutzerdefinierte Anweisungen in Vue?-js-Tutorial-php.cn

In diesem Artikel wird hauptsächlich die Verwendung der nativen Anweisungen und benutzerdefinierten Anweisungen von Vue vorgestellt

1 🎜> Als ich anfing, Vue zu lernen, sah ich auf der offiziellen Website das Wort „Anleitung“. Ich war fassungslos, was? Was ist die Anweisung? Später, wenn wir weiterlesen, werden „v-for“, „v-show“ und „v-if“ wie diese Anweisungen genannt. Später, als ich fast mit Vue fertig war und anfing, Projekte zu schreiben, stellte ich fest, dass es nur wenige allgemeine Anweisungen gab, wie zum Beispiel „ .

Man kann sich das als eine Art vorstellen Syntaktischer Zucker oder eine Art Befehl. Die allgemeine Verwendung ist wie folgt: v-if”“v-show”“v-model”“v-for”“v-bind”“v-on” 1.v-text: string Verwendung: Um den textContent des Elements zu aktualisieren, müssen Sie {{Mustache }} Interpolation. 🎜>

2.v-show: any Verwendung: Schalten Sie das Anzeige-CSS-Attribut des Elements entsprechend dem wahren oder falschen Wert des Ausdrucks um.

3.v-if: any Verwendung: Rendern Sie den wahren oder falschen Zustand des Elements und seiner Datenbindungen/Komponenten. Wenn es ist, wird sein Inhalt als bedingter Block verwendet 🎜> 4.v-for:Array |. Objektnummer |. Verwendung: Elemente oder Vorlagenblöcke mehrmals basierend auf Quelldaten rendern:

5.v-on: Funktion |. erforderlich) Modifikator.

6.v-bind: beliebig Typ: beliebig (mit Argument) | Objekt (ohne Argument) Parameter: attrOrProp (optional); .camel --- wandelt den Attributnamen „kebab-case“ in „camelCase“ um. (unterstützt seit 2.1.0) Verwendung: Beim Binden von Klassen- und Stilattributen werden andere Wertetypen unterstützt, z. B. Objekte und Arrays , Unterkomponenten müssen Requisiten deklarieren

7.v-model: Limit Dies ist jedoch manchmal nicht der Fall Genug. In einem Projekt, an dem unser Unternehmen kürzlich gearbeitet hat, haben die Benutzeroberfläche und ich die Anforderungen besprochen. Ich sagte, es sei besser, diesem Eingabefeld einen Effekt hinzuzufügen Das Eingabefeld wird angezeigt, es wird fokussiert und ein springender Cursor angezeigt. Auf diese Weise kann der Benutzer klarer erkennen, wo er eingeben muss. >

Nachdem ich beim Schreiben der Funktion einen Konsens erzielt hatte, wurde mir plötzlich klar ? Ich verwende Vue, eine datengesteuerte Ansicht, daher kann es nicht sein.

Seitdem habe ich das Dokument gesucht und plötzlich eine Wortanweisung gefunden. Ich habe die Bedeutung dieses Wortes nachgeschlagen:

Nachdem ich es mir angesehen hatte Die allgemeine Bedeutung des Dokuments besteht darin, dass das V-Modell und die V-Show zwar bereits sehr einfach zu verwenden sind, das skrupellose Front-End-Personal jedoch nicht davon abhalten kann, verrückte Vorgänge durchzuführen. Daher ist dies in einigen Fällen erforderlich Um zugrunde liegende Operationen an gewöhnlichen DOM-Elementen auszuführen, werden zu diesem Zeitpunkt benutzerdefinierte Anweisungen verwendet. Natürlich war das offizielle Beispiel das, was ich brauchte, und ich gewann sofort eine Welle neuer Erkenntnisse.

Genau wie dieser HTML-Code, den ich beiläufig geschrieben habe, gibt es einen V-Fokus darin, den ich noch nie gesehen habe. Keine Sorge, lesen Sie weiter:

Richtig, dieser V-Fokus ist ein Befehl, den ich selbst definiert habe. Natürlich können Sie auch andere als Schlüsselwörter verwenden Name, bequem und kostenlos. document.getElementById(inputid).focus()

Schauen wir uns diese benutzerdefinierte Anweisung an. Ich glaube, jeder versteht den folgenden Teil. Es ist nichts weiter, als dass el sich konzentrieren und den Fokus gewinnen wird.

Was bedeutet das Update vorne? update bedeutet update. Dies ist eine Hook-Funktion, das heißt, die Funktion wird aufgerufen, wenn focusState aktualisiert wird. Beurteilen Sie weiterhin focusState. Wenn true, erhalten Sie den Fokus. Wenn wir die offizielle Dokumentation überprüfen, werden wir ebenfalls feststellen, dass die gleichen Hook-Funktionen wie folgt lauten: •bind: nur einmal aufgerufen, aufgerufen, wenn die Anweisung zum ersten Mal an das Element gebunden wird. Hier können einmalige Initialisierungseinstellungen vorgenommen werden.

•eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (die Existenz des übergeordneten Knotens ist garantiert, wird aber nicht unbedingt in das Dokument eingefügt).

•Update: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird, kann jedoch erfolgen, bevor der untergeordnete VNode aktualisiert wird. Der Wert der Richtlinie kann sich geändert haben oder auch nicht. Sie können jedoch unnötige Vorlagenaktualisierungen ignorieren, indem Sie die Werte vor und nach der Aktualisierung vergleichen.

•componentUpdated: Wird aufgerufen, nachdem der VNode der Komponente, in der sich die Anweisung befindet, und alle untergeordneten VNodes aktualisiert wurden.

•unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Mit diesen Vorgängen können wir viele weitere coole Tricks ausführen. Wenn wir beispielsweise ein großes Bild laden, können wir zunächst einen Vollton-Platzhalter verwenden und ihn dann direkt nach dem Laden des Bildes rendern. Zum Beispiel das Bild unten:

In diesem Beispiel wird die von uns aufgerufene Hook-Funktion eingefügt, die nach dem Einfügen des übergeordneten Knotens ausgelöst wird. Wenn das Bild nicht geladen wurde, ersetzen Sie es zunächst durch eine zufällige Farbe. Entfernen Sie nach dem Laden des Bildes die Hintergrundfarbe und ersetzen Sie sie durch das Bild.

Die Parameter, die wir hier übergeben, sind el----der aktuelle Dom-Knoten und die Bindung-----ein Objekt, einschließlich der folgenden Attribute:

•def: Hook-Funktion.

•rawName: Der Name des Befehls.

•value: Der an den Befehl übergebene Wert

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

So erstellen Sie ein automatisches Website-Erstellungsprojekt mit Vue (ausführliches Tutorial)

So implementieren Sie Node+Express personalisierter Chatraum?

So laden Sie die fünfstufigen Regionen im ganzen Land, nachdem Sie auf das zTree-Baum-Plug-in geklickt haben