vue轮播图插件vue-awesome-swiper的使用

      最近写vue2.0项目中用到了轮播图的一个插件，也就是vue-awesome-swiper，个人感觉还是比较强大的，swiper官网中的API及配置均可使用(支持3.0)，以下说下使用该插件的一些步骤：

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

然后就可以在组件中使用该插件

<template>
	<div>
		<swiper :options="swiperOption"  ref="mySwiper">
			<!-- 这部分放你要渲染的那些内容 -->
			<swiper-slide v-for="item in items">
			</swiper-slide>
			<!-- 这是轮播的小圆点 -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				swiperOption: {
				//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
				notNextTick: true,
		        pagination: '.swiper-pagination',
		        slidesPerView: 'auto',
		        centeredSlides: true,
		        paginationClickable: true,
		        spaceBetween: 30,
		            onSlideChangeEnd: swiper => {
		            	//这个位置放swiper的回调方法
		            	this.page = swiper.realIndex+1;
		            	this.index = swiper.realIndex;
		            }
		        }
			}
		},
		//定义这个sweiper对象
		computed: {

		    swiper() {
		      return this.$refs.mySwiper.swiper;
		    }
		},
		mounted () {
			//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
		    this.swiper.slideTo(0, 0, false);
		}

	}
</script>
<style>
</style>