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

这篇文章主要讲解了“Vue的vue-awesome-swiper轮播图插件怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue的vue-awesome-swiper轮播图插件怎么使用”吧！

第一步安装

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>

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

感谢各位的阅读，以上就是“vue的vue-awesome-swiper轮播图插件怎么使用”的内容了，经过本文的学习后，相信大家对vue的vue-awesome-swiper轮播图插件怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！