Como você cria uma diretiva personalizada?

Question

Accepted Answer

**Diretivas personalizadas** permitem encapsular **manipulação de DOM de baixo nível** como um atributo `v-*` reutilizável. Use-as quando precisar de acesso direto a um elemento (foco, scroll, bibliotecas DOM de terceiros) — coisas que componentes/props não cobrem naturalmente. ## Definindo uma diretiva local ```vue ``` A convenção de nomenclatura: uma variável `vFocus` torna-se a diretiva `v-focus`. ## Hooks de diretivas (espelhando o ciclo de vida do componente) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## Usando o valor de binding e o argumento ```vue ``` O objeto `binding` carrega `value` (a expressão), `arg` (após o dois-pontos), `modifiers` (após pontos) e `oldValue`. ## Um exemplo prático: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Registro global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Por que isso importa Diretivas personalizadas são a ferramenta certa para **comportamento de DOM reutilizável e de baixo nível** — autofoco, click-outside, lazy-loading de imagens, tooltips, integração de bibliotecas DOM não-Vue. Elas mantêm essa lógica imperativa de DOM encapsulada e declarativa (`v-click-outside`) em vez de espalhada em hooks de ciclo de vida. Conhecer os hooks e o objeto `binding` (value/arg/modifiers), mais limpeza em `unmounted`, cobre seu uso prático — embora para a maioria da lógica de UI, componentes ainda sejam a melhor escolha.