本文旨在帮助初学者快速入手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的开发者和爱好者有所帮助。
