Construindo um Alternador de Status da Loja em Vue.js

Introdução

Neste projeto, você aprenderá a construir uma aplicação Vue.js simples que permite aos usuários alternar o status comercial de uma loja entre "aberto" e "fechado". A aplicação exibirá o status atual da loja e a imagem correspondente com base no status. Os usuários podem clicar em um botão de alternância para mudar o status comercial da loja.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a estrutura do projeto com as pastas e arquivos necessários
• Como criar a configuração do Vue.js e definir o estado reativo e a funcionalidade de alternância
• Como implementar a estrutura HTML e os estilos CSS para exibir o status comercial da loja e o botão de alternância
• Como integrar a funcionalidade de alternância para permitir que os usuários mudem o status comercial da loja

🏆 Conquistas

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

• Configurar uma estrutura básica de projeto Vue.js
• Usar a função ref para criar variáveis de estado reativas
• Definir e usar funções personalizadas na configuração do Vue.js
• Vincular dados e manipuladores de eventos no template HTML
• Estilizar a aplicação usando CSS para criar uma interface visualmente atraente

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
├── images
├── lib
└── index.html

Dentre eles:

• css é a pasta onde os estilos do projeto são armazenados.
• images é a pasta onde as imagens do projeto são armazenadas.
• lib é a pasta onde as dependências JS do projeto são armazenadas.
• index.html é a página principal.

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 para ver a página.

Implementar a Funcionalidade de Alternância

Nesta etapa, você implementará a funcionalidade de alternância para mudar o status comercial da loja.

1. Abra o arquivo index.html.

2. Na função useToggle, substitua o comentário // TODO pelo seguinte código:

   function useToggle(state) {
     // TODO
     const toggledState = ref(state);
   
     function toggle() {
       toggledState.value = !toggledState.value;
     }
     return [toggledState, toggle];
   }
   

   Esta implementação usa a função ref do Vue.js para criar uma variável de estado reativa toggledState e uma função toggle que atualiza o estado.

3. Teste a aplicação clicando no botão de alternância. O status comercial da loja deve alternar entre "aberto" e "fechado", e a imagem correspondente deve mudar de acordo.

Parabéns! Você concluiu a implementação da aplicação Switch Business Status usando Vue.js. 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.