En esta entrada vamos a tratar las custom directive. Las directivas son atributos que nos permite añadir Vue.js a nuestro HTML. Son atributos del estilo v-*, nosotros algunos ya los hemos practicado y explicado anteriormente. Por tanto, visto qué son las directivas, las directivas personalizadas (custom directives) son directivas que creamos nosotros mismos con una funcionalidad específica.
Nota: El ejemplo que vamos a tratar en esta entrada está extraído de la documentación de Vue.js sobre las custom directives, ya que es un ejemplo muy simple y que se ve muy bien el funcionamiento de las custom directives.
Primero de todo, creamos una instancia de Vue.js y la asignamos a un id de un elemento de nuestro HTML con la propiedad el:
|
1 2 3 |
new Vue({ el: '#app' }); |
Creamos el HTML con dos divs. Uno al que hace referencia la instancia Vue.js y el otro al que añadiremos después la custom directive:
|
1 2 3 |
<div id="app"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et nisi luctus, varius elit a, sagittis velit. In ac nulla a nunc efficitur vestibulum. In lacinia magna interdum, mattis turpis ac, vulputate velit. Suspendisse pulvinar dictum sem, faucibus laoreet leo vulputate nec. Donec non dolor a tortor varius fermentum vel sed est. Ut dignissim ut purus aliquet placerat. Pellentesque ultricies ultricies risus, et accumsan urna pellentesque et. Cras faucibus felis sit amet nisl rhoncus, a egestas elit cursus. Donec ut iaculis lectus. Nunc finibus, enim sed commodo pulvinar, massa ex gravida neque, id bibendum lorem libero et dui.</div> </div> |
Por cierto, el texto de ejemplo lo he generado desde esta web.
Una vez tenemos esto, vamos a crear una custom directive que nos añada un color de fondo al elemento donde la añadamos.
Declaramos la custom directive globalmente, si quisiéramos declararla localmente, solamente para un componente, deberíamos utilizar la propiedad directives en el componente que queramos (en la documentación hay un ejemplo). En el siguiente ejemplo, también se está utilizando una abreviación de funciones que nos provee Vue.js:
|
1 2 3 |
Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value; }); |
Y por último, deberíamos añadir al div el atributo, como cualquier otra directiva con el prefijo v- y después el nombre de la directiva, en este caso sería v-color-swatch .
|
1 |
<div v-color-swatch="'#2f2f2f'">...</div> |
Puedes añadir cualquier color y verás como cambia. Como he dicho, es un ejemplo muy simple (sacado de la documentación), pero se ve muy bien el funcionamiento de las custom directives.
Las custom directives tienen muchísimas más opciones que ésto que se muestra en esta entrada, ésto simplemente es un ejemplo, por ejemplo, tienen diferentes hooks, que puedes verlos aquí. Pueden tener varios argumentos después del nombre de la directiva y después acceder a ellos mediante los parámetros de los hooks y también en vez de pasarle un string (el color) como se hace en este ejemplo, se puede pasar un objeto.
See the Pen Vue.js 2 #6 by vreaxe (@vreaxe) on CodePen.
-
– https://vuejs.org/v2/guide/custom-directive.html
– Otros ejemplos de custom directives: https://css-tricks.com/power-custom-directives-vue/
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR