vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装
npm install vue-awesome-swiper --save
第二部在main.js中引入
然后就可以在组件中使用该插件
- <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;
- }
- }
- }
- }
- }
- </script>
- <style>
- </style>
vue中引入swiper(vue中的滑块组件vue-awesome-swiper)的更多相关文章
- 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入
在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- 在子组件中触发事件,传值给父组件-vue
1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...
- vue全局引入公共scss样式,子组件调用
前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...
- 在小程序中引入有赞的vant框架组件
这里给大家讲解小程序中如何引入vant组件(我这里是采用小程序的云开发模板) 1.首先在项目的miniprogram文件夹右键在终端中打开,输入命令npm init初始化生成一个package.jso ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- vue中引入json数据,不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- VUE 中引入百度地图(vue-Baidu-Map)
1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...
- vue页面引入外部js文件遇到的问题
问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
随机推荐
- SQL SERVER Buffer Pool扩展
Buffer Pool扩展简介 Buffer Pool扩展是buffer pool 和非易失的SSD硬盘做连接.以SSD硬盘的特点来提高随机读性能. 在Buffer Pool 扩展之前,SQL Ser ...
- 纯JS实现像素逐渐显示
就是对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 其实就是简单的用JS实现将左上角的矩形随 ...
- FasfDFS整合Java实现文件上传下载
文章目录 一 : 添加配置文件 二 : 加载配置文件 1. 测试加载配置文件 2. 输出配置文件 三:功能实现 1.初始化连接信 ...
- ECMAScript6-let与const命令详解
前言 <ECMAScript入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性. let和const命令,是第一章开始介绍,也是比较基础的知识. ...
- 设计模式-前摄器模式(Proactor)
本周要进行boost asio库的学习,在学习之前发现最好需要先了解一下前摄器模式,这样对asio库的理解很有帮助,故写下此文 我之前写的随笔XShell的模拟实现中的链接方式可以说是同步的(服务器阻 ...
- php+mysql事务处理例子详细分析实例下载
一.数据引擎innodb用begin,rollback,commit来实现提交事务处理,begin开始事务后出现错误就rollback事务回滚或者没有错误就commit提事务提交确认完成. start ...
- pwnable.kr memcpy之write up
// compiled with : gcc -o memcpy memcpy.c -m32 -lm #include <stdio.h> #include <string.h> ...
- css基础知识之属性选择器
css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 记录git常用操作命令
GIT的常用操作 0.写在前面 作为一名开发者,熟悉使用 git 代码管理工具是一项必备的基本技能.git 相较 SVN 而言,其优点不言而喻.git 的功能非常强大,其包括的操作命令也非常的多,但是 ...
- 设计模式原则(3)--Dependency Inversion Principle(DIP)--依赖倒转原则
1.定义: 高层模块不应该依赖低层模块,二者都应该依赖其抽象:抽象不应该依赖细节:细节应该依赖抽象. 抽象不应该依赖于细节,细节应当依赖于抽象.换言之,要针对接口编程,而不是针对实现编程. 2.使用场 ...