Vue初学者看过来:一个基于Vue纯前端却可保存数据的移动端个人博客

Lkkkkkkg 2019-03-12 02:31:52
简介
参考了辣子鸡大神利用 Github Gist 进行远程数据的存储,自己也尝试用 vue 框架写了一个纯前端却可以保存数据的**移动端**个人博客,参考地址:https://blog.csdn.net/Dogfights/article/details/80117569?utm_source=blogxgwz5

地址
Demo地址:https://lkkkkkkg.github.io/lk.my-vue-blog.io/
源码地址:https://github.com/Lkkkkkkg/my-vue-blog

功能
发表博客
删除博客
个人中心
后续功能等待完善中

技术栈
Vue
Vuex
Vue-router
axios

界面
界面采用简洁的风格,白色为主色调

组件
使用自己编写的组件:
my-input
dialog
my-textarea
card
note

效果


最后
此项目适合刚刚接触 Vue 的初学者,本人也是接触 Vue 不久的前端er,项目中许多代码写的比较冗杂,后续会进行代码的优化,功能的完善。
...全文
842 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
scscms太阳光 2020-03-05
  • 打赏
  • 举报
回复
赞一个!
  • 打赏
  • 举报
回复
真是不容易,太强了
hookee 2019-04-17
  • 打赏
  • 举报
回复
  • 打赏
  • 举报
回复
这个可以用bootstrap写吗
资源下载链接为: https://pan.quark.cn/s/1bfadf00ae14 在移动端应用开发中,轮播图(Slider或Carousel)是一种常见组件,用于展示多张图片或内容,并通过滑动切换。本项目基于Vue.js框架实现移动端轮播图,具备触摸滑动、自动轮播、无缝滚动及循环无回滚等功能,适合前端初学者学习和实践。 Vue.js是一个轻量级前端框架,采用声明式编程,让开发者专注于数据和逻辑,而非DOM操作。通过模板语法构建UI,结合组件化开发,可提高代码复用性和可维护性。 轮播图的核心功能如下: 触摸滑动滚动:在移动设备上,用户可通过滑动手势切换图片。通过监听JavaScript的触摸事件(如touchstart、touchmove、touchend),计算滑动距离和方向,从而触发图片切换。 自动轮播:轮播图可设置自动播放,每隔一定时间自动切换到下一张图片。通常利用setInterval实现定时器功能,并结合Vue的生命周期钩子(如beforeDestroy)来控制定时器的开启和关闭。 无缝滚动:当轮播到最后一张图片时,能无缝返回到第一张,形成无限循环效果。这需要在数据结构设计上进行处理,例如通过数组复制或索引计算实现。 循环无回滚:用户快速滑动时,可能会导致图片切换回滚到错误位置。通过合理判断条件和状态管理,可避免回滚现象,确保滑动流畅性和准确性。 此外,项目还实现了图片切换的过渡效果,通过CSS3的transition或animation属性(如设置opacity和transform等)实现平滑动画效果,提升用户体验。 在本项目中,swiper可能是实现这些功能的核心组件或库,它封装了触摸事件处理、轮播逻辑和动画效果等。在Vue中,可将swiper组件化,便于代码组织和复用。 总之,这个基于Vue移动端轮播图项目涉及Vue组件化、触摸事件处理、CSS3动画

87,991

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