20181124————轮播图开发

昨天放纵了一天，今天老老实实的学习

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
整个轮播图的功能就算完成了。