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實例中聲明一個資料屬性tabs，它將包含選項卡的標題和內容。

<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指令來遍歷循環tabs數組，並使用: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的變化，並在控制台輸出變化訊息。最後，我們使用mounted生命週期鉤子函數，來確保Vue應用程式已被成功掛載到DOM上。

現在，我們已經完成了一個完整的Vue.js 3選項卡元件範例。透過本文的學習，我們應該已經了解Vue.js常用的語法和概念，包括：指令、資料屬性、計算屬性、生命週期鉤子等了。

當然，這篇文章只是Vue.js的冰山一角。在未來的學習中，我們應該更專注於路由、狀態管理、插件等方面。希望這篇文章對於正打算學習Vue.js 3的開發者和愛好者有所幫助。

以上是VUE3快速入門：使用Vue.js指令實作選項卡切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！