- 博客(42)
- 收藏
- 关注
RSS订阅
原创 Symbol数据类型
// 此类型代表着数据的唯一性 相当一个index标识// 特点1：唯一性 即使同一个变量生成的 也不相等 let id1 = Symbol(1) let id2 = Symbol(1) console.log(id1 == id2) // false // 特点2：隐藏性 for in ,,, ovject.keys()不能访问 也有能够访问的方法 Object.getOwnPropertySymbols方法会返回一个数组// 虽然保证了唯一性 但是我们...
2022-04-28 17:06:00
6560
原创 Element 上传组件 beforeUpload上传前限制失效
在before-upload（上传文件之前的钩子 参数为上传的文件 若返回 false 或者返回 Promise 且被 reject 则停止上传）钩子里去做判断 这里有一个坑 当你设置了 :auto-upload="false" 的时候， 这个钩子是不会被触发的，因此也可以在on-change中做判断。beforeUpload(file, fileList) { if (file.size / (1024 * 1024) > 500) { // 限制文件大小 this.$m.
2022-04-28 16:55:35
4712
原创 前端 页面地址栏修改Url参数后回车 路由页面不刷新！
原因：因为你的路由Url是相同的，vue会认为你是同一个页面，从而复用已加载的页面 从缓存里面拿，而不会重新加载，这个应该跟Vue的热更新有关系；解决方案：可以用侦听，手动刷新，监听路由的变化；
2023-08-04 14:39:59
1075
原创 Vue2响应式原理+手写源码+Vue3响应式原理+手写源码 带你深入浅出 分化理解难度
Proxy/*** 介绍ES6中的Proxy* new Proxy这个词的英文解释是 "代理" , 可以理解成在目标对象来之前 设置了一层拦截 并且外界要对此目标对象进行访问的话 也需要通过走这层拦截* 因此可以在其中对数据进行获取和改写* let proxy = new Proxy(target, handler) // 由两个参数组成* target：目标对象， handler：是一个对象，内含多个方法 也就是拦截操作 例如 get、set* 那么写法就是* },* }* })
2023-05-09 15:16:35
325
原创 element Tooltip 提示组件 自定义样式+箭头样式
注意事项：1、不要用scoped挂载样式 尽量放公共样式里 尽量放在element.scss里2、箭头的样式例如border-top-color；你的tip的方向是什么；箭头的类名就是什么。
2023-05-05 11:31:38
838
原创 前端Vue之性能优化全方案(详解nginx配置gizp等等)
正常我们打包完后，在打包的文件里，会生产出来js/css/html的文件夹，在js文件夹里面有几个以chunk开头的文件 体积较大 再加上 Vue的 SPA单页面应用 导致首次加载较慢 因为这些静态资源 影响了速度 所以我们要进行 js/css 压缩处理。1、vue.config.js 在module.exports对象里 进行配置 不需要进行打包的资源。我的项目都在这里 conf.d 所以我要打开这个文件 找我需要gzip压缩的项目。1、在nginx/中打开 你要处理的那个项目入口。
2023-04-14 11:16:27
683
原创 什么是跨域？JS跨域/Vue代理跨域/nginx代理跨域
所谓跨域 即要牵扯到 同源策略同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域 引发限制；同源策略 即是浏览器的核心 浏览器的安全手段 防止被他人窃取数据信息等等// 注意 端口号默认80 可省略// 引发同源限制后 首先dom无法获取 cookie和localStorage无法读取 ajax无法发送请求// 同源策略这一措施 对开发人员前后端数据交互造成了困扰 所以有了跨域的解决方案。
2023-03-24 10:52:57
177
原创 在浏览器中输入URL后都会发生什么(简单理解)
2、通过这个IP地址 进行三次握手 建立TCP连接 (确定是否能够正常连接，要么连接超时，要么连接失败，检查自己的网络代理)记住输入一个URL 浏览器会先查找有没有缓存，有缓存，直接返回缓存的资源，没有缓存， 再往下走 进行网络请求。6、浏览器开始解析响应 加载解析html、css、js、以及图片等静态资源 并且开始渲染响应回来的数据。1、输入网址 进行DNS解析 也就是域名解析 从而获取到一个公网IP地址。3、成功建立TCP连接后 向目标地址发送 HTTP请求(获取资源)5、关闭TCP连接 四次握手。
2023-03-24 10:20:16
281
原创 G6、X6、Vuedraggble、jsplumb的使用 以ER图为例
直奔主题 你们可以初始化一份JS脚本 把我代码C过去看 阅读性高一些 注释清晰二、Vuedraggablevue.draggable 全部事件列表三、G6/X6 ER图ER图的data数据来源四、兄弟传值 兄弟调用方法
2022-07-04 18:08:53
2064
2
原创 关于Vue响应式 数据已获取 视图不更新的问题
首先 => 我们要深刻理解 Vue响应式的原理 通过get 和 set进行获取与设置 同时通知观察者进行新旧虚拟dom树 diff算法就地更新 重新渲染组件特别注意 => Vue官方文档的注意事项由于javaScript的限制 Vue不能检测数组和对象的变化 因此你就要思考 为什么我的响应式有问题我们看一个实战bug 同事托我解决的一个问题watch 侦听tree回调函数 过滤出来的数组 从而去触发filterNode但是watch正常 但是偏偏不触发filterN.
2022-05-07 16:25:43
1264
原创 如何将项目中现有的px统一计算替换为rem(glup自动化打包工具的使用)
gulp自动化打包工具replace的使用 替换文件1、装依赖2、在根目录创建gulpfile.js3、我是根据24去计算的 你们随意4、在终端 执行命令 任务名为函数的参数15、自动生成dir文件温馨提示：记得先备份哦gulp.task方法用来定义任务的const replace = require("gulp-replace");const gulp = require("gulp");gulp.task("pxToRem", function() { ..
2022-04-28 17:04:28
393
原创 侧边导航栏el-menu 文字溢出问题 CSS一键解决
换行未做处理前做完处理后CSS代码<style scped>/* 侧栏导航菜单经典 文字超长溢出问题 CSS折行 */.el-submenu__title { display: flex; align-items: center;}.el-submenu__title span { white-space: normal; word-break: break-all; line-height: 20px; flex: 1; ..
2022-04-28 16:34:10
2064
原创 前端 实际开发中超实用方法 优雅风格的代码
直接上代码 作者在本地VS code中编写的js文件 你们可以下载run插件直接在vscode中跑js脚本 看打印结果请耐心看下去 很清晰/**ES7(2016)* 先记录两个ES7的超好用数组方法* includes(value,index) => 返回布尔值* indexOf(value,index) => 返回-1或下标** 建议 => 查询元素是否存在使用includes* 查询元素的下标使用indexOf*...
2022-04-27 18:04:44
1519
原创 Promise.all()处理并发 任务挂掉 解决办法
解决方法 => Promise.allSettled()我们都知道Promise.all()具有并发执行异步的能力 但是如果其中某个任务但凡有一个出现reject异常错误 所有任务都会挂掉 所以Promise.allSettled()将是最棒的处理并发执行异步的方法看段代码 => Promise.all走向catch const promise1 = () => { return new Promise((resolve, reject) => {
2022-04-27 17:59:39
733
原创 JS 对象数组扁平化(递归)
很多代码题 喜欢搞一套扁平化 测水平 这里封装好的方法 有兴趣可以看一下 上代码！ function flatten (obj) { const ans = {} inner(obj, null) function inner (o, prev) { for (let key in o) { if (o[key] instanceof Object) { if (prev === null...
2022-03-18 10:27:37
1128
原创 Vue2.0 响应式原理 通俗易懂
Vue的响应式原理： Vue的响应式原理 核心是通过 ES5 的 Object.defindeProperty 进行数据劫持 然后利用 get 和 set 方法进行数据的获取和设置 这时的data中声明的属性都将被添加到 get 和 set 中 当读取data中的数据中 自动调用 get 方法 当修改数据时 或者数据发生改变时 自动调用 set 方法 去侦听检测数据的变化 同时会通知 观察者 Wacher 观察者 Wacher 自动重新触发 render 当前组件 （子组件不会重新渲染）...
2022-03-18 10:20:12
4045
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人