Creación de Directivas Personalizadas en Vue.js

Clase 36 de 53 • Curso Profesional de Vue.js 2

Resumen

¿Qué son las directivas personalizadas en Vue.js?

Las directivas personalizadas son una poderosa herramienta que Vue.js ofrece para manipular el DOM y añadir funcionalidades específicas a nuestros componentes. Aunque Vue.js ya proporciona directivas predefinidas, en ciertos casos estas pueden quedarse cortas para satisfacer algunas necesidades específicas de un proyecto. Aquí es donde entran en juego las directivas personalizadas, permitiendo ampliar y escalar funcionalidades según los requisitos de la aplicación.

¿Cómo crear una directiva personalizada en Vue.js?

Para crear una directiva personalizada, primero debemos entender cómo funcionan sus etapas y qué atributos manejan. Las directivas tienen diferentes hooks, similares a los ciclos de vida de los componentes, como bind, update y otros.

El siguiente es un ejemplo de una directiva personalizada para aplicar un efecto de desenfocado o "blur" a elementos específicos cuando no se cumplen ciertas condiciones:

const blur = {
  bind(el, binding) {
    applyBlur(el, binding);
  }
};

function applyBlur(el, binding) {
  // Aplicamos el blur basándonos en el valor
  el.style.filter = !binding.value ? 'blur(3px)' : 'none';
  el.style.cursor = !binding.value ? 'not-allowed' : 'inherit';

  el.querySelectorAll('button').forEach(button => {
    if (!binding.value) {
      button.setAttribute('disabled', true);
    } else {
      button.removeAttribute('disabled');
    }
  });
}

export default blur;

¿Cómo instalar y utilizar la directiva personalizada?

Instalación en Vue

Para hacer que la directiva esté disponible globalmente, es fundamental registrarla en el punto de entrada de la aplicación, generalmente en main.js:

import Vue from 'vue';
import BlurDirective from './directives/blur';

Vue.directive('blur', BlurDirective);

Uso en componentes

Una vez registrada, la directiva se puede aplicar a elementos dentro de un componente Vue:

<template>
  <div v-blur="track.previewURL">
    <!-- Elementos aquí -->
  </div>
</template>

En este ejemplo, el efecto de desenfocado se aplica dependiendo de la disponibilidad de la previewURL. La directiva aplicará un blur a los elementos donde la URL de previsualización sea null o undefined.

Recomendaciones al usar directivas personalizadas

Instalación Local vs Global: Utiliza directivas globales si se usan en múltiples componentes; de lo contrario, es más eficiente registrarlas de manera local en el componente donde se necesiten.
Refactorización de Código: Mantén las funciones desacopladas para mayor claridad y reusabilidad. El aplicar cambios en un solo lugar puede evitar errores de implementación.
Validaciones Lógicas y de Interfaz: Además de efectos visuales, asegúrate de implementar lógica que evite interacciones indebidas sobre elementos que deberían estar inactivos.

El uso de directivas personalizadas puede mejorar notablemente la experiencia de usuario y la lógica de tu aplicación en Vue.js. Domínalas y verás cómo facilitan la creación de interfaces más intuitivas y eficientes. ¡Continúa explorando y dominando Vue.js para construir aplicaciones más robustas!

Rogelio Alberto

student•

No era necesario agregar el (!this.track.preview_url) en selectTracky en goToTrack, solo bastaba con poner el bind @click en los buttons y no en el span dentro del button y ya con el disabled de la directiva se desactiva los controles de play/navegación, asi:

button.level-item.button.is-primary(@click="selectTrack")
  span.icon.is-small ▶️
button.level-item.button.is-warning(@click="goToTrack(track.id)")
  span.icon.is-small 🌎

Tambien por cuestiones de performance la directiva esta mejor asi, reduce ciclos innecesarios:

function setBlur (el, binding) {
  if (!binding.value) {
    el.style.filter = 'blur(3px)'
    el.style.cursor = 'not-allowed'
    el.querySelectorAll('button').forEach(button => {
      button.setAttribute('disabled', true)
    })
  }
}

Nacho Anaya

teacher•

