Como criar diretivas personalizadas no Vue

As diretivas são construções de programação que especificam como os interpretadores 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 a elementos HTML para usar diretivas em seu aplicativo.

A Estrutura das Diretivas Vue

Diretivas em Vue têm um v- prefixo para distingui-los dos atributos HTML normais. O v- prefix diz 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 v-show atributo para exibir o conteúdo de um h2 elemento:

"verdadeiro">Olá Vue</h2>

O Vue.js tem muito mais diretivas integradas como

v-bind, v-se, e v on, permitindo que você execute tarefas como ligação de dados, renderização condicional, Manipulação de eventos, e mais.

Definindo Diretivas Customizadas no Vue

Você pode definir diretivas personalizadas para adicionar novas funcionalidades 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 Customizadas

Você pode registrar uma diretiva personalizada no Vue local ou globalmente, dependendo do escopo pretendido. No entanto, é uma prática mais comum registrar diretivas globalmente. Isso garante que as diretivas estejam disponíveis em todos os lugares 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 um v-mudar de cor diretiva localmente: