首页 > 其他分享 >Vue使用第三方库(Swiper 轮播图)

Vue使用第三方库(Swiper 轮播图)

时间:2022-11-14 15:56:40浏览次数:45  
标签:Vue 轮播 指示器 点击 使用 Swiper

使用库之前肯定是先安装库:(tips:指定版本可以在后面加上@8.4.4)

cnpm install --save swiper

这种方式可以将库保存到 package.json 中:

 

 

然后就是使用:

  首先是引入库:

    

 

 

   然后是挂载:

    

 

 

   然后是使用其标签:

    

 

 

   查看效果:

    

 

 

     这个库的功能可以实现滑动操作: 

 

 

 

 可以发现指示器的点击是设置为 true:

 

 所以可以点击指示器进行图片选择。

标签:Vue,轮播,指示器,点击,使用,Swiper
From: https://www.cnblogs.com/0099-ymsml/p/16889255.html

相关文章

  • vue
    一、vue核心1、vue简介1.1、vue概念动态构建用户界面的渐进式JavaScript框架1.2、vue特点采用组件化模式,提高代码复用率、且让代码更好维护 声明式编码,让编码人员......
  • Vue生命周期
    Vue生命周期有四个阶段,八个函数:beforeCreate(){console.log("beforeCreate:创建之前")},created(){console.log("created:创建完成")},beforeMo......
  • Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
    在前一篇文章中分享了搭建组件库的基本开发环境、创建了foo组件模块和组件库入口模块,本文分享组件库的样式架构设计。1常见的CSS架构模式常见的CSS架构模式有很多......
  • Vue通过事件交互将数据从子组件传递到父组件
    首先有两个组件:父组件:App.vue子组件:ComponentForOne.vue<template><imgalt="Vuelogo"src="./assets/logo.png"><!--下面使用组件:组件标签名--><......
  • vue中的几个高级概念
    混入mixins官方解释混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的......
  • Vue虚拟dom是如何被创建的
    先来看生成虚拟dom的入口文件:...import{parse}from'./parser/index'import{optimize}from'./optimizer'import{generate}from'./codegen/inde......
  • vue3实战-完全掌握ref、reactive
    知道大家使用Vue3的时候有没有这样的疑惑,“ref、rective都能创建一个响应式对象,我该如何选择?”,“为什么响应式对象解构之后就失去了响应式?应该如何处理?”今天咱们就来......
  • vue源码分析-响应式系统(二)
    为了深入介绍响应式系统的内部实现原理,我们花了一整节的篇幅介绍了数据(包括data,computed,props)如何初始化成为响应式对象的过程。有了响应式数据对象的知识,上一节的后......
  • vue源码分析-响应式系统(三)
    上一节,我们深入分析了以data,computed为数据创建响应式系统的过程,并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题,这......
  • vue源码分析-响应式系统(一)
    从这一小节开始,正式进入Vue源码的核心,也是难点之一,响应式系统的构建。这一节将作为分析响应式构建过程源码的入门,主要分为两大块,第一块是针对响应式数据props,methods,da......