- 博客(54)
- 收藏
- 关注
RSS订阅
原创 element table相同数据行合并
哈喽，最近公司都在赶项目在做的过程中也踩了不少的坑，现在来记录下先来讲下Vue+Element使用table表格的合并功能。最后的效果如下图（主要涉及到表格行列合并）：主要思路由于项目后期数据报表模块的日表、月表、年表展示的数据字段不相同并且会继续扩展。这里为了前端后续的维护方便直接将表格以组件的方式封装，然后共用 el-tabs导航和头部搜索 。在开发时候在下面这两处有出现问题：问题1： 给表头某列加提示语，我这里是使用 table的 :render-header来实现的，听@晟哥说还能通过给表头
2020-10-28 16:22:34
6815
16
原创 vsCode中使用ESLint配置全过程
在 vue项目中使用vscode编辑时为了开发的代码统一，采用了ESLint如果代码没有安装规则格式化的话那么就将报错，接下来将详细的讲下配置全过程：前提条件安装ESLint,我这里就重整个Vue项目的下载开始操作vue init webpack eslint_dome_vue //创建项目在创建项目时可直接开启，ESLint配置。项目创建开之后会在目录下生成 .eslintrc.js 文件，这是用来今后配置规则之处。配置vsCode令代码可修复在vscode商城中下载ESLint插件配
2020-07-12 09:50:25
16195
3
原创 微信小程序上线http升级https
微信小程序上线http升级https为了小程序能够上线访问到自己的API服务，那么就需要将我们项目从http升级为https，微信官方是这样要求的：如果不升级的话那么使用预览到手机上，是没办法访问到接口会出现以下错误：http升级https前提拥有自己的域名并且是备案过拥有SSL证书，证书可以去阿里那边免费申请（每个号限领取20次）证书具体领取步骤如下：到这里进行付款就可以了，购买之后就可以在阿里中看到证书了。购买完之后就需要进行配置证书信息，将证书关联到域名。这里我附上已经签
2020-05-24 13:34:32
1650
原创 react组件生命周期
以上就是我对react组件生命周期的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。组件销毁前，组件挂载类型Vue中的onUnmounted、unmounted。组件挂载完毕，组件挂载类型Vue中的onMounted、mounted。子组件接受新的props时会触发，第一次不触发。
2023-04-02 13:06:46
314
1
原创 nextTick使用和原理
Vue有个异步更新策略，意思是如果数据变化，Vue不会⽴刻更新DOM，⽽是开启⼀个队列，把组件更新函数保存在队列中，在同⼀事件循环中发⽣的所有数据变更会异步的批量更新。这⼀策略导致我们对数据的修改不会⽴刻体现在DOM上，此时如果想要获取更新后的DOM状态，就需要使⽤nextTick。以上就是我对nextTick使用和原理的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。nextTick是用于获取下次DOM更新后才调用使⽤的函数。
2023-03-11 19:07:46
874
原创 Vue中key的作用
下图是不使用key的情况，那么就会出现undefined == undefined 也就是ture,那么就从C=>F,D=>C,E=>D,这三次比较都认为是相同节点，导致3次强行更新，以及一次E节点追加。以上就是我对Vue中key作用的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。下图是使用key的情况，就进行掐头去尾，最后发现只剩下一个F，并且这个时候游标停在了C点，就直接创建并且插入C前面。
2023-03-11 14:52:32
57
原创 vue中的diff算法
以上就是我对vue中的diff算法的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。执⾏的时刻是组件内响应式数据变更触发实例执⾏其更新函数时，更新函数会再次执⾏。视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟。粒度，每个组件只有⼀个 Watcher与之对应，此时就需要引⼊。，通过⽐对两者找到变化的地⽅，最后将其转化为对应的DOM。算法才能精确找到发⽣变化的地⽅并⾼效更新。函数，并传⼊新旧两次虚拟。
2023-03-10 17:14:20
462
原创 说说你对虚拟DOM的理解？
如果这时响应式数据发生变化，就会引起重新reder,此时就会生成新的vdom，这时新旧Dom就会进行diff算法，得到一个清单（最小的dom操作），然后进行视图更新。（2）.操作 dom 是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。以上就是我对虚拟DOM的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。
2023-03-09 13:10:45
126
原创 对Vue响应式的理解
为了解决Vue2中Object.defineProperty带能的性能问题，已经实现的复杂性问题，所以Vue3重新编写了这一部分的实现，利用的是Es6的新语法Proxy代理来实现的，在Vue3中就不在需要特殊api了，初始化的性能和内存消耗也得到提升。（1）.MVVM框架中要解决的核心问题数据驱动视图，数据的改变引起视图的更新，那么要实现这一点那么就是需要对数据做响应式的处理，这样才能实现数据改变立即做出更新处理。（1）.所谓的数据响应式就是能够使数据变化可以被检测到并且对这种变化做出响应式的机制。
2023-03-08 22:00:11
704
原创 v-if和v-for哪个优先级更高
以上就是我对v-if和v-for哪个优先级更高的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。的，同样vue3也不能把它们两者写在一起，正因为v-if优先于v-for,并且v-if又依赖v-for的数据源，在这个情况下将会出现报错的情况。把它们放在同一个标签上时，页面每次渲染的时候都会重复的进行判断是十分消耗性能的。（2）.如果是需要进行是否显示判断的话，也可以将v-if移到。过滤下不需要的数据，也可以使用。
2023-03-06 20:44:01
4212
2
原创 script标签中的async和defer
以上就是我对script标签中的async和defer的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。在webpack打包中htmlwebpackplugin中打包后,index.html引入的script就是使用defer延迟加载,来优化首屏加载。问题：script标签放在Body中 如果不加额外的属性那么会对加载起到阻塞吗？
2023-03-04 22:32:53
212
原创 原生css炫酷大屏特效
最近在忙于大屏页面的实现，在实现的过程之中还是遇到不少问题，并截取部分大屏内容记录下。以下就是我通过原生css实现的最终效果如下图（主要涉及到transform和animation）：主要思路1.首先实现最底部的转盘，由于涉及到3d所以需要用到 transform-style: preserve-3d; 改属性可以让子元素都属于同一个三维空间中呈现,通过 rotateX 让图一平铺，随后再旋转一份方向相反即可，通过 translateY 将两张图片拉开距离，得到下图：利用相同方式复制4份，底部转盘
2021-12-03 17:21:17
2614
4
原创 vscode格式化保持标签不换行
好看美观的代码格式能提高不少的工作效率!强迫症的我今天就在研究,使用vsocde保存如何做到便签不自动换行顺便记录下,我最终完成的效果如下图：遇到的问题1.每次在开发时保存代码都会将我的代码换行,个人感觉阅读起来不是很方便,使用vscode的shift+alt+下 快捷键CV都不是那么方便!配置vscode1.首先打开vscode的 >文件 >首选项 >设置>工作台>外观>打开setting.json文件2.打开setting....
2021-11-01 17:26:59
3797
原创 element封装表格组件el-table-column列顺序错乱
1、父组件给子组件传递对象，子组件使用 ：style="[customStyle]" 绑定，达到父组件随意修改子组件的目的。2、判断文件后缀是否允许// 允许上传的图片后缀limitType:{ type: Array, default() { return ['png', 'jpg', 'jpeg', 'webp', 'gif']; }},checkFileExt(file) {// 检查是否在允许的后缀中 let noArrowExt = false; // 获取后缀名 le
2021-11-01 11:02:38
3903
原创 vue中的动态keyframes参数
最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图（主要涉及到动画效果,中间部分左右两边不说）：### 主要思路使用animation配合@keyframes来使用上下移动动画**问题1：** 如何将不同柱子的top值传递给@keyframes中?使用==document.styleSheets[0].insertRule ==...
2021-09-28 16:12:45
2857
原创 js字符串使用占位符拼接
昨天和后端对接接口时遇需要将字符串中的占位符用某个值代替，这里记录下来。// 在String原型对象上添加format方法String.prototype.format = function(){ let str = this; if(arguments.length == 0){ return str; }else{ Object.keys(arguments).forEach((item,index)=>{ str
2021-01-26 11:22:19
1396
原创 element表格使用表单校验
哈喽，最近公司都在赶项目在做的过程中也踩了不少的坑。现在来记录下产品的需求：需要在表格中修改内容，并且对填入的数据进行校验后通过才可提交。我最终完成的效果如下图（主要涉及到表单的校验和表格行列合并）：主要思路表单验证主要是通过 el-form的model 属性绑定对象 结合 el-form-item的prop和rules属性 外加 el-input的v-model绑定的值来进行触发验证。（其中 prop 的值是绑定v-model值的字段名，必须对应上否则无法触发 ）问题1： 后端返回的数据是数组中
2021-01-04 10:09:12
2034
1
原创 JS获取本周、上周、本月、上月时间段
哈喽，最近公司都在赶项目在做的过程中产品提了一个需要查看本周、上周、上个月的需求，现在来记录下代码能直接使用。最后的效果如下图（主要涉及Date()对象的使用）：主要思路（获取周时间段）/***核心思路:先得到startDateTime(开始时间),随后+6就能得出endDateTime(结束时间)开始时间的计算方式:通过getDay()先获取要计算时间是属于星期几(可能出现:0~6),再通过getDate()获取要计算时间是属于本月中那一天结果会出现两种情况：1、利用本月的天数-归属星期几
2020-12-14 23:42:54
1094
3
原创 nginx反向代理404问题解决说明
今天是个开心的日子，为啥呢？当然是我耗时多日的Vue+SpringBoot系统上线的日子啦！使用这两个技术编写的项目打包上线还是算蛮简单。后台Java只要会打 JAR 包就行（因为所有的依赖都会打包进去），前端Vue那是简单只需要 npm run build 操作即可。那么在上线过程中会遇到什么问题呢？问题1： Vue项目打包完之后接口请求不到后端出现404错误，这是由于Vue项目打包之后 proxyTable代理配置失效了！问题2： 由于Vue项目打包之后代理失败，那么就需要使用Nginx进行反向
2020-11-29 00:04:08
23874
12
原创 【Vue/components】实践深入组件——第一章动态绑定
哈喽，接下来我将会持续的更新博客，本次主要通过学习uniapp中的uView框架来学习Vue,我在这里做下一些笔记，如果对读者们有一丢丢帮助的话都可以点赞或者有不足之处希望大佬们能指出，【180°鞠躬】感谢大家。一、如果没有动态绑定，那么Vue中的Css就莫得玩了【1.丢出一段代码】:class="!headerFlag?'header-title':'header-title-small'"【2.再丢出一段代码】:class="[{'header-title':headerFlag,'head
2020-10-31 23:53:18
257
1
原创 通过npm发布vue组件
创建Vue空项目1、为了再打包过程之后避免出现冲突，创建webpack-simple创建一个vue空项目。vue init webpack-simple 项目名称2、在 src 目录下新建子目录components，将已经写的组件放进去。3、注意点：写好的Vue组件需要设置name属性，后面导出是会使用到export default { name:"operation-bar", .... }还需要在和组件的同级目录下创建一个index.js文件用于导出：import colo
2020-10-20 09:41:09
171
原创 vue-cli搭建webpack4项目
先前开发了一个中大型的项目，修改下代码热更新30秒，项目启动4分钟，打包就更可怕了一打一上午。现在想通过webpack4好好优化一下，先弄个测试项目整整。走起！初始化vue-cli项目初始化的package.json文件{ "name": "create-dome-linwenjie", "version": "1.0.0", "description": "A Vue.js project", "author": "HandsomeLin <[email protected]&
2020-10-08 11:13:12
487
1
原创 Webpack4优化Web性能
优化思路/** * webpack的作用是用来对项目进行打包操作。如果要对webpack打包进行优化的话那么需要从两方面进行考虑： * 1、优化项目的体积 * 1)、可以通过配置externals将第三方的包不打到项目中 * 2)、可以通过动态链接库的方式将第三方的包不打到项目中 * 3)、可以将大的包放在CDN上通过引入的方式，减少项目的体积 * 4)、【自带优化】tree-sharking,实现将不用的不打包到项目中。注意需要在mode="production"才生效 * 5)
2020-10-06 11:15:50
206
1
原创 数组按照对象中的属性进行排序
数组按照对象中的属性进行排序，工作中还是很经常用到了。下面就直接贴上代码：let numArray = [ { name:"zhangsan", age:1 }, { name:"lisi", age:10 }, { name:"wangwu", age:2 }]function ObjSortFun(valName){ return function
2020-09-26 16:00:40
640
原创 mvc和mvvm模式的理解与区别
1、从了解MVC开始几乎所有的项目都在做这么一件事：将数据展示给用户看，并处理用户对界面的操作。MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View，比如在controller中写document.getElementById("box").innerHTML = data.titleM（模型）Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
2020-09-20 23:10:23
484
原创 Vue适配Pc端不同分辨率——lib-flexible
核心思路Vue项目使用 vue-cli 脚手架创建使用阿里可伸缩布局方案 lib-flexible 依赖使用 px2rem-loader 将px转化为rem添加依赖npm install lib-flexible --save //阿里可伸缩布局方案依赖npm install px2rem-loader --save // 将px转化为rem依赖安装好之后在main.js中引入// 阿里可伸缩布局方案 import 'lib-flexible'运行项目查看F12，看到图上属
2020-09-13 23:11:23
932
3
原创 Vue将两张图片合并下载——html2canvas
<template> <div> <el-dialog v-dialogDrag :visible="CreateModalShow" :close-on-click-modal="false" title="鍒嗕韩" width="400px" @close="closeDialog" custom-class="showDialog-game" append-to-.
2020-09-13 08:29:56
1514
5
原创 vue-cli配置文件config详解
最近一直在研究webpack，突然想看看vue-cli中的webpack是如何配置，查阅了很多相关的文章，所以想记录下vue-cli的config文件配置。首先我们先看一下config的文件结构：|-config|---dev.env.js|---index.js|---prod.env.js打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件，“dev.env.js”，“index.js”，“prod.env.js”，我们先打开prod.env.js的文件，看里面的内容：'use
2020-08-28 09:40:37
1080
原创 VSCode快速生成.Vue模板
1. 在扩展商店中下载vetur插件2.创建模板代码片段文件->首选项->用户代码片段->点击新建代码片段。取名vue.json 确定3.黏贴.vue模板{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='
2020-08-27 14:56:16
304
原创 element销毁Dialog数据(简单粗暴)
在使用element开发通过之中使用Dialog弹窗创建数据或者数据回显在经常不过了。而且数据创建和数据编辑正常都是使用同一组件。出现的问题：<el-dialog title="提示弹窗" :visible.sync="dialogVisible" width="30%" destroy-on-close></el-dialog>使用dialog 提供的 属性 destroy-on-close 也并不能实现实时的dialog销毁，进行创建和编辑数据正常的
2020-08-20 11:20:51
3328
2
原创 element 阻止$confirm回车确认
最近在开发基于elementUI和Vue项目，得到了一个重置密码的需求：点击重置出现弹窗提示键盘回车键默认要取消我在这里插入代码片
2020-08-19 15:55:17
3186
原创 Webpack详细配置，图文教程
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，随后进行压缩打包。1、安装全局webpack在学习webpack之前是需要安装node环境的，这里默认大家已经安装过node了。随后创建一个webpackDome文件，通过cmd 运行如下命令：npm install webpack webpack-cli -g //全局安装webpack和webpack-clinpm init -y // 初始化获得package.json文件2、开始配置we
2020-08-08 12:13:06
307
原创 Vue配置全局过滤工具
Vue项目开发过程之中必不可少的就是时间戳转化、金额前添加￥符号等等操作，为了方便统一管理我使用filter(过滤器)并且将这些操作全部抽取出来。在src/utils/目录下创建filter.js文件：const filterMoney = (val) => { return '￥' + val}const timestampToDate = (val) => { if (String(val).length === 10) { val = val * 1000 }
2020-08-03 14:15:54
176
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人