vue轮播组件及去掉路由#
最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能。vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取数据,对应显示到我们的页面上就可以。
使用vue基本工具必备,node, 翻墙的工具蓝灯(如果没有的同学可以找我,给你安装包),vue-cli,这是最基本的使用工具,如果您是后台开发人员,那么我推荐使用webstrom和vscode,他们都可以配置node,使用npm命令去启动,唯一不好的就是对于代码快速修改有点慢,如果电脑配置相当好可以使用;如果你的电脑比较卡顿,那么建议你使用sublime就可以了,通过安装插件就可以了。
下面进入我们的学习阶段,首先大致说一下vue的开发过程,也是大都数项目的使用惯例。写项目时,我们需要统一一下那些公用的方法,比如:请求错误页面,登录,注册,还有我们常用的弹窗页面,那些是我们私有的方法,那些需要定一些对象去使用。
我们一个系统设计的功能模块,从开发来说,常见的有轮播图,tab栏切换,搜索组件,地址,导航菜单(折叠导航菜单),footer(版权信息),还有友情链接,个人中心,头像修改,重置密码,登录(第三方登录),注册,列表页循环,分页功能,下拉刷新等
从上面的浅谈中,我们可以发现我们在项目中需要一个公共组件,header组件,footer组件,nav组件,swiper组件,tab组件,fail组件等其他组件,今天我们分享一下swiper组件封装到vue中去。
1.安装swiper,修改package.json中的,在这个对象中添加“swiper” : "^3.0.0" 注意这里是你想用的swiper插件版本号,可以去GitHub查看版本号,这个'^'是大于等于这个版本的意思。
2.如果你在webstorm中修改了配置文件,那么会告诉你更新npm install ,你更新就好了,如果失败了,那么建议你使用命令窗口去更新,使用cnpm install ,这个命令你可以清楚地看到自己的依赖包是多少个,好了会有对勾的绿色的。
3.在src 下新建一个文件夹common,用来存放我们的公共组件,header组件,footer组件也可以使用在这里,然后新建一个swiper.vue文件,文件名首字母大写,最好使用英文,如果使用webstorm我们可以在“setting”中新建一个vue类型的模板文件,这样自动生成好vue文件的模板,非常方便。
4.编写我们swiper的核心代码
<template>
<div class="swiper-container" :id="swiperId">
<div class="swiper-wrapper">
<div v-bind:key="index" v-for="(item,index) in swiperD" class="swiper-slide swiper-slide-next" @click="slideTo(item.url)">
<img :src="item.imgHref" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template> <script>
import Swiper from 'swiper' export default {
props: [ 'swiperId', 'swiperD' ],
data () {
return { }
},
mounted () {
this.sw()
},
methods: {
sw () {
let that = this
// eslint-disable-next-line
let lunbo = new Swiper('#' + that.swiperId, {
pagination: '.swiper-pagination',
paginationClickable: true,
longSwiperRatios: 0.3,
setWrapperSize: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
loop: true
})
},
slideTo (url) {
console.log(url, window)
window.location.href = url
}
}
}
</script> <style>
@import url(./swiper.min.css);
.swiper-container{
padding-top:2.45rem;
min-height:150px;
}
.swiper-slide{
width:100%
}
.swiper-slide img{
width:100%;
display: block;
}
</style>
注意这里的引入swiper.min.css需要引入,去掉这里的scoped,不然引用组件的使用样式不起效果
5.使用组件
导入组件
import Swipers from '../common/Swiper' 模板中引入
<Swipers swiperId="lunbo" :swiperD="swipers"></Swipers>
主要使用swiperId必须要传入, swiperD是我们的数据源。
6.篇后福利,去掉路由中的#
在router的index.js中使用
mode: 'history',
7.es语法中未使用的变量去掉语法检测:
// eslint-disable-next-line
8.GitHub链接地址:喜欢的记得star哈。
9.7天vue入门资料,不定期更新,喜欢的请加微信预定(xingguangbi,6块钱一份,需要的来)
vue轮播组件及去掉路由#的更多相关文章
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
- vue-awesome-swipe 基于vue使用的轮播组件 使用(改)
npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swi ...
- vue 3d轮播组件 vue-carousel-3d
开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错.发现关于这个组件,能搜到的教程不多,就分享一下我的经验. 插件github地址:https://wlada.git ...
- 基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么 由facebo ...
- 移动端Reactive Native轮播组件
移动端Reactive Native轮播组件 总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reac ...
- C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件
近期在做的一个Vue2项目里需要一个可以滑动的轮播组件,但是又因为现有的传统轮播库功能过于繁琐和笨重.因此自己写了一个针对于Vue2.x的轻型轮播组件. 项目GitHub链接:C-Swipe Mobi ...
- vue轮播(完整详细版)
轮播组件vue <swiper :options="swiperOption" class='swiper-box'> <swiper-slide v-f ...
- 一分钟搞定AlloyTouch图片轮播组件
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...
- bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
随机推荐
- POJ 1681 Painter's Problem [高斯消元XOR]
同上题 需要判断无解 需要求最小按几次,正确做法是枚举自由元的所有取值来遍历变量的所有取值取合法的最小值,然而听说数据太弱自由元全0就可以就水过去吧.... #include <iostream ...
- BZOJ 2822: [AHOI2012]树屋阶梯 [Catalan数 高精度]
2822: [AHOI2012]树屋阶梯 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 779 Solved: 453[Submit][Status] ...
- VUE2.0 elemenui-ui 2.0.X 封装 省市区三级
1. 效果图 2. 版本依赖 vue 2.X , elementui 2.0.11 使用element ui <el-form>标签 3. 源码 components/CityL ...
- ------ 解析因内核栈溢出导致的 “double fault” 蓝屏 ------
-------------------------------------------------------------------------- 前一篇指出 tail_recursivef_fac ...
- Leetcode刷题C#版之 Median of Two Sorted Arrays
题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...
- git服务器配置http请求
使用apache 配置http协议的git库 在CentOS上基于Apache http服务搭建git远程仓库(一) 基于http方式的git服务器搭建 搭建http协议的git服务器 Linux g ...
- chrome下input文本框自动填充背景问题解决
chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...
- CENTOS6.6上搭建单实例ORACLE12C
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 自己在centos6.6上搭建的单实例oracle12c 由 ...
- 通过实例介绍持续集成的应用--基于Jenkins
1.测试工程师为什么要掌握持续集成 一个程序员如果想发布一个产品,他需要编码.编译.测试,发布的过程.对于一个企业来说,如果也想发布一个产品的话,同样的也是需要上述的过程,区别在于企业要发布的产品的需 ...
- shiro进行散列算法操作
shiro最闪亮的四大特征:认证,权限,加密,会话管理 为了提高应用系统的安全性,这里主要关注shiro提供的密码服务模块: 1.加密工具类的熟悉 首先来个结构图,看看shiro提供了哪些加密工具类: ...