Diretivas • IzaTec

DOM

DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma representação em forma de árvore de todos os elementos de uma página HTML.

Estrutura

Quando você escreve um código HTML como esse:

<html>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Esse é um parágrafo.</p>
  </body>
</html>

O navegador interpreta esse HTML e cria uma estrutura de árvore, onde cada parte do código vira um objeto.

A estrutura ficaria assim:

document
 └── html
      └── body
           ├── h1 ("Olá, mundo!")
           └── p ("Esse é um parágrafo.")

O DOM permite que linguagens de programação, como o JavaScript, possam:

Ler o conteúdo da página
Alterar textos, imagens, estilos etc.
Adicionar ou remover elementos
Reagir a eventos (como cliques)

Exemplo em JavaScript:

document.querySelector('h1').textContent = "Título alterado!";

Esse código muda o texto do <h1> na página.

Resumo

Termo	Significado
DOM	Representação da página HTML como objetos em forma de árvore
Finalidade	Permitir acesso e manipulação da página por scripts (ex: JavaScript)
Exemplo de uso	Alterar conteúdo, reagir a cliques, adicionar elementos

Diretivas São?

No Vue, diretivas são atributos especiais no HTML que aplicam comportamentos reativos aos elementos do DOM. Elas sempre começam com v-, que indica que são tratadas pelo Vue.

Para as demonstrações sobre diretivas, nós criamos um projeto Vue utilizando Vite, conforme instruções em nosso tema Setup - Vite

▶️ v-model

Diretiva v-model

A diretiva v-model (Ligação bidirecional input ↔ dados), liga um campo de formulário a uma variável do data() ou setup().

<input v-model="nome" />
<p>Olá, {{ nome }}</p>

🔁 O valor do input e o valor da variável estão sempre sincronizados.

▶️ v-if

Diretivas v-if e v-show

A diretiva v-if (Renderização condicional) renderiza o elemento somente se a condição for verdadeira.

<p v-if="logado">Bem-vindo!</p>
<p v-else>Faça login</p>

Expressões condicionais

✅ Usa também v-else-if e v-else.

v-show

A diretiva v-show parecido com v-if, mas não remove o elemento do DOM, só esconde com CSS (Mostrar/ocultar com display: none)

<p v-show="logado">Você está logado</p>

📌 Diferença principal:

v-if adiciona/remove do DOM
v-show apenas mostra/esconde

v-for

Diretiva v-for

A diretiva v-for realiza a repetição de elementos, ideal para iterar sobre uma lista/array e repete o elemento.

<ul>
  <li v-for="item in itens" :key="item.id">{{ item.nome }}</li>
</ul>

📌 Sempre use :key para melhorar a performance e evitar bugs.

v-bind

A diretiva v-bind liga (Bind de atributos HTML dinâmico) um valor JS a um atributo HTML (como href, class, src, etc.).

<img v-bind:src="urlImagem" />
<!-- ou forma abreviada -->
<img :src="urlImagem" />

v-on

A diretiva v-on escuta eventos (click, submit, etc.), o mesmo que adiciona eventos DOM aos elementos.

<button v-on:click="fazerAlgo">Clique</button>
<!-- ou forma abreviada -->
<button @click="fazerAlgo">Clique</button>

🎯 Pode usar com modificadores: .prevent, .stop, .once, etc.

v-html

A diretiva v-html renderiza HTML bruto (com cuidado!), insere HTML diretamente no DOM. Use com cautela! (pode expor a XSS).

<div v-html="htmlComoTexto"></div>

⚠️ Só use com conteúdo confiável ou processado.

v-text

A diretiva v-text insere texto como innerText, mais seguro que v-html, mas pouco usado porque {{ }} já faz isso.

<p v-text="mensagem"></p>

Diretivas úteis

Diretiva	O que faz
`v-pre`	Ignora compilação Vue naquele elemento
`v-cloak`	Esconde conteúdo até que o Vue esteja completamente montado
`v-once`	Renderiza uma única vez (não será reativo depois)

<img :src="imagemUrl">

é o mesmo que:

<img v-bind:src="imagemUrl">

`@` é atalho para `v-on`

Usado para ouvir eventos, como cliques, envio de formulário, teclas, etc.

Exemplo:

<button @click="enviarFormulario">Enviar</button>

é o mesmo que:

<button v-on:click="enviarFormulario">Enviar</button>

Resumo prático:

Atalho	Equivalente completo	Uso
`:`	`v-bind:`	Bind de atributos ou props
`@`	`v-on:`	Escuta de eventos do DOM

Exemplos lado a lado:

<!-- v-bind -->
<a :href="link">Link Dinâmico</a>

<!-- v-on -->
<button @click="dizerOla">Clique aqui</button>

Setup

Vamos criar o nosso projeto utilizando as abordagens disponíveis

Eventos