Les directives personalitzades a Vue.js permeten encapsular comportaments DOM reutilitzables que no es poden aconseguir fàcilment amb les directives integrades. Aquest mòdul t'ensenyarà com crear i utilitzar directives personalitzades per afegir funcionalitats específiques als teus components.

1. Directives integrades vs. personalitzades:

   • Directives integrades: v-if, v-for, v-bind, etc.
   • Directives personalitzades: Directives creades per l'usuari per a necessitats específiques.

2. Cicle de vida de les directives:

   • bind: S'executa una vegada quan la directiva s'uneix a l'element.
   • inserted: S'executa quan l'element és inserit al DOM.
   • update: S'executa quan l'element actualitzat.
   • componentUpdated: S'executa després que el component i els seus fills hagin estat actualitzats.
   • unbind: S'executa una vegada quan la directiva es deslliga de l'element.

1. Definició de la directiva:

   Vue.directive('focus', {
     // Quan l'element vinculat és inserit al DOM...
     inserted: function (el) {
       // Enfoca l'element
       el.focus();
     }
   });
   

2. Utilització de la directiva:

   <template>
     <div>
       <input v-focus />
     </div>
   </template>
   

1. Definició de la directiva:

   Vue.directive('background', {
     bind(el, binding) {
       el.style.backgroundColor = binding.value;
     },
     update(el, binding) {
       el.style.backgroundColor = binding.value;
     }
   });
   

2. Utilització de la directiva:

   <template>
     <div>
       <p v-background="'yellow'">Aquest paràgraf té un fons groc.</p>
       <p v-background="'lightblue'">Aquest paràgraf té un fons blau clar.</p>
     </div>
   </template>
   

1. Objectiu: Crear una directiva que canviï el color del text d'un element.

2. Definició de la directiva:

   Vue.directive('text-color', {
     bind(el, binding) {
       el.style.color = binding.value;
     },
     update(el, binding) {
       el.style.color = binding.value;
     }
   });
   

3. Utilització de la directiva:

   <template>
     <div>
       <p v-text-color="'red'">Aquest text és vermell.</p>
       <p v-text-color="'green'">Aquest text és verd.</p>
     </div>
   </template>
   

1. Objectiu: Crear una directiva que canviï la mida del text d'un element.

2. Definició de la directiva:

   Vue.directive('text-size', {
     bind(el, binding) {
       el.style.fontSize = binding.value + 'px';
     },
     update(el, binding) {
       el.style.fontSize = binding.value + 'px';
     }
   });
   

3. Utilització de la directiva:

   <template>
     <div>
       <p v-text-size="20">Aquest text té una mida de 20px.</p>
       <p v-text-size="30">Aquest text té una mida de 30px.</p>
     </div>
   </template>
   

1. No oblidar el cicle de vida: Assegura't d'utilitzar els ganxos del cicle de vida correctament (bind, inserted, update, etc.) per evitar comportaments inesperats.
2. Evitar la lògica complexa: Les directives haurien de ser simples i enfocades a la manipulació del DOM. Per a lògica més complexa, considera utilitzar components.
3. Neteja: Utilitza el ganxo unbind per netejar qualsevol efecte secundari quan la directiva es deslliga de l'element.

En aquest mòdul, has après a crear directives personalitzades a Vue.js per encapsular comportaments DOM reutilitzables. Has vist exemples pràctics de directives per enfocar un element, canviar el color de fons, el color del text i la mida del text. També has après sobre el cicle de vida de les directives i alguns errors comuns a evitar. Amb aquestes habilitats, pots crear directives personalitzades per satisfer les necessitats específiques de la teva aplicació Vue.js.