Como escrever diretivas personalizadas
app.directive(), hooks mounted/updated/unmounted, argumentos de diretivas e modificadores.
Como escrever diretivas personalizadas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Quando os componentes não são suficientes
A maior parte da reutilização em Vue acontece por meio de componentes e elementos reutilizáveis. Mas algumas lógicas atuam diretamente sobre o DOM — como definir o foco automático de um campo de entrada, integrar uma biblioteca que não usa Vue ou medir um elemento. Diretivas personalizadas existem exatamente para isso.
Uma diretiva mínima
Registre uma diretiva no aplicativo com app.directive. O gancho mounted recebe o elemento, então esta diretiva coloca o foco em um campo de entrada quando ele aparece.
const app = createApp(App)
app.directive('focus', {
mounted(el) { el.focus() }
})Usando a diretiva
Aplique-a em um modelo usando o prefixo v- seguido do nome registrado.
<template>
<input v-focus />
</template>Diretivas locais em script setup
Dentro de <script setup>, qualquer variável de nível superior que comece com v e esteja em camelCase se torna uma diretiva utilizável. Dê a ela o nome vFocus e use-a como v-focus.
<script setup>
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>O objeto de associação
Cada gancho recebe um objeto binding como segundo argumento. Ele contém o valor, o argumento e os modificadores da diretiva passados no modelo.
app.directive('demo', {
mounted(el, binding) {
console.log(binding.value, binding.arg, binding.modifiers)
}
})Passando um valor
A expressão depois do sinal de igualdade se torna binding.value. Aqui, uma cor é passada e aplicada ao elemento.
<!-- template -->
<p v-color="'red'">Hello</p>
<!-- directive -->
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value }
})Passando um argumento
A parte depois dos dois-pontos se torna binding.arg. Isso permite que uma diretiva se comporte de maneira diferente com base em um rótulo.
<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>Usando modificadores
Os modificadores aparecem depois de pontos e chegam em binding.modifiers como um mapa de valores booleanos. Use-os para ajustar o comportamento.
<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>Ganchos do ciclo de vida das diretivas
As diretivas têm ganchos que espelham o ciclo de vida dos componentes: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount e unmounted.
Reagindo a atualizações
O gancho updated é executado depois que o elemento é renderizado novamente. Compare binding.value com binding.oldValue para agir somente em alterações reais e faça a limpeza em unmounted.
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value },
updated(el, binding) {
if (binding.value !== binding.oldValue) el.style.color = binding.value
}
})Diretivas versus componentes
Prefira componentes para qualquer coisa que envolva estrutura ou estado. Use diretivas somente quando precisar de acesso direto e de baixo nível ao DOM, em situações que não se encaixam em um componente, como gerenciamento de foco ou componentes visuais do DOM de terceiros.
Verificação rápida
Teste seus conhecimentos sobre diretivas personalizadas.
Recapitulação
Você aprendeu a criar diretivas personalizadas:
- Registre-as globalmente com
app.directiveou localmente comovNameem script setup. binding.value,binding.argebinding.modifierstransmitem dados.- Ganchos do ciclo de vida: criadas, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.
- Use diretivas para operações de baixo nível no DOM; caso contrário, prefira componentes.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Como escrever diretivas personalizadas” é grátis?
Sim — o texto completo de “Como escrever diretivas personalizadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Como escrever diretivas personalizadas”?
app.directive(), hooks mounted/updated/unmounted, argumentos de diretivas e modificadores. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Como escrever diretivas personalizadas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- v-model: elementos internos da vinculação bidirecional
- Modificadores de eventos v-on
- Vinculações dinâmicas e múltiplas com v-bind
- Como escrever diretivas personalizadas