Gracias por el aporte. La apreciacion que haces sobre la validacion es correcto. Con el simple hecho de agregar el atributo disabed al button alcanza para interrumpir el proceso y evidentemente lo mas correcto seria enlazar el @click al button y no al span. De todos modos agregar la validacion en el lado del codigo, tambien es una buena practica ya que esos metodos pueden ser utilizados en otro tipo de contexto (como metodos internos o en otras partes de HTML). De esta manera garantizas que eso funcione correctamente en todos lados.

Con respecto a la funcion de la directiva, no creo que mejore el rendimiento pero si es mas practico y mas facil de seguir. Lo que yo hice fue crear una funcion generica que tambien pueda ser aplicada en otros contextos o hooks de la directiva como el update y podar lograr una actualizacion en tiempo real en caso que el valor de preview_url se modifique.

Rogelio Alberto

student•

Si mejora el rendimiento, reduce el numero de comparaciones en una tercera parte (imagina cien, mil o mas resultados) ademas de que no es necesario poner estilo con js a los elementos que no tienen binding null por que ese estilo ya lo tienen con css y por esto es innecesario el if dentro del forEach.

Jesús Miguel Quinto Teran

student•

la directiva :key es muy importante para éstos casos.

Cuando realice una búsqueda después de otra, la segunda recordaba el blur de la primera, la solución fue aplicar :key="t.id" para que Vuejs reconociera correctamente las nuevas pistas. y refrescara la blur directiva.

Carlos Eduardo Gomez García

teacher•

Interesante, prácticamente las directivas me permiten ejecutar cierto código cuando el componente está cargando

Alexis Bustamante

student•

yo pense que era mas conveniente NO mostrar los Track que no tienen valor para escuchar, por lo que agregue en el método search (dentro de la vista search)

this.tracks=this.tracks.filter(v=>v.preview_url!=null)

y así dejo solo los que se puede escuchar, de todas formas agregue lo de esta clase.

Luis Gerardo López Hernández

student•

que no en este caso hubiera sido mejor instalar la directiva de forma local porque solo se usa en un componente?

José Alfonso Vargas Cruz

student•

¿y con la directiva no podemos "desvincular" el método selectTrack bindeado y asi evitar el if dentro del método selectTrack?

Manuel Ojeda

student•

El intentar desvincular un método de la manera que lo planteas deberías de revisar la lógica que tienes en tu template de Vue.

¿Porqué deseas evitar "selectTrack"?

Sylvester Josué Rojas Cañón

student•

Un recuerso actualizado: https://vuejs.org/guide/reusability/custom-directives.html#introduction

Josue Benjamin Arambide Quispe

student•

Comparto con ustedes la directiva para que pueda imprimir un sección en su proyecto, espero les sea de ayuda y tengan una idea de como hacer uso delas directivas en vue, para usarlo debe pasarle el id de la sección a imprimir. Ej. v-print=" ‘printBorrowCard’ "

const print = {};

function printSection ( el, binding ){
   //inserting css
   let style = document.createElement('style');
   style.type = 'text/css';
   style.appendChild(document.createTextNode("@media screen{#printSection{display:none}}@media print{#printSection,body{overflow:visible!important}body *{visibility:hidden}#printSection,#printSection *{visibility:visible}#printSection{position:absolute;left:0;top:0;right:0}#printSection table{width:100%!important}}"));
   document.body.appendChild(style);

   let printSection = document.getElementById('printSection');

   if (!printSection) {
      printSection = document.createElement('div');
      printSection.id = 'printSection';
      document.body.appendChild(printSection);
  }

   el.addEventListener('click', () => {
      var elemToPrint = document.getElementById(binding.value);
      if (elemToPrint) {
         printSection.innerHTML = '';
         printElement(elemToPrint);
      }
   });

   function printElement( elem ){
      let domClone = elem.cloneNode(true);
      printSection.appendChild(domClone);
      window.print();
   }
}

print.install = function( Vue ){
   Vue.directive('print',{
      bind( el, binding){
         printSection( el, binding )
      }
   })
}

export default print

Nacho Anaya

teacher•

Genial, muchas gracias por el aporte!

Omar Crespo

student•

Aqui les dejo como quedo mi blur.js y mi blur.ts por la costumbre escribe la directiva en typescript 😂

// Blur.js
const blur = {}

function setBlur (el, binding) {
  !binding.value && (() => {
    el.style['filter'] = 'blur(3px)'
    el.style['cursor'] = 'not-allowed'

    el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
  })()
}

