Como criar directivas personalizadas no Vue

As directivas são dispositivos linguísticos utilizados para dar instruções aos intérpretes e compiladores sobre como tratar os dados de entrada durante o processamento operacional.

As directivas em Vue são utilizadas para realizar várias operações, como adicionar ouvintes de eventos a elementos HTML através da inclusão de atributos adicionais nesses elementos.

A estrutura das diretivas do Vue

A utilização de diretivas no Vue é denotada pela aposição do prefixo “v-”, que serve para diferenciá-las dos atributos HTML padrão. Esta nomenclatura informa o compilador Vue que o atributo é uma diretiva, permitindo assim a implementação e aplicação do comportamento correspondente ao elemento HTML.

 <h2 v-show="true">Hello Vue</h2>
 

O Vue.js fornece uma infinidade de directivas inerentes, tais como v-bind , v-if e v-on , que facilitam a execução de várias operações, incluindo ligação de dados, renderização condicional, tratamento de eventos e muitas outras.

Definição de directivas personalizadas no Vue

Uma diretiva personalizada pode ser estabelecida numa aplicação Vue.js através de dois processos fundamentais. Inicialmente, o registo local ou global da diretiva deve ser realizado. Posteriormente, as funcionalidades da diretiva são delineadas através da utilização de hooks de ciclo de vida.

Registo de directivas personalizadas

Uma diretiva personalizada pode ser registada local ou globalmente, com base no seu âmbito designado. Embora seja típico registar directivas globalmente para uma maior acessibilidade ao longo de toda a aplicação Vue.

O registo local de directivas personalizadas é necessário quando estas são utilizadas num componente Vue simples. O processo de registar localmente uma diretiva ‘v-changecolor’ pode ser realizado da seguinte forma:

 <script setup>
const vChangecolor = {
  mounted(el, binding, value) {},
};
</script>

<template>
  <h2 v-changecolor>Learn about custom directives</h2>
</template>
 

Este exemplo de código ilustra o procedimento para implementar uma diretiva personalizada, conhecida como “v-changecolor”, dentro de um componente Vue. A diretiva é definida como um objeto que utiliza a convenção de nomenclatura camelCase, referida como “changeColor”.

Para incluir o registo de um imperativo no âmbito de uma aplicação abrangente, é necessário peregrinar em direção ao script principal situado na pasta de raiz do repositório do programa e inscrever a declaração nos seus limites:

 // main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('changecolor', {
    mounted(el, binding, vnode) {
    }
})

app.mount('#app')
 

O texto apresentado descreve um processo de registo de uma diretiva personalizada global, denominada “changecolor”, através da utilização do método “app.directive” numa aplicação.Posteriormente, a referida diretiva é montada num elemento HTML com a identificação “app” através do método “app.mount”.

A declaração acima mencionada realça que se tem a liberdade de selecionar as opções de registo internacional ou regional para personalizar directivas, que se alinham com os requisitos da sua aplicação.

Definição do comportamento de uma diretiva

É possível definir directivas personalizadas como objectos que contêm ganchos de ciclo de vida . Esses ganchos de ciclo de vida definem o comportamento da diretiva e recebem o elemento ao qual a diretiva está vinculada.

criação, montagem e atualização. Estes hooks oferecem funcionalidades que permitem a interatividade com o componente em várias fases da sua existência.

A utilização da técnica

para criar uma instância de um objeto com vários ganchos de ciclo de vida para uma diretiva Vue é a seguinte

 const directiveObject = {
    mounted(el, binding, vnode) {
    },
    
    updated(el, binding, vnode) {
     }
}

app.directive('changecolor', directiveObject)
 

As directivas personalizadas podem apresentar um comportamento semelhante durante as fases “montada” e “actualizada” e, na maioria dos casos, não há necessidade de ganchos de ciclo de vida adicionais. Além disso, uma proporção significativa de directivas personalizadas apenas necessitará dos hooks “mounted” e “updated” para funcionar corretamente.

Quando é necessário criar e gerir instâncias de uma classe em resposta a determinados eventos ou condições, é frequentemente mais adequado utilizar directivas baseadas em funções em vez de directivas orientadas para objectos com ganchos de ciclo de vida.

 app.directive('changecolor', (el, binding, vnode) => {
    const message = 'Are you sure you want to change the color?'

    el.addEventListener('click', () => {
        if (confirm(message)) {
            el.style.color = binding.value
             || "#" \\+ Math.random().toString().slice(2, 8);
        }
    })
})
 

O presente segmento de código utiliza uma diretiva universal personalizada, com a expressão “changecolor” como primeiro argumento. O seu segundo argumento é uma função abreviada que especifica o comportamento desta diretiva.

A diretiva “v-changecolor” é uma ferramenta versátil que permite a alteração dinâmica da tonalidade de qualquer componente a que esteja ligada. Ao clicar num ponto arbitrário do ecrã, este comando modifica aleatoriamente a tonalidade do componente.

O parâmetro el designa o elemento HTML que foi ligado pela diretiva, enquanto o parâmetro binding engloba os atributos que determinam a aplicação da diretiva. O parâmetro binding.value fornece a capacidade de escolher uma cor predefinida aquando da criação da aplicação VueJS. Finalmente, o parâmetro vnode inclui detalhes sobre o nó virtual do Vue.js correlacionado com o elemento.

A diretiva changecolor utiliza um ouvinte de eventos JavaScript para detetar a ocorrência de um evento, como uma ação iniciada pelo utilizador, que provoca a aplicação de uma alteração aleatória de cor a um elemento HTML. Esta transformação é confirmada por meio de uma caixa de diálogo de confirmação apresentada através da utilização do método confirm() .

O processo de validação da diretiva desenvolvida envolve a criação de uma aplicação utilizando o Vue que se assemelha ao seguinte exemplo:

 <script setup>
import { ref } from 'vue';

const name = ref('Victor')
</script>

<template>
  <div>
    <h2 v-changecolor="'red'">Hello Vue</h2>
    <h3 v-changecolor>Learn custom directives</h3>
    <p>Can't Wait to Get Started {{ name }}</p>
  </div>
</template>

<style>
div {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-family: cursive;
  align-items: center;
  inline-size: 100%;
  margin-block-start: 10%;
  justify-items: center;
}
</style>
 

Ao clicar em “Hello Vue” e “Learn Custom Directives”, é possível observar que o elemento com uma cor especificada permanece inalterado enquanto o elemento indefinido sofre uma transformação de cor arbitrária.

Indique a sua opção preferida clicando num dos botões fornecidos. Assim que tiver feito a sua seleção, procederemos à sua implementação imediata.

Liberte o poder de personalização do Vue

Uma diretiva personalizada oferece um meio de aceder ao Document Object Model (DOM) a um nível fundamental, permitindo a criação de funcionalidades que abrangem vários componentes numa aplicação Vue. A implementação de tais directivas não só melhora a escalabilidade de uma aplicação, como também simplifica o processo de desenvolvimento, fornecendo uma forma mais fácil de construir aplicações.

A última iteração do Vue, versão 3.3, foi equipada com várias novas capacidades