Vue.js

废话不多说先上成果图 实现思路 主要分界面与逻辑两大块 界面分为5个部分 左滑块长度 左内容位置 中间长度 右滑块长度 右内容位置 逻辑 touch3个事件 各滑块长度及位置计算 选中时变色 具体实现步骤 首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用变量进行保存,这里我用的就是屏幕的宽度。 this.rangeWidth = document.body.clientWidth 添加vue的三种touch事件 @touchstart.stop.prevent="leftTextTouchStart" //按下 @touchmove.stop.prevent="leftTextTouchMove" //滑动 @touchend.stop.prevent="leftTextTouchEnd" //松开//右滑块，同上 @touchstart.stop.prevent="rightTextTouchStart" @touchmove.stop.prevent="rightTextTouchMove" @touchend.stop.prevent="rightTextTouchEnd" 使用类绑定的方式，在touchStart事件触发的方式，修改点击的滑块的样式，在松开时触发touchend事件，恢复原来的样式 //滑动事件方法

程序IT圈 www.cxyquan.com 优秀程序猿技术公众号 作者：缘自世界 https://segmentfault.com/a/1190000016801687 最近，在持续关注一个Twitter话题，就是 Why do people decide to use frameworks? ，这个话题是由Nicole Sullivan提出的。 刚开始，我对这个问题也没有太在意，也就是随意的看了看，正如提问者Nicole Sullivan说的那样，我刚开始也觉得这是一个愚蠢的问题。但是这个问题就像蒲公英的种子一样，就这么在我的脑海里扎了根，截至到我这写这篇文章之前，我都有一直关注这个问题，并且在思考这个问题。 虽然这个问题看似简单，你或多或少都能回答出那么一两点，但是我想你可能自己也对自己的回答不太满意吧？不管你怎么想的，但我渐渐收起了我从一开始的轻视态度，开始正视这个问题。 在这里，我还要感谢Nicole Sullivan，是她的这个话题，让我对为什么使用框架有了全方位的了解。 为什么用 可以集中精力在业务的实现，而不用把过多的精力和人力用在代码功能逻辑的实现上。 可以避免由我们自己写带来的很多bug。 可以暂时快速的解决掉某一问题，以待以后的进一步解决。 可以避免写技术文档和介绍功能实现给团队成员的问题。 可以极大的缩短开发的周期。 因为成熟的框架本身就是完善的解决方案

作者：缘自世界 https://segmentfault.com/a/1190000016801687 最近，在持续关注一个Twitter话题，就是 Why do people decide to use frameworks? ，这个话题是由Nicole Sullivan提出的。 刚开始，我对这个问题也没有太在意，也就是随意的看了看，正如提问者Nicole Sullivan说的那样，我刚开始也觉得这是一个愚蠢的问题。但是这个问题就像蒲公英的种子一样，就这么在我的脑海里扎了根，截至到我这写这篇文章之前，我都有一直关注这个问题，并且在思考这个问题。 虽然这个问题看似简单，你或多或少都能回答出那么一两点，但是我想你可能自己也对自己的回答不太满意吧？不管你怎么想的，但我渐渐收起了我从一开始的轻视态度，开始正视这个问题。 在这里，我还要感谢Nicole Sullivan，是她的这个话题，让我对为什么使用框架有了全方位的了解。 为什么用 可以集中精力在业务的实现，而不用把过多的精力和人力用在代码功能逻辑的实现上。 可以避免由我们自己写带来的很多bug。 可以暂时快速的解决掉某一问题，以待以后的进一步解决。 可以避免写技术文档和介绍功能实现给团队成员的问题。 可以极大的缩短开发的周期。 因为成熟的框架本身就是完善的解决方案。一般它们都有自己的生态系统，有众多技术达人参与。这样我们在使用中

// 上传限制 beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 5; var isIMG = true; if (!isJPG) { if (!isPNG) { this.$message.error('上传图片只能是 JPG, PNG 格式!'); isIMG = false; } } if (!isLt2M) { this.$message.error('上传图片大小不能超过 5MB!'); } return isIMG && isLt2M; }, //商品图片上传(修改) handleImgUpload: function(_index, _name, ev) { var ev = event || window.event, elem = ev.currentTarget, imgElem = elem.nextElementSibling, files = this.uploadImgFn(elem); this.beforeAvatarUpload(files.fileObj); imgElem.src = files

vue-cli3 + element 图片上传，图片上传前验证格式，自定义上传; el-upload组件 <el-upload class="upload-demo" action="/uploadImg" :file-list="bankImgList" list-type="picture" :http-request="uploadAccountBank" :before-upload="beforeUpload"> <el-button type="primary">点击上传</el-button> </el-upload> 验证图片格式 // 上传图片前的验证只能是jpg格式的图片 beforeUpload(file) { const isJpg = file.type === 'image/jpeg' ? true : file.type === 'image/jpg' ? true : false; if (!isJpg) { this.$message.error('请选择jpg或jpeg格式的文件!'); } return isJpg; }, 上传 async function uploadImage(a) { // 图片是否上传成功 let uploadSuccess = false; // 图片id let id = 0; let fromData = new

