Definição

Diretivas no Vue são atributos especiais que começam com v-.
Elas permitem aplicar comportamentos dinâmicos no HTML, controlando desde a renderização de elementos até a forma como eles interagem com os dados.

Na prática, as diretivas são a forma que o Vue nos dá para ligar a lógica do JavaScript ao HTML.

---

v-if, v-else e v-else-if

• v-if → Renderiza o elemento apenas se a condição for verdadeira.

• v-else → Renderiza o elemento apenas se a condição anterior (v-if ou v-else-if) for falsa.

• v-else-if → Permite encadear mais de uma condição.

Exemplo:

<p v-if="count === 0">O contador ainda não começou.</p>
<p v-else-if="count > 0 && count < 5">O contador está entre 1 e 4.</p>
<p v-else>O contador já é 5 ou mais!</p>

Aqui temos três casos possíveis, e apenas um será mostrado de cada vez.

👉 O ponto importante é que o Vue não apenas esconde visualmente com essas diretivas, ele realmente remove o elemento do HTML quando a condição é falsa.

---

v-show

O v-show também serve para mostrar ou esconder elementos, mas funciona de forma diferente do v-if.

• v-if → adiciona ou remove o elemento do DOM.

• v-show → mantém o elemento no DOM, mas controla a visibilidade com display: none.

Exemplo:

<p v-show="count % 2 === 0">O número é par</p>

Nesse caso, o elemento sempre existe no HTML, mas só fica visível quando a condição é verdadeira.

👉 Quando usar cada um?

• Use v-if quando a condição muda pouco (elementos realmente opcionais).

• Use v-show quando você precisa alternar muitas vezes entre mostrar e esconder (por exemplo, um menu dropdown).

---

v-for

O v-for é usado para criar listas de elementos a partir de um array.

Exemplo:

<ul>
  <li v-for="item in ['Vue', 'React', 'Angular']" :key="item">
    {{ item }}
  </li>
</ul>

Resultado:

• Vue

• React

• Angular

Aqui o v-for percorre cada item do array e cria um <li> para cada um.
O :key é obrigatório para ajudar o Vue a identificar cada elemento da lista e atualizar apenas o que mudou.

---

v-model

O v-model cria um binding em duas direções (two-way binding).
Isso significa que ele conecta o valor de um campo do formulário com uma variável, e qualquer alteração em um deles atualiza automaticamente o outro.

Exemplo:

<input v-model="msg" />
<p>Você digitou: {{ msg }}</p>

Nesse caso, o conteúdo do input está sempre sincronizado com a variável msg.
Se você digitar no input, o parágrafo muda; se a variável mudar por código, o input também é atualizado.

---

HelloWorld.vue com diretivas

Podemos adaptar o nosso componente HelloWorld.vue para testar essas diretivas:

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">
      count is {{ count }}
    </button>

    <!-- v-if / v-else-if / v-else -->
    <p v-if="count === 0">O contador ainda não começou.</p>
    <p v-else-if="count > 0 && count < 5">O contador está entre 1 e 4.</p>
    <p v-else>O contador já é 5 ou mais!</p>

    <!-- v-show -->
    <p v-show="count % 2 === 0">O número é par</p>

    <!-- v-for -->
    <ul>
      <li v-for="n in count" :key="n">Item {{ n }}</li>
    </ul>

    <!-- v-model -->
    <input v-model="msg" />
    <p>Mensagem digitada: {{ msg }}</p>
  </div>
</template>

O que está acontecendo:

• v-if / v-else-if / v-else → mostra mensagens diferentes conforme o valor do contador.

• v-show="count % 2 === 0" → mostra a mensagem apenas quando o número é par, mas o elemento continua existindo no DOM.

• v-for="n in count" → gera uma lista dinâmica de acordo com o contador.

• v-model="msg" → conecta o valor digitado no input à variável msg.

---

Conclusão dessa parte

Agora temos um conjunto de diretivas que dão muito mais poder ao Vue:

• v-if , v-else-if e v-else → controlam se um elemento aparece ou não, com várias condições encadeadas.

• v-show → alterna a visibilidade sem remover o elemento do DOM.

• v-for → cria listas de elementos.

• v-model → conecta inputs com variáveis reativas.

Essas diretivas, junto com interpolação e binding, são a base de praticamente toda aplicação Vue.
Com elas, conseguimos criar interfaces que reagem automaticamente aos dados, de forma simples e intuitiva.

👉 No próximo passo, podemos falar sobre Events e a comunicação entre componentes, que levam a reatividade para outro nível.