Botões Vue.js e Atualização de Valor

Introdução

Neste projeto, você aprenderá como configurar um ambiente Vue.js e implementar a funcionalidade de botões para atualizar um valor exibido em uma página web.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar um ambiente Vue.js
• Como implementar a funcionalidade dos botões - e + para atualizar o valor
• Como testar a funcionalidade dos botões

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Configurar uma aplicação Vue.js básica
• Criar um objeto de dados reativo e atualizar seus valores
• Usar manipuladores de eventos (event handlers) para chamar funções e atualizar a interface do usuário (UI)

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── css
│   └── style.css
├── index.html
└── js

Dentre eles:

• index.html é a página principal a ser modificada.
• css é a pasta que armazena os estilos do projeto.
• js é o arquivo Vue do qual o projeto depende.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente; você verá a página. Clique nos botões - e + na página e perceberá que o valor no meio não pode ser alterado. O efeito da página é o seguinte:

Função de Reparo

Nesta etapa, você precisa corrigir o bug para que, ao clicar nos botões "-" e "+" na página, os valores no centro mudem de acordo.

1. No arquivo index.html, localize a seção // TODO:
2. Modifique-a para o seguinte código:

// TODO
let { value } = toRefs(data);

3. Nos manipuladores de eventos @click para os botões "-" e "+", chame a função update e passe o valor atualizado como um argumento.
4. Na função update, atualize a propriedade value com o novo valor passado como um argumento.

Após concluir estas etapas, clique nos botões "-" e "+" na página e os valores no centro mudarão de acordo.

O efeito após a conclusão é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.