blur.install = Vue => Vue.directive('blur', { bind: setBlur })

export default blur

// Blur.ts
import { VNodeDirective, VueConstructor } from "vue";

function setBlur (el: HTMLElement, binding: VNodeDirective) {
    !binding.value && (() => {
        el.style['filter'] = 'blur(3px)'
        el.style['cursor'] = 'not-allowed'

        el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
    })()
}

const blur = {
    install (Vue: VueConstructor) {
        Vue.directive('blur', {
            bind: setBlur
        })
    }
}

export default blur

Rapha Montenegro

student•

Alguien más con este error?

[Vue warn]: Failed to resolve directive: blur

const blur = {}

function setBlur (el, binding) {
  el.style.filter = !binding.value ? 'blur(3px' : 'none'
  el.style.cursor = !binding.value ? 'not-allowed' : 'inherit'

  el.querySelectorAll('a').forEach(a => {
    if (!binding.value) {
      a.setAttribute('disabled', true)
    } else {
      a.removeAttribute('disabled')
    }
  })
}

blur.install = function (Vue) {
  Vue.directive(blur, {
    bind (el, binding) {
      setBlur(el, binding)
    }
  })
}

export default blur

Luis Donaldo Lopez Gil

student•

El nobre de la directiva blur es con camilla simple.

blur.install = function (Vue) {
  Vue.directive('blur', {
    bind (el, binding) {
      setBlur(el, binding)
    }
  })```

Alejandro González Reyes

student•

Interesante esto de las directivas. cambiar el comportamiento de los elementos dependiendo del valor en la data

Brayan Murcia Sanchez

student•

si deseara cambiar el style completo de un elemento como podria asignar esta directiva?.

Edward Steven Ramos Palacios

teacher•

Primero deberias crear tu directiva y sus funcionalidades. Luego la debes importar local o globalmente. Localmente es importarla directo en tu archivo vue en el objeto

import MiDirectiva from '...'
directives: {
  MiDirectiva
}

Globalmente es importarla en un Index.js y luego puedes usarla en cualquier parte de tu aplicacion.

Finalmente solo debes usarla dentro de un elemento de HTML segun con el nombre que le hayas dado:

<p v-mi-directiva></p>

Brayan Murcia Sanchez

student•

si deseara cambiar el atributo class completo de un elemento como podría asignar esta directiva?.

Diego Forero

Team Platzi•

Es mejor usar binding de las directivas HTML https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

jonathan sanchez

student•

Además del conjunto predeterminado de directivas incluidas en el núcleo (v-model y v-show), Vue también le permite registrar sus propias directivas personalizadas. la forma primaria de reutilización y abstracción del código son los componentes; sin embargo, puede haber casos en los que necesite un acceso al bajo nivel al DOM en elementos simples, y aquí es donde las directivas personalizadas seguirían siendo útiles.

Naldo Duran

student•

👌

Rogelio Alberto

student•

Creo este capitulo va despues de filtros, puesto que aqui los mencionan.

Nacho Anaya

teacher•

Esto es correcto, ya mismo reporto el error. Gracias por avisar!

José Rodríguez

student•

Tendras algun ejemplo de uso para los parametros NewNode y oldNode?

Nacho Anaya

teacher•

En realidad serian node y oldNode. Ambos contienen referencias del virtual DOM al node que contiene la directiva en cuestion. El valor oldNode solo serviria dentro de los hooks de directivas update o componentUpdated. La diferencia esta en que en oldNode podrias acceder al estado del node antes de que se hayan modificado valores o estado.

Te dejo el link a la documentacion.

José Jesús Palacios

student•

¿Ya no está disponible el servidor?:
PLatzi-music

error 404 (The deployment could not be found)

Nacho Anaya

teacher•

Al parecer estaba caido, ahora esta funcionando de nuevo. Gracias por avisarnos!

José Jesús Palacios

student•

Gracias

Darwin Rodríguez

student•

No manda el track al reproductor

Ricardo Celis

teacher•

pero el api si te lo está trayendo? podemos comenzar el troubleshooting desde ahí

Darwin Rodríguez

student•

El problema era que el evento estaba enlazado al span y no al button, gracias!