最近寫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)

然后就可以在組件中使用該插件

<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> 

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。