Erste Schritte mit VUE3 für Anfänger: Erstellen eines Akkordeoneffekts mit Vue.js-Komponenten

Vue.js ist ein beliebtes JavaScript-Framework, das die Erstellung interaktiver Webanwendungen erleichtert. Die neueste Version von Vue, Vue3, bietet erhebliche Verbesserungen bei Leistung und Entwicklungserfahrung. In diesem Artikel stellen wir vor, wie Sie mit Vue.js-Komponenten einen Akkordeoneffekt erzeugen, der für Anfänger geeignet ist.

Was ist der Akkordeoneffekt?

Der Akkordeoneffekt ist ein Website-Designeffekt, der normalerweise in Bereichen verwendet wird, in denen Informationen wie häufig gestellte Fragen, Produktfunktionslisten oder Produktklassifizierungen angezeigt werden. Der Akkordeoneffekt wird in einem erweiterbaren Design dargestellt, das es dem Benutzer ermöglicht, auf einen Bereich zu klicken, um den darunter liegenden Inhalt zu erweitern/zu reduzieren.

Erstellen einer Vue.js-Anwendung

Bevor wir mit der Erstellung der Akkordeonkomponente mit Vue.js beginnen, müssen wir die Infrastruktur für die Vue.js-Anwendung einrichten. Hier verwenden wir die Vue-CLI, um schnell eine Vue.js-Anwendung zu erstellen.

Zuerst müssen wir Vue CLI mit dem folgenden Befehl installieren:

npm install -g @vue/cli

Als nächstes können wir mit Vue CLI ein neues Projekt erstellen:

vue create accordion-app

Hier ist „accordion-app“ der Name unserer Anwendung, die Sie erstellen können Neues Projekt für Ihre Die Anwendung gibt einen beliebigen Namen an. Folgen Sie anschließend dem Befehlszeilenassistenten, um ein neues Vue.js-Projekt zu konfigurieren und zu erstellen.

Suchen Sie im generierten Vue.js-App-Projektverzeichnis die App.vue-Datei, die die Stammkomponente der Vue.js-Anwendung darstellt. Öffnen Sie die Datei und fügen Sie den folgenden HTML- und CSS-Code in die Vorlage ein:

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

Im obigen Codeausschnitt verwenden wir die vue-for-Direktive, um über das Array „accordionItems“ zu iterieren und einen Titel und Inhalt für jeden Akkordeonbereich hinzuzufügen. Wir haben auch ein Klickereignis für den Titel konfiguriert, mit dem sich steuern lässt, ob der Akkordeonbereich erweitert oder reduziert wird. Die Umsetzung des Akkordeon-Effekts erfolgt hauptsächlich durch die Steuerung des CSS-Stils „is-aktiv“ des Akkordeon-Bereichs.

Im Datenabschnitt fügen wir den folgenden Code hinzu:

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

Im Code im Datenabschnitt definieren wir ein Array aus drei Objekten, wobei jedes Objekt eine Gruppe im Akkordeon darstellt. In einer Methode wie „toggleAccordion“ durchlaufen wir die Akkordeongruppen und verwenden das Click-Ereignis, um die eindeutige Kennungs-ID der angeklickten Akkordeongruppe zu extrahieren. Anschließend überprüfen wir die dieser „id“ zugeordnete Gruppe und setzen deren Eigenschaft „isActive“ auf den entgegengesetzten Wert. Außerdem setzen wir die Eigenschaft „is-active“ der anderen Akkordeongruppen auf „false“, um sicherzustellen, dass beim Erweitern einer Akkordeongruppe die anderen geschlossen werden.

Wir haben die Vue.js-Implementierung des Akkordeoneffekts abgeschlossen! Führen Sie nun npm aus, um die Anwendung auszuführen:

npm run serve

Öffnen Sie dann einen Browser und besuchen Sie http://localhost:8080. Sie sollten die Akkordeongruppe auf der Seite gerendert sehen.

Fazit

In diesem Artikel haben wir vorgestellt, wie man mit Vue.js-Komponenten einen Akkordeoneffekt erstellt. Wir haben die Infrastruktur in Vue.js eingerichtet, den notwendigen HTML- und CSS-Code hinzugefügt und JavaScript-Code mit Vue.js geschrieben, um den Akkordeoneffekt zu implementieren. Dies ist nur ein Beispiel für die unzähligen Möglichkeiten mit Vue.js und dient hoffentlich als Leitfaden für Einsteiger. Für Entwickler, die Vue.js weiter erlernen möchten, wird empfohlen, die offizielle Dokumentation und die Community-Ressourcen von Vue.js zu konsultieren, um ein tiefgreifendes Verständnis von Vue.js zu erlangen und mehr über seine Funktionen zu erfahren.

Das obige ist der detaillierte Inhalt vonErste Schritte mit VUE3 für Anfänger: Erstellen eines Akkordeoneffekts mit Vue.js-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!