Verwendung von Vue-Filtern und benutzerdefinierten Anweisungen

Filter

01. Was ist

Der Filter kann die von uns übergebenen Daten einer notwendigen Verarbeitung unterziehen und die Verarbeitungsergebnisse zurückgeben.

• Filter verändern die Daten nicht
• Das Wesen eines Filters ist eine Funktion
• Die Filterfunktion sollte Parameter haben, die die Quelldaten enthalten müssen, die Sie verarbeiten möchten.
• Der Filter sollte einen Rückgabewert haben, der das verarbeitete Ergebnis zurückgibt

Standard exportieren {
    // Lokale Filter erstellen über Filter filters:{
        Filtername (Daten) {
            // Verarbeite die eingehenden Daten und gib das Verarbeitungsergebnis zurück}  
    }
}

02. Wie es geht

(1) Filter definieren

• Lokaler Filter: Wird innerhalb einer Komponente definiert und kann nur innerhalb der aktuellen Komponente verwendet werden.

Erstellt durch die Filterstruktur

Standard exportieren {
    // Lokale Filter erstellen über Filter filters:{
      Filtername (Daten) {
          //Verarbeitung gibt Verarbeitungsergebnis zurück}  
    }
}

• Globaler Filter: Erstellen Sie einen globalen Filter über Vue.filter. Es kann immer nur einer erstellt werden und dieser kann in jeder Komponente verwendet werden.

Muss definiert werden, bevor die Vue-Instanz erstellt wird

Vue.filter(Filtername, (Daten) => {
    // etwas tun
    Ergebnis der Verarbeitung zurückgeben})

Erstellen Sie einen globalen Filter in einer separaten Datei, importieren Sie ihn in die gewünschte Komponente und registrieren Sie ihn in Filtern

Vue von „vue“ importieren
// Erstellen Sie einen globalen Filter über Vue.filter const filter1 = Vue.filter(filter name, (data) => {
    // etwas tun
    Ergebnis der Verarbeitung zurückgeben})
// Exportieren export {
    filter1
}

//Führen Sie in der Komponente den Filterimport { filter1 } aus '@/utils/filters.js' ein.

Standard exportieren {
    // Filter zu den Filtern in der Komponente hinzufügen // Filter können sowohl Filter erstellen als auch Filter registrieren // Nur in Filtern registrierte Filter gelten als Filter Filter: {
        filter1
    }
}

(2) Nutzung

• Verwenden Sie in einem Interpolationsausdruck {{}} oder einem v-Bind-Ausdruck den Filter mit dem Pipeline-Operator ——|
• Format: {{ Quelldaten | Filter }}

<div> {{ Daten | Filter }} </div>

• Mehrfachverwendung

Der Filter unterstützt die mehrfache parallele Verwendung und das Verarbeitungsergebnis des ersteren wird als Parameter des letzteren übergeben.

<div> {{ data | filter1 | filter2 }}</div>

(3) Filterparameter

• Wenn keine Parameter manuell übergeben werden, werden standardmäßig die Daten vor dem Pipe-Zeichen übergeben.
• Wenn Sie Parameter manuell übergeben, hat dies keine Auswirkungen auf die Übergabe der Standardparameter.
  • Der erste Parameter der Filterfunktion sind immer die Daten vor dem Pipe-Zeichen.
  • Die manuell übergebenen Parameter beginnen beim zweiten Parameter in der Parameterliste und gehen in der Reihenfolge rückwärts.
    

03. Filterfunktionen kapseln

• Das Wesen eines Filters ist eine Funktion, daher können Sie eine Filterfunktion direkt in einer einzelnen Datei kapseln

// Funktion definieren const filterA = () => {}
const filterB = () => {}
// Funktion Objekt exportieren export { filterA, filterB }

• Anschließend importieren Sie die Funktion in die gewünschte Komponente und tragen sie als Filter ein.

importiere * als Filter aus './filters.js'
//Methoden in filters.js durchlaufen Object.keys(filters).forEach(key => { 
  Vue.filter(Schlüssel, Filter[Schlüssel])
})

Benutzerdefinierte Anweisungen

