本篇文章基于vscode的一篇轮播图,vue和node的版本如下
首先创建一个vue项目,创建完之后在vs里面打开目录是这样的
打开App.vue文件
我们把template里面的东西都删了,改成
结果呈现
之后我们的app就不动了,用路由动态展现界面,那先讲一下路由吧,让我们打开router下面的index.js,把红色部分删掉,改成
有些朋友不知道路由做什么用的,就是我们的项目肯定不止一个界面,我们基本上是要点击一些按键跳转到其他界面的,路由就是存储你每个界面的网址,然后每个网址绑定对应按键,之后点击按键会直接呈现对应路由存的网址,path对应是你浏览器上方链接后缀(下图红色部分)
name对应值就是你要绑定按钮时后用的名字(实在不理解类比id的作用,name不能重复)
以后我们都是在view里面创建vue界面,每写一个我们就在路由里面添加他的信息,因为我们一开始进入vue项目,系统默认后缀为“/”,所以默认展示路径为“/”对应的链接,我这里是在view里面新建一个turnpicture.vue项目,这篇主要讲轮播图,所以我把默认路径改成我新建的项目了,切记,你放在路由里面的界面一定要有东西,如果空空白白会报错
我们先看一下最后图片样式吧
图片会自动切换,按左右会直接切界面,按下面小圆圈也会跳转对应界面,小圆圈会随着界面切换也会切换变大颜色变白,当我们鼠标按住不动的时候,图片停止切换,当我们按住的同时滑动鼠标或者松开鼠标时候图片继续轮播
首先我们说图片存储,vue项目里面有两个地方可以存照片,一个是public目录下,一个是assets目录下,public下面多用于单纯图片运用,我这里是放在public 下面,放哪都行
图片不能直接拖,要到对应文件public下面放置
然后就可以进入主题了,打开TurnPicture.vue,写主体
最外层写一个盒子(div)把要的装在盒子(红色区域里面)之后以这个盒子为坐标点,其他的内容更具这个盒子确定位置
我们这个轮播图是放映四张照片,但是需要加上第五张照片(和第一张照片一样),否则轮播图会有一段呈现空白,所以我们加五张照片(橙色区域)
下面黄色区域就是下面四个点的雏形
白色区域是左右按键的生成雏形代码
再来我们把style写了,最后再写逻辑代码
最后就到了最最最激动人心的逻辑环节了