Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen und ihrer Verwendung

1. Was ist eine Richtlinie?

Beim Erlernen von Vue werden Sie definitiv mit Anweisungen in Berührung kommen. Was also sind Anweisungen?

Vue bietet einige praktischere Ausgaben für Seiten und Daten. Diese Operationen werden als Anweisungen bezeichnet und durch v-xxx dargestellt, wie z. B. das Attribut <div v-xxx ></div> auf der HTML-Seite.

In Angular werden Befehle, die mit ng-xxx beginnen, beispielsweise als Anweisungen bezeichnet.

Der Befehl kapselt einige DOM-Verhaltensweisen, kombiniert mit Attributen als Code, der Code hat einen entsprechenden Wert und entsprechend den unterschiedlichen Werten werden die relevanten DOM-Operationen gebunden, d. h. einige Vorlagenoperationen können ausgeführt werden.

Einige häufig verwendete integrierte v-Direktiven in vue

• v-text: innerText-Eigenschaft eines Elements, kann nur in Doppel-Tags verwendet werden, hat die gleiche Wirkung wie {{ }} und wird selten verwendet
• v-html: das innerHTML eines Elements, das dem innerHTML eines Elements tatsächlich einen Wert zuweist
• v-show: Elemente anzeigen und ausblenden, Umschalten basierend auf CSS-Stilen. Wenn Sie sich entscheiden, es auszublenden, fügen Sie dem Stil des Elements „display: none“ hinzu.
• v-if: Die Einfüge- und Entfernungsvorgänge von Elementen entsprechen der Zerstörung und Erstellung von Elementen. Wenn der Wert des Ausdrucks falsch ist, wird ein <!----> als Markierung hinterlassen. Wenn der Wert von v-if in Zukunft wahr ist, wird das Element hier eingefügt (wenn es ein anderes gibt, hinterlassen Sie kein separates Feld).
• v-else-if: Das vorherige angrenzende Element muss v-if oder v-else-if haben
• v-else: Das vorherige angrenzende Element muss v-if oder v-else-if haben. Wenn sowohl v-if als auch v-else-if entsprechende Ausdrücke haben, kann v-else direkt geschrieben werden.
• v-for: Wird zum Loopen und Rendern eines Datensatzes (Array oder Objekt) verwendet. Sie müssen eine bestimmte Syntax verwenden: v-for="Alias ​​im Ausdruck". Hinweis: Wenn sich v-for und v-if im selben Knoten befinden, hat v-for eine höhere Priorität als v-if. Das heißt, v-if wird in jeder v-for-Schleife ausgeführt
• v-on: Wird hauptsächlich verwendet, um Dom-Ereignisse zu überwachen und dann einige Vorgänge auszuführen. Abgekürzt als [@]
• v-Modell: Wird verwendet, um eine bidirektionale Datenbindung für Formularsteuerelemente wie Eingabe/Textbereich zu erstellen.
• v-bind: Dynamisches Binden eines oder mehrerer Attribute, wird häufig zum Binden von Klasse, Stil, href usw. verwendet.
• v-once: Komponenten und Elemente werden nur einmal gerendert und bei Datenänderungen nicht erneut gerendert.

Vergleich zwischen v-if und v-show

• v-if ist wirklich bedingtes Rendern, da es sicherstellt, dass Ereignis-Listener und untergeordnete Komponenten innerhalb des bedingten Blocks während des Umschaltens ordnungsgemäß zerstört und neu erstellt werden.
• v-if ist auch verzögert; wenn die Bedingung beim ersten Rendern falsch ist, geschieht nichts, bis die Bedingung zum ersten Mal erfüllt ist. Dann wird der bedingte Block gerendert.
• Im Gegensatz dazu ist v-show viel einfacher. Unabhängig von den Anfangsbedingungen wird das Element immer gerendert und einfach basierend auf CSS umgeschaltet.

