Heim > Artikel > Web-Frontend > Implementierung interner benutzerdefinierter Anweisungen und globaler benutzerdefinierter Anweisungen

Implementierung interner benutzerdefinierter Anweisungen und globaler benutzerdefinierter Anweisungen

巴扎黑Original: 2017-07-23 15:08:131379Durchsuche

Wenn wir in Vue normalerweise datengesteuerte Ansichten verwenden, können die internen Anweisungen manchmal einige Anforderungen nicht erfüllen. Zu diesem Zeitpunkt gibt uns Vue eine sehr nützliche

Anweisung

ist das Schlüsselwort für uns, um benutzerdefinierte Anweisungen zu schreiben. Die Definitionsanweisungen von

stellen uns zu diesem Zeitpunkt mehrere Hook-Funktionen zur Verfügung Ich bin neugierig, was eine Hook-Funktion ist. Einfach ausgedrückt ist sie ein konzentrierter Ausdruck des Status

bind: nur einmal aufgerufen, Die Anweisung wird zum ersten Mal gebunden. Diese Hook-Funktion wird beim Erreichen eines Elements aufgerufen und kann zum Definieren einer Initialisierungsaktion verwendet werden, die einmal während der Bindung ausgeführt wird.
inserted: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es kann aufgerufen werden, solange der übergeordnete Knoten vorhanden ist, nicht vorhanden ist). im Dokument vorhanden sein).
update: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, aktualisiert wird, unabhängig davon, ob sich der Bindungswert ändert. Durch den Vergleich der Bindungswerte vor und nach der Aktualisierung können unnötige Vorlagenaktualisierungen ignoriert werden (detaillierte Parameter der Hook-Funktion siehe unten).
componentUpdated: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, einen Aktualisierungszyklus abschließt.
unbind: Wird nur einmal aufgerufen, wenn die Anweisung vom Element getrennt ist.

Beginnen wir mit dem Code, damit wir besser verstehen, wie benutzerdefinierte Anweisungen ausgeführt werden

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/vue/dist/vue.js?1.1.11"></script></head><body><div id="app"><div class="ab" v-css="{&#39;color&#39;:&#39;red&#39;,&#39;font-size&#39;:&#39;30px&#39;}">hello</div><input type="text" v-focus></div>
 </body></html>

In HTML , wir sehen zwei Anweisungen v-css und v-focus

Wenn wir die Anweisung anpassen, müssen wir v-

Vue.directive("css",{//钩子函数 ,el就是当前元素    inserted(el,binding){//el绑定的元素本身//binding就是css指令里面的的对象元素let styleobj=binding.value,arr=[];for(let key in styleobj){
            arr.push(key+":"+styleobj[key])
            }
        arr=arr.join(";");
        el.style.cssText=arr;
        },
    bind(el,binding) {//指令绑定在元素上时候执行，只执行一次    }
});new Vue({
　　        el:'#app',
        data:{
            show:true},
        directives:{
        focus:{
            inserted(el,binding){//el绑定的元素本身//binding就是css指令里面的的对象元素                el.focus();
                }
            }
        }
    });

In js sehen wir

Vue.directive("css",{})

Wir haben es außerhalb von

neuem Vue definiert. So ein Stück Code, das ist die Vorlage Methode unserer globalen benutzerdefinierten Direktive

css ist der Name der benutzerdefinierten Direktive

{} und wir können einfach die Hook-Funktion darin schreiben

Alle unsere Hook-Funktionen haben grundsätzlich zwei Parameter

el, binding

el: das durch die Anweisung gebundene Element, mit dem Sie das DOM direkt manipulieren können.
Bindung Ein Objekt des Bindungselements selbst

Von oben haben wir Wie Sie sehen, behält die Bindung den Namen und den Wert der Bindungsanweisung bei, die sehr wichtig sind.

Teilweise benutzerdefinierte Anweisungen

Anweisungen:{

Name:{

}
}

Der Unterschied besteht darin, dass wir es in neuem Vue schreiben und die darin enthaltene API-Operation dieselbe ist wie die globale benutzerdefinierte Anweisung oben

Jetzt haben wir Fangen Sie an, sich die Ergebnisse der Codeausführung anzusehen

Wir können sehen, dass die Stilreferenz vorhanden ist

Das Textfeld erhält auch den Fokus

Das obige ist der detaillierte Inhalt vonImplementierung interner benutzerdefinierter Anweisungen und globaler benutzerdefinierter Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So korrigieren Sie die Tabellenbreite in DataTablesNächster Artikel：So korrigieren Sie die Tabellenbreite in DataTables

In Verbindung stehende Artikel

Mehr sehen