Vue是一套用于構建用戶界面的漸進式框架。其中，Vue的組件化開發(fā)方式使得開發(fā)者可以更加輕松地構建復雜的前端頁面。Vue的組件化開發(fā)方式可以使得開發(fā)者將頁面劃分成多個組件，每個組件維護自己的狀態(tài)和視圖，然后對這些組件進行組合和嵌套，完成一個完整的頁面。其中，輪播圖廣告是經常出現在各種前端頁面中的效果體驗，這里我們提供一個Vue的輪播圖組件。

<template>
<div class="banner">
<ul class="banner-list" ref="bannerList">
<li class="banner-item" v-for="(item, index) in bannerList" :key="index">
<img :src="item.img" alt="" width="100%" height="100%">
</li>
</ul>
<div class="banner-dots">
<span
class="banner-dot"
:class="{ active: currentBannerIndex === index }"
v-for="(item, index) in bannerList"
:key="index"
@click="setCurrentIndex(index)"
>
</span>
</div>
<span class="banner-btn banner-prev-btn" @click="movePrev">上一頁</span>
<span class="banner-btn banner-next-btn" @click="moveNext">下一頁</span>
</div>
</template>
<script>
export default {
data() {
return {
currentBannerIndex: 0,
bannerList: [
{
img: "https://picsum.photos/1920/1080?random=1"
},
{
img: "https://picsum.photos/1920/1080?random=2"
},
{
img: "https://picsum.photos/1920/1080?random=3"
},
{
img: "https://picsum.photos/1920/1080?random=4"
}
]
};
},
methods: {
setCurrentIndex(index) {
this.currentBannerIndex = index;
},
movePrev() {
if (this.currentBannerIndex === 0) {
this.currentBannerIndex = this.bannerList.length - 1;
} else {
this.currentBannerIndex--;
}
},
moveNext() {
if (this.currentBannerIndex === this.bannerList.length - 1) {
this.currentBannerIndex = 0;
} else {
this.currentBannerIndex++;
}
}
},
mounted() {
setInterval(() =>{
this.moveNext();
}, 3000);
}
};
</script>

在上述組件中，我們可以看到一個基礎的輪播圖組件，它由一個列表和小圓點組成。其中，使用了vue中的ref屬性獲取dom對象，監(jiān)聽了小圓點的點擊事件，并在點擊事件中調用了setCurrentIndex方法來設置當前展示的圖片。

此外，我們還使用了setInterval函數實現圖片自動播放的效果。

綜上，這是一個基礎的輪播圖組件，開發(fā)者可以根據自己的需求進行自定義和拓展。通過vue的組件化開發(fā)，輕松實現了一個復雜的前端頁面效果。