초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 아코디언 효과 만들기

Vue.js는 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있게 해주는 인기 있는 JavaScript 프레임워크입니다. Vue의 최신 버전인 Vue3은 성능과 개발 경험을 크게 향상시켰습니다. 이 글에서는 Vue.js 컴포넌트를 사용하여 초보자에게 적합한 아코디언 효과를 만드는 방법을 소개합니다.

아코디언 효과란 무엇인가요?

아코디언 효과는 웹사이트 디자인 효과로 주로 FAQ, 제품 기능 목록, 제품 분류 등의 정보를 표시하는 영역에 사용됩니다. 아코디언 효과는 사용자가 영역을 클릭하여 아래 콘텐츠를 확장/축소할 수 있는 확장 가능한 디자인으로 제공됩니다.

Vue.js 애플리케이션 생성

Vue.js를 사용하여 아코디언 구성 요소 생성을 시작하기 전에 Vue.js 애플리케이션을 위한 인프라를 설정해야 합니다. 여기서는 Vue CLI를 사용하여 Vue.js 애플리케이션을 빠르게 구축합니다.

먼저 다음 명령을 사용하여 Vue CLI를 설치해야 합니다.

npm install -g @vue/cli

다음으로 Vue CLI를 사용하여 새 프로젝트를 생성할 수 있습니다.

vue create accordion-app

여기서 "accordion-app"은 애플리케이션 이름입니다. 귀하의 새 프로젝트 응용 프로그램은 임의의 이름을 지정합니다. 다음으로 명령줄 마법사를 따라 새 Vue.js 프로젝트를 구성하고 생성합니다.

생성된 Vue.js 앱 프로젝트 디렉터리에서 Vue.js 애플리케이션의 루트 구성 요소인 App.vue 파일을 찾습니다. 파일을 열고 템플릿 내에 다음 HTML 및 CSS 코드를 추가합니다.

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

위 코드 조각에서는 vue-for 지시문을 사용하여 "accordionItems" 배열을 반복하고 각 아코디언 영역에 대한 제목과 내용을 추가합니다. 또한 아코디언 영역을 확장하거나 축소하는 데 사용할 수 있는 제목에 대한 클릭 이벤트를 구성했습니다. 아코디언 효과의 구현은 주로 아코디언 영역의 CSS 스타일 "is-active"를 제어하여 수행됩니다.

데이터 섹션에 다음 코드를 추가합니다.

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

데이터 섹션의 코드에서 세 개체의 배열을 정의합니다. 각 개체는 아코디언의 그룹을 나타냅니다. "toggleAccordion"과 같은 방법에서는 아코디언 그룹을 반복하고 클릭 이벤트를 사용하여 클릭된 아코디언 그룹의 고유 식별자 ID를 추출합니다. 그런 다음 해당 "id"와 연결된 그룹을 확인하고 "isActive" 속성을 반대 값으로 설정합니다. 또한 한 아코디언 그룹이 확장되면 다른 아코디언 그룹도 닫히도록 하기 위해 다른 아코디언 그룹의 "is-active" 속성을 "false"로 설정합니다.

아코디언 효과 Vue.js 구현을 완료했습니다! 이제 npm을 실행하여 애플리케이션을 실행하세요.

npm run serve

그런 다음 브라우저를 열고 http://localhost:8080을 방문하면 페이지에 렌더링된 아코디언 그룹이 표시됩니다.

결론

이 글에서는 Vue.js 컴포넌트를 사용해 아코디언 효과를 만드는 방법을 소개했습니다. Vue.js에서 인프라를 설정하고, 필요한 HTML 및 CSS 코드를 추가하고, Vue.js를 사용하여 JavaScript 코드를 작성하여 아코디언 효과를 구현했습니다. 이것은 Vue.js의 무수한 가능성 중 하나의 예일 뿐이며, 시작하는 초보자를 위한 가이드 역할을 하길 바랍니다. Vue.js를 더 자세히 배우고 싶은 개발자의 경우 공식 문서와 Vue.js 커뮤니티 리소스를 참조하여 Vue.js에 대한 심층적인 이해를 얻고 해당 기능에 대해 자세히 알아보는 것이 좋습니다.

위 내용은 초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 아코디언 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!