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

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

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

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

 <span style="font-size:18px;"><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: {
                 pagination: '.swiper-pagination',
                 slidesPerView: 'auto',
                 centeredSlides: true,
                 paginationClickable: true,
                 spaceBetween: 30,
                     onSlideChangeEnd: swiper => {
                         //这个位置放swiper的回调方法
                         this.page = swiper.realIndex+1;
                         this.index = swiper.realIndex;
                     },
                 }
                 swiperSlides: [1, 2, 3, 4, 5]
             }
         },
         //定义这个sweiper对象
         computed: {

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

     }
 script>
 <style>
 style>span>
 原文链接：http://blog.csdn.net/xiaogezl/article/details/69676812