Hello，小伙伴们好呀！ 又一年过去了，新年快乐呀！ 极其魔幻 2020 终于都过去了，庆幸的是我们还活着，感谢那些逆行者们，感谢！ 又到总结一年成长的时刻，我 2020 的关键词是： 成长不及预期的 3 年之痒 阅读本文之前，最好先阅读我的： 我的 2019 年 - 当勤精进，但念无常 ，坐看我被打脸 😅。 和 我的 2019 年年终总结 - 真香篇 ，感受一下，今年的自己是不是也一样呢。 回顾 2020 的目标 深入 Vue 技术栈的原理与内在实现 - 没完成 这个没完成，一是因为要出 Vue3.0 了，所以没有继续学习，二是因为没时间。 学习 Vue3、 TypeScript、Node 技术栈 - 完成 这 3 个都有学习，Vue3 是 2021 年前端必备的技术了，并写下了这篇文章 快速入门熟练 Vue3 核心新特性，这10个实例练习就够了 ，还学习了 TypeScript 和 Node ，因为工作中要用到，不过没有输出文章。 英语词汇量达到 7000+ - 完成 30% 这个就惭愧了，年初报的一期英文阅读里有《寻梦环游记》和《冰雪奇缘》两部经典，《寻梦环游记》阅读了 60% 左右而已，另外一部都没开始，一部都没有完成 😢，强行推锅给工作加班 😬 保持运动，常锻炼 - 完成 这应该是一直在践行并快乐着的事项了，一直有跑步和健身，今年还多了一项游泳，哈哈。 坚持写作

// 每日前端夜话 第466篇 // 正文共：3800 字 // 预计阅读时间：12 分钟 拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。 在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具，使用户可以从头到尾直观地管理项目。Trello、Pivotal Tracker 和 Jira 等工具都属于看板应用。 设置看板 运行以下命令创建我们的看板项目： vue create kanban-board 在创建项目时，该选择只包含 Babel 和 ESlint 的默认预设。 完成后，删除默认组件 HelloWorld ，将 App 组件修改为空，仅包含裸组件模板： < template > < div > </ div > </ template > < script > export default { name : 'App' , components : {}, }; </ script > < style > </ style > 接下来用 Bootstrap 进行样式设置，只需 Bootstrap CSS CDN 就够了。将其添加到 public/index.html 的 head 重。 < head > < meta charset = "utf-8" > < meta http

大家好，我是为前端娱乐圈操碎了心的小迷妹，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标。 每天上班必须做的一件事情，就是打开我们全球最大的程序员交友社区GitHub，因为这上面有太多开源的宝贝了，每天都乐此不疲，深耕于此，当然也收获了很多有用的东西，写出来分享一下。 今天分享 一个简单且易上手的 Spring boot 后台管理框架：EL-ADMIN 话不多说，按照惯例，上链接 GitHub地址： https://github.com/elunez/eladmin-web 官方网站：https://el-admin.vip/ 预览地址：https://el-admin.xin/system/timing 账号密码：admin / 123456 EL-ADMIN 后台管理系统是一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue、Element-UI 的前后端分离的后台管理系统。 在 Github 和 Gitee 上看了很多的项目，发现大多数都是基于 Mybatis 的（可能是国内业务太复杂的缘故吧）， 基于 Spring Boot Jpa 的寥寥无几，于是 EL-ADMIN 就这样诞生了。 正在学习vue的小伙伴

在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach() 的使用。 forEach() 是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。 在Vue项目中，标签里的循环使用v-for，方法里面的循环使用forEach。 1、forEach() 使用原理 forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。需要注意的是: forEach() 方法对于空数组是不会执行回调函数的。 forEach：即Array.prototype.forEach，只有数组才有的方法，相当于for循环遍历数组。用法：arr.forEach(function(item,index,array){...}),其中回调函数有3个参数，item为当前遍历到的元素，index为当前遍历到的元素下标，array为数组本身。forEach方法不会跳过null和undefined元素。比如数组[1，undefine，null，，2]中的四个元素都将被遍历到，注意与map的区别。 2、forEach() 语法 array

1. vue双向数据绑定原理 vue是采用数据劫持结合发布-订阅 的方式,通过 object.defineProperty() 来劫持各个属性的 setter , getter ,在数据发生变动时发布消息给订阅者,触发相应的监听回调来渲染视图 第一步: 需要 observer 的数据对象进行 递归遍历 ,包括子属性对象的属性,都加上 setter , getter ,这样的话，给这个对象的某个值 赋值 ,就会触发 setter ,那么就能监听到数据变化 简单来说就是实现一个数据监听器Observer，它能够对数据对象的所以属性进行监听,如果有变动就可以拿到最新的值并通知订阅者 第二步: compile 解析模块指令,讲模块中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图 简单来说就是实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析,替换数据,绑定更新函数 第三步: Watcher 订阅者时 Observer 和 Compile 之间的通讯桥梁,主要做的事情是: 1.在自身实例化时往属性订阅器( dep )里面添加自己 2.自身必须有一个 update() 方法 3.待属性变动 dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile