Getting Started with VUE3 for Beginners: Creating an Accordion Effect Using Vue.js Components

Vue.js is a popular JavaScript framework that makes building interactive web applications easier. The latest version of Vue, Vue3, makes significant improvements in performance and development experience. In this article, we will introduce how to use Vue.js components to create an accordion effect, suitable for beginners.

What is the accordion effect?

The accordion effect is a website design effect that is usually used to display areas such as FAQ, product feature list, or product classification. The accordion effect is presented in an expandable design that allows the user to click on an area to expand/collapse the content below.

Create a Vue.js application

Before we start creating the accordion component using Vue.js, we need to set up the infrastructure for the Vue.js application. Here, we use the Vue CLI to quickly build a Vue.js application.

First, we need to install Vue CLI using the following command:

npm install -g @vue/cli

Next, we can create a new project using Vue CLI:

vue create accordion-app

Here "accordion-app" is the name of our application, you can give any name to your application. Next follow the command line wizard to configure and create a new Vue.js project.

In the generated Vue.js app project directory, find the App.vue file, which is the root component of the Vue.js application. Open the file and add the following HTML and CSS code inside the template:

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

In the above code snippet, we use the vue-for directive to iterate over the "accordionItems" array and add a title and content. We also configured a click event for the title, which can be used to control the accordion area to expand or collapse. The implementation of the accordion effect is mainly accomplished by controlling the CSS style "is-active" of the accordion area.

In the data section, we add the following code:

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

In the code in the data section, we define an array consisting of three objects, each object representing a group in the accordion. In a method like "toggleAccordion" we loop through the accordion groups and use the click event to extract the unique identifier id of the clicked accordion group. We then check the group associated with that "id" and set its "isActive" property to the opposite value. We also set the "is-active" property of the other accordion groups to "false" to ensure that when one accordion group is expanded, the others are closed.

We have completed the Vue.js implementation of the accordion effect! Now, you can run npm to run the application:

npm run serve

Then, open a browser and visit http://localhost:8080 and you should see the accordion group rendered on the page.

Conclusion

In this article, we introduced how to create an accordion effect using Vue.js components. We set up the infrastructure in Vue.js, added the necessary HTML and CSS code, and wrote JavaScript code using Vue.js to implement the accordion effect. This is just one example of the countless possibilities with Vue.js and hopefully serves as a guide for beginners getting started. For developers who want to learn Vue.js further, it is recommended to consult the official documentation and Vue.js community resources to gain an in-depth understanding of Vue.js and learn more about its features.

The above is the detailed content of Getting Started with VUE3 for Beginners: Creating an Accordion Effect Using Vue.js Components. For more information, please follow other related articles on the PHP Chinese website!