Diretivas

Excelente! Agora vamos explorar mais a fundo as diretivas do Vue.js — tanto as mais usadas quanto outras que são poderosas mas nem sempre conhecidas. Isso aqui é ouro pra quem tá aprendendo Vue de verdade. 🧠✨

🧩 O que são diretivas no Vue?

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.

🎯 Principais Diretivas do Vue.js

✅ 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 – 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>

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

✅ v-show – Mostrar/ocultar com display: none

Parecido com v-if, mas não remove o elemento do DOM, só esconde com CSS.

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

📌 Diferença principal:

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

✅ v-for – Repetição de elementos

Itera 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 – Bind de atributos (HTML dinâmico)

Liga 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 – Escutando eventos (click, submit, etc.)

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 – 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 – Insere texto como innerText

Mais seguro que v-html, mas pouco usado porque {{ }} já faz isso.

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

🔧 Outras Diretivas úteis

💡 Exemplo com várias diretivas:

<div id="app">
  <input v-model="nome" placeholder="Seu nome" />

  <p v-if="nome">Olá, {{ nome }}</p>
  <p v-else>Digite seu nome acima</p>

  <ul>
    <li v-for="item in lista" :key="item">{{ item }}</li>
  </ul>

  <button @click="adicionarItem">Adicionar item</button>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const nome = ref('')
      const lista = ref(['Vue', 'React'])

      const adicionarItem = () => {
        lista.value.push('Angular')
      }

      return { nome, lista, adicionarItem }
    }
  }).mount('#app')
</script>

📌 Dica final:

Quer praticar? Pegue cada diretiva e tente aplicá-la em um mini-projetinho:

• um contador,
• uma lista de tarefas,
• um formulário de login,
• um modo escuro com v-if/v-show.

Se quiser, posso te passar exercícios guiados com essas diretivas pra você treinar. Quer?