Lo más seguro que has trabajado con las directivas en Vue estas nos permiten acceder a esos elementos del DOM y controlar su comportamiento, inician con v- es la forma que utiliza Vue para saber que no es un atributo de html y que debe gestionarlo, gracias a eso podemos crear nuestras propias directivas.

Al igual que los componentes las directivas tiene “hooks” personalmente en el 95% de los casos solo he usado bind y updated, pero es bueno saber que existen otros.

bind(‘el,binding, vnode’) Es lanzado cuando la directiva se attacha al elemento.

inserted Es lanzado cuando la directiva es incluida en el DOM.

updated Cuando componente es actualizado pero sin tomar en cuenta los “child components”.

componentUpdated Es lanzado cuando tanto sus propiedades o los componentes hijos son actualizados.

unbind Cuando la directiva es eliminada del elemento.

Ya que conocemos los “hooks” , podemos crear la nuestra directiva y utilizar el hook ‘bind’.

Creando la Directiva

Para crear una directiva usamos Vue.directive, de esta forma queda registrada a nivel global, pero podemos registrarla por componentes, la directiva se llama power.

Vue.directive(‘power’,{}) 
<span v-power>test </span>

La funcionalidad es simple esta debe modificar la opacidad del elemento que la utiliza, con el parametro “el” representa el elemento que contiene la directiva y podemos acceder a sus propiedades como el opacity.

Vue.directive('power', {
bind(el,binding, vnode){
     el.style.opacity = 0.2
   }
})

Asigno la directiva “v-power” al span dentro del ul y vemos su transparencia.

See the Pen Custom Vue Directives 1 by Dany Paredes (@danywalls) on CodePen.

Valores

Nuestra directiva es muy simple, podemos pasar el valor del la transparencia mediante el binding.

<span v-power='item.power'> {{item.power}}</span>

He modificado la directiva para tomar el valor desde el binding.

Vue.directive('power', {
 bind(el,binding, vnode){
      el.style.opacity = binding.value / 100
    }
})

See the Pen Passing values to Directives by Dany Paredes (@danywalls) on CodePen.

Argumentos 

Podemos pasar argumentos a la directivas utilizando : despues del nombre, creo el argumento default para asignar un nivel de transparencia por defecto

power:default

Los argumentos llegan a la directiva por el “binding.arg”, modificamos nuestra directiva para leer los valores que llegan en “binding.arg”,  si viene el argumento ‘default’ asigno 0.5 de transparencia de lo contrario usamos el que llega por el binding.

if(binding.arg === 'default') {
 el.style.opacity = 1
}
 else {
 el.style.opacity = binding.value / 100
}

See the Pen Passing arguments to Directives by Dany Paredes (@danywalls) on CodePen.

Modificadores

Los modificadores son acciones extras que podemos agregar a nuestra directiva, imaginemos que queremos mostrar su primera letra, para eso creamos el modificador .short

<span v-power:default.short>{{item.name}}</span>

Igual que los argumentos los modificadores accedemos mediante el binding en la propiedad.modifiers que es un array y  podemos acceder al modificador de la siguiente forma [‘nombre del modificador’].

 if(binding.modifiers['short']){
 el.innerText = el.innerText.charAt(0).toLocaleUpperCase()
}

Podemos utilizar múltiples modificadores Ej: .short.sleep, creo otro modificador .sleep que se encarga de retornar al valor original a en 5 segundo, para lograr esto, almacena en una variable el texto original y verifico que venga en modificador ‘short’ .

 var _originalel = el.innerText;
if(binding.modifiers['sleep']){
 setTimeout(function() {
 el.innerText = _originalel
 }, 5000)
 el.innerText = el.innerText.charAt(0).toLocaleUpperCase()
 }

See the Pen Passing Modifiers to Directives by Dany Paredes (@danywalls) on CodePen.

Pasando objectos

En el binding podemos enviar un objeto json y acceder a el desde la directiva.

<span v-power:default.short.sleep="{sleep:10000, power:1}">{{item.name}}</span> 

Modificamos para que acceder a los valores del objeto que nos llega gracias al binding.value y el nombre de la propiedad de nuestro json.

if(binding.modifiers['sleep']){
 setTimeout(function() {
 el.innerText = _originalel
 }, binding.value.sleep)

See the Pen Passing Objects to Directives by Dany Paredes (@danywalls) on CodePen.


Hasta aquí el tema de directivas recuerda que puedes leer más  en https://vuejs.org/v2/guide/custom-directive.html

Happy Vue!