Premiers pas avec VUE3 pour les débutants : création d'un effet accordéon à l'aide des composants Vue.js

Vue.js est un framework JavaScript populaire qui facilite la création d'applications Web interactives. La dernière version de Vue, Vue3, apporte des améliorations significatives en termes de performances et d'expérience de développement. Dans cet article, nous présenterons comment utiliser les composants Vue.js pour créer un effet accordéon, adapté aux débutants.

Qu'est-ce que l'effet accordéon ?

L'effet accordéon est un effet de conception de sites Web, généralement utilisé dans les zones qui affichent des informations telles que des FAQ, des listes de fonctionnalités de produits ou des classifications de produits. L'effet accordéon est présenté dans une conception extensible qui permet à l'utilisateur de cliquer sur une zone pour développer/réduire le contenu ci-dessous.

Création d'une application Vue.js

Avant de commencer à créer le composant accordéon à l'aide de Vue.js, nous devons configurer l'infrastructure de l'application Vue.js. Ici, nous utilisons Vue CLI pour créer rapidement une application Vue.js.

Tout d'abord, nous devons installer Vue CLI en utilisant la commande suivante :

npm install -g @vue/cli

Ensuite, nous pouvons créer un nouveau projet en utilisant Vue CLI :

vue create accordion-app

Ici "accordion-app" est le nom de notre application, vous pouvez créer un nouveau projet pour votre L'application spécifie n'importe quel nom. Suivez ensuite l'assistant de ligne de commande pour configurer et créer un nouveau projet Vue.js.

Dans le répertoire du projet d'application Vue.js généré, recherchez le fichier App.vue, qui est le composant racine de l'application Vue.js. Ouvrez le fichier et ajoutez le code HTML et CSS suivant à l'intérieur du modèle :

<template>
  <div class="accordion">
    <div class="accordion-group" v-for="accordionItem in accordionItems" :key="accordionItem.id">
      <div class="accordion-header" @click="toggleAccordion(accordionItem.id)">
        {{accordionItem.title}}
      </div>
      <div class="accordion-content" :class="{'is-active': accordionItem.isActive}">
        {{accordionItem.content}}
      </div>
    </div>
  </div>
</template>

<style>
.accordion {
  .accordion-group {
    .accordion-header {
      cursor: pointer;
      padding: 1rem;
      background-color: #eee;
      border: 1px solid #ccc;
      font-weight: bold;
    }

    .accordion-content {
      background-color: #fff;
      padding: 1rem;
      border: 1px solid #ccc;
      display: none;

      &.is-active {
        display: block;
      }
    }
  }
}
</style>

Dans l'extrait de code ci-dessus, nous utilisons la directive vue-for pour parcourir le tableau "accordionItems" et ajouter un titre et un contenu pour chaque zone d'accordéon. Nous avons également configuré un événement de clic pour le titre, qui peut être utilisé pour contrôler l'agrandissement ou la réduction de la zone en accordéon. La mise en œuvre de l'effet accordéon s'effectue principalement en contrôlant le style CSS "is-active" de la zone accordéon.

Dans la section données, nous ajoutons le code suivant :

<script>
export default {
  data() {
    return {
      accordionItems: [
        {
          id: 1,
          title: "Accordion Group 1",
          content:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut fringilla lorem, in consectetur purus. Mauris maximus nisi quis purus consequat aliquet. Morbi elementum cursus mi eget vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras viverra sem vel ex consectetur pharetra. Nulla facilisi."
        },
        {
          id: 2,
          title: "Accordion Group 2",
          content:
            "Donec facilisis libero sapien, quis viverra urna euismod nec. Aenean dignissim fringilla tortor, in aliquam elit bibendum ut. Maecenas et est vel turpis tincidunt suscipit. In hac habitasse platea dictumst. Sed at justo a turpis tristique tincidunt. Nam pharetra tortor eget bibendum fringilla. Donec nec bibendum magna. Mauris sit amet nisl urna. Nunc tempor enim quis metus blandit, in laoreet nisl fringilla."
        },
        {
          id: 3,
          title: "Accordion Group 3",
          content:
            "Ut tempus malesuada purus, vel posuere metus fermentum a. Duis non magna id dui auctor dapibus. Morbi vulputate accumsan iaculis. Fusce eu urna vulputate, bibendum arcu cursus, ornare dolor. Duis elementum ac eros at bibendum. Aliquam aliquam velit vel ante sagittis, vel laoreet leo posuere. Nunc ac urna eleifend, euismod enim sit amet, consectetur erat."
        }
      ]
    };
  },
  methods: {
    toggleAccordion(id) {
      this.accordionItems.forEach(item => {
        if (item.id === id) {
          item.isActive = !item.isActive;
        } else {
          item.isActive = false;
        }
      });
    }
  }
};
</script>

Dans le code de la section données, nous définissons un tableau de trois objets, chaque objet représentant un groupe dans l'accordéon. Dans une méthode comme "toggleAccordion", nous parcourons les groupes d'accordéon et utilisons l'événement click pour extraire l'identifiant unique du groupe d'accordéon cliqué. Nous vérifions ensuite le groupe associé à cet "id" et définissons sa propriété "isActive" sur la valeur opposée. Nous définissons également la propriété "is-active" des autres groupes d'accordéon sur "false" pour garantir que lorsqu'un groupe d'accordéon est développé, les autres sont fermés.

Nous avons terminé l'implémentation Vue.js de l'effet accordéon ! Maintenant, exécutez npm pour exécuter l'application :

npm run serve

Ensuite, ouvrez un navigateur et visitez http://localhost:8080 et vous devriez voir le groupe accordéon rendu sur la page.

Conclusion

Dans cet article, nous avons présenté comment créer un effet accordéon à l'aide des composants Vue.js. Nous avons configuré l'infrastructure dans Vue.js, ajouté le code HTML et CSS nécessaire et écrit du code JavaScript à l'aide de Vue.js pour implémenter l'effet accordéon. Ceci n'est qu'un exemple des innombrables possibilités offertes par Vue.js et, espérons-le, servira de guide aux débutants. Pour les développeurs qui souhaitent approfondir leur connaissance de Vue.js, il est recommandé de consulter la documentation officielle et les ressources de la communauté Vue.js pour acquérir une compréhension approfondie de Vue.js et en savoir plus sur ses fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!