01. Was ist

• Um Low-Level-Operationen an gewöhnlichen DOM-Elementen durchzuführen, werden benutzerdefinierte Anweisungen verwendet
  • Das heißt, benutzerdefinierte Anweisungen arbeiten hauptsächlich mit DOM-Elementen
    

02. Grundkonzepte

(1) Hook-Funktion

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

• bind: Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird. Mit dieser Hook-Funktion kann ein Initialisierungsereignis definiert werden, das einmal während der Bindung ausgeführt wird.
• eingefügt: wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird, solange der übergeordnete Knoten vorhanden ist, auch wenn es nicht in das Dokument eingefügt wird
• update: Wird aufgerufen, wenn die Komponente, zu der das gebundene Element gehört, aktualisiert wird, unabhängig davon, ob sich der gebundene Wert ändert. Sie können jedoch unnötige Vorlagenaktualisierungen vermeiden, indem Sie die Werte vor und nach der Aktualisierung vergleichen.
• componentUpdated: Wird aufgerufen, wenn alle Komponenten des gebundenen Elements aktualisiert sind, also wenn ein Aktualisierungszyklus abgeschlossen ist.
• unbind: Wird nur einmal aufgerufen, wenn die Anweisung vom Element getrennt wird
  

(2) Parameter

Der Befehls-Hook-Funktion werden die folgenden Parameter übergeben:

• el: Das Element, an das die Anweisung gebunden ist und mit dem das DOM direkt bearbeitet werden kann, d. h. das Element, in dem die Anweisung platziert wird
• Bindung: ein Objekt, das mehrere Attribute enthält
  • Name: der Befehlsname ohne das Präfix „v-“
  • Wert: Der an die Anweisung gebundene Wert. Sie können ein Objekt binden, um mehrere Werte zu übergeben.
  • oldValue: Der alte an die Direktive gebundene Wert, der in Update- und ComponentUpdated-Hooks nicht verfügbar ist, unabhängig davon, ob sich der Wert geändert hat
  • Ausdruck: Befehlsausdruck in Zeichenfolgenform
  • arg: der an den Befehl übergebene Parameter
  • Modifikatoren: Ein Objekt, das Modifikatoren enthält
• vnode: virtueller Knoten, generiert durch Vue-Kompilierung
• oldVnode: der vorherige virtuelle Knoten, nur in Update- und ComponentUpdated-Hooks verfügbar

// <div v-demo:left="100"></div>
// Links hier ist das Argument des Bindungsobjekts des Befehls
// 100 ist der Wert des Bindungsobjekts des Befehls
Vue.Direktive('Demo',{
    // el – gibt das gebundene Element an, d. h. das Element, in dem die Anweisung platziert ist bind(el,binding,vnode){
        // Sie können dieses Element direkt verarbeiten el.style.position = 'fixiert';
        const s = (Binding.arg == 'links'? 'links': oben);
        el.style[s] = Bindungswert + "px";
    }
})

03. Befehlsregistrierung

(1) Globale Registrierung

Registrieren Sie eine globale Direktive über Vue.directive(), die zwei Parameter enthält:

• Der erste Parameter ist der benutzerdefinierte Befehlsname. Der Befehlsname muss nicht mit v- beginnen. Das Präfix wird standardmäßig automatisch hinzugefügt. Fügen Sie das Präfix einfach hinzu, wenn Sie den Befehl verwenden.
• Der zweite Parameter kann Objektdaten oder eine Befehlsfunktion sein

Vue.directive("Direktivenname", {
    eingefügt: function(el){
        // etwas tun
    }
})

(2) Lokale Registrierung

Registrieren Sie lokale benutzerdefinierte Anweisungen, indem Sie der Vue-Instanz Anweisungen-Objektdaten hinzufügen.

Standard exportieren {
    Anweisungen: {
        Befehlsname: {
            Funktion}
    }
}

Oben finden Sie ausführliche Informationen zur Verwendung von Vue-Filtern und benutzerdefinierten Anweisungen. Weitere Informationen zu Vue-Filtern und benutzerdefinierten Anweisungen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!