Bermula dengan VUE3 untuk Pemula: Mencipta Kesan Akordion Menggunakan Komponen Vue.js

Vue.js ialah rangka kerja JavaScript popular yang memudahkan pembinaan aplikasi web interaktif. Versi terbaharu Vue, Vue3, membuat peningkatan yang ketara dalam prestasi dan pengalaman pembangunan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan komponen Vue.js untuk mencipta kesan akordion, sesuai untuk pemula.

Apakah kesan akordion?

Kesan akordion ialah kesan reka bentuk tapak web yang biasanya digunakan untuk memaparkan kawasan seperti Soalan Lazim, senarai ciri produk atau klasifikasi produk. Kesan akordion dipersembahkan dalam reka bentuk yang boleh dikembangkan yang membolehkan pengguna mengklik pada kawasan untuk mengembangkan/menghancurkan kandungan di bawah.

Mencipta aplikasi Vue.js

Sebelum kita mula mencipta komponen akordion menggunakan Vue.js, kita perlu menyediakan infrastruktur untuk aplikasi Vue.js. Di sini, kami menggunakan Vue CLI untuk membina aplikasi Vue.js dengan cepat.

Pertama, kita perlu memasang Vue CLI menggunakan arahan berikut:

npm install -g @vue/cli

Seterusnya, kita boleh mencipta projek baharu menggunakan Vue CLI:

vue create accordion-app

di sini "accordion-app " ialah nama permohonan kami, anda boleh memberikan sebarang nama kepada permohonan anda. Seterusnya ikut wizard baris arahan untuk mengkonfigurasi dan mencipta projek Vue.js baharu.

Dalam direktori projek apl Vue.js yang dijana, cari fail App.vue, yang merupakan komponen akar bagi aplikasi Vue.js. Buka fail dan tambahkan kod HTML dan CSS berikut di dalam templat:

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

Dalam coretan kod di atas, kami menggunakan arahan vue-for untuk beralih pada tatasusunan "accordionItems" dan menambah tajuk dan kandungan. Kami juga mengkonfigurasikan acara klik untuk tajuk, yang boleh digunakan untuk mengawal kawasan akordion untuk berkembang atau runtuh. Pelaksanaan kesan akordion terutamanya dicapai dengan mengawal gaya CSS "adalah-aktif" kawasan akordion.

Dalam bahagian data, kami menambah kod berikut:

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

Dalam kod dalam bahagian data, kami mentakrifkan tatasusunan tiga objek, setiap objek mewakili kumpulan dalam akordion. Dalam kaedah seperti "toggleAccordion" kami mengulangi kumpulan akordion dan menggunakan acara klik untuk mengekstrak id pengecam unik kumpulan akordion yang diklik. Kami kemudian menyemak kumpulan yang dikaitkan dengan "id" itu dan menetapkan sifat "isActive"nya kepada nilai yang bertentangan. Kami juga menetapkan sifat "adalah aktif" kumpulan akordion yang lain kepada "palsu" untuk memastikan bahawa apabila satu kumpulan akordion dikembangkan, kumpulan akordion yang lain ditutup.

Kami telah menyelesaikan pelaksanaan Vue.js bagi kesan akordion! Sekarang, anda boleh menjalankan npm untuk menjalankan aplikasi:

npm run serve

Kemudian, buka penyemak imbas dan lawati http://localhost:8080 dan anda akan melihat kumpulan akordion yang dipaparkan pada halaman.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara mencipta kesan akordion menggunakan komponen Vue.js. Kami menyediakan infrastruktur dalam Vue.js, menambah kod HTML dan CSS yang diperlukan, dan menulis kod JavaScript menggunakan Vue.js untuk melaksanakan kesan akordion. Ini hanyalah satu contoh kemungkinan yang tidak terkira banyaknya dengan Vue.js dan diharapkan dapat menjadi panduan untuk pemula untuk bermula. Bagi pembangun yang ingin mempelajari Vue.js dengan lebih lanjut, adalah disyorkan untuk merujuk dokumentasi rasmi dan sumber komuniti Vue.js untuk mendapatkan pemahaman yang mendalam tentang Vue.js dan mengetahui lebih lanjut tentang ciri-cirinya.

Atas ialah kandungan terperinci Bermula dengan VUE3 untuk Pemula: Mencipta Kesan Akordion Menggunakan Komponen Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!