Im Allgemeinen sind die Umschaltkosten bei v-if höher, während die anfänglichen Renderkosten bei v-show höher sind. Wenn daher sehr häufiges Umschalten erforderlich ist, ist es besser, v-show zu verwenden, und wenn sich die Bedingungen während der Laufzeit selten ändern, ist es besser, v-if zu verwenden.

Im eigentlichen Entwicklungsprozess erfüllen diese integrierten Anweisungen möglicherweise nicht alle Anforderungen, oder Sie möchten den Elementen einige spezielle Funktionen hinzufügen. Zu diesem Zeitpunkt müssen wir die leistungsstarke und flexible Funktion „Benutzerdefinierte Anweisungen“ von Vue verwenden.

In der offiziellen API-Dokumentation gibt es einen solchen Satz: Benutzerdefinierte Anweisungen werden verwendet, um Low-Level-Operationen an gewöhnlichen DOM-Elementen durchzuführen. Das heißt, das Problem, das durch benutzerdefinierte Anweisungen gelöst wird, bzw. das Anwendungsszenario besteht darin, Operationen auf niedriger Ebene an gewöhnlichen DOM-Elementen durchzuführen, sodass wir benutzerdefinierte Anweisungen nicht blind verwenden können.

2. Hook-Funktion für benutzerdefinierte Anweisungen

Vue bietet 5 Hook-Funktionen für benutzerdefinierte Anweisungen:

• binden: Wird aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird und wird nur einmal ausgeführt. Hier können Sie eine einmalige Initialisierungseinrichtung durchführen.
• eingefügt: Das gebundene Element wird aufgerufen, wenn es in das DOM des übergeordneten Knotens eingefügt wird (nur die Existenz des übergeordneten Knotens ist garantiert).
• Update: wird aufgerufen, wenn die Komponente aktualisiert wird.
• componentUpdated: wird aufgerufen, wenn Komponenten und Unterkomponenten aktualisiert werden.
• unbind: Wird aufgerufen, wenn die Anweisung vom Element gelöst wird und nur einmal ausgeführt wird.

Beachten:

1. Mit Ausnahme der Hook-Funktionen update und componentUpdated enthält jede Hook-Funktion drei Parameter: el, binding und vnode

2. In jeder Funktion ist der erste Parameter immer el, das das DOM-Element darstellt, an das die Anweisung gebunden ist. Dieser el-Parameter ist ein natives JS-Objekt, sodass benutzerdefinierte Vue-Anweisungen verwendet werden können, um direkt mit dem DOM zu interagieren.

3.Binding ist ein Objekt, das die folgenden Attribute enthält: Name, Wert, alterWert, Ausdruck, Argument, Modifikatoren

4.oldVnode ist nur in Update- und ComponentUpdated-Hooks wirksam

5. Mit Ausnahme von el sind die Attribute binding und vnode schreibgeschützt

Einfach ausgedrückt ist die Hook-Funktion der Lebenszyklus. Das heißt, wenn eine Direktive an ein Element gebunden ist, gibt es innerhalb der Direktive 5 Lebenszyklus-Ereignisfunktionen. Erstellen Sie als Nächstes einen Fall, um das Auslösen dieser Hook-Funktionen anzuzeigen:

<p v-test>Dies ist ein Textabschnitt</p>
​
Standard exportieren {
    ... ...
    Anweisungen: {
        prüfen: {
              binden () {
                console.log('binden')
              },
              eingefügt () {
                console.log('eingefügt')
              },
              aktualisieren () {
                console.log('aktualisieren')
              },
              Komponente aktualisiert () {
                console.log('Komponente aktualisiert')
              },
              lösen () {
                console.log('aufheben')
              }
        }
    }
}

Ergebnis:

Beim Rendern der Seite werden die Binde- und Einfügefunktionen ausgelöst. Wann werden also die anderen drei Hook-Funktionen ausgelöst?

Offizielle Erklärung zum Update:

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).

