Directives personnalisées Vue.js

En plus des directives de base définies par défaut (v-model et v-show), Vue permet également d'enregistrer des directives personnalisées.

Ci-dessous, nous enregistrons une directive globale v-focus, qui fait que l'élément reçoit le focus au chargement de la page :

Nous pouvons également utiliser l'option directives dans l'instance pour enregistrer des directives locales, afin que la directive ne puisse être utilisée que dans cette instance :

---

Hooks

Fonctions de hook

La fonction de définition de directive fournit plusieurs fonctions de hook (facultatives) :

• bindAppelée une seule fois, lorsque la directive est liée pour la première fois à l'élément. Cette fonction de hook peut être utilisée pour définir une action d'initialisation qui s'exécute une fois lors de la liaison.

• insertedAppelée lorsque l'élément lié est inséré dans son nœud parent (il doit seulement exister dans le nœud parent, pas nécessairement dans le document).

• updateAppelée lorsque le template contenant l'élément lié est mis à jour, que la valeur de liaison change ou non. En comparant la valeur de liaison avant et après la mise à jour, les mises à jour inutiles du template peuvent être ignorées (voir ci-dessous pour les paramètres détaillés des fonctions de hook).

• componentUpdatedAppelé lorsque le template contenant l'élément lié termine un cycle de mise à jour.

• unbindAppelé une seule fois, lorsque la directive est déliée de l'élément.

Paramètres de la fonction hook

Les paramètres de la fonction hook sont :

• elL'élément lié à la directive, qui peut être utilisé pour manipuler directement le DOM.
• bindingUn objet contenant les propriétés suivantes :
  • nameLe nom de la directive, sansv-le préfixe.
  • valueLa valeur de liaison de la directive, par exemple :v-my-directive="1 + 1"la valeur de value est2。
  • oldValueLa valeur précédente liée par la directive, disponible uniquement dansupdateetcomponentUpdatedle hook. Elle est disponible indépendamment du fait que la valeur change ou non.
  • expressionL'expression ou le nom de variable de la valeur de liaison. Par exemplev-my-directive="1 + 1"la valeur d'expression est"1 + 1"。
  • argL'argument passé à la directive. Par exemplev-my-directive:foola valeur d'arg est"foo"。
  • modifiersUn objet contenant des modificateurs. Par exemple :v-my-directive.foo.barla valeur de l'objet modifiers est{ foo: true, bar: true }。
• vnodeLe nœud virtuel généré par la compilation de Vue.
• oldVnodeLe nœud virtuel précédent, disponible uniquement dansupdateetcomponentUpdatedle hook.

L'exemple suivant démontre l'utilisation de ces paramètres :

Parfois, nous n'avons pas besoin d'autres fonctions de hook, et nous pouvons utiliser la forme abrégée de la fonction, comme suit :

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

Les fonctions de directive peuvent accepter toutes les expressions JavaScript valides. L'exemple suivant passe un objet JavaScript :

Autres extensions