vue benutzerdefinierte Direktive

Zusätzlich zu den standardmäßigen Kerndirektiven (v-model und v-show) ermöglicht Vue auch die Registrierung benutzerdefinierter Direktiven. Beachten Sie, dass in Vue2.0 die Hauptform und Abstraktion der Code-Wiederverwendung Komponenten sind. In einigen Fällen müssen Sie jedoch immer noch Operationen auf niedriger Ebene an reinen DOM-Elementen ausführen. In diesem Fall werden benutzerdefinierte Direktiven verwendet.

Wenn die Seite geladen wird, erhält das Element den Fokus (Hinweis: Der Autofokus funktioniert bei mobiler Safari nicht). Solange Sie nach dem Öffnen dieser Seite nichts angeklickt haben, sollte das Eingabefeld tatsächlich noch fokussiert sein. Lassen Sie uns nun Anweisungen verwenden, um diese Funktion zu implementieren: (Empfohlenes Lernen: JavaScript-Video-Tutorial)

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

Wenn Sie lokale Anweisungen registrieren möchten, akzeptiert die Komponente auch eine Direktivenoption:

directives: {  focus: {    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Dann können Sie das neue v-focus-Attribut für jedes Element in der Vorlage wie folgt verwenden:

<input v-focus>

Ein Direktivendefinitionsobjekt kann die folgenden Hook-Funktionen bereitstellen (alle optional):

bind: Wird nur einmal 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).

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 der VNode der Komponente, in der sich die Anweisung befindet, und ihre Unter-VNodes alle aktualisiert wurden.

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

Weitere technische Artikel zum Thema JavaScript finden Sie in der Spalte JS-Tutorial, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonvue benutzerdefinierte Direktive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!