vue-awesome-swiper的使用

swiper3.0是侧重于移动端，pc端也能用，如果侧重于pc端，可以用swiper2.0.
这次我是vue.js +vue-awesome-swiper,用法和swiper类似。
1、安装 vue-awesome-swiper
npm install vue-awesome-swiper --save-dev
(这里需要注意一个问题，因为我开始安装的是最新版的，但是出现内容在一个页面的情况，只需要降一个版本就可以了 "vue-awesome-swiper": "2.5.4", 关键，很重要)

2. XXX.vue（vue组件）下面使用：

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
    <!-- 幻灯内容 -->
    <swiper-slide>slide1</swiper-slide>     //这里可以用 v-for循环图片
    <swiper-slide>slide2</swiper-slide>
    <!-- 以下控件元素是可选的，需要在这里声明，并且在下面data配置 -->
    <div class="swiper-pagination"  slot="pagination"></div>   //小圆点
    <div class="swiper-button-prev" slot="button-prev"></div>   //左箭头
    <div class="swiper-button-next" slot="button-next"></div>   //右箭头
    <div class="swiper-scrollbar"   slot="scrollbar"></div>    //滚动条
</swiper>
</div>
</template>
<script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper'    //导入组件
    export default{
        components: {
            swiper,          //定义组件
            swiperSlide
        },
        data(){
            return {
                swiperOption: {
                    // 所有配置均为可选（同Swiper配置）  
// notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,     //我现在还没有搞清楚这个东西，反正加上就是了
                    autoplay: 3000,
                    grabCursor : true,
                    setWrapperSize :true,
                    autoHeight: true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next',
                    scrollbar:'.swiper-scrollbar',
                    mousewheelControl : true,
                    observeParents:true,
                    onTransitionStart(swiper){
                      console.log(swiper)
                    }
            }
        }
    },
    computed: {     
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
        swiper() {
          return this.$refs.mySwiperA.swiper
        }
    },
    mounted() {
        //这里应该是一些事件，等接下来再研究，这里不是必须的
        this.swiper.slideTo(3, 1000, false)
      }
}
</script>