- 博客(85)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Promise初识和async，await的关系
async用于定义一个异步函数，它会返回一个Promise对象，而await用于等待Promise对象的状态变化。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），它们分别表示异步操作的不同阶段。因此，可以说promise是异步编程的基础，而async和await则是Promise的进一步封装，使得异步编程更加方便和易用。promise和async，await是JavaScript中的两个重要概念，它们之间有着紧密的关系。
2023-06-10 22:34:06
251
原创 在Vue3的setup中如何使用this
如果想要在setup函数中访问组件实例的属性或方法，可以使用Vue3提供的两个新的函数：getCurrentInstance和ctx。在上面的例子中，我们通过getCurrentInstance函数获取了当前组件实例对象，并通过instance.data.message和instance.ctx.sayHello访问了组件实例的数据和方法。在Vue3中，setup函数中的this指向的是undefined，因为setup函数是在组件实例化之前执行的，此时还没有this对象。
2023-04-13 11:40:48
4537
1
原创 Vue组件设置缓存kepp-alive 后如何获取数据
在keep-alive缓存的组件被激活的时候，都会执行 actived钩子。每次进去组件渲染时，都会执行beforeRouteEnter。
2023-01-10 18:10:20
630
原创 使用 wangEditor 5 自定义上传文件
使用 wangEditor 5编辑器，还是算比较快捷易上手的，毕竟官方文档写的很清楚，但其实官方没提供 上传附件的功能，但查阅文档就会发现有 对应插件的使用，所以在此记录一下插件用法此步骤是基于系统使用了wangEditor ，然后 需下载 上传附件 插件// 上传附件 插件在代码里引入并注册使用return {// 富文本工具栏配置 toolbarConfig : {// 富文本手动插入工具栏 insertKeys : {
2022-11-14 16:06:43
3226
7
原创 剑指 Offer 50. 第一个只出现一次的字符
个人理解 ：做了一个很简单的算法题，开始写想到的解法是 ： 遍历数组， 依次存进一个新数组，第二次存进去的字符splice出去，最后输出新数组中第一个元素。看似好像也没啥错误，但不知为啥测试用例不通过，于是在评论区找到一个解法！太简单了，利用数组的原生属性 indexof 和 lastindexof。在字符串 s 中找出第一个只出现一次的字符。如果没有，返回一个单空格。s 只包含小写字母。这是我找到的最通俗易懂的解法，大家也可以帮我看看我的解法有何问题！输入：s = “abaccdeff”
2022-09-13 10:19:11
149
原创 解决el-form动态表单切换导致的校验bug
问题描述 ： 在平常项目需求中，常常有el-form表单需要根据条件切换el-form-item的情况发生，这时候容易切换过多导致校验错误定义。解决方式: 在v-if做判断的时候，加上key。类似于这种情况，切换之后 校验还在。
2022-09-07 16:30:11
1099
原创 什么是作用域和作用域链
作用域对象可以被调用的区域，定义一个变量，变量有效的作用域a(){上诉str的作用域是a()内部，str2是fun1()内部作用域链调用某个函数或属性时，先在当前作用域寻找，如果找不到则向上父级寻找，直到找到全局作用域为止，这个链式查找的过程，就是作用域链。https。...
2022-07-25 16:21:00
95
原创 vue项目刷新当前页面的方法
尝试了几种刷新页面的方法，比如1、浏览器直接刷新（会出现短暂的白页面现象）2、设置一个空白页面，需要刷新的时候跳转到空页面再从空页面跳回来（些许麻烦）3、使用provide/inject（目前觉得最实用，主讲此方法）...
2022-07-19 17:44:08
2666
原创 Vue 的响应式原理中 Object.defineProperty 的缺陷
浅谈 Vue2 中的 双向数据绑定原理：采用数据劫持 结合 发布者-订阅者模式 的方式，通过 Object.defineProperty（）来劫持各个属性的setter 和 getter。Object.defineProperty（object, propertyname, descriptor）是给对象添加属性用的，三个参数分别是 对象、属性名、要添加的属性值Object.defineProperty 的缺陷1、无法监控到数组下标的变化，通过数组下标修改元素，无法实时响应2、只能劫持对象的属性，如
2022-06-21 17:42:59
1290
原创 element的upload组件在before-upload之后触发before-remove以及后面on-remove方法
今天项目实践时，突然发现 element 的 el-upload组件在before-upload 之后 return false 之后竟然会自动触发 before/on - remove 方法。查阅了资料，发现解决方法很简单。
2022-06-14 11:15:54
1633
原创 CSS中隐藏页面元素的几种方式和区别
总结方法：元素不可见，不占据空间，会导致浏览器重排的重绘，无法响应点击事件从页面上隐藏，DOM依旧存在，不会发生重排，但是会发生重绘。表示元素的透明度，只是页面上透明度为0，自身事件仍然可以触发重绘 ：元素外观导致的浏览器行为，比如 ： 修改CSS样式重排 ： DOM元素被JS触发，渲染树需要重新计算...
2022-06-13 17:17:36
240
原创 link 和 import 标签的区别
link 和 import 标签的区别link 属于HTML标签，而@import 是css提供的。页面被加载时，link 会同时被加载，而 @import 引用的 css 会等到页面加载结束后加载。link 是 html 标签，因此没有兼容性，而 @import 只有 IE5 以上才能识别。link 方式样式的权重高于 @import 的...
2022-04-15 10:39:59
264
原创 js中写一个函数，第一秒打印1，第二秒打印2
js中写一个函数，第一秒打印1，第二秒打印21、用let块级作用域for(let i = 0;i<5;i++){ setTimeout(()=>{ console.log(i); },1000*i)}2、闭包for(var i = 0; i < 5; i++){ (function(i){ setTimeout(()=>{ console.log(i); },1000*i)
2022-04-14 17:58:22
1145
原创 JS数据类型
JS数据类型基本类型 ：Boolean Null Undefined Number String Symbol(ES6出的，表示独一无二的值)引用类型 ： Object原始数据类型和引用类型的区别在内存中的存储方式不同，原始数据类型在内存中是栈存储，引用类型是堆存储栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。在内存中存储方式的不同导致了原始数据类型不可变，原始数据类型和引用数据类型做赋值操作一个是传值一个是传址...
2022-04-08 17:40:31
106
原创 JS中&& 和 || 的优先级与运算
JS中&& 和 || 的优先级与运算在javascript中，会被当成 false 处理的值有 :"",false,0,null,undefined,NaN，其余都为true，（字符串 "false"会被当做true处理）&& 和 || 的计算原则a || b：如果a是true，返回a。如果a是false，直接返回b。a && b：如果a是true，那么返回b。如果a是false，返回a。来个例子 var a = new Object(), b=0
2022-04-08 15:26:35
2582
原创 axios的使用方式有几种？
axios的使用方式有几种？第一种 ：直接挂载在原型上import axios from "axios"Vue.prototype.$axios = axios ;第二种 ：封装一个拦截器，有请求拦截器和响应拦截器，同时挂载到原型上，（缺点：只要是vue的实例上面都会挂载，消耗性能大）import axios from "axios"let $axios = axios.create({ baseURL: '',// 接口地址 timeout:5000,// 设置超时时间})// 请求
2022-04-07 20:20:38
936
原创 JS获取两个数组的交集
JS获取两个数组的交集const nums1 = [1, 2, 2, 1]const nums2 = [2, 3, 4, 5]const set = new Set()const res = []for (const num of nums1) { if (nums2.includes(num)) { set.add(num) }}res = [...set]
2022-04-06 23:02:33
508
原创 JS ES6中export 和 import详解
JS ES6中export 和 import详解文章目录JS ES6中export 和 import详解前言一、export default使用 export default使用 export前言在学习Vue的时候，import/export是必不可少的。假如我们写了一个单页面组件A，而在另一个文件B里面需要用到它，这时候就要用ES6的 import/export语法，在文件A 中定义输出接口 export，在文件B中引入 import 把引用的组件用起来，一、export default在
2022-03-29 15:56:31
1294
原创 前端项目中运行 npm run xxx 的时候发生了什么？
前端项目中运行 npm run xxx 的时候发生了什么？文章目录前端项目中运行 npm run xxx 的时候发生了什么？前言执行命令package.json 文件当 npm 运行 vue-cli-service serve时可执行文件总结前言最近修改项目配置时，引发的疑问，在此记录一下执行命令当你使用npm 的时候，都应该知道 它是 node 的依赖管理器，当然也可以使用其它命令，比如常见的 pnpm/yarn/cnpm/ni ；（我们用一种对话的方式叙述吧！突然想到这样可能更好理解，
2022-03-28 16:49:31
1384
原创 Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些？在平常写Vue项目时，组件传值必不可少，今天我们就要总结一下有哪些种方式呢？1、父组件向子组件传值（用props）子组件<template> <div> <ul> <li v-for="user in users" :key="user">{{user}}</li> <!-- 遍历传递过来的值，然后呈现到页面 --> <
2022-02-22 17:31:08
1135
原创 js中的一些简洁语句
js中的一些简洁语句1.通过条件判断给变量赋值布尔值的正确姿势if(a === 'a'){ b = true} else { b = false}// 改成b = a === 'a'2.在if中判断数组长度不为零的正确姿势if(arr.length !== 0){}//改成if(arr.length){}3.使用includes简化if判断if(a === 1 || a === 2 || a === 3 || a === 4){}//改成 => 巧用数组方法i
2022-02-18 10:11:24
130
原创 给el-button加上防抖
vue项目中给el-button加上防抖在项目开发中，相必大家时常会遇到按钮重复点击后引起事件重复提交的问题，在业余时间，我总结了几种方法，在此简述一下利用按钮的 loading 属性，防止用户重复点击直接把loading放在http请求去做，统一封装方法给按钮加上防抖，点击一次需要间隔一段时间才能触发二次点击我们写一下第三种解决方法，在这里我们使用vue全局指令来实现，选取了一种简单的指令方式大概思路 ： 当第一次点击按钮时，设置它的 disabled 属性，超过防抖时间后释放属性在项目
2022-01-13 17:04:36
3159
2
原创 获取URL参数并转换成对象
获取URL参数并转换成对象在日常项目中 我们可能会需要获取网址URL的参数,在此写了一个方法记录一下操作// 获取URL参数并转换成对象function getQueryParams(){ const result = {} // 存参数得对象 const urlString = window.location.search; // 拿到url 参数 "格式 ?name=home&age=20" // 利用正则表达式 let reg = /[?&][^?
2022-01-11 16:15:50
2269
原创 使用.sync修饰符
使用.sync修饰符这篇文章我们来学习上.sync修饰符的简洁用法。首先准备一个Input组件<template><div> <el-input v-model="modelValue" :placeholder="placeholder" @input="input" ></el-input> <el-button @click="changeText">点击修改</el-button>&
2022-01-11 11:23:08
524
原创 如何将当前组件的所有属性快速传递给子组件？
如何将当前组件的所有属性快速传递给子组件？今早发现了一个简便方式关于v-bind 特意在此记录一下举例 ：<el-table ref="tableData" :data="tableData"> <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop" :label="item.label" align="center" sh
2022-01-05 11:35:40
878
原创 前端处理二进制流文件
前端处理二进制流上次写过一个详细处理方法，可以点击上方链接查看最近开发得时候也遇到了一个新得处理方法，在此记录一下上次得简化版 （可结合上方链接学习） const downURL = window.URL.createObjectURL(new Blob([data])); // data 为获取到的二进制数据 const listNode = document.createElement("a"); // 这里注意 ： 非同源a标签的download去命名没有用 listNode.d.
2021-12-30 10:26:56
1605
原创 一些代码块的简洁方式
一些代码块的简洁方式每天敲敲敲，谁不想知道代码高效、简洁、易懂。在平时项目中也记录了一些简洁的代码块，在此总结一下。通过条件判断给变量赋值布尔值// 一般if(a === 'a'){ b = true }else{ b = false}// 简洁b = a === 'a'在if中判断数组长度不为零// 一般if(arr.length !== 0){}// 简洁if(arr.length){}字符串拼接使用${}let person = { name:'xiaomin
2021-09-29 17:01:50
62
原创 watch 如何监听路由变化
通过 watch 监听，当路由发生变化的时候执行方法一watch:{ $router(to,from){ console.log(to.path) }}方法二：watch:{ $route:{ handler : function(val,oldVal){ console.log(val) }, // 深度观察监听 deep:true }}方法三:watch: { '$route' : 'getPath'},methods: { getPath()
2021-09-14 15:23:46
1125
原创 使用JS将数字金额转为大写的人民币
使用JS将数字金额转为大写的人民币刚好今天有时间写文章，就想到了上次做项目时做到的一个需求，拿出来分享一下。如何将数字金额转为大写人民币？一点思路 ：封装方法列出大写人民币的所需的单位设置最大处理数 和 最小处理数参数情况处理，比如：参数为 空字符串，为0，为字符串，有小数，无小数等。所需单位 //汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //基本单位 var c
2021-09-07 16:52:35
5645
3
原创 textarea 如何动态增加高度
textarea 如何动态增加高度HTML代码<textarea name="title" id="title" rows="10" class="feedbk-textarea" placeholder="测试动态高度" autofocus="autofocus"></textarea>CSS代码 .feedbk-textarea{ margin: 0 10px 0 0!important; background-color: tr
2021-09-07 15:59:10
286
原创 JSON.parse() 与 JSON.stringify() 的区别
JSON.parse() 与 JSON.stringify() 的区别两个方法的用途是有差别的，针对的参照物也不一样。JSON.parse() 是从一个字符串中解析出 json （键值对）JSON.stringify() 是从一个对象中解析出字符串 // 定义一个对象 var object = {name:"hahhahaha"}; // 定义一个字符串 var string = '{"name":"hahahhahaha"}'; // JSON.stringify console.log
2021-09-02 11:30:06
96
原创 element-ui 表单验证触发方式 trigger :‘change‘ 和 ‘blur’ 的区别
element-ui 表单验证触发方式 trigger :‘change’ 和 ‘blur’ 的区别trigger :‘change’change 数据改变触发比如 ： 需要 手动选择的东西，用 changetrigger : ‘blur’blur 失去焦点比如 ： 输入框里，验证文本框是否为空没有任何输入的时候，不会触发 change ， 但一定会触发 blur 事件...
2021-08-10 15:33:01
5557
原创 判断JS数据类型的方法
判断JS数据类型的方法在 ECMAScript 规范中，一共定义了7种数据类型，分别分为 原始（基本）类型 和 引用类型 两大类，原始（基本）类型 ：String Number Boolean Undefined Null Symbol引用类型 ： ObjectSymbol : 是 ES6引入的一种新的原始数据类型Symbol，表示独一无二的值。首先我们定义几个变量备用：...
2021-07-27 16:21:59
126
原创 前端处理二进制文件流
前端处理二进制文件流这个需求其实做了很久了，但是今天突然被人问起，自己却不知所措，表达不完整，所以想重新梳理一下。问题叙述 ： 有时候需要点击一个 按钮 ，实现文件下载 ，而后端返回的数据为二进制流数据。产生原因前端页面的编码格式和服务端编码格式不同，正如此时，服务端返回的是 blob格式的数据，而我们使用的是 非 blob格式去解析，所以产生了乱码。首先接收二进制流要想处理这段乱码的数据，首先得先接收，正常情况下axios 不会处理二进制数据，即会去接收但是不会去处理，需要在请求得适合设置
2021-07-26 16:16:42
8521
4
原创 如何将其它数据类型转换为布尔类型
Boolean([value])！[value] 把指定的值转换为布尔类型后取反！！[value] 取反再取反，相当于没有取反，只是把它转换为布尔类型值规则： 只有“ 0 / NaN / null / undefined / 空字符串 ”，最后是false，其余的都是true...
2021-07-22 09:58:52
1246
原创 HTML data-* 属性（自定义属性）
HTML data-* 属性data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。data-* 属性包括两部分：属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符属性值可以是任意字符串注： data-* 属性是 HTML5 中的新属性。示例 ：<!DOCTYPE html><html><head><script>
2021-07-15 10:59:43
534
原创 table 表格中的内容溢出的解决方法
table 表格中的内容溢出的解决方法直接css样式解决文字溢出 变为省略号（示例）代码如下 ：/*溢出部分样式*/td, th { white-space:nowrap; //强制在一行显示 overflow:hidden; //溢出的内容切割隐藏 text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为… word-break:keep-all; //允许在单词内换行}属性讲解white-spacenormal
2021-07-14 16:12:21
1800
原创 DOMContentLoaded
DOMContentLoadedMDN : 当初始的HTML 文档被完全加载和解析完成之后， DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载DOM 文档加载流程 :解析HTML 结构。加载外部脚本和样式表文件。解析并执行脚本代码。构造html DOM模型。 // DOMContentLoaded 相当于 jQuery 中的ready加载图片等外部文件。页面加载完成。// 示例代码// 打印按钮索引<!DOCTYPE html&g
2021-07-14 10:37:59
573
vcruntime140dll.zip
2020-07-12
BugFree软件.zip
2020-01-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人