Vue.js
Directives sur mesure

Syntaxe

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

Paramètres

Les bases

Outre le jeu de directives par défaut fourni par core, Vue.js vous permet également d’enregistrer des directives personnalisées. Les directives personnalisées fournissent un mécanisme pour mapper les modifications de données à un comportement DOM arbitraire.

Vous pouvez enregistrer une directive personnalisée globale avec la Vue.directive(id, definition) , en transmettant une directive id suivie d'un objet de définition. Vous pouvez également enregistrer une directive personnalisée locale en l'incluant dans l'option de directives un composant.

Fonctions de crochet

• bind : appelé une seule fois, lorsque la directive est liée en premier à l'élément.
• update : appelé pour la première fois immédiatement après la bind avec la valeur initiale, puis à nouveau chaque fois que la valeur de la liaison change. La nouvelle valeur et la valeur précédente sont fournies comme argument.
• unbind : appelé une seule fois, lorsque la directive n'est pas liée à l'élément.

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

Une fois inscrit, vous pouvez l'utiliser dans les modèles Vue.js comme ceci (n'oubliez pas d'ajouter le préfixe v- ):

<div v-my-directive="someValue"></div>

Lorsque vous n'avez besoin que de la fonction de update , vous pouvez transmettre une seule fonction à la place de l'objet de définition:

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

Propriétés d'instance directive

Toutes les fonctions de crochet seront copiés dans l'objet directive réelle, que vous pouvez accéder à l' intérieur de ces fonctions comme this contexte. L'objet directive expose certaines propriétés utiles:

• el : l'élément auquel la directive est liée.
• vm : le contexte ViewModel qui possède cette directive.
• expression : expression de la liaison, excluant les arguments et les filtres.
• arg : l'argument, si présent.
• name : le nom de la directive, sans le préfixe.
• modifiers : un objet contenant des modificateurs, le cas échéant.
• descriptor : objet contenant le résultat d'analyse de la directive entière.
• params : un objet contenant des attributs param. Expliqué ci-dessous.

Vous devez traiter toutes ces propriétés en lecture seule et ne jamais les modifier. Vous pouvez également associer des propriétés personnalisées à l'objet directive, mais veillez à ne pas remplacer accidentellement des objets internes existants.

Un exemple de directive personnalisée utilisant certaines de ces propriétés:

HTML

<div id="demo" v-demo:hello.a.b="msg"></div>

JavaScript

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

Résultat

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

Littéral d'objet

Si votre directive nécessite plusieurs valeurs, vous pouvez également transmettre un littéral d'objet JavaScript. Rappelez-vous que les directives peuvent prendre n'importe quelle expression JavaScript valide:

HTML

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

JavaScript

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

Modificateur littéral

Lorsqu'une directive est utilisée avec le modificateur literal, sa valeur d'attribut sera interprétée comme une chaîne de caractères et transmise directement à la méthode de update . La méthode de update sera également appelée une seule fois, car une chaîne simple ne peut pas être réactive.

HTML

<div v-demo.literal="foo bar baz">

JavaScript

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})