使用vue-cli組件化實現的輪播圖組件

自上一篇文章首次接觸到腳手架工具（一種包含多項前端技術所構成的項目生成器）這也是我所寫的第一個Vue組件，想把整個項目的全過程分享給大家。

1. 首先在路徑終端下使用命令vue create lunbotu創建工程。
2. 使用npm run serve命令創建出一個localhost服務器，用於實時查看頁面

接下來就正式開始工程的創建了，如圖是我的工程目錄：

src目錄下主要存放了我開發過程中的所有代碼以及資源

src -> assets -> img/style是所用到的圖片和初始化css代碼
src -> components -> Banner.vue就是組件文件
src -> App.vue 是調用組件(div app的代碼)
src -> main.js 是最原始化、根本的代碼，定義了vue實例

話不多說，先上各腳本的代碼~

App.vue

<template>
  <div id="app">
  	<div style = "width:1080px;margin:0 auto;">
   		<Banner :banners='banners'></Banner>   <!--  組件傳值banners數組，三張圖片 -->
    </div>
  </div>
</template>

<script>
import Banner from './components/Banner.vue'  //導入輪播圖組件banner
import banner0 from '../src/assets/img/banner0.jpg'
import banner1 from '../src/assets/img/banner1.jpg'
import banner2 from '../src/assets/img/banner2.jpg'	//導入三張輪播圖片

export default {
	components: {
  	  Banner,        //定義banner組件
  	},
  data(){
	  return{
	  	banners:[banner0,banner1,banner2],  //圖片數組
	  };
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

這裏面的代碼比較簡單。
template中就是調用標籤，即所定義的組件，傳遞了三張圖片給Banner.Vue
script中導入了三張圖片以及組件文件，定義了組件
style中是一個簡單的全局樣式

Banner.Vue

<template>
	<div id = 'banner' @mouseenter = "autostop()" @mouseleave = "autostart()" >   <!-- 整個輪播圖區域的mouse移上停止，移出繼續事件 -->
		<ul class = 'images' 
			:style = "{width:banners.length * 100 + '%',  
						marginLeft:-index *100 +'%',	  
					   }">   
		<!--傳遞banner數組參數決定width爲多少 -->
			<li v-for = '(item,i) in banners' :key='i'><img :src='item'></img></li>
		</ul>
		<ul class = 'dots'>   <!-- 導航小圓點ul -->
			<li v-for = '(item,i) in banners' :key='i' 
			:class = "{active:i === index}"
			@click = "add(i)"
			>  
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	props:{
			banners:{        //接收banners數組(三張圖片)
				type:Array,  //屬性類型是數組
				required:true,  //必須傳遞該屬性
			},	
		},
	data(){
		return{
			index:0, //當前顯示的是第幾張圖片
			timer:null,
			
		};
	},
	created(){
		this.autostart()
	},     //組件創建以後，執行create()，輪播
	methods:{
		add(i){
			this.index = i;
		},
		autostart(){
			if(this.timer){
				return;
			}
			this.timer = setInterval(()=>{
				this.index++;
				if(this.index > 2){
					this.index = 0;
				}
			},2000);
		},
		autostop(){
			clearInterval(this.timer);
			this.timer = null;
		}
	}
};
	//組件中的樣式要加上scoped，表示局部樣式，不會影響其他組件
</script>
<style scoped>  

	#banner{
		height:300px;
		width:400px;
		overflow:hidden;
	}
	#banner .images{
		position:relative;
	}
	#banner .images{
		height:100%;
		transition:0.5s;
	}
	#banner .images li img{		
		width:400px;
		height:315px;
		float:left;
		
	}
	#banner .images .content img{
		display:block;
	}
	#banner .dots{
		position:absolute;
		left:470px;
		top:270px;	
		display:flex;
	}
	#banner .dots li{
		width:10px;
		height:10px;
		border-radius:50%;
		background-color:#fff;
		border:1px solid;
		opacity:0.8;
		margin:5px 3px;
		color:#fff;
	}
	#banner .dots .active{
		background-color:black;
		color:black;
	}
</style>

template中書寫了輪播圖的靜態內容，也是我們最熟悉的html代碼，相對不同的是，以往之前所學習的輪播圖，是使用三對li標籤插入三張圖片，而非代碼中所寫的。
代碼中用到了v-for遍歷圖片，也就是vue最經典的一部分通過組件中的數據將靜態值轉換爲相對動態的值。
以及標籤中的style，class用到了v-bind綁定屬性。

script中props接收了App.Vue所傳過來的數組，定義了一些data數據以及methods事件。

style中就是熟悉的輪播圖css樣式。

main.js

import Vue from 'vue'
import App from './App.vue'
import "./assets/style/reset.css"

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

總結：本次輪播圖的實現主要思想：有幾張圖片，圖片部分的ul寬度即爲百分之多少；而ul的marginleft屬性則是通過-100%/-200%和transition:0.5s;實現圖片的切換。
學習之路很漫長啊~接觸Vue一個月，也是在慢慢適應，從原始的開發模式轉換到這種組件化開發模式。