Como criar diretivas personalizadas no Vue

As diretivas personalizadas permitem estender a funcionalidade de suas páginas da web Vue de forma escalonável e modular.

As diretivas são construções de programação que especificam como os intérpretes e compiladores devem processar as entradas para uma operação. As diretivas Vue estendem a funcionalidade dos elementos HTML nos modelos Vue, permitindo a manipulação direta do DOM.

Você pode usar diretivas no Vue para adicionar ouvintes de eventos, entre outras operações. Você anexará atributos extras aos elementos HTML para usar diretivas em seu aplicativo.

A Estrutura das Diretivas Vue

As diretivas no Vue têm um prefixo v- para distingui-las dos atributos HTML normais. O prefixo v- informa ao compilador Vue que o atributo é uma diretiva Vue para que ele possa processar e aplicar o comportamento dessa diretiva ao elemento HTML.

Aqui está um exemplo que demonstra o uso do atributo v-show para exibir o conteúdo de um elemento h2:

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

Vue.js tem muito mais diretivas integradas como v-bind, v-if e v-on, permitindo que você execute tarefas como vinculação de dados, renderização condicional, manipulação de eventos e muito mais.

Definindo diretivas personalizadas no Vue

Você pode definir diretivas personalizadas para adicionar funcionalidades novas e reutilizáveis para seus aplicativos Vue.js. A criação de diretivas personalizadas requer duas etapas principais. Primeiro, você registrará a diretiva local ou globalmente. Em seguida, você definirá o comportamento da diretiva com ganchos de ciclo de vida.

Registrando Diretivas Aduaneiras

Você pode registrar uma diretiva personalizada no Vue local ou globalmente, dependendo do escopo pretendido. No entanto, é uma prática mais comum registar directivas a nível mundial. Isso garante que as diretivas estejam disponíveis em qualquer lugar dentro do seu aplicativo Vue.

Você pode registrar diretivas personalizadas localmente se pretende usar a diretiva personalizada dentro de um componente Vue simples. Veja como você pode registrar uma diretiva v-changecolor localmente:

<script setup>
const vChangecolor = {
  mounted(el, binding, value) {},
};
</script>
<template>
  <h2 v-changecolor>Learn about custom directives</h2>
</template>

Este bloco de código demonstra o registro local de uma diretiva customizada em um componente Vue. Ela define a diretiva v-changecolor como um objeto em camel case changeColor.

Para registrar sua diretiva em um escopo global, vá até o arquivo main.js na raiz do diretório do seu aplicativo e defina-o lá:

// 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')

Este programa registra uma diretiva personalizada global usando o método app.directive. Ele chama app.directive para registrar a diretiva changecolor no aplicativo e então usa o método app.mount para montar o aplicativo em um elemento HTML com o ID do aplicativo.

Você pode escolher entre as opções globais e locais para registrar diretivas personalizadas com base nas necessidades do seu aplicativo.

Definindo o comportamento de uma diretiva

Você pode definir diretivas personalizadas como objetos contendo 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.

Alguns exemplos de ganchos de ciclo de vida são criados, montados e atualizados. Cada um desses ganchos fornece funcionalidade para interagir com o componente em um estágio específico.

Você pode usar o gancho de ciclo de vida mounted para acessar o elemento HTML de um componente no Document Object Model (DOM) depois que o compilador Vue.js monta o aplicativo. Por outro lado, o gancho do ciclo de vida updated pode realizar atualizações adicionais nos componentes após a reestruturação do componente.

Veja como você pode definir um objeto que contém vários ganchos de ciclo de vida para uma diretiva Vue:

const directiveObject = {
    mounted(el, binding, vnode) {
    },
    
    updated(el, binding, vnode) { 
    }
}
app.directive('changecolor', directiveObject)

As diretivas personalizadas podem ter o mesmo comportamento para os ganchos montados e atualizados, sem necessidade de outros ganchos de ciclo de vida. Além disso, muitas diretivas personalizadas que você criará exigirão apenas os ganchos mounted e updated.

Nesses casos, é comum definir diretivas como funções em vez de objetos 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);
        }
    })
})

Este bloco de código define uma diretiva global personalizada com a string changecolor como primeiro argumento. O segundo argumento é uma função abreviada que define o comportamento da diretiva.

Como o nome indica, a diretiva v-changecolor altera a cor de qualquer elemento HTML ao qual você a anexa. A diretiva pode alterar a cor do elemento HTML aleatoriamente com um clique.

O parâmetro el representa o elemento HTML que você anexou à diretiva. O parâmetro binding é um objeto que contém propriedades que definem como aplicar a diretiva. O parâmetro binding.value permite selecionar uma cor padrão ao criar o aplicativo Vue. O parâmetro vnode contém informações sobre o nó virtual Vue.js associado ao elemento.

A diretiva changecolor usa um ouvinte de evento JavaScript para capturar o evento que é acionado quando você clica no elemento HTML. O método confirm() exibe uma caixa de diálogo solicitando que você confirme se deseja alterar a cor do elemento aleatoriamente.

Para testar a diretiva criada, configure um aplicativo Vue semelhante ao abaixo:

<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>

Observe que este código atribui a cor vermelho à tag h2 mas nenhuma cor à tag h3. Ao visualizar seu aplicativo Vue em um navegador, ele deverá ficar assim:

Clicando em Hello Vue e em Aprenda diretivas personalizadas, você notará que a tag definida como vermelha permanecerá vermelha, mas a tag sem valor atribuído a ela mudará para um cor aleatória.

Isso acontecerá após você confirmar sua escolha, conforme demonstrado abaixo:

Libere o poder de personalização do Vue

As diretivas personalizadas fornecem acesso de baixo nível ao DOM, permitindo criar funcionalidades em diferentes componentes do aplicativo Vue, melhorando a escalabilidade do seu aplicativo. Seguindo as etapas do artigo, você pode criar diretivas personalizadas para facilitar o processo de desenvolvimento de seu aplicativo.