Vue3 Benutzerdefinierte Direktiven

Zusätzlich zu den standardmäßig festgelegten Kern-Direktiven (v-model und v-show) erlaubt Vue auch das Registrieren benutzerdefinierter Direktiven.

Im Folgenden registrieren wir eine globale Direktive v-focus. Diese Direktive bewirkt, dass das Element beim Laden der Seite den Fokus erhält:

Beispiel

<div id="app"> <p>Wenn die Seite geladen wird, erhält das input-Element automatisch den Fokus:</p> <input v-focus> </div> <script>``` const app = Vue.createApp({}) // RegisteraglobalCustomDirective `v-focus` app.directive('focus', { // WhenBy绑decideofelement挂loadto DOM Mediumwhen…… mounted(el) { // 聚焦element el.focus() } }) app.mount('#app') ```</script>

Ausprobieren »

Wir können auch die Option directives in einer Instanz verwenden, um lokale Direktiven zu registrieren, sodass die Direktive nur in dieser Instanz verwendet werden kann:

Beispiel

<div id="app"> <p>Wenn die Seite geladen wird, erhält das input-Element automatisch den Fokus:</p> <input v-focus> </div> <script>``` const app = { data() { return { } }, directives: { focus: { // Directiveofdefinition mounted(el) { el.focus() } } } } Vue.createApp(app).mount('#app') ```

Ausprobieren »

Hooks

Hook-Funktionen

Die Definitionsfunktion der Direktive stellt mehrere Hook-Funktionen bereit (optional):

  • created : Wird aufgerufen, bevor Attribute oder Event-Listener des gebundenen Elements angewendet werden.

  • beforeMount : Wird aufgerufen, wenn die Direktive zum ersten Mal an das Element gebunden wird und bevor die übergeordnete Komponente gemountet wird.

  • mounted : Wird aufgerufen, nachdem die übergeordnete Komponente des gebundenen Elements gemountet wurde.

  • beforeUpdate: Wird vor der Aktualisierung des VNode der enthaltenden Komponente aufgerufen.

  • updated: Wird aufgerufen, nachdem der VNode der enthaltenden Komponente und die VNodes ihrer untergeordneten Komponenten aktualisiert wurden.

  • beforeUnmount: Wird einmal aufgerufen, bevor die übergeordnete Komponente des gebundenen Elements unmountet wird.

  • unmounted: Wird einmal aufgerufen, wenn die Direktive vom Element gelöst wird und die übergeordnete Komponente unmountet wurde.

Beispiel

import { createApp } from 'vue' const app = createApp({}) //Registrierung app.directive('my-directive', { //Direktiven haben eine Reihe von Lebenszyklus-Hooks: //Wird aufgerufen, bevor die Attribute oder Event-Listener des gebundenen Elements angewendet werden created() {}, //Wird aufgerufen, bevor die übergeordnete Komponente des gebundenen Elements gemountet wird beforeMount() {}, //Wird aufgerufen, wenn die übergeordnete Komponente des gebundenen Elements gemountet wird mounted() {}, //Wird aufgerufen, bevor der VNode der enthaltenden Komponente aktualisiert wird beforeUpdate() {}, //Wird aufgerufen, nachdem der VNode der enthaltenden Komponente und die VNodes ihrer Kindkomponenten aktualisiert wurden updated() {}, //Wird aufgerufen, bevor die übergeordnete Komponente des gebundenen Elements ausgehängt wird beforeUnmount() {}, //Wird aufgerufen, wenn die übergeordnete Komponente des gebundenen Elements ausgehängt wird unmounted() {} }) //Registrierung (funktionale Direktiven) app.directive('my-directive', () => { //Dies wird als `mounted` und `updated` aufgerufen }) //getter; gibt die Direktiven-Definition zurück, wenn registriert const myDirective = app.directive('my-directive')

Parameter der Hook-Funktion

Die Parameter der Hook-Funktionen sind:

el

elDas Element, an das die Direktive gebunden ist. Dies kann verwendet werden, um das DOM direkt zu manipulieren.

binding

binding ist ein Objekt, das die folgenden Eigenschaften enthält:

  • instance: Die Komponenteninstanz, die die Direktive verwendet.
  • value: Der an die Direktive übergebene Wert. Zum Beispiel inv-my-directive="1 + 1": Der vorherige Wert, nur in2。
  • oldValue: in, der Wert istbeforeUpdateundupdated: Verfügbar, unabhängig davon, ob sich der Wert geändert hat.
  • arg: An die Direktive übergebener Parameter (falls vorhanden). Zum Beispiel inv-my-directive:foo: in, arg ist"foo"。
  • modifiers: Ein Objekt, das Modifikatoren enthält (falls vorhanden). Zum Beispiel inv-my-directive.foo.bar: in, das Modifikatorenobjekt ist{foo: true，bar: true}。
  • dir: Ein Objekt, das beim Registrieren der Direktive als Argument übergeben wird. Zum Beispiel in der folgenden Direktive:
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir wird das folgende Objekt sein:

{
  mounted(el) {
    el.focus()
  }
}

vnode

Bauplan des realen DOM-Elements, das als Parameter el empfangen wird.

prevNode

Der vorherige virtuelle Knoten, nur in den Hooks beforeUpdate und updated verfügbar.

Das folgende Beispiel demonstriert die Verwendung dieser Parameter:

Beispiel

<div id="app"> <div v-example="{ name: 'Example', url: 'www.example.com' }"></div> </div> ​ <script>``` const app = Vue.createApp({}) app.directive('example', (el, binding, vnode) => { console.log(binding.value.name) // => "Example" console.log(binding.value.url) // => "www.example.com" var s = JSON.stringify el.innerHTML = s(binding.value) }) app.mount('#app') ```</script>

Ausprobieren »

Manchmal benötigen wir keine anderen Hook-Funktionen, daher können wir eine Kurzform-Funktion wie folgt schreiben:

Vue.directive('example', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

Die Direktivenfunktion akzeptiert jeden gültigen JavaScript-Ausdruck. Das folgende Beispiel übergibt ein JavaScript-Objekt:

Beispiel

<div id="app"> <div v-example="{ color: 'green', text: 'Example!' }"></div> </div> <script>``` Vue.directive('example', function (el, binding) { // Kurzform-Methode legt Text- und Hintergrundfarbe fest el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) ```</script>

Ausprobieren »
Andere Erweiterungen