昨天放縱了一天，今天老老實實的學習

vue-awesome-swiper 輪播圖的外掛

overflow 屬性規定當內容溢位元素框時發生的事情。
這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，使用者代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

首先npm install vue-awesome-swiper --save 安裝這個依賴包
如何使用？
在main.js入口函式引入這個包名
import VueAwesomeSwiper from ‘vue-awesome-swiper’
然後在建立一個swiper元件

<swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class='swiper-img' :src="item.imgurl" >
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
 

這個相當於建立一個輪播圖

在沒有學習ajax之前，需要在data中return 資料項

swiperList：[{
//一個物件中存放資料項
id:"",
imgurl:""
},{}]

然後在swiper的標籤中引用v-for指令 v-for=“item of swiperList” :key=“item.id”
然後在img標籤中的:src中item.imgurl

最後整個Vue的小元件寫完之後，需要匯入到home首頁的大元件中
import HomeSwiper from “./components/Swiper”
然後在components中 引入該元件的名字HomeSwiper
整個輪播圖的功能就算完成了。