Detaillierte Erklärung der Filter und Anweisungen in Vue

Es gibt zwei Arten von Filtern in Vue: lokale Filter und globale Filter

Filter können für einige gängige Textformatierungen verwendet werden. Filter können an zwei Stellen verwendet werden: Interpolation mit doppelten geschweiften Klammern und V-Bind-Ausdrücken (letzteres wird seit 2.1.0+ unterstützt). Filter sollten am Ende eines JavaScript-Ausdrucks hinzugefügt werden, gekennzeichnet durch das „Pipe“-Symbol (offizielle Dokumentation)

<!-- in doppelten geschweiften Klammern -->
{{ Nachricht | Großschreibung }}

<!-- In `v-bind` -->
<div v-bind:id="rawId | formatId"></div>

1. Definieren Sie einen globalen Filter ohne Parameter

Vue.filter('capitalize', function(msg) {// msg ist ein fester Parameter. Das sind die Daten, die Sie filtern müssen, wenn (!value) return ''
            Wert = Wert.toString()
            Rückgabewert.charAt(0).toUpperCase() + Wert.slice(1)
       })

2. Definieren Sie einen globalen Filter mit Parametern

 <div id="app">
            <p>{{ msg | msgFormat('verrückt','--')}}</p>
        </div>

        <Skript>
            // Definieren Sie einen globalen Vue-Filter mit dem Namen msgFormat
            Vue.filter('msgFormat', Funktion(msg, arg, arg2) {
                // String-Ersetzungsmethode, der erste Parameter kann zusätzlich zum Schreiben eines Strings auch eine reguläre Rückgabe msg.replace(/simple/g, arg+arg2) definieren.
            })
      </Skript>

3. Lokaler Filter

Die Definition und Verwendung lokaler Filter mit und ohne Parameter sind dieselben wie bei globalen Filtern. Der einzige Unterschied besteht darin, dass lokale Filter in der Vue-Instanz definiert sind. Der Bereich, in dem es funktioniert, ist auch der Bereich, der von der Vue-Instanz gesteuert wird

 //Erstellen Sie eine Vue-Instanz und holen Sie sich das ViewModel
            var vm = neuer Vue({
                el: '#app',
                Daten: {
                    Nachricht: „Nachricht“
                },
                Methoden: {},
                //Definieren Sie private lokale Filter. Filter können nur im aktuellen Vue-Objekt verwendet werden: {
                    Datenformat(Nachricht) {
                        gib Nachricht+'xxxxx' zurück;
                    }
                }
            });

benutzerdefinierte Vue-Direktive

Vue verfügt über viele integrierte Anweisungen, z. B. V-Model, V-Show, V-HTML usw., aber manchmal können uns diese Anweisungen nicht zufriedenstellen oder wir möchten den Elementen einige spezielle Funktionen hinzufügen. Zu diesem Zeitpunkt müssen wir eine sehr leistungsstarke Funktion in Vue verwenden - benutzerdefinierte Anweisungen.

Bevor wir beginnen, müssen wir klarstellen, dass das Problem oder Anwendungsszenario, das durch benutzerdefinierte Anweisungen gelöst wird, darin besteht, Low-Level-Operationen an gewöhnlichen DOM-Elementen durchzuführen. Daher können wir benutzerdefinierte Anweisungen nicht blind verwenden.

Globale Richtlinien

Vue.direktive('Fokus', {
  // Wenn das gebundene Element in das DOM eingefügt wird ...
  eingefügt: Funktion (el) {
    // Fokuselement el.setAttribute('Platzhalter', 'Dies wird durch eine benutzerdefinierte Anweisung hinzugefügt')
    el.fokus()
  }
})

Lokale Anweisungen

Anweisungen: {
  Fokus:
    // Definition der Anweisung eingefügt: function (el) {
      el.fokus()
    }
  }
}

verwenden

<input v-focus>

Hook-Funktionen (beide 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 dem sich die Anweisung befindet, und alle seine untergeordneten VNodes aktualisiert wurden.

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

Verwendung und Parameter

In der richtigen Reihenfolge ausführen

//Benutzerdefinierte Anweisung Vue.directive('focus', {
  binden: Funktion (el, Bindung, vnode) {
    konsole.log("1")
  },
  eingefügt: Funktion (el, Bindung, vnode) {
    konsole.log("2");
  },
  aktualisieren: Funktion (el, Bindung, vnode, alter Vnode) {
    konsole.log("3");
  },
  Komponente aktualisiert: Funktion (el, Bindung, vnode, alter Vnode) {
    konsole.log('4');
  },
  unbind: Funktion (el, Bindung, vnode) {
    konsole.log('5');
  }
})

Oben finden Sie eine ausführliche Erläuterung des Filters und der Direktive in Vue. Weitere Informationen zum Filter und zur Direktive in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!