用vue实现一个相册网页_vue做一个图片上传预览的组件，附vue-router基础用法

最新推荐文章于 2023-07-11 17:10:51 发布
VIP文章 最新推荐文章于 2023-07-11 17:10:51 发布
阅读量873 收藏
点赞数
文章标签： 用vue实现一个相册网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32060735/article/details/112025933
版权

7-4更新  =>已将本次项目上传至　githulb/lonhon   欢迎大家下载，以后做的新东西也都会更新在上面。

之前发了一篇关于自己看待前端组件化的文章，但是由于学习和实践的业务逻辑差异，所以自己练习的一些demo逻辑比较简单，打算用vue重构现在公司做的项目，所以在一些小的功能页面上使用vue来做的，现在写的这个是项目中用户反馈功能而来的，收获还是挺多的。

收获：dom操作=>数据操作       router的使用       组件的使用，具体总结放在尾部。

功能：1.上传图片

2.显示缩略图

3.可以删除

先上成品图(主要抽取图片这块)，自己在家主要做的功能，样式就不计较了。

先上文件目录

由于测试demo，结构基本和VUE初始化生成的目录一致，这里把Hello文件作为了这次组件开发的文件，App文件是主文件。这里自己理解的vue文件：是组件，也是页面。所以在定义的时候得根据实际情况来做路由还是组件。

因为产品给的图上面要求有5个按钮，意味着只能选5个文件，这里如果用原来的思维来做的话，就是放5个input进去，但是现在用vue来做了，肯定得用v-for，不然太low了。先看看html部分

使用ul列表作为input的容器，然后在li中使用v-for循环mmm对象，

