Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Vorwort

In Vue-Projekten verwenden wir häufig integrierte Anweisungen wie v-show, v-if, v-for usw. Darüber hinaus bietet Vue uns auch sehr praktische benutzerdefinierte Anweisungen, um Low-Level-Operationen an gewöhnlichen DOM-Elementen durchzuführen. Machen Sie unsere tägliche Entwicklung bequemer und schneller. Dieser Artikel fasst die Verwendung und gängigen Szenarien von benutzerdefinierten Anweisungen zusammen.

Text

1. Globale Registrierung

Hier registrieren wir global eine Direktive, um dem Element mithilfe dieser Direktive einen roten Rahmen hinzuzufügen und den Stil durch die Direktive zu manipulieren.

<div id="app">
    <h1 type="text" v-red>Ich bin ein h1-Element</h1>
    <div v-red>Ich bin ein Div-Element</div>
    <p v-red>Ich bin ein P-Element</p><br>
    <Eingabetyp="Text" v-red><br>
  </div>
  <Skript>
    Vue.direktive("rot", {
      // Definition der Anweisung eingefügt: function (el) {
        konsole.log(111);
        el.style.border = "1px durchgehend rot"
      }
    })
    neuer Vue({
      el: "#app",
      Daten() {
        zurückkehren {
        }
      },
      Methoden: {
      }
    })
  </Skript>

Die Ergebnisse sind wie folgt:

Im obigen Code wird eine globale Direktive über die Vue.directive-Methode registriert. Die Funktion erhält zwei Parameter. Der erste Parameter ist der Direktivenname, der über „v-name“ im Element an das Element gebunden ist. Der zweite Parameter ist die Hook-Funktion, die das gebundene Element verarbeitet und später ausführlich vorgestellt wird.

2. Teilregistrierung

Es ist im Grunde dasselbe wie die globale Registrierungsanweisung, aber der Umfang ist anders. Hier wird innerhalb der Komponente eine benutzerdefinierte Anweisung registriert, um einen blauen Rahmen für die gebundenen Elemente innerhalb der Komponente festzulegen.

<div id="app">
    <Randelement></Randelement>
  </div>
  <Skript>
    Vue.direktive("rot", {
      // Definition der Anweisung eingefügt: function (el) {
        konsole.log(111);
        el.style.border = "1px durchgehend rot"
      }
    })
    // Unterkomponente definieren Vue.component("border-item", {
      Anweisungen: {
        Blau:
          // Definition der Anweisung eingefügt: function (el) {
            el.style.border = "1px durchgehend blau"
          }
        }
      },
      Vorlage: `<div>
                    <h1 v-blue>Ich bin ein untergeordnetes H1-Element</h1>
                    <div v-blue>Ich bin ein untergeordnetes Komponenten-Div-Element</div>
                    <p v-blue>Ich bin ein untergeordnetes Komponenten-p-Element</p><br>
                    Unterkomponente<input type="text" v-blue><br>
                    <p v-blue>Ich bin ein Unterkomponenten-h1-Element. Ich verwende sowohl globale als auch lokale benutzerdefinierte Anweisungen.</p>
                </div>`
    })
    neuer Vue({
      el: "#app",
      Daten() {
        zurückkehren {
        }
      },
      Methoden: {
      }
    })
  </Skript>

Die Ergebnisse sind wie folgt:

Durch den obigen Code wird in der untergeordneten Komponente über das Direktivenobjekt eine Komponente registriert, die einen blauen Rahmen für das gebundene Element setzt. Das Objekt übergibt ein Schlüssel-Wert-Paar, wobei der Schlüssel den Direktivennamen darstellt, der über „v-name“ verwendet wird, und sein Wert einem Objekt entspricht, das die relevanten Hook-Funktionen der Direktive enthält. Die Hook-Funktion wird später noch genauer erklärt.

Hinweis: Wenn dasselbe Element globale und lokale Anweisungen verwendet, um dasselbe Attribut zu bearbeiten, wird zuerst die lokale benutzerdefinierte Anweisung verwendet. Hier wird das Prinzip der Nähe angewendet, und die lokale Anweisung hat beim Aufrufen der einheitlichen Attributoperation Vorrang vor der globalen Anweisung.

3. Hook-Funktion und Parametereinstellungen

Nach dem Lesen der obigen Einführung wissen wir alle, wie man Anweisungen verwendet, aber wir müssen noch die darin enthaltene Hook-Funktion verstehen. Nur wenn wir die Aufrufzeit der Hook-Funktion verstehen, können wir eine perfektere Anweisung definieren.

Ein Direktivendefinitionsobjekt kann die folgenden Hook-Funktionen bereitstellen (alle optional):

* binden: Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird. Hier können Sie eine einmalige Initialisierungseinrichtung durchführen.

* eingefügt: wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es garantiert nur, dass der übergeordnete Knoten existiert, wurde aber nicht notwendigerweise in das Dokument eingefügt).

* Update: wird aufgerufen, wenn der VNode der Komponente aktualisiert wird. Dies kann jedoch geschehen, bevor die untergeordneten VNodes aktualisiert werden. Der Wert der Anweisung kann sich geändert haben, muss es aber nicht. Sie können jedoch unnötige Vorlagenaktualisierungen ignorieren, indem Sie die Werte vor und nach der Aktualisierung vergleichen (detaillierte Parameter der Hook-Funktion finden Sie weiter unten).

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

* unbind: Wird nur einmal aufgerufen, wenn die Anweisung vom Element getrennt wird.

Parameter der Hook-Funktion Die folgenden Parameter werden an die Befehls-Hook-Funktion übergeben:

