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中文网其他相关文章！