VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환

이 글은 초보자가 Vue.js 3을 빠르게 시작하고 간단한 탭 전환 효과를 얻을 수 있도록 돕는 것을 목표로 합니다. Vue.js는 재사용 가능한 구성 요소를 구축하고 애플리케이션 상태를 쉽게 관리하며 사용자 인터페이스 상호 작용을 처리하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue.js 3는 최신 버전의 프레임워크로, 이전 버전과 비교하여 큰 변화가 있었지만 기본 원칙은 변경되지 않았습니다. 이 기사에서는 독자가 Vue.js의 일반적인 구문과 개념에 익숙해지도록 하기 위해 Vue.js 지침을 사용하여 탭 전환 효과를 구현합니다.

첫 번째 단계에서는 Vue 인스턴스를 생성한 다음 HTML 페이지의 DOM 요소에 마운트해야 합니다. Vue.js 3에서 Vue 인스턴스를 생성하는 방법은 Vue.js 2와 유사하며 객체를 매개변수로 전달하기만 하면 됩니다. 또한 탭의 제목과 내용을 포함하는 Vue 인스턴스에서 데이터 속성 탭을 선언해야 합니다.

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  }
})

app.mount('#app')
</script>

위 코드에서는 v-for 지시문을 사용하여 루프 탭 배열을 순회하고, :key 지시문을 사용하여 각 요소에 대한 고유 식별자를 설정하며, @click 지시문은 탭의 클릭 이벤트를 바인딩합니다. 탭을 클릭하면 해당 인덱스 값이 activeTabIndex 데이터 속성에 할당됩니다. 동시에 v-show 명령을 사용하여 activeTabIndex 값에 따라 해당 탭 내용을 표시하거나 숨깁니다.

이제 Vue 인스턴스를 성공적으로 생성하여 HTML 페이지에 마운트했습니다. 다음으로 탭의 모양을 개선하기 위한 스타일을 작성해야 합니다.

ul {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #eee;
}

li {
  padding: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}

li.active {
  background-color: #fff;
}

div {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}

위 스타일에서는 배경색, 테두리, 패딩 등과 같은 탭 목록 및 탭 콘텐츠 블록에 대한 몇 가지 기본 스타일을 설정했습니다. 또한 탭의 li 요소에 대해 :hover 및 .active 스타일도 정의했습니다. 탭 위에 마우스를 올리면 배경색이 변경되고 탭이 활성화되면 배경색이 흰색으로 변경됩니다.

이제 탭의 기본 레이아웃과 스타일이 완성되었습니다. 마지막으로 탭 전환이 원활하고 올바른지 확인하기 위해 Vue 인스턴스에서 몇 가지 최종 작업을 수행해야 합니다.

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTabIndex === index }" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  },
  watch: {
    activeTabIndex(newValue, oldValue) {
      console.log(`The active tab index has changed from ${oldValue} to ${newValue}`)
    }
  },
  mounted() {
    console.log('Vue app has been mounted to the DOM')
  }
})

app.mount('#app')
</script>

위 코드에서는 탭 스타일을 지정하기 위해 :class 지시문을 사용하여 탭의 활성화 상태에 따라 li 요소의 CSS 클래스를 동적으로 바인딩했습니다. 또한 watch 속성을 사용하여 activeTabIndex의 변경 사항을 모니터링하고 변경 정보를 콘솔에 출력합니다. 마지막으로 탑재된 수명주기 후크 기능을 사용하여 Vue 애플리케이션이 DOM에 성공적으로 탑재되었는지 확인합니다.

이제 완전한 Vue.js 3 탭 구성 요소 예제가 완성되었습니다. 이 기사를 연구함으로써 우리는 지침, 데이터 속성, 계산된 속성, 수명 주기 후크 등을 포함하여 Vue.js에서 일반적으로 사용되는 구문과 개념을 이해해야 합니다.

물론 이 글은 Vue.js의 빙산의 일각에 불과합니다. 향후 연구에서는 라우팅, 상태 관리, 플러그인 등에 더 많은 관심을 기울여야 합니다. 이 글이 Vue.js 3를 배우려는 개발자와 매니아들에게 도움이 되기를 바랍니다.

위 내용은 VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!