這篇文章主要介紹了vue中如何使用輪播圖插件vue-awesome-swiper，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有新市免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Vue-Awesome-Swiper

輪播圖插件，可以同時支持Vue.js（1.X ~ 2.X），兼顧PC和移動端，SPA和SSR。

例子

例子

安裝設(shè)置

安裝Install vue-awesome-swiper

npm install vue-awesome-swiper --save

vue掛載

// import
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'


// or require
var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')


// mount with global
Vue.use(VueAwesomeSwiper)


// If used in Nuxt.js/SSR, you should keep it only in browser build environment
// The `Process. BROWSER_BUILD` itself is just a feature, it is only valid in Nuxt.js, you need to modify it according to your own procedures, such as: in vue official ssr scaffolding it should be` process.browser`
if (process.BROWSER_BUILD) {
 const VueAwesomeSwiper = require('vue-awesome-swiper/ssr')
 Vue.use(VueAwesomeSwiper)
}


// mount with component(can't work in Nuxt.js/SSR)
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
 components: {
  swiper,
  swiperSlide
 }
}

SPA與SSR中使用方法的區(qū)別

SPA通過組件作用，需要借助ref屬性查找swiper實(shí)例
SSR通過命令作用，需要借助命令參數(shù)查找swiper實(shí)例
其他配置和事件一致

SSR中的應(yīng)用

SPA中的應(yīng)用

異步數(shù)據(jù)例子

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中如何使用輪播圖插件vue-awesome-swiper”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!