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
refpara 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
