![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE细节
小张很嚣张~
Web前端开发交流,各位大神多多指教~
展开
-
vue3 中使用store时这么写可以提升效率
vue3中store中的数据获取或者设置 写法如下 非常方便原创 2022-06-01 12:00:04 · 1033 阅读 · 0 评论 -
elementPlus修改主题色以及皮肤设置思路
系统皮肤通过提前定义好各种皮肤风格通过vue的store以及localStorage去动态修改同时代码中要使用变量方式引入store中的主题颜色原创 2022-06-01 11:52:59 · 4089 阅读 · 2 评论 -
小程序手势返回以及手机自带返回功能问题解决思路
一般苹果手机不会自带手势返回以及原生手机返回按钮,所以我们的组件返回功能是可以去做一些自定义的事情的。但是安卓手机大部分有原生手机自带的返回按钮以及手势返回,这个时候我们可以通过 onUnload生命周期拦截到,我们需要在当前页面设置一个flag来记录是否使用了组件的返回功能,如果使用了组件的返回功能我们不需要走 onUnload这个钩子。下面是组件返回功能如果是手势返回或者手机自带返回从而达到拦截住手势返回或者手机自带返回的效果~希望微信团队还是抓紧出了拦截手势以及手机自带返回功能的API原创 2022-05-19 16:47:08 · 2924 阅读 · 0 评论 -
小程序自定义custom-tar-bar
<!--miniprogram/custom-tab-bar/index.wxml--><cover-image class="background-bottom {{isIphoneX?'phone':''}}" src="/image/tab/tab_bgc_shadow.png"></cover-image><cover-view wx:if="{{isIphoneX}}" class="tab-bar-backgrond"></cover原创 2022-04-12 14:48:49 · 296 阅读 · 1 评论 -
前端性能优化方案
前端性能优化方案优化工具:lighthousewebpagetestchrome devtools**FCP 首次内容绘制 1s以内LCP 最大内容绘制 2.5s以内FID 首次输入延迟TTI 完全可交互TBT 总阻塞时间 所有长任务(多于50ms的任务)时间 - 50msCLS 布局抖动**html解析知识点解析html过程中 如果遇到js脚本不管是内联还是外联都会阻塞DOM的渲染 而是下载脚本并且解析脚本处理完后 继续解析Htmldefer 与 DOMContentLoa原创 2022-02-10 17:24:19 · 1493 阅读 · 0 评论 -
小程序bindblur遇到的一个坑
因为 this.setData 是异步的所以 input输入后 bindblur 去重新赋值 这个过程中 会出现bugbindblur 的优先级太低了且setData是异步的 这个时候点击确认按钮 打印 input框内的值会发现 是之前的值解决方案1. 不要用bindblur 使用bindinput解决方案2. 确认按钮添加 setTimeout 防止确认的动作比离do焦的快动作...原创 2022-02-09 16:19:33 · 1818 阅读 · 0 评论 -
前端工程化-文件集中注册
import { createStore } from 'vuex'const path = require('path')const requireModules = require.context('./modules', true, /index\.(ts|js)$/iu)const modules = {}requireModules.keys().forEach(filePath => { const modular = requireModules(filePath).原创 2022-01-18 11:13:31 · 476 阅读 · 2 评论 -
商城小程序仿每日饭粒打造属于自己的商城小程序
原创 2022-01-10 10:06:45 · 144 阅读 · 0 评论 -
vue中wangeditor的层级过高处理方式
/* 用于解决wangeditor的层级过高 .w-e-toolbar 要比 .w-e-text-container 的 z-index大 否则工具栏不会展示了 */.w-e-text-container { z-index: 1 !important;}.w-e-menu { z-index: 2 !important;}.w-e-toolbar{ z-index: 2 !important;}...原创 2021-12-29 11:58:49 · 808 阅读 · 0 评论 -
探究js中隐式转换
console.log( [] == ![] ) // trueconsole.log( {} == !{} ) // false在比较字符串、数值和布尔值的相等性时,问题还比较简单。但在涉及到对象的比较时,问题就变得复杂了。最早的ECMAScript中的相等和不相等操作符会在执行比较之前,先将对象转换成相似的类型。后来,有人提出了这种转换到底是否合理的质疑。最后,ECMAScript的解决方案就是提供两组操作符:相等和不相等——先转换再比较 (==)全等和不全等——仅比较而不转换原创 2021-12-28 19:17:37 · 77 阅读 · 0 评论 -
秀米编辑器内容复制到wangEditor中图片的处理
pasteTextHandle 利用的是自定义处理粘贴的文本内容// 自定义处理粘贴的文本内容 pasteTextHandle(content) { let n = new Date().getTime() let imageArr = [] // //匹配图片 var imgReg = /<img.*?(?:>|\/>)/gi; // //匹配src属性原创 2021-12-28 14:20:47 · 1058 阅读 · 2 评论 -
vue中如何批量下载文件
一开始 用的是 window.open() 方法弃用的原因想必大家都知道 就是体感很差 浏览器会拦截住后来选择了使用iframe 相比 window,open() 方法 稍强一些this.picData.forEach(item=>{ if(item.isChecked){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.heig原创 2021-12-28 14:18:06 · 1059 阅读 · 0 评论 -
vue中如何批量下载文件
一开始 用的是 window.open() 方法弃用的原因想必大家都知道 就是体感很差 浏览器会拦截住后来选择了使用iframe 相比 window,open() 方法 稍强一些this.picData.forEach(item=>{ if(item.isChecked){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.heig原创 2021-12-16 16:54:27 · 634 阅读 · 0 评论 -
深入理解浏览器的缓存机制【转载】
浏览器缓存策略原创 2021-08-30 10:48:56 · 90 阅读 · 0 评论 -
EventLoop宏任务和微任务的执行顺序,先执行宏任务再执行微任务!
答:宏任务先执行然后再执行微任务。因为script是一个大的宏任务!首先你需要了解任务分类,在js中任务分为同步任务和异步任务,为什么这么搞?因为js是单线程的,为什么是单线程的?因为js设计之初是为了解决页面交互的,一种脚本没必要那么复杂,其次如果js设计成多线程的,会有很大的问题,多线程要考虑线程之间的资源抢占,死锁,冲突之类的,加入你在操作一个dom节点把它改成了红色,然后另一个线程把它删除掉了,这时你就会完全懵掉。什么是宏任务,什么是微任务?微任务设计的目的简单讲就是为了插队!微任务在宏任务原创 2021-08-23 19:15:11 · 2529 阅读 · 6 评论 -
防抖与节流
节流:函数在一段时间内的多次调用,仅第一次有效。节流就像是一个看门大爷,每一段时间它只会放一个人进去时间戳版function throttle(func, delay) { var last = 0; return function () { var now = Date.now(); if (now >= delay + last) { func.apply(this, arguments);原创 2021-08-12 15:42:33 · 110 阅读 · 0 评论 -
vite2.0源码解读学习
浏览器采用es module imports 关键的变化是index.html 中 main.js的引入方式vite采用http请求的方式 递归请求 vue文件,转换成浏览器认识的javascript文件(注意不再是vue文件)预编译(预打包) 将请求到的文件递归方式预编译,采用相对路径方式加载node_modules中当前插件(比如vue)下的package.json中的module,这个地址代表打包js文件地址,浏览器需要加载这个地址。然后 ctx.body = rewrite..原创 2021-08-12 14:07:59 · 203 阅读 · 0 评论 -
2021-08-11
shaco-page启动vue create-vite-app [projectName]安装所需要的的插件配置eslint 过程艰辛 后来在官网 eslint官网找到了命令 ./node_modules/.bin/eslint --initmodule.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:vue/essential', 'standard' .原创 2021-08-11 17:35:26 · 113 阅读 · 0 评论 -
reactive响应式数据赋值丢失响应式问题
关于 reactive响应式数据赋值问题const list = reactive({})当你接收到接口数据,不要直接赋值 比如 list = data这样会丢失响应式!你可以这样做: const list = reactive({ arr:[]})list.arr = data.arr或者将list声明为ref方式const list = ref([])list.value = data这样也不会丢失响应式原因:reactive声明的响应式对象被list代理 操原创 2021-08-09 15:04:30 · 3650 阅读 · 2 评论 -
hightCharts遇到的问题
文案进入到柱状图中解决办法plotOptions:{ column:{ dataLabels: { crop:false, overflow: 'none' } }}或者原创 2021-08-06 10:32:09 · 107 阅读 · 0 评论 -
axios封装心得
1.创建loding和关闭loding函数2. 请求数据的时候(请求拦截axios.interceptors.request.use)添加token 并且开启Loading状态!confing.headers.Authorization = localStorage.eToken4.接收到数据时(响应拦截axios.interceptors.response.use) 关闭Loading状态 并且根据返回的状态码判断token是否过期,过期删除当前token并且跳转到登录页面。 如果是断网了修改Lo原创 2021-08-04 15:24:13 · 238 阅读 · 0 评论 -
js的单例模式
原创 2021-08-04 11:27:39 · 59 阅读 · 0 评论 -
前端需要知道的知识
在任何情况下,DOMContentLoaded 的触发不需要等待图片,音频,视频等其他资源加载完成。其次,说说loadload,网页上所有资源(图片,音频,视频等)被加载后才会触发load事件。页面的load事件会在DOMContentLoaded被触发之后才触发。函数的参数传递中是按值传递! (如果参数是引用类型,并不会修改其指向!!!注意!!!)常见AscII码值获取AscII码值以及转换成AscII码a.charCodeAt()String.fromCharCode(b..原创 2021-08-02 14:29:42 · 75 阅读 · 0 评论 -
Vue中this.$set()方法失效使用this.$forceUpdate()方法强制渲染
记录今天开发中遇到的一个问题,接口请求到数据后,为每一条数据添加flag,用来控制编辑时显示input框,使用this.$set()方法的时候 数据已经更新但是 页面未响应解决方案this.$set(arr[index],'flag',true)this.$forceUpdate() //强制渲染...原创 2021-07-30 18:08:56 · 1893 阅读 · 0 评论 -
Vue3中关于getCurrentInstance的大坑
开发中只适用于调试! 不要用于线上环境,否则会有大问题!详情查看 传送门原创 2021-07-20 17:36:08 · 10308 阅读 · 0 评论 -
前端接口出现两次请求--认识简单请求和非简单请求
所有跨域的js在提交post请求的时候,如果服务端设置了可跨域访问public static function setCrossDomain(){header(‘Access-Control-Allow-Origin: *’);header(“Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept”);header(‘Access-Control-Allow-Methods: GET, POST..原创 2021-07-15 15:01:03 · 3589 阅读 · 0 评论 -
前端Excle导出功能实现
Excel 导出Excel 的导入导出都是依赖于js-xlsx来实现的。在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。使用由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以你先需要安装如下命令:npm install xlsx file-saver -Snpm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以使用的时原创 2021-07-06 18:24:01 · 142 阅读 · 0 评论 -
i18n实现前端国际化
传送门GO原创 2021-07-05 14:50:49 · 1618 阅读 · 1 评论 -
Vue项目搭建流程---面试必问(淦!)
1.引入AntDesign的Less文件时可能会遇到报错解决方案:1.如果使用的webpack那就在webpack的配置中找到less的配置,在选项中添加 javascriptEnabled: true2.less版本太高3.0.+,后更改为2.7.2,再npm install 就OK了。3.创建vue.config.js ,然后配置 module.exports,2.组件按需引入npm i -D babel-plugin-import 按需引入模块在babel.config.js中原创 2021-07-02 19:07:52 · 537 阅读 · 12 评论 -
watchEffect使用如何在DOM更新后运行副作用 - flush:post用法
1.关于watch和watchEffect的区别① watch可以访问新值和旧值,watchEffect不能② watchEffect有副作用,DOM挂载或者更新之前就会触发<template> <div ref="root">This is a root element</div></template><script> import { ref, watchEffect } from 'vue' export def原创 2021-06-29 17:42:24 · 1170 阅读 · 1 评论 -
前端自动化工具CI/CD
使用自动化工具持续集成:持续集成强调开发人员提交了新代码之后,立刻进行构建、(单元)测试。根据测试结果,我们可以确定新代码和原有代码能否正确地集成在一起。交付:持续交付在持续集成的基础上,将集成后的代码部署到更贴近真实运行环境的「类生产环境」(production-like environments)中。比如,我们完成单元测试后,可以把代码部署到连接数据库的 Staging 环境中更多的测试。如果代码没有问题,可以继续手动部署到生产环境中。部署:持续部署则是在持续交付的基础上,把部署到生产环境的过程自原创 2021-05-31 18:12:33 · 334 阅读 · 0 评论 -
Vue深入响应式原理
对于对象Vue.set(this.someObject, 'b', 2)或者this.$set(this.someObject,'b',2)对于数组Vue 不能检测以下数组的变动:当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLengththis.$set(this.arr1, indexOfItem, newValue)或者Vue.set(this.原创 2021-05-31 17:26:44 · 66 阅读 · 0 评论 -
前端面试之开发中遇到的问题【建议收藏】
1.代码习惯 比如写个列表中标签的tag,提前询问后端返回的数据枚举类型,然后定义一个map集合来渲染 页面2.git命令 git rebase命令3.微前端后退失效4.map方法和Object.assign() 如果属性值是一个基本数据类型 属于深拷贝,如果是一个复杂数据类型属于浅拷贝...原创 2021-05-31 17:14:02 · 5290 阅读 · 0 评论 -
前端离线缓存原理
https://blog.csdn.net/ican87/article/details/81147840传送门原创 2021-05-18 11:19:05 · 564 阅读 · 0 评论 -
OSI七层网络模型前端面试题
OSI七层网络模型包括:物理层、数据链路层、网络层、 传输层、会话层、表示层、应用层。如何理解?物理层对应的物理实体就是网线,水晶头. 数据链路层对应的物理实体就是交换机, 网络层对应的是路由器.想象一个数据包从一个主机发送出来, 经过网线水晶头(物理层), 再经过交换机(数据链路层), 然后通过路由器(网络层), 到达另一个主机. 之后,这个数据包将离开物理硬件, 完全进入到软件的范畴了. 这个包是是用tcp或者udp来进行传输(传输层), 然后两个主机开始建立会话并管理会话(会话层), 然后解原创 2021-05-18 11:00:06 · 506 阅读 · 0 评论 -
前端面试题大全
点我传送TP点我去看 ----> HTML篇点我去看 ----> CSS篇点我去看 ----> JS、ES6篇点我去看 ----> 浏览器及http篇点我去看 ----> VUE篇点我去看 ----> Webpack篇点我去看 ----> (项目/功能/原理/测试等)篇...原创 2021-05-17 17:21:28 · 137 阅读 · 0 评论 -
开发中常用git命令
1.首先要知道以下概念:Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库2.必需掌握的git命令git clone xxx > 克隆项目到本地git pull [remote] [branch]> 取回远程仓库的变化,并与本地分支合并> 注意⚠️:git pull = git fetch + git mergegit push [remote] [branch]> 上传本地原创 2021-05-14 16:53:49 · 161 阅读 · 0 评论 -
gitLab持续化部署CI/CD构建
传送门https://zhuanlan.zhihu.com/p/184936276原创 2021-05-12 10:57:11 · 93 阅读 · 0 评论 -
终端显示当前所在分支
https://www.cnblogs.com/libo0125ok/p/6740250.html链接原创 2021-04-30 12:32:52 · 510 阅读 · 0 评论 -
item2 + alias 高效开发工具 + webstorm解决冲突
item2 MAC版本alias alias配置文件原创 2021-04-28 17:14:51 · 138 阅读 · 1 评论