Was sind vue.js-Anweisungen?

vue.js-Anweisungen sind viele integrierte Anweisungen, z. B. [v-if] und [v-show]. Diese umfangreichen Anweisungen können die meisten unserer Geschäftsanforderungen erfüllen, z. B. [binden, eingefügt]. , aktualisieren].

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

Frage 1: Was sind benutzerdefinierte Anweisungen in vue.js?

Passen Sie einige Anweisungen an, um das zugrunde liegende DOM zu bedienen.

Weitere Referenzen: Vue verfügt über viele integrierte Anweisungen, z. B. v-if und v-show Wenn wir einige spezielle Funktionen benötigen, möchten wir immer noch Operationen auf niedriger Ebene im DOM ausführen und müssen dann benutzerdefinierte Anweisungen verwenden.

Frage 2: Mehrere Hook-Funktionen von benutzerdefinierten Anweisungen

binden: nur einmal aufgerufen, aufgerufen, wenn die Anweisung zum ersten Mal an ein 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).
Update: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird, kann jedoch auftreten, 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.
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, wird aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Frage 3: Hook-Funktionsparameter

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.

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

1: Das an die Anweisung gebundene Element kann zum direkten Betrieb des DOM verwendet werden.

2. Bindung: ein Objekt, das die folgenden Attribute enthält:

Name: Befehlsname, 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: ein virtueller Knoten, der durch Vue-Kompilierung generiert wird.
3. oldVnode: Der vorherige virtuelle Knoten, nur in Update- und ComponentUpdated-Hooks verfügbar.

Frage 4: Wie verwende ich benutzerdefinierte Anweisungen in vue-cli?

Dateistruktur:

.
├── src
│   ├── directives
│   │    ├── index.js
│   │    ├── modules
│   └── main.js
└── ...

Erstellen Sie neue foucs.js unter Modulen

// 聚焦指令
export default {
  bind (el, binding, vnode) {},
  inserted (el, binding, vnode) {
    el.focus()
  },
  update (el, binding, vnode) {},
  componentUpdated (el, binding, vnode) {},
  unbind (el, binding, vnode) {}
}

Unter src/directives/index.js

import focus from './modules/focus'
export {focus}

Unter src/main.js verwenden Sie Anweisungen, um Anweisungen anzupassen

//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

In im Zusammenhang mit der Verwendung von

<input v-focus type="text" />

in Vue-Komponenten:

JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonWas sind vue.js-Anweisungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!