directive personnalisée vue

En plus des directives principales par défaut (v-model et v-show), Vue permet également l'enregistrement de directives personnalisées. Notez que dans Vue2.0, la forme principale et l'abstraction de la réutilisation du code sont les composants - cependant, dans certains cas, vous devez toujours effectuer des opérations de bas niveau sur des éléments DOM purs, auquel cas des directives personnalisées seront utilisées.

Lorsque la page se charge, l'élément prendra le focus (remarque : la mise au point automatique ne fonctionne pas sur Safari mobile). En fait, tant que vous n'avez cliqué sur rien après avoir ouvert cette page, la zone de saisie doit toujours être ciblée. Utilisons maintenant les instructions pour implémenter cette fonction : (Apprentissage recommandé : Tutoriel vidéo JavaScript)

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

Si vous souhaitez enregistrer des instructions locales, le composant accepte également une option de directives :

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

Ensuite, vous pouvez utiliser le nouvel attribut v-focus sur n'importe quel élément du modèle, comme suit :

<input v-focus>

Un objet de définition de directive peut fournir les fonctions de hook suivantes (toutes facultatives) :

bind : Appelé une seule fois, lorsque l'instruction est liée à un élément pour la première fois. Les paramètres d'initialisation uniques peuvent être effectués ici.

inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (seul le nœud parent est garanti d'exister, mais pas nécessairement inséré dans le document).

update : Appelé lorsque le VNode du composant est mis à jour, mais peut se produire avant que son VNode enfant ne soit mis à jour. La valeur de la directive peut avoir changé ou non. Mais vous pouvez ignorer les mises à jour inutiles du modèle en comparant les valeurs avant et après la mise à jour (voir ci-dessous pour les paramètres détaillés de la fonction hook).

componentUpdated : Appelé après que le VNode du composant où se trouve l'instruction et ses sous-VNodes aient tous été mis à jour.

unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Pour plus d'articles techniques liés à JavaScript, veuillez visiter la colonne tutoriel js pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!