🧩 Exercícios Práticos: Sintaxe de Template e Diretivas Vue

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 03.1 — Renderização Condicional com v-if, v-else-if e v-else

Contexto: Renderização Condicional com v-if, v-else-if e v-else no contexto de Sintaxe de Template e Diretivas Vue.

Requisitos de Execução:

  1. Renderizar diferentes alertas conforme nível de severidade ('sucesso', 'aviso', 'erro').

Resultado Esperado

Elemento condicional renderizado conforme variável reativa.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_1_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template e Diretivas Vue
🔑 Gabarito de Código & Solução Comentada 
<!-- AlertaCondicional.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const tipo = ref<'sucesso' | 'aviso' | 'erro'>('sucesso');
</script>

<template>
  <div>
    <div v-if="tipo === 'sucesso'" class="alert-green">Operação realizada com sucesso!</div>
    <div v-else-if="tipo === 'aviso'" class="alert-yellow">Atenção: verifique seus dados.</div>
    <div v-else class="alert-red">Erro crítico no processamento.</div>
  </div>
</template>

🔍 Nível 2: Prática

Problema 03.2 — Iteração com v-for e Vínculo de Chave :key

Contexto: Iteração com v-for e Vínculo de Chave :key no contexto de Sintaxe de Template e Diretivas Vue.

Requisitos de Execução:

  1. Renderizar tabela de produtos iterando com v-for='prod in produtos' :key='prod.id'.

Resultado Esperado

Lista de produtos renderizada no DOM com rastreamento por chave única.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_2_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template e Diretivas Vue
🔑 Gabarito de Código & Solução Comentada 
<!-- TabelaProdutos.vue -->
<script setup lang="ts">
import { ref } from 'vue';

interface Produto { id: number; nome: string; preco: number; }
const produtos = ref<Produto[]>([
  { id: 1, nome: 'Notebook', preco: 4500.0 },
  { id: 2, nome: 'Mouse', preco: 120.0 }
]);
</script>

<template>
  <ul>
    <li v-for="p in produtos" :key="p.id">{{ p.nome }} - R$ {{ p.preco.toFixed(2) }}</li>
  </ul>
</template>

⚡ Nível 3: Integração

Problema 03.3 — Two-Way Data Binding com v-model e Modificadores (.lazy, .number, .trim)

Contexto: Two-Way Data Binding com v-model e Modificadores (.lazy, .number, .trim) no contexto de Sintaxe de Template e Diretivas Vue.

Requisitos de Execução:

  1. Criar formulário de cálculo com v-model.number='quantidade' e v-model.trim='cupom'.

Resultado Esperado

Conversão automática de tipos e remoção de espaços em branco nos inputs.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_3_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template e Diretivas Vue
🔑 Gabarito de Código & Solução Comentada 
<!-- FormModifiers.vue -->
<script setup lang="ts">
import { ref } from 'vue';

const quantidade = ref<number>(1);
const cupom = ref<string>('');
</script>

<template>
  <input v-model.number="quantidade" type="number" />
  <input v-model.trim="cupom" type="text" placeholder="CUPOM" />
</template>

🏆 Nível 4: Desafio Corporativo

Problema 03.4 — Criação de Diretiva Customizada v-focus e v-permission

Contexto: Criação de Diretiva Customizada v-focus e v-permission no contexto de Sintaxe de Template e Diretivas Vue.

Requisitos de Execução:

  1. Implementar diretiva v-permission='["ADMIN"]' que remova o elemento do DOM caso o usuário não tenha permissão.

Resultado Esperado

Elemento removido do DOM por diretiva customizada de autorização.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_4_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template e Diretivas Vue
🔑 Gabarito de Código & Solução Comentada 
// directives/vPermission.ts
import { Directive } from 'vue';

export const vPermission: Directive = {
  mounted(el, binding) {
    const rolesPermitidas = binding.value as string[];
    const userRole = 'USER'; // Simulado
    if (!rolesPermitidas.includes(userRole)) {
      el.parentNode?.removeChild(el);
    }
  }
};
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos