Vue.js
Directivas personalizadas

Sintaxis

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

Parámetros

Lo esencial

Además del conjunto predeterminado de directivas enviadas en el núcleo, Vue.js también le permite registrar directivas personalizadas. Las directivas personalizadas proporcionan un mecanismo para asignar cambios de datos a un comportamiento arbitrario de DOM.

Puede registrar una directiva personalizada global con el Vue.directive(id, definition) , pasando una id de directiva seguida de un objeto de definición. También puede registrar una directiva personalizada local incluyéndola en la opción de directives un componente.

Funciones de gancho

• bind : se llama solo una vez, cuando la directiva se enlaza por primera vez al elemento.
• actualización : se llama por primera vez inmediatamente después del bind con el valor inicial, y luego nuevamente cuando el valor del enlace cambia. El nuevo valor y el valor anterior se proporcionan como el argumento.
• desvincular : se llama solo una vez, cuando la directiva no está vinculada al elemento.

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()
     }    
})

Una vez registrado, puede usarlo en plantillas Vue.js como esta (recuerde agregar el prefijo v- ):

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

Cuando solo necesita la función de update , puede pasar una sola función en lugar del objeto de definición:

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

Propiedades de la instancia directiva

Todas las funciones de enganche se copiarán en el objeto real de la Directiva, que se puede acceder dentro de estas funciones como su this contexto. El objeto directivo expone algunas propiedades útiles:

• el : el elemento al que está dirigida la directiva.
• vm : el contexto ViewModel que posee esta directiva.
• expresión : la expresión del enlace, excluyendo argumentos y filtros.
• arg : el argumento, si está presente.
• nombre : el nombre de la directiva, sin el prefijo.
• modificadores : un objeto que contiene modificadores, si los hay.
• descriptor : un objeto que contiene el resultado del análisis de toda la directiva.
• params : un objeto que contiene atributos param. Explicado a continuación.

Debe tratar todas estas propiedades como de solo lectura y nunca modificarlas. También puede adjuntar propiedades personalizadas al objeto directivo, pero tenga cuidado de no sobrescribir accidentalmente las existentes internas.

Un ejemplo de una directiva personalizada que usa algunas de estas propiedades:

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!'
  }
})

Resultado

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

Objeto Literal

Si su directiva necesita varios valores, también puede pasar un objeto literal de JavaScript. Recuerda, las directivas pueden tomar cualquier expresión válida de JavaScript:

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!"
})

Modificador literal

Cuando se usa una directiva con el modificador literal, su valor de atributo se interpretará como una cadena simple y se pasará directamente al método de update . El método de update también se llamará una sola vez, porque una cadena simple no puede ser reactiva.

HTML

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

JavaScript

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