Para iniciar o desenvolvimento com Vue 3 utilizando o Vite, execute o comando abaixo no seu terminal:

npm create vite@latest

Após a criação, navegue até a pasta do projeto e instale as dependências:

cd nome-do-projeto
npm install
npm run dev

Diretivas de Renderização Condicional

No Vue 3, controlamos a visiiblidade e a existência de elementos no DOM através de diretivas específicas. A principal diferença entre elas reside na forma como o navegador processa o elemento.

1. Controle de Fluxo: v-if, v-else-if e v-else

As diretivas v-if, v-else-if e v-else são usadas para renderizar blocos de código apenas quando certas condições são atendidas. Quando a condição é falsa, o Vue remove completamente o elemento da árvore do DOM.

Exemplo: Monitoramento de Disponibilidade

<template>
  <div class="container">
    <label>Quantidade em estoque:</label>
    <input type="number" v-model="quantidade" />
    
    <p v-if="quantidade > 50">Estoque OK ({{ quantidade }} unidades)</p>
    <p v-else-if="quantidade > 0 && quantidade <= 50">Atenção: Estoque baixo!</p>
    <p v-else>Produto indisponível no momento.</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const quantidade = ref(10)
</script>

2. Agrupamento com a tag <template>

Se você precisar aplicar uma condição a múltiplos elementos sem adicionar uma div extra ao DOM, pode utilizar a tag <template>. Ela atua como um invólucro invisível.

<template>
  <div>
    <template v-if="estaLogado">
      <h1>Bem-vindo de volta, Usuário!</h1>
      <button @click="alternarStatus">Sair</button>
    </template>
    
    <template v-else>
      <h1>Por favor, faça o login.</h1>
      <button @click="alternarStatus">Entrar</button>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const estaLogado = ref(false)

const alternarStatus = () => {
  estaLogado.value = !estaLogado.value
}
</script>

3. Alternância de Visibilidade: v-show

Diferente do v-if, a diretiva v-show mantém o elemento no DOM, mas altera a propriedade CSS display. É ideal para elementos que precisam ser alternados com frequência.

<template>
  <div>
    <div v-show="carregando">Processando dados...</div>
    <button @click="carregando = !carregando">Alternar Loader</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const carregando = ref(true)
</script>

Renderização de Listas: v-for

A diretiva v-for é utilizada para iterar sobre arrays ou objetos. É fundamental utilizar o atributo :key para garantir que o Vue consiga rastrear a identidade de cada nó e otimizar a renderização.

Exemplo: Listagem de Tecnologias

<template>
  <div class="lista-wrapper">
    <h3>Stack Tecnológica:</h3>
    <ul>
      <li v-for="(tech, index) in tecnologias" :key="index" class="item-lista">
        {{ index + 1 }}. {{ tech }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const tecnologias = ['TypeScript', 'Vue.js', 'Vite', 'Pinia', 'Tailwind CSS']
</script>

<style scoped>
.lista-wrapper {
  padding: 20px;
}
.item-lista {
  margin-bottom: 8px;
  color: #2c3e50;
  list-style: none;
  border-left: 4px solid #42b983;
  padding-left: 10px;
}
</style>