Diretivas personalizadas
Registar diretivas globais e locais com hooks do ciclo de vida, como mounted e updated, para encapsular a lógica de manipulação do DOM fora dos componentes.
Diretivas personalizadas é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são diretivas?
Diretivas são lógicas reutilizáveis de manipulação do DOM vinculadas a elementos pelo prefixo v-. Exemplos integrados: v-if, v-for, v-model e v-show. Diretivas personalizadas permitem que você crie as suas próprias.
Caso de uso: foco automático
Uma diretiva pode encapsular pequenos trechos de manipulação do DOM que não justificam um componente de encapsulamento.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Registro local de diretivas
Em <script setup>, declare diretivas com o prefixo v — o Vue as registra automaticamente no escopo local.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Registro global de diretivas
Use app.directive(name, definition) para disponibilizar uma diretiva em todos os lugares.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Ganchos do ciclo de vida das diretivas
As diretivas têm ganchos que refletem o ciclo de vida dos componentes: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount e unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};O objeto binding
Os ganchos recebem um objeto binding: value, oldValue, arg, modifiers e instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Exemplo real: v-click-outside
Uma diretiva comum — chama um manipulador quando o usuário clica fora do elemento.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>Exemplo real: v-tooltip
Anexe uma dica de ferramenta do Tippy/Popper por meio de uma diretiva — isso mantém os modelos limpos.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce: limitando eventos de entrada
Adicione uma limitação de eventos ao redor do manipulador @input de uma entrada usando uma diretiva personalizada.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Diretiva versus componente versus composable
Componíveis: lógica com estado, como dados e refs. Componentes: estrutura reutilizável de interface com seu próprio modelo. Diretivas: comportamento puro do DOM em um elemento existente. Escolha uma diretiva quando nenhum modelo ou marcação for necessário.
Considerações de desempenho
As diretivas são executadas em cada atualização. Mantenha-as econômicas. Para operações dispendiosas, verifique binding.value !== binding.oldValue para ignorar trabalho desnecessário.
Verificação rápida
Qual é a diferença entre usar uma diretiva do Vue e um componente do Vue para adicionar comportamento?
Recapitulação: diretivas personalizadas
Lógica reutilizável do DOM com prefixo v-. Registre localmente, usando a constante vName em script setup, ou globalmente, usando app.directive. Ganchos do ciclo de vida: mounted, updated e unmounted. binding fornece value, oldValue, arg e modifiers. Use diretivas para comportamento puro do DOM, como foco, clique fora, dica de ferramenta e limitação de eventos. Use componentes para marcação, composables para lógica com estado e diretivas para ampliar o DOM.
Perguntas Frequentes
A aula “Diretivas personalizadas” é grátis?
Sim — o texto completo de “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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Diretivas personalizadas”?
Registar diretivas globais e locais com hooks do ciclo de vida, como mounted e updated, para encapsular a lógica de manipulação do DOM fora dos componentes. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 3 de 4.
Quanto tempo leva a aula “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 Frontend Academy?
Sim. Cada aula de Frontend 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
- provide() e inject() para injeção de dependências
- Componentes assíncronos e Suspense
- Diretivas personalizadas
- Sistema de plugins: app.use()