Ich bin etwas verwirrt. Bezieht sich „VNode der Komponente“ auf das DOM-Element, das aktuell an die Direktive gebunden ist? Wenn ja, wird die Aktualisierung ausgelöst, solange sich der Status des aktuellen Elements ändert? Verwenden Sie v-show, um zwischen dem Anzeigen und Ausblenden von Elementen zu wechseln:

<p v-test v-show="show">Dies ist ein weiterer Textabschnitt</p>
<button @click="show = !show">Umschalten</button>

Standard exportieren {
  Daten () {
    zurückkehren {
      zeigen: wahr
    }
  }
}

Standardmäßig werden Bind und Inserted ausgelöst. Wenn auf die Schaltfläche geklickt wird, um die Anzeige des Elements umzuschalten, ist das Ergebnis wie folgt:

Das heißt, wenn der Stil eines Elements geändert wird, werden die Funktionen „Update“ und „componentUpdated“ ausgelöst. Welches Ereignis wird ausgelöst, wenn v-if verwendet wird?

<p v-test v-if="show">Dies ist ein weiterer Textabschnitt</p>
<button @click="show = !show">Umschalten</button>

Ergebnis:

Es wurde festgestellt, dass Unbind ausgelöst wird, weil v-if DOM-Elemente löscht oder neu erstellt. Wenn das an die Anweisung gebundene Element zerstört wird, wird das Unbind-Ereignis der Anweisung ausgelöst. Die neue Anzeige löst weiterhin Binden und Einfügen aus.

Zusammenfassen:

• bind(): Wird ausgelöst, wenn die Direktive an ein HTML-Element gebunden ist
• inserted(): Wird ausgelöst, wenn das an die Anweisung gebundene Element in den übergeordneten Knoten eingefügt wird
• update(): Wird ausgelöst, wenn sich der Status/Stil oder Inhalt des an die Direktive gebundenen Elements (bezieht sich hier auf die an das Element gebundenen Vue-Daten) ändert
• componentUpdated(): Wird ausgelöst, wenn update() ausgeführt wird
• unbind(): Wird ausgelöst, wenn das an die Direktive gebundene Element aus dem DOM entfernt wird

Hier einige Beispiele für Anwendungsszenarien

1. Das Eingabefeld erhält automatisch den Fokus (offizielles Beispiel).

2. Klicken Sie außerhalb des Dropdown-Menüs, um das Menü auszublenden.

3. Überprüfen Sie die eingegebene E-Mail-Adresse und Telefonnummer.

In den oben genannten Fällen können bei der Durchführung von Projekten stattdessen andere Methoden verwendet werden, aber benutzerdefinierte Vue-Anweisungen können an einer Stelle definiert und global aufgerufen werden, wodurch der Code prägnanter, effizienter und einfacher zu warten wird.

Die Registrierungsmethoden von Anweisungen sind dieselben wie die Registrierungsmethoden von „Filtern“, „Mixins“ und „Komponenten“. Sie werden in zwei Typen unterteilt: einer ist die globale Registrierung und der andere ist die lokale Registrierung.

3. Globale Anweisungen

// Füge dem Element einen zufälligen Hintergrund hinzu <div v-bgcolor></div>
   
Vue.direktive('bgcolor', {
    binden: Funktion(el, Bindung, vnode) {
        el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
    }
})

Hinweis: Beim Definieren muss dem Kommandonamen kein v- vorangestellt werden. Beim Aufruf muss dem Kommandonamen jedoch ein v- vorangestellt werden.

4. Lokale Anweisungen

// Gleiche Ebene wie Daten und Methoden Methoden: {},
Anweisungen: {
    Hintergrundfarbe:
         binden: Funktion(el, Bindung) {
            el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
        }
    }
}

Ich persönlich bevorzuge die Methode der globalen Registrierung, da die jetzt verwendeten benutzerdefinierten Anweisungen universell und wiederverwendbar sein sollten. Daher ist es sinnvoller, Anweisungen für das gesamte Projekt bereitzustellen, und nicht nur für eine Komponente. Wenn es nur an einer Stelle verwendet wird, können Sie die Funktion einfach direkt hinzufügen. Warum dieser ganze Aufwand?

