Création d'un commutateur d'état de magasin en Vue.js

Introduction

Dans ce projet, vous allez apprendre à construire une application simple en Vue.js qui permet aux utilisateurs de basculer l'état commercial d'un magasin entre "ouvert" et "fermé". L'application affichera l'état actuel du magasin et l'image correspondante en fonction de l'état. Les utilisateurs peuvent cliquer sur un bouton de basculement pour basculer l'état commercial du magasin.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la structure du projet avec les dossiers et les fichiers nécessaires
• Comment créer la configuration Vue.js et définir l'état réactif et la fonctionnalité de basculement
• Comment implémenter la structure HTML et les styles CSS pour afficher l'état commercial du magasin et le bouton de basculement
• Comment intégrer la fonctionnalité de basculement pour permettre aux utilisateurs de basculer l'état commercial du magasin

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer une structure de base de projet Vue.js
• Utiliser la fonction ref pour créer des variables d'état réactives
• Définir et utiliser des fonctions personnalisées dans la configuration Vue.js
• Lier les données et les gestionnaires d'événements dans le modèle HTML
• Styliser l'application à l'aide de CSS pour créer une interface visuellement attrayante

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
├── images
├── lib
└── index.html

Dans laquelle :

• css est le dossier où sont stockées les styles du projet.
• images est le dossier où sont stockées les images du projet.
• lib est le dossier où sont stockées les dépendances JS du projet.
• index.html est la page principale.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Implémenter la fonctionnalité de basculement

Dans cette étape, vous allez implémenter la fonctionnalité de basculement pour basculer l'état commercial du magasin.

1. Ouvrez le fichier index.html.

2. Dans la fonction useToggle, remplacez le commentaire // TODO par le code suivant :

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

   Cette implémentation utilise la fonction ref de Vue.js pour créer une variable d'état réactive toggledState et une fonction toggle qui met à jour l'état.

3. Testez l'application en cliquant sur le bouton de basculement. L'état commercial du magasin devrait basculer entre "ouvert" et "fermé", et l'image correspondante devrait changer en conséquence.

Félicitations! Vous avez terminé l'implémentation de l'application Switch Business Status en utilisant Vue.js. L'effet après la fin est le suivant :

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.