最低0.47元/天 解锁文章
上官晓栋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
人工智能_大模型022_Centos本地安装_ScreenShotToCode根据设计图_截图生成前端Vue/React/Bootstrap页面_003---人工智能工作笔记0158
添柴程序猿的专栏
03-21 88
这里,下载以后放到对应的/data/module/gcc-13.2.0/ 这个目录,把原来的这个文件备份一下,改名成,.bak就可以了。执行gcc -v 可以看到,得到的版本还是 4.8.5 对吧,因为我们把gcc,安装在/usr/local中了。之前我们就生成这个.env文件了,我们是申请了一个calude3的,给的试用的5刀的额度的,这个key。好,之前是安装yarn的时候发现需要,升级glibc,然后升级glibc的时候,又发现需要,升级gcc。这个也下载下来,把原来的备份一下,然后放到对应目录。
photoshare-vue:图片分享网站的vue前端
03-22
照片共享 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue.js案例实战——设计照片相册
weixin_44805285的博客
05-18 3937
上课讲了一个案例，感觉挺好的，以后的毕业设计也可以直接拿来用。 在HTML页面引入vue-gallery组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js构建的简单照片相册</title> <meta name="viewport" content="width=device-width, initi
c# mvvm模式获取当前窗口_基于 Vue 实现一个简历 MVVM
weixin_39689700的博客
11-20 335
授权转载，作者：子弈，来自掘金社区。如果你对于MVVM的形成不是特别清晰，则可以先阅读以下部分。了解MV*的演变历史以及特性(可跳过)了解观察者模式(可跳过)本文可以帮助你了解什么？了解Vue的运行机制参考Vue的运行机制，将观察者模式改用中介者模式实现一个简易的MVVMMVVM的实现演示MVVM的流程设计中介者模式的实现数据劫持的实现数据双向绑定的实现简易视图指令的编译过程的实现Vie...
vue实现好看的相册、图片网站
lucky_fang的博客
04-13 2323
第一步暂时到这里，关注作者，及时了解更多好项目！如果你也有好的案例，欢迎分享出来，说不定下一个demo就ta了。还是那句话，获取源码或如需帮助，通过博客后面名片+作者即可！
记录一次canvas小白做相册功能的过程
m0_49337807的博客
07-30 490
首先，我想到的是开始组装数据，因为既然是要在我们系统中去制作这个相册，那肯定相册得有数据去驱动，一本相册可能很多页，所以相册的数据肯定是数组对象的格式，每一页相册得有一下几个数据[{content[{url'',x309,y1432,width959,height959,type'image'},{url'',x1875,y1368,width697,height697,type'image'},{url'',x65,y2552,............
带你使用vue为女朋友编写一个旋转相册
CSDN凉宸
08-23 1619
大家都会使用vue脚手架创建一个项目就不一 一的去讲解了 我就直接开始交给大家如何编写代码了 我们需要改的几个文件（这里我就使用了一张demo图，大家可以新建一个images文件夹来存放女朋友照片哦） App.vue: <template> <div id="app"> <index /> </div> </template> <script> import index from './components/in.
vue-router 源码之实现一个简单的 vue-router
12-29
前言 ...想象一下，如果自己实现了一个 vue-router，会怎么去使用呢？参考 vue-router 官方的使用方式，看看 html 的使用： <router to=#/>home</router> <router to=#/book>book</router>
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
12-04
vue.js 是 目前 最火的前端框架，vue.js 兼具 angular.js 和 react.js 的优点，并剔除它们的缺点，并且提供了很多的周边配套工具 如vue-router 、vue-resource 、vuex等等 ，通过他们我们可以很轻松的构建一个大型...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue实现同一个页面可以有多个router-view的方法
10-17
今天小编就为大家分享一篇vue实现同一个页面可以有多个router-view的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端实现3D旋转木马相册
m0_46577631的博客
11-21 1141
前端实现3D旋转木马相册
vue通过多张图片生成3d旋转360效果图
weixin_42929962的博客
08-12 2826
嘎嘎好使，应该是最简单的图片3d查看了。纯手写哪里有问题欢迎指点。上传物品4周图片鼠标滑动360展示。
前端学习（231）:box-reflect倒影
歌谣的博客
12-27 263
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
Vue3 中实现 3D 可视化
最新发布
Memento_mori1984的博客
07-11 1694
说明：spline实例既可以拉取模型同时拉取完毕之后会在canvas节点上渲染画布。loading prop true 显示 false 隐藏。纯展示类组件，只需要设计一个参数，显示隐藏。2- 导入loading根据状态控制显示。
3d正方体旋转相册代码_仿抖音3d立体图片音乐盒用vue、css、js的html制作及代码分析
weixin_39654436的博客
11-23 1040
1 说明：1.1 拿来即能用，老少男女皆可为，适合为自己或者女朋友或老婆、男朋友或老公，小孩，老人制作有音乐的3d图片展示。1.2 推荐指数：★★★★1.3 适合收藏，代码已经亲测过，建议谷歌浏览器，其他浏览器没测试，+微软vscode编辑器。2 效果3 准备工作：3.1 图片准备：6张jpg图片：命名为：jt1~6，即jt1.jpg，jt2.jpg，jt3.jpg......，放在文件夹img中...
vue2+three.js实现类似VR、3D全景效果
Js_Zoro的博客
05-25 3410
俩图标是我自己加的前进后退按钮，也是百度了好久，再加上GPT的帮助，才给搞出来。因为需求急，都不看官方文档，百度到一个能跑的demo之后改吧改吧，就先用着了。代码有很多用不到的地方和需要优化的地方，我是来不及改了，就先这样吧。
vue3 原生实现照片墙效果
weixin_46463849的博客
04-07 1342
实现的效果，因为产品需要照片下面更着展示图片的备注信息。开始用element照片墙组件出现了各种各样的问题，最后参考前辈的代码用原生实现效果。
vue--3D旋转相册
weixin_42029487的博客
09-12 3906
&lt;template&gt; &lt;div class="container" draggable="false" @mousedown="returnFalse"&gt; &lt;div class="album" ref="album" @mousedown="returnFalse"&gt;
写一个代码示例，使用vue-router实现页面跳转
06-07
好的，以下是一个简单的使用Vue Router实现页面跳转的代码示例： 1. 安装Vue Router ```bash npm install vue-router ``` 2. 在Vue项目中引入Vue Router ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); ``` 3. 定义路由 ```javascript const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] }); ``` 4. 在Vue实例中使用路由 ```javascript new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 5. 在模板中使用路由 ```html <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> <router-view></router-view> </div> </template> ``` 以上代码示例中，路由定义了三个路径：'/'、'/about'和'/contact'，分别对应着三个组件：Home、About和Contact。在模板中使用<router-link>标签可以实现页面跳转，<router-view>标签则会渲染对应的组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值