5. Benutzerdefinierte Anweisungen mit Parametern

<div v-bgcolor='{Farbe: 'orange'}'></div>

Vue.direktive('bgcolor', {
    binden: Funktion(el, Bindung) {
        el.style.backgroundColor = Bindung.Wert.Farbe;
    }
})

6. Funktionsabkürzung

Wenn Sie beim Binden und Aktualisieren dasselbe Verhalten auslösen möchten und sich nicht um andere Hooks kümmern, können Sie es wie folgt schreiben:

// Global Vue.directive('bgcolor', Funktion (el, Bindung) {
      el.style.backgroundColor = Bindung.Wert
})

// lokale Anweisungen: {
    bgcolor: (el, Bindung) => {
        el.style.backgroundColor = Bindung.Wert  
    }
}

7. Anwendungsbeispiele

Nachdem Sie mit der Erstellungsmethode und den Parametern der Anweisung vertraut sind, werden wir sie verwenden, um zwei praktische Fälle zu erstellen.

Die Funktion zum Ausblenden des Untermenüs durch Klicken auf die leere Stelle wird durch Anweisungen realisiert. Der spezifische Code lautet wie folgt:

// klickOutside.js
Standard exportieren {
    binden (el, Bindung) {
        const self = {} // Definieren Sie eine private Variable, um die Aufhebung der Bindung von Ereignis-Listenern zu ermöglichen self.documentHandler = (e) => {
            if (el.contains(e.target)) { // Hier bestimmen wir, ob das gebundene Element das Klickelement enthält, wenn ja, returnieren wir false
            }
            if (binding.value) { // Bestimmen Sie, ob der Wert in der Anweisung gebunden ist binding.value(e) // Wenn eine Funktion gebunden ist, rufen Sie diese Funktion auf. Hier ist binding.value die Methode handleClose}
            returniere wahr
        }
        document.addEventListener('klicken', self.documentHandler)
    },
    lösen (el) {
        //Ereignisüberwachung entfernen document.removeEventListener('click', self.documentHandler)
        self.documentHandler löschen
    }
}

Verwendung im Bauteil:

<Vorlage>
    <div>
        <div v-show="istAnzeigen" v-clickoutside="handleClickOutside" @click="anzeigenOrAusblenden">
            Untermenü... 
        </div>
    </div>
</Vorlage>
​
<Skript>
    clickOutside aus „./js/clickOutside“ importieren
    
    Standard exportieren {
        ... ...
        Anweisungen: {
            Klicke nach außen
        },
        Daten() {
            zurückkehren {
                isShow: true,
            };
        },
        Methoden: {
            handleOutsideClick() {
                this.isShow = false
            }
        }
    }
</Skript>

Benutzerdefinierte Anweisungen zum Optimieren des Bildladens: Während des Ladens des Bildes wird ein grauer Hintergrund verwendet, um den Platz auszufüllen, bevor der Ladevorgang abgeschlossen ist, und das Bild wird direkt nach dem Laden angezeigt.

<Vorlage>
    <div>
        <!-- Parameter können nicht direkt mit URL-Adressen gefüllt werden-->
        <img v-imgUrl='URL' /> 
    </div>
</Vorlage>
​
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                URL: „../src/assets/logo.png“
            }
        }
    }
</Skript>

// Globale Registrierung Vue.directive('imgUrl', function (el, binding) {
    el.style.backgroundColor = '#FEFEFE' //Hintergrundfarbe festlegen var img = new Image()
    img.src = binding.value // Parameter nach der binding.value-Anweisung img.onload = function () {
        el.style.backgroundColor = ''
        el.src = Bindungswert
    }
})

Oben finden Sie eine ausführliche Erläuterung der benutzerdefinierten Anweisungen von Vue und ihrer Verwendung. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!