Base
Zusätzlich zu integrierten Richtlinien ermöglicht Vue.js auch die Registrierung benutzerdefinierter Richtlinien. Benutzerdefinierte Richtlinien bieten einen Mechanismus, um Änderungen des Daten in DOM -Verhalten abzubilden.
Eine globale benutzerdefinierte Anweisung kann unter Verwendung der Vue.Directive (ID, Definition) -Methode registriert werden, die zwei Parameter -Befehls -IDs und Definitionsobjekte empfängt. Sie können auch eine lokale benutzerdefinierte Anweisung mithilfe der Option der Komponentenanweisungen registrieren.
Hakenfunktion
Das Definieren eines Objekts kann mehrere Hakenfunktionen bereitstellen (alle optional):
• Binden: Nur einmal aufgerufen und wird aufgerufen, wenn die Anweisung zum ersten Mal an das Element gebunden ist.
• Update: Der erste Aufruf wird unmittelbar nach der Bindung mit dem Anfangswert als Parameter aufgerufen, und wenn sich der gebundene Wert ändert, sind die Parameter der neue Wert und der alte Wert.
• Unbind: Nur einmal aufgerufen, wenn die Anweisung aus dem Element abgebaut ist.
Beispiel
Vue.directive ('my-directive', {bind: function () {// Vorbereitungsarbeiten // Zum Beispiel Hinzufügen eines Ereignishandlers oder einer hochversorgten Aufgabe, die nur einmal ausgeführt werden muss}, update: function (newValue, OldValue) {// Arbeit, wenn der Wert aktualisiert wird //. Löschen Sie den Ereignishörer von bind ()}}) hinzugefügt.Nach der Registrierung können Sie es in der VUE.JS-Vorlage wie diese verwenden (denken Sie daran, das Präfix V- hinzuzufügen):
<div v-my-directive = "someValue"> </div>
Wenn nur die Aktualisierungsfunktion benötigt wird, können Sie eine Funktion anstelle des Definitionsobjekts übergeben:
Vue.directive ('my-directive', function (value) {// Diese Funktion wird als update ()} verwendet)Richtlinieninstanzeigenschaften
Alle Hakenfunktionen werden in das tatsächliche Richtlinienobjekt kopiert, und dies zeigt in dem Haken auf dieses Richtlinienobjekt. Dieses Objekt enthält einige nützliche Eigenschaften:
• EL: Das an die Richtlinie gebundene Element.
• VM: Der Kontext ViewModel, dem die Anweisung gehört.
• Ausdruck: Der Ausdruck der Richtlinie ohne Parameter und Filter.
• ARG: Parameter der Richtlinie.
• Name: Der Name der Richtlinie ohne Präfix.
• Modifikatoren: Ein Objekt, das Modifikatoren für Richtlinien enthält.
• Deskriptor: Ein Objekt, das die Analyseergebnisse einer Richtlinie enthält.
Sie sollten diese Eigenschaften als schreibgeschützt behandeln und sie nicht ändern. Sie können dem Richtlinienobjekt auch benutzerdefinierte Eigenschaften hinzufügen. Achten Sie jedoch darauf, dass vorhandene interne Eigenschaften nicht überschreiben.
Beispiel:
<div id = "Demo" v-Demo: hello.ab = "msg"> </div>
Vue.directive ('Demo', {bind: function () {console.log ('Demo gebunden!')}, Update: function (value) {this.el.innnerHtml = 'name -' + this.name + '<br>' + 'Expression -' + this.expression + '<br>' + ' +' + this Json.Stringify (this.modifiers) + '<br>' + 'Wert -' + Wert}}) var Demo = new Vue ({el: '#demo', Daten: {msg: 'Hallo!'}})Objekt wörtlich
Wenn die Richtlinie mehrere Werte erfordert, können Sie ein JavaScript -Objektliteral übergeben. Denken Sie daran, dass Richtlinien den legalen JavaScript -Ausdruck verwenden können:
<div v-Demo = "{Farbe: 'White', Text: 'Hallo!' } "> </div>
Vue.directive ('Demo', Funktion (value) {console.log (value.color) // "White" Console.log (value.text) // "Hallo!"})Wörtlicher Modifikator
Wenn die Anweisung einen wörtlichen Modifikator verwendet, wird ihr Wert als normale Zeichenfolge verarbeitet und an die Aktualisierungsmethode übergeben. Die Aktualisierungsmethode wird nur einmal aufgerufen, da eine normale Zeichenfolge nicht auf Datenänderungen reagieren kann.
<Div v-Demo.litereral = "Foo Bar Baz">
Vue.directive ('Demo', Funktion (Wert) {console.log (value) // "foo baz baz"})Elementarrichtlinie
Manchmal möchten wir Richtlinien in Form von benutzerdefinierten Elementen verwenden, nicht in Form von Funktionen. Dies ist der "E" -Richtlinie von Angular sehr ähnlich. Elementanweisungen können als leichte Komponente angesehen werden. Sie können eine benutzerdefinierte Elementanweisung registrieren wie folgt:
Vue.elementDirective ('my-directive', {// api bind: function () {// operation this.el ...}})Schreiben Sie nicht so:
<div v-my-directive> </div>
Schreiben Sie diesen Weg:
<my-directive> </my-directive>
Eine Elementanweisung kann keine Parameter oder Ausdrücke akzeptieren, kann jedoch die Eigenschaften eines Elements lesen, um sein Verhalten zu bestimmen.
Im Gegensatz zu gewöhnlichen Anweisungen sind Elementanweisungen endgültig, was bedeutet, dass VUE, sobald er auf eine Elementanweisung stößt, das Element und seine untergeordneten Elemente überspringt - nur die Elementanweisung selbst kann mit dem Element und seinen untergeordneten Elementen arbeiten.
Erweiterte Optionen
Parameter
Benutzerdefinierte Anweisungen können ein Params -Array empfangen, in dem eine Liste von Funktionen angegeben wird, und der Vue -Compiler extrahiert diese Funktionen der gebundenen Elemente automatisch. Zum Beispiel:
<div v-Beispiel a = "hi"> </div>
Vue.directive ('Beispiel', {Params: ['a'], bind: function () {console.log (this.params.a) // -> "hi"}})Diese API unterstützt auch dynamische Eigenschaften. Dies.Params [Schlüssel] wird automatisch aktualisiert. Zusätzlich kann ein Rückruf angegeben werden, um aufzurufen, wenn sich der Wert ändert:
<div v-Beispiel v-Bind: a = "seltsame"> </div>
Vue.directive ('Beispiel', {Params: ['A'], ParamWatchers: {a: function (val, oldval) {console.log ('a geändert!')}}})Ähnlich wie bei Requisiten verwendet der Name des Parameters des Richtliniens in JavaScript den Kamelcase-Stil, und der Kebab-Case-Stil entspricht der HTML. Nehmen wir beispielsweise an, dass in der Vorlage ein Parameter "Disable-Effect" vorhanden ist, und greifen Sie in JavaScript mit "Disableffect" darauf zu.
tief
Wenn in einem Objekt eine benutzerdefinierte Anweisung verwendet wird und die Aktualisierung ausgelöst wird, wenn sich die internen Eigenschaften der Objektänderung ändern, geben Sie Deep: TRUE im Anweisungsdefinitionsobjekt an.
<div v-my-directive = "obj"> </div>
Vue.directive ('my-directive', {Deep: true, update: function (obj) {// Aufgerufen, wenn die verschachtelten Eigenschaften von `obj` ändern}})zweiness
Wenn die Richtlinie Daten in die VUE -Instanz zurückschreiben möchte, geben Sie TWOWAY: TRUE im Anweisungsdefinitionsobjekt an. Diese Option ermöglicht dies.set (Wert) in Anweisungen:
Vue.directive ('Beispiel', {twoway: true, bind: function () {this.handler = function () {// Daten zurück in VM //, wenn die Direktive v-example = "abc" wie dieses // it ~ vm.abc` mit dem gegebenen Wert this.set (this.el.Value) (}). this.Handler)}, unbind: function () {this.el.removeEventListener ('Eingabe', this.handler)}})Akzeptieren
PASSION ACCEPTIONStatement: True ermöglicht es benutzerdefinierte Anweisungen, Inline-Anweisungen zu akzeptieren, genau wie V-On:
<div v-my-directive = "a ++"> </div>
Vue.directive ('my-directive', {AcceptStatement: TRUE, UPDATE: Funktion (fn) {// Der eingehende Wert ist eine Funktion // Die Anweisung "A ++" wird im Bereich der Zugehörigkeitsinstanz berechnet, wenn es}} genannt wird)Verwenden Sie mit Bedacht, weil Sie normalerweise Nebenwirkungen in Ihrer Vorlage vermeiden möchten.
Terminal
1.0.19+
Vue erstellt Module durch rekursives Durchqueren des DOM -Baumes. Aber wenn es auf eine Terminalrichtlinie stößt, hört es zu, die Nachkommenelemente dieses Elements zu durchqueren. Diese Richtlinie übernimmt die Aufgabe, dieses Element und seine Nachkommen zusammenzustellen. V-IF und V-für sind Terminalrichtlinien.
Das Schreiben von benutzerdefinierten Terminalanweisungen ist ein hochrangiges Thema und erfordert ein besseres Verständnis des Zusammenstellungsprozesses von Vues. Dies bedeutet jedoch nicht, dass es unmöglich ist, benutzerdefinierte Terminalanweisungen zu schreiben. Verwenden Sie Terminal: TUR, um eine benutzerdefinierte Terminalanweisung anzugeben, und muss möglicherweise auch VUE.FragmentFactory verwenden, um partiell zu kompilieren. Hier ist eine benutzerdefinierte Terminalanweisung, die seine Inhaltsvorlage zusammenstellt und die Ergebnisse an einen anderen Ort auf der Seite injiziert:
var fragmentfactory = vue.fagmentFactoryVar remove = vue.util.removevar createanchor = vue container.appendChild(this.anchor) remove(this.el) var factory = new FragmentFactory(this.vm, this.el) this.frag = factory.create(this._host, this._scope, this._frag) this.frag.before(this.anchor) }, unbind: function () { this.frag.remove() remove(this.anchor) }})<div id = "modal"> </div> ... <div V-Injekt: modal> <h1> Header </h1> <p> Körper </p> <p> Fußzeile </p> </div>
Wenn Sie benutzerdefinierte Terminalanweisungen schreiben möchten, wird empfohlen, den Quellcode für integrierte Terminalanweisungen wie V-IF und V-für durchzulesen, um die internen Mechanismen von Vues besser zu verstehen.
Priorität
Sie können der Anweisung Priorität zuweisen. Wenn nicht angegeben, beträgt der Standard für den normalen Befehl 1000 und der Standard für Terminalbefehl 2000. Anweisungen mit einer höheren Priorität für dasselbe Element werden früher als andere Anweisungen verarbeitet. Richtlinien mit der gleichen Priorität werden in der Reihenfolge verarbeitet, in der sie in der Element -Eigenschaftsliste erscheinen. Es kann jedoch nicht garantiert werden, dass diese Reihenfolge in verschiedenen Browsern konsistent ist.
Die Priorität der integrierten Richtlinien kann in der API betrachtet werden. Darüber hinaus haben die Prozesssteuerungsanweisungen V-IF und V-für immer die höchste Priorität während des Zusammenstellungsprozesses.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.