Erlernen und Verstehen benutzerdefinierter Vue-Anweisungen (Codebeispiele)

Der Inhalt dieses Artikels befasst sich mit dem Erlernen und Verstehen benutzerdefinierter Vue-Anweisungen (Codebeispiele). Ich hoffe, dass er für Freunde hilfreich ist.

Ich habe kürzlich ein Projekt abgeschlossen und musste auf einen Bereich klicken. Wenn Sie auf eine andere Stelle auf der Seite klicken, wird der Bearbeitungsbereich ausgeblendet Auf die gleiche Weise, wie ich zuvor die Modal-Box geschrieben habe, hatte ich plötzlich das Gefühl, dass ich versuchen könnte, Vue-bezogene Dinge zu verwenden, um dieses Problem elegant zu lösen, und dann habe ich die folgenden benutzerdefinierten Anweisungen gelernt.

1 Vue benutzerdefinierte Anweisungen

1.1 Definition

Lesen Sie einfach die Einführung auf der offiziellen Website (ich denke, das offizielle Dokument ist sehr klar, also habe ich im Grunde wurden sie alle von ihm kopiert).

Zusätzlich zu den standardmäßig integrierten Direktiven (v-model und v-show) der Kernfunktionen ermöglicht Vue auch die Registrierung benutzerdefinierter Direktiven. Beachten Sie, dass in Vue2.0 Komponenten die Hauptform der Code-Wiederverwendung und -Abstraktion sind. In einigen Fällen müssen Sie jedoch immer noch Low-Level-Vorgänge für gewöhnliche DOM-Elemente ausführen. In diesem Fall werden benutzerdefinierte Anweisungen verwendet.

1.2 Grundlegende Implementierung

Dies kann in zwei Situationen unterteilt werden. Wenn Sie eine globale benutzerdefinierte Komponente definieren möchten, definieren Sie diese beispielsweise in main.js im Projekt und definieren Sie eine offizielle Website. Fokusbefehl

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Wenn Sie nur einen lokalen Befehl definieren möchten, der innerhalb einer bestimmten Komponente verwendet werden soll, dann definieren Sie

// 跟 data(),methods:{} 那些同级写了
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

in der entsprechenden Komponente. Nachdem wir ihn definiert haben, können wir ihn gerne verwenden

<input v-focus>

1.2 Hook-Funktion

Natürlich ist diese benutzerdefinierte Anweisung nicht nur eine Kleinigkeit. Um einige reale Szenarien zu lösen, stellt uns Vue eine Reihe von Hook-Funktionen zur Verfügung. Einige unserer schmutzigen Tricks. Die Details lauten wie folgt (alle sind optional):

bind: wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an das Element gebunden wird. Hier können einmalige Initialisierungseinstellungen vorgenommen werden.

eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (nur der übergeordnete Knoten ist garantiert vorhanden, wird aber nicht unbedingt in das Dokument eingefügt).

Aktualisierung: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird, kann jedoch erfolgen, bevor der untergeordnete VNode aktualisiert wird. Der Wert der Richtlinie kann sich geändert haben oder auch nicht. Sie können jedoch unnötige Vorlagenaktualisierungen ignorieren, indem Sie die Werte vor und nach der Aktualisierung vergleichen (siehe unten für detaillierte Parameter der Hook-Funktion).

componentUpdated: Wird aufgerufen, nachdem alle VNodes der Komponente, in der sich die Anweisung befindet, und ihre Unter-VNodes aktualisiert wurden.

unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Als nächstes werfen wir einen Blick auf die Parameter der Hook-Funktion (also el, binding, vnode und oldVnode).

Wenn Sie diese Hook-Funktion sinnvoll nutzen möchten, müssen Sie natürlich wissen, wie die folgenden Parameter verwendet werden

1.3 Hook-Funktionsparameter

Die Befehls-Hook-Funktion wird in den folgenden Parametern übergeben:

el: Das an die Anweisung gebundene Element kann zur direkten Manipulation des DOM verwendet werden.

Bindung: Ein Objekt, das die folgenden Eigenschaften enthält:

Name: Anweisungsname, ohne V-Präfix.

Wert: Der verbindliche Wert der Direktive, zum Beispiel: - v-my-directive="1 + 1", der verbindliche Wert ist 2.

oldValue: Der vorherige Wert der Anweisungsbindung, nur in Update- und ComponentUpdated-Hooks verfügbar. Verfügbar unabhängig davon, ob sich der Wert geändert hat.

Ausdruck: Anweisungsausdruck in Zeichenfolgenform. In v-my-directive="1 + 1" lautet der Ausdruck beispielsweise „1 + 1“.

arg: An den Befehl übergebene Parameter, optional. In v-my-directive:foo lautet der Parameter beispielsweise „foo“.

Modifikatoren: Ein Objekt, das Modifikatoren enthält. Beispiel: In v-my-directive.foo.bar ist das Modifikatorobjekt { - foo: true, bar: true }.

vnode: Der durch die Vue-Kompilierung generierte virtuelle Knoten. Wechseln Sie zur VNode-API, um weitere Details zu erfahren.

oldVnode: Vorheriger virtueller Knoten, nur in Update- und ComponentUpdated-Hooks verfügbar.

Dann hieß es auf der offiziellen Website

Mit Ausnahme von el sollten alle anderen Parameter schreibgeschützt sein und dürfen nicht geändert werden. Wenn Sie Daten zwischen Hooks teilen müssen, wird empfohlen, dies über den Datensatz des Elements zu tun.

Dann geben wir unten ein einfaches Beispiel

// 在组件内部定义一个局部指令
directives:{
  demo:{
    bind: function (el, binding, vnode) {
      var s = JSON.stringify;
      el.innerHTML = 
        `name: ${s(binding.name)} <br>
        value: ${s(binding.value)} <br>
        expression: ${s(binding.expression)} <br>
        argument: ${s(binding.arg)} <br>
        modifiers: ${s(binding.modifiers)} <br>
        vnode keys: ${Object.keys(vnode).join(', ')}`
    }
  }
}
 // 绑定到组件中的一个 div 中
<div v-demo:foo.a.b="message"></div>

Dann können wir so eine Menge Text auf der Webseite sehen (natürlich sind die Kommentare unten von mir selbst geschrieben)

name: "demo" 
// 指定名称
value: "Welcome to Your Vue.js App" 
// 指令绑定值
expression: "message" 
// 字符串形式的指令表达式
argument: "foo" 
// 传给指令的参数
modifiers: {"a":true,"b":true} 
// 修饰符的对象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 编译生成的虚拟节点

1.4 Funktion Abkürzung

In vielen Fällen möchten Sie möglicherweise dasselbe Verhalten beim Binden und Aktualisieren auslösen, ohne sich um andere Hooks zu kümmern. Schreiben Sie zum Beispiel so:

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 Objektliteral

Wenn die Anweisung mehrere Werte erfordert, können Sie ein JavaScript-Objektliteral übergeben. Denken Sie daran, dass Direktivenfunktionen alle zulässigen JavaScript-Ausdrücke akzeptieren.

<div v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></div>

rrree

Das obige ist der detaillierte Inhalt vonErlernen und Verstehen benutzerdefinierter Vue-Anweisungen (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!