- 博客(53)
- 收藏
- 关注
RSS订阅原创 Vue.extend()和我的两米大砍刀
一个全局API,用于注册并挂载组件。传统的引用组件的方式是使用import直接引入，但是使用Vue.extends()也可以实现。
2024-04-17 15:33:35
268
原创 为了减少对 DOM 操作的代价, 可以采取以下优化措施:
这样，我们就只需要为父元素添加一个事件监听器，而不是为每个子元素都添加一个事件监听器，从而减少了对 DOM 的操作，提高了页面性能。在上述代码中，我们首先创建了一个文档片段（DocumentFragment），然后将需要修改的元素添加到该片段中，最后再将整个片段一次性添加到页面中。如果我们使用传统的逐个操作的方式，那么每次操作都会触发一次回流和重绘，导致页面性能下降。如果我们使用传统的逐个操作的方式，那么每次点击都会触发一次回流和重绘，导致页面性能下降。
2024-02-19 17:12:43
381
原创 react新旧生命周期钩子
当你充分理解旧的生命钩子之后，看下面这张图对你来说应该易如反掌。大体来说用来划分的区块方式一致，即：创建时、更新时【三条路径】、卸载时。
2023-12-06 09:48:01
1141
原创 vue2、vue3傻傻分不清楚
前端工作也做了几年了，好多东西还是分不清楚。特别是对于最基础的书写格式还是有点模糊不清，今天特地整理一下，以供日后查阅。
2023-11-17 10:14:11
108
原创 react中使用路由起手式,一些思路和细节。
该组件是有两个属性一个是path，一个是component，path是组件对应的路由，component是对应的组件。核心：借助his.prosp.hstory对象上的API对操作路由跳转、前进、后退。按收参数: const {id,title} = this.props,match.params。接收参数: this.props,location,state备注:刷新也可以保留住参数。按收参数: const {search} = this,props,location。
2023-08-10 16:46:18
794
原创 慢慢来，这次一定能搞懂Promise
主要应用的场景应该还是对网络请求（异步调用）进行执行顺序的控制。比如先进行个人身份认证，再进行登录操作。我这里只是针对自己的需求对Promise进行了一个简单的梳理，更多详情。根据控制控制台的输出可见Promise 是一个构造函数，本身身上有 all、reject、resolve 这几个方法，原型（prototype）上有 then、catch 等方法。Promise 将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。根据这些前置信息，我们可以简单实现编写代码实现一下Promise构造函数。
2023-08-09 15:25:23
83
原创 从vue2到vue3的生命周期
同时为了命名的统一，将beforeDestroy改名为beforeUnmount，destroyed改名为unmounted。beforeCreate（建议使用setup代替）created（建议使用setup代替）
2023-06-05 15:42:23
928
原创 js高程个人总结分享----执行环境及作用域
当某个执行环境中的所有代码执行完毕后，该环境就会被销毁，保存在其中的变量和方法也会被销毁。当执行流进入一个函数=时，函数的环境就会被推入到一个环境栈中。在函数执行完之后，该函数的执行环境就会被栈弹出（销毁）。简单来说就是里层环境可以访问外层环境的变量，而外层无法使用里层的变量。而里层的环境当在当前执行环境中找不到定义的变量时向父级寻找。，环境中定义的所有变量和函数都会保存在这个变量中。全局执行环境是最外围的执行环境，在Web浏览器中，全局环境是window。执行环境定义了变量或函数有权访问的数据。
2023-06-04 16:52:00
41
原创 js高程个人总结分享-----arguments
重载函数是函数的一种特殊情况，为方便使用，C++允许在同一范围中声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同，也就是说用同一个函数完成不同的功能。重载函数常用来实现功能类似而所处理的数据类型不同的问题。也就是说通过对同名的函数进行不同的参数传递就可以实现函数完成不同的功能。而我们已经知道ECMAScript函数是如何接受参数的了，也是就是对于参数我们是无差别的处理。如果想要模仿重载效果，我们就需要在一个函数体内通过对参数的类型和数量进行判断来执行不同的动作。
2023-06-04 15:04:13
60
原创 关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
在 element 组件上使用相对路径时 webpack 不会对路径进行处理，导致请求了一个无效的路径。【附】：:src属性后面的字符串会被当做变量解析使用，而src属性后面的只会被当字符串使用。在网页中加载本地图片时，会出现图片加载失败的问题，但使用。（注意给 src 属性加 : ）
2023-03-15 09:30:25
3614
1
原创 由js到vue的依赖注入
依赖注入 DI (Dependency Injection) 是编程领域中一个非常常见的设计模式，它指的是将应用程序所需的依赖关系（如服务或其他组件）通过构造函数参数或属性自动注入的过程。这样做的好处是可以减少组件之间的耦合，更容易测试和维护。
2023-01-30 10:10:24
142
原创 es6 new Map()映射 及ts中的枚举
在力扣遇到一到题，是其中实现的过程中有一部分需要字符串到数字的映射。我的第一想法是通过switch进行实现虽然也实现了，但是后来看到题解的时候就觉得很憨。这不就是映射嘛，完全没想到，所以在这里整理一下。
2023-01-29 11:03:22
349
原创 element plus el-table 设置border边框 底部边线消失
elementplusel-table设置border边框底部边线消失。
2022-07-28 11:37:44
2016
原创 文件流方式下载文件(导出）
浏览器下载策略由于浏览器的策略问题，当文件类型为 pdf 或 jpg 等类型时，浏览器会默认进行预览，即使你设置了 download 属性，大多数浏览器都仍然会执行预览。要想直接下载 pdf 或 jpg 之类的文件，就需要了解浏览器的文件策略。浏览器在文件请求中的 Content-Type 中可以获取到文件的类型，比如 pdf 的请求返回的 Content-Type: application/pdf，浏览器判断文件为 pdf ，则会自动执行预览的策略，如果我们在后端代码或nginx中设置其 Conten
2022-05-16 10:51:17
1305
原创 css鼠标移出滚动条消失移入出现，且不影响样式
::-webkit-scrollbar { width: 5px; height: 5px; background-color: #ffffff; opacity: 0;}::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff;}::-webkit-scrollbar-thumb { border-radius: 10px; /*-webkit-box-shadow: ins
2022-04-24 17:03:54
1452
原创 Vue设置全局css文件以及css组合器
ue设置全局css只要在main.js里引入css文件即可，如：import '@/assets/style.css'; // 全局css后代选择器 (空格)//下面的例子选择 <div> 元素内的所有 <p> 元素：div p { background-color: yellow;}子选择器 (>)//下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：div > p { background-co
2022-04-12 10:48:52
3486
原创 vue package.json 脚本使用
一、package.json scripts 脚本是什么npm 允许在package.json文件里面，使用scripts字段定义脚本命令。在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。{ "scripts": { "serve": "vue-c
2022-03-31 14:23:44
2778
原创 title使用变量
<span v-else-if="record.type == '6'" :title = "`当天平均发言数比昨天同时间段内增长${record.increaseMultiple}倍（${record.increaseCount}）条`"> 当天平均发言数比昨天同时间段内增长{{ record.increaseMultiple }}倍（{{ record.increaseCount }}）条</span >.
2022-03-29 11:08:50
874
原创 一张图让你搞懂scrollHeight、offsetHeight等
名称属性说明clientTop只读clientTop 表示一个元素的顶部边框的宽度，不包括左外边距和左内边距。top可写该属性规定了元素的顶部位置，包括：内边距、滚动条、边框和外边距。scrollTop可写scrollTop表示被选元素的垂直滚动条位置offsetTop只读元素到offsetParent顶部的距离 offsetParent 元素的顶部padding、border及滚动条clientHeight/clientWidth只读元素...
2022-03-08 16:05:27
698
原创 vue注册全局、局部组件、函数式组件。
在开始之前我们先来了解一写基本知识elel的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素之中，el属性的值可以是css选择器的字符串，或直接是对应的元素对象。并且只能在使用new生成实例的时候才能配置el属性，而我们在组件中只是export一个配置对象，如果设置了el则会报错//错误提示 【vue warn】:option 'el' can only be used during instance creation with the 'new' keywoedexport def
2022-01-27 17:55:52
1476
原创 vue中的面试题
v-if和v-show的区别为何v-for中要使用keyv-for在更新已渲染的元素队列时，它会根据key值去判断某个值是否被修改。如果被修改则重新渲染这一项，如果没有被修改则继续复用之前的元素，并且会移除 key 不存在的元素。描述vue生命周期（有父子组件的情况下）加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父
2021-07-21 10:03:57
216
原创 搞定vue中computed、watch
watch可以用来干什么当你有些数据要根据其他数据变化而变化时，你可以使用watch。监听一个数据而能修改多个要相应变化的数据，一对多的关系。经典面试题：watch和computed的区别computed:支持缓存，只有依赖属性发生变化，才会重新计算？？？？？？？不支持异步，在computed内写异步无法监听数据变化一对一 或 多对一watch:不支持缓存，数据变，直接会触发相应的操作；支持异步一对一 或 一对多watch的触发条件基本类型（Undefined、Null、B
2021-07-20 15:35:53
116
原创 使用表编程替代普通的判断分支
表驱动模式应用场景如果你的代码有很多 if … else …结构，你不知道怎么优化，你就应该使用表驱动编程。善用map哈希表的数据结构，js对象也就是字典，设置obj={key:value}，通过obj[key]取出值，代替if…else…或者switch…case…等逻辑优化前：howManyDays(month，days){ if(month === 1 || month === 3 || month === 5 || month ===
2021-06-08 09:48:23
85
原创 前端面试问题合集，不定时更新
1.canvas如何旋转20度var c = document.getElementById('myCanvas')var ctx = c.getContext("2d")ctx.rotate(20*Math.PI/180)ctx.fillRect(50,20,100,50)
2021-06-07 10:33:25
182
原创 vue的生命周期钩子
主要生命周期分类创建期间生命周期函数beforeCreate:实例刚在内存中被释放出来，此时，还没有初始化好data和methods属性created：实例已经被内存中串改创建ok,此时data和methods已经创建OK，此时还没有开始编译模板beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中运行期间的生命周期函数beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上的显示数据还是旧的，因为此时还没有开始重新渲染DOM节点up
2021-05-19 10:26:50
72
原创 通过面试题让你搞懂，js任务管理
Event Loop（事件循环）JavaScript 语言的一大特点就是单线程，也就是说同一个时间只能处理一个任务。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，（事件循环）Event Loop的方案应用而生。JavaScript 处理任务是在等待任务、执行任务 、休眠等待新任务中不断循环中，也称这种机制为事件循环。主线程中的任务执行完后，才执行任务队列中的任务有新任务到来时会将其放入队列，采取先进先执行的策略执行队列中的任务比如多个 setTimeout 同时到时
2021-05-17 16:10:47
127
原创 ajax到axios
简介异步的 JavaScript 和 XML，最大的优点是无刷新获取数据。http请求报文格式HTTP请求报文和响应报文1.HTTP请求报文由3部分组成（请求行+请求头+请求体）请求行：①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL。③是协议名称及版本号。请求头：④是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务
2021-05-14 14:53:57
324
原创 高阶函数、js函数内返回一个内部函数详解----＞函数柯里化
先来看一道面试题var add = function(x){ var sum = 1; var tmp = function(x){ sum = sum + x; return tmp; } tmp.toString = function(){ return sum; } return tmp;} // alert(add(1)(2)(3)) --> 6// alert(add(100)(2)(3)) -->
2021-05-07 16:13:08
676
原创 webpack打包时提示Invalid configuration object错误
报错内容如下：一开始出现这个错误百度的时候，说是由于配置版本和webpack版本不匹配，于是尝试降低版本，然而并没有用。于是耐心看了一下提示configuration.module.rules[1] should be one of these……难不成是配置项写错了，可是我都是根据官方文档复制过来的呀。但还是尝试改一下。//loder配置 module:{ rules:[ { test: /\.css$/i,
2021-04-20 09:28:29
1848
原创 fastmock常用语法
@cname 中文姓名@phone 电话号码@ID 身份证号@image 随机图片地址@province 省份@city 市@county 区1.随机字符串(类型 , 位数)@string(lower,10)lower : 小写字母upper : 大写字母number : 数字@natural(60, 100) 随机生成自然数（大于零的数）@ctitl
2021-03-26 14:12:06
1423
原创 git 常用命令行
git pullgit stash popgit add * 添加到缓存区git commit -m ‘本次更新的内容日志’git pushgitpull或者git branch –a 查看已有分支git branch 查看目前所在分支git checkout XXX 切换到分支在当前分支创建分支时会拥有当前分支的所有记录git branch -b 分支名 创建一个分支，并切换到该分支git branch -d 分支名 删除一个分支，在其他分支上才能操作成功//撤销追踪操作与文件还原
2021-03-26 14:09:49
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人