第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

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

  1. <template>
  2. <div>
  3. <swiper :options="swiperOption"  ref="mySwiper">
  4. <!-- 这部分放你要渲染的那些内容 -->
  5. <swiper-slide v-for="item in items">
  6. </swiper-slide>
  7. <!-- 这是轮播的小圆点 -->
  8. <div class="swiper-pagination" slot="pagination"></div>
  9. </swiper>
  10. </div>
  11. </template>
  12. <script>
  13. import { swiper, swiperSlide } from 'vue-awesome-swiper'
  14. export default {
  15. components: {
  16. swiper,
  17. swiperSlide
  18. },
  19. data() {
  20. return {
  21. swiperOption: {
  22. //是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
  23. notNextTick: true,
  24. pagination: '.swiper-pagination',
  25. slidesPerView: 'auto',
  26. centeredSlides: true,
  27. paginationClickable: true,
  28. spaceBetween: 30,
  29. onSlideChangeEnd: swiper => {
  30. //这个位置放swiper的回调方法
  31. this.page = swiper.realIndex+1;
  32. this.index = swiper.realIndex;
  33. }
  34. }
  35. }
  36. }
  37. }
  38. </script>
  39. <style>
  40. </style>

vue中引入swiper(vue中的滑块组件vue-awesome-swiper)的更多相关文章

  1. 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  2. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  3. 在子组件中触发事件,传值给父组件-vue

    1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...

  4. vue全局引入公共scss样式,子组件调用

    前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...

  5. 在小程序中引入有赞的vant框架组件

    这里给大家讲解小程序中如何引入vant组件(我这里是采用小程序的云开发模板) 1.首先在项目的miniprogram文件夹右键在终端中打开,输入命令npm init初始化生成一个package.jso ...

  6. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  7. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  8. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  9. vue页面引入外部js文件遇到的问题

    问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...

  10. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

随机推荐

  1. SQL SERVER Buffer Pool扩展

    Buffer Pool扩展简介 Buffer Pool扩展是buffer pool 和非易失的SSD硬盘做连接.以SSD硬盘的特点来提高随机读性能. 在Buffer Pool 扩展之前,SQL Ser ...

  2. 纯JS实现像素逐渐显示

    就是对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 其实就是简单的用JS实现将左上角的矩形随 ...

  3. FasfDFS整合Java实现文件上传下载

    文章目录     一 : 添加配置文件     二 : 加载配置文件         1. 测试加载配置文件         2. 输出配置文件     三:功能实现         1.初始化连接信 ...

  4. ECMAScript6-let与const命令详解

    前言 <ECMAScript入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性. let和const命令,是第一章开始介绍,也是比较基础的知识. ...

  5. 设计模式-前摄器模式(Proactor)

    本周要进行boost asio库的学习,在学习之前发现最好需要先了解一下前摄器模式,这样对asio库的理解很有帮助,故写下此文 我之前写的随笔XShell的模拟实现中的链接方式可以说是同步的(服务器阻 ...

  6. php+mysql事务处理例子详细分析实例下载

    一.数据引擎innodb用begin,rollback,commit来实现提交事务处理,begin开始事务后出现错误就rollback事务回滚或者没有错误就commit提事务提交确认完成. start ...

  7. pwnable.kr memcpy之write up

    // compiled with : gcc -o memcpy memcpy.c -m32 -lm #include <stdio.h> #include <string.h> ...

  8. css基础知识之属性选择器

    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. 记录git常用操作命令

    GIT的常用操作 0.写在前面 作为一名开发者,熟悉使用 git 代码管理工具是一项必备的基本技能.git 相较 SVN 而言,其优点不言而喻.git 的功能非常强大,其包括的操作命令也非常的多,但是 ...

  10. 设计模式原则(3)--Dependency Inversion Principle(DIP)--依赖倒转原则

    1.定义: 高层模块不应该依赖低层模块,二者都应该依赖其抽象:抽象不应该依赖细节:细节应该依赖抽象. 抽象不应该依赖于细节,细节应当依赖于抽象.换言之,要针对接口编程,而不是针对实现编程. 2.使用场 ...