* el: Das Element, an das die Anweisung gebunden ist, mit der das DOM direkt manipuliert werden kann.

* Bindung: ein Objekt mit den folgenden Eigenschaften:

* Name: Der Befehlsname ohne das Präfix „v-“.

* Wert: der Bindungswert der Direktive, z. B.: in v-my-directive="1+1" ist der Bindungswert 2.

* oldValue: Der vorherige an die Direktive gebundene Wert, nur in den Hooks „Update“ und „ComponentUpdated“ verfügbar. Verfügbar, unabhängig davon, ob sich der Wert geändert hat oder nicht.

* Ausdruck: ein Befehlsausdruck in Zeichenfolgenform. Beispielsweise lautet der Ausdruck in v-my-directive="1+1" "1+1".

* arg: An den Befehl übergebener Parameter, optional. In v-my-directive:foo lautet der Parameter beispielsweise „foo“.

* Modifikatoren: Ein Objekt, das Modifikatoren enthält. Beispiel: In v-my-directive.foo.bar ist das Modifikatorobjekt {foo:true,bar:true}.

* vnode: virtueller Knoten, der durch Vue-Kompilierung generiert wird.

* oldVnode: Der vorherige virtuelle Knoten, nur in den Hooks „Update“ und „componentUpdated“ verfügbar.

4. Flexible Nutzung

(1) Dynamische Befehlsparameter

Die Parameter einer Direktive können dynamisch sein. Beispielsweise kann in v-mydirective:[argument]="value" der Argumentparameter entsprechend den Komponenteninstanzdaten aktualisiert werden! Dadurch können benutzerdefinierte Anweisungen flexibel in Anwendungen verwendet werden. Im folgenden Beispiel werden Anweisungen zum Implementieren der Bindung von Elementrändern und der Bindung von Elementhintergrundeigenschaften festgelegt.

<div id="app">
    <h1 v-border="redBorder">Ich bin das Element 1 des dynamischen Anweisungsparameters</h1>　
     <h1 v-color:[pro]="redBg">Ich bin das Element 2 des dynamischen Anweisungsparameters</h1>
  </div>
  <Skript>
    Vue.direktive("Grenze", {
      binden: Funktion (el, Bindung, vnode) {
        console.log("el", el);
        console.log("Bindung", Bindung);
        Konsole.log("vnode", vnode);
        el.style.border = Bindung.Wert
      }
    })
    Vue.direktive("Farbe", {
      binden: Funktion (el, Bindung, vnode) {
        console.log("el", el);
        console.log("Bindung", Bindung);
        Konsole.log("vnode", vnode);
        el.style[Bindung.arg] = Bindung.Wert
      }
    })
    neuer Vue({
      el: "#app",
      Daten() {
        zurückkehren {
          redBorder: "1px durchgehend rot",
          pro: "Hintergrundfarbe",
          redBg: "grün"
        }
      },
      Methoden: {
      }
    })
  </Skript>

Die Ergebnisse sind wie folgt:

Werfen Sie übrigens einen Blick auf die aufgedruckten Parameter:

Der obige Code führt zwei Methoden für benutzerdefinierte Anweisungen für dynamische Parameter ein. Er ist sehr flexibel zu verwenden und Sie können die geeignete Methode entsprechend den tatsächlichen Anforderungen auswählen.

(2) Funktionsabkürzung

In vielen Fällen möchten Sie möglicherweise beim Binden und Aktualisieren dasselbe Verhalten auslösen und kümmern sich nicht um andere Hooks. Schreiben Sie beispielsweise:

    Vue.direktive("Grenze", 
      Funktion (el, Bindung, vnode) {
        el.style.border = Bindung.Wert
      }
    )

(3) Objektliteralmethode

Wenn Sie das Element der benutzerdefinierten Direktive binden, übergeben Sie Daten im Format eines Objekts und verwenden Sie sie dann in der Kurzform der Funktion.

<div id="app">
    <h1 v-color="{ color: 'red', text: 'hallo!' }">Ich bin ein Objektliteral</h1>
  </div>
  <Skript>
    // Objektliteral Vue.directive('color', function (el, binding) {
      console.log(Bindung.Wert.Farbe) // => "rot"
      console.log(binding.value.text) // => "Hallo!"
      el.style.color = Bindung.Wert.color
      el.innerHTML = Bindung.Wert.Text
    })
    neuer Vue({
      el: "#app",
      Daten() {
        zurückkehren {
        }
      },
      Methoden: {
      }
    })
  </Skript>

Die Ergebnisse sind wie folgt:

5. Einsatzszenarien

Zusätzlich zu den oben genannten Anwendungsszenarien verwenden wir im Projekt beispielsweise benutzerdefinierte Anweisungen, um die Berechtigungsprobleme einer Front-End-Seite zu steuern. In der Anweisung wird ein Parameter festgelegt. Wenn die Seite geladen oder das Übermittlungsereignis ausgelöst wird, wird zuerst das Ereignis der benutzerdefinierten Anweisung ausgeführt, um anzufordern und zu überprüfen, ob diese Berechtigung vorliegt, und entsprechende Vorgänge auszuführen. Es gibt viele Stellen, an denen es verwendet werden kann, und es muss im Projekt kontinuierlich geübt werden. Möglicherweise gibt es andere alternative Methoden, die nicht verwendet werden. Dies erfordert, dass wir diese Grundkenntnisse weiter erlernen und festigen und die beste Lösung anwenden, um das Projekt abzuschließen.

Abschließende Gedanken

Damit ist dieser Artikel über die grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue abgeschlossen. Weitere Informationen zur Verwendung von benutzerdefinierten Anweisungen in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!