En savoir plus sur les directives personnalisées dans Vue

En plus des directives principales par défaut ( v-model et v-show ), Vue permet également l'enregistrement de directives personnalisées. Dans Vue, la principale forme et abstraction de la réutilisation du code sont les composants. Cependant, dans certains cas, il est toujours nécessaire d'effectuer des opérations de bas niveau sur des éléments DOM purs, auquel cas des instructions personnalisées sont utilisées. Cet article présentera en détail la directive personnalisée Vue

enregistrement des commandes

Prendre un élément d'entrée pour obtenir automatiquement le focus à titre d'exemple. Lorsque la page se charge, utilisez la mise au point automatique pour permettre à l'élément d'obtenir le focus. . Mais la mise au point automatique ne fonctionne pas sur Safari mobile. Enregistrez maintenant une directive qui fait que l'élément prend automatiquement le focus

L'enregistrement de la directive est similaire à l'enregistrement des composants, y compris les directives globales et les directives locales

【Directives globales】

Utilisez Vue . diretive() pour enregistrer globalement la directive

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

[Directive locale]

Vous pouvez également enregistrer des directives locales Le composant ou le constructeur Vue accepte une option directives

var vm = new Vue({
  el: '#example',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }

})

Le nouvel attribut

v-focus

<p id="example">
  <input v-focus></p>

<script>// 注册一个全局自定义指令 v-focusVue.directive('focus', {  // 当绑定元素插入到 DOM 中。  inserted: function (el) {    // 聚焦元素    el.focus()
  }
})var vm = new Vue({
  el: '#example',

})</script>

fonction de hook

peut alors être utilisé sur n'importe quel élément du modèle. La fonction de définition de directive fournit plusieurs fonctions de hook. (disponible Select)

[bind]

Appelée une seule fois, lorsque l'instruction est liée à un élément pour la première fois. Cette fonction hook peut être utilisée pour définir une action d'initialisation qui est exécutée. une fois pendant la liaison

【inséré】

Appelé lorsque l'élément lié est inséré dans le nœud parent (il peut être appelé si le nœud parent existe et n'a pas besoin d'exister dans le document)

【mise à jour】

Il est appelé lorsque le VNode du composant est mis à jour,

mais cela peut se produire avant que le VNode de son enfant soit mis à jour . La valeur de la directive peut avoir changé ou non. Cependant, les mises à jour inutiles du modèle peuvent être ignorées en comparant les valeurs avant et après la mise à jour

【componentUpdated】

Le VNode du composant

et le VNode de ses enfants . sont appelés lorsque tous sont mis à jour

【dissocier】

Appelé une seule fois, appelé lors de la dissociation de l'instruction et de l'élément

Paramètres de la fonction Hook

La fonction hook reçoit les paramètres suivants

【el】

L'élément lié par l'instruction peut être utilisé pour faire fonctionner directement le DOM

【binding】

Un objet contenant les attributs suivants :

name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

【vnode】

　Nœud virtuel généré par la compilation Vue

【oldVnode】

　 Nœud virtuel précédent, uniquement dans et

Disponibles updatecomponentUpdated [Note] À l'exception de

, les autres paramètres sont en lecture seule, essayez de ne pas les modifier. Si vous devez partager des données entre les hooks, il est recommandé de le faire via l'ensemble de données de l'élément

el Ce qui suit est un exemple de hook personnalisé utilisant ces paramètres

<p id="example" v-demo:foo.a.b="message"></p>

<script>Vue.directive('demo', {
  bind: function (el, binding, vnode) {    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})new Vue({
  el: '#example',
  data: {
    message: 'hello!'
  }
})</script>

[Abréviation de la fonction]

Dans la plupart des cas, vous souhaiterez peut-être effectuer des actions répétées sur les hooks

et

, et ne souhaitez pas vous soucier des autres fonctions du hook. Vous pouvez l'écrire comme ceci : bind

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

update[Object literal]

Si l'instruction nécessite plusieurs valeurs, vous pouvez transmettre un littéral d'objet JS. La fonction de commande peut accepter tous les types légaux d'expressions JS

<p v-demo="{ color: &#39;white&#39;, text: &#39;hello!&#39; }"></p>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

Recommandations associées :

Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation

 ! !

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!