Exercícios sobre Vue.js

🧾 Exercício 1

Crie uma lista de tarefas simples em Vue onde: 1. Renderize uma lista a partir de um array. 2. Mostre cada item dinamicamente com v-for.

🧾 Exercício 2

Utilizando a ideia de componentes, crie um componente de item de tarefa que receba as propriedades necessárias e seja que reutilizável.

🧾 Exercício 3

Crie um componente de formulário que permita implementar um CRUD completo de objetos tarefas, incluindo: 1. Create: Adicionar novas tarefas à lista 2. Read: Exibir todas as tarefas existentes 3. Update: Editar tarefas existentes 4. Delete: Remover tarefas da lista

Nota: Use como base o código de exemplo para a realização desse exercício.

🧾 Exercício 4

Baseie-se no tutorial para realizar o exercício 3 novamente, porém, agora no formato de projeto do Vue.

🧾 Exercício 5

Primeiro, abra o projeto cpw2-todo por meio do Codespace e realize as seguintes modificações:

1. Utilize o Bulma.io para ajustar o CSS do componente Task.vue, garantindo uma organização visual adequada.

1. No componente TaskApp.vue, modifique a função beforeMount para implementar as diretivas async/await.

Nota: Para rodar o projeto é necessário que você execute os seguintes comandos na linha de comando:

npm install
npm run dev

🧾 Exercício 6

Para implementar esse exercício primeiro instale o JSON server no seu Code Space. O JSON Server é uma ferramenta que permite criar uma API RESTful falsa rapidamente, utilizando um arquivo JSON como banco de dados.

npm install -g json-server

Para rodar o servidor:

json-server --watch data.json --port 3000

O json-server irá observer arquivo data.json (abaixo) na porta 3000 do HTTP:

{
    "tasks":[
    { "id": "1", "name": "Task 1", "description": "Description for Task 1", "done": false },
    { "id": "2", "name": "Task 2", "description": "Description for Task 2", "done": false },
    { "id": "3", "name": "Task 1", "description": "Description for Task 3", "done": false }
  ]
}

A saìda do JSON Server irá criar o seguinte endpoint:

Endpoints: http://localhost:3000/tasks

Se por exemplo você necessitar realizar operaçoes na tarefa 2, voce pode utilizar o seguinte endpoint: http://localhost:3000/tasks/2

Depois de instalado, atualize o seu sistema para poder criar novas tarefas no arquivo data.json

Exemplo de requisição PUT para o servidor implementada com o método fetch

async updateTask(task) {
  try {
    const response = await fetch(`http://localhost/tasks/${task.id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(updatedTask)
  });
  if (response.ok) {
    alert('Task updated successfully!');
  }
  }
  catch (error) {
    console.error('Error updating task:', error);
  }
}

Nota: JSON.stringify() transforma um objeto JavaScript em uma string no formato JSON. Por exemplo:

const tarefa = {
  titulo: "Estudar Vue",
  concluida: false
}

Será transformada para:

{"titulo":"Estudar Vue","concluida":false}

🧾 Exercício 7 — Aplicativo de Despesas Pessoais 💰

Crie uma aplicação Vue.js para controlar despesas pessoais.

🧠 Requisitos

1. Listagem de despesas

• Cada despesa deve ter:
  • id,
  • descricao,
  • categoria (ex: Alimentação, Transporte, Lazer, etc.),
  • valor,
  • data.
• Os dados vêm de uma API fake (JSON Server).

1. Adicionar e remover despesas

• Crie um formulário para adicionar novas despesas.
• Permita excluir despesas individuais.
• Atualize a lista dinamicamente após cada ação.

1. Resumo

• Mostre o total gasto.

💡 Ideia de compoenentes:

• <ExpenseList /> — lista de despesas, com filtros
• <ExpenseForm /> — formulário de criação
• <SummaryCard /> — total de gastos