- 博客(82)
- 收藏
- 关注
RSS订阅原创 前端面试题套餐没事瞧瞧
是一种纯字符串的数据，适合网络中传输，可存在cookie localStroage 中使用：JSON.parse JSON.strningfy()什么适合使用：定义接口，序列化，配置文件。
2023-11-10 10:38:46
181
原创 transition、transform 区别和应用
当页面中的动画是自己执行的那么我们考虑用animation，因为transition是需要借助伪类、js、@madia触发的。常见的伪类是：hover ，：focus。@media可以用于页面缩小到1000px你可以展示你需要的动画。1.动画循环，复杂的动画用animation。动画——需要先定义关键帧，再通过animation属性引用关键帧。动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果。过渡：简单动画效果，可以通过属性展示动画的速度效果。过渡：需要借助伪类、js、@media触发。
2023-08-30 11:18:54
1865
原创 我还能打？
大厂裁员，称35岁以后体能下滑，无法继续高效率地完成工作；体重上涨，因为35岁以后新陈代谢开始变慢；甚至坐久了会腰疼、睡眠困扰开始加重，在众多的归因中，仿佛35岁的到来，会为一切的焦虑埋下伏笔。实际上，生理年龄不代表全部，体能素质的下降更与日常行为相关。你现在多少岁？体能状况怎么样？来谈谈你的想法。
2023-08-29 11:12:47
1971
转载 Vue3.0 实用小工具
基于 Vue3 + Vite + Canvas 开发的滑块验证码，动态生成验证滑块，结合后端的二次校验，能有效的避免被抓取模拟验证https://admin.makeit.vip/components/captcha。antfu 按需组件自动导入，开箱即用地支持 Vue 2 和 Vue 3，Tree-shakable，只注册你使用的组件，附有流行UI 库的内置解析器。支持 TypeScript。基于谷歌的 Material Design，附带 Vue 插件和指令，以及从简单到复杂的高度可定制组件。
2023-03-01 15:30:38
240
原创 Javascript变量提升与暂时性死区
在ES6之前，使用 typeof 运算符操作一个未声明的变量时，不会报错，该变量的值以 undefined 作处理。而在ES6之后，使用ES6的变量声明方法(let, const, class…)声明的变量，不可在声明前使用 typeof 操作，否则会进行显式报错。ES6变量声明前的代码区域，称为 “暂时性死区”
2023-02-14 17:29:05
1339
原创 解决vue打包chunk-vendors.js 过大，首页加载慢问题
(2)在vue.config.js中配置。打包的时候如果报以下的错误。4.(1)采用cdn 加速。(3)去除之前的引用。
2022-10-17 12:46:53
4105
原创 ES6对String字符串类型做的常用升级优化。
startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false。includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。padStart()用于头部补全，padEnd()用于尾部补全。如果传入的子字符串在搜索字符串的末尾则返回 true，否则将返回 false。方法用来判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。searchvalue：必需，要查找的字符串。..
2022-08-12 16:44:55
361
原创 element-ui cascader 选项文字内容过长，鼠标悬停显示
项目中使用级联选择器（el-cascader）的时候会遇到个项的文字过多导致区域过长，因此需要设置最大的宽度，然后给组件提供的–自定义节点内容-来设置实现鼠标悬停显示；最终效果如下：代码如下 .el-cascader-menu{ max-width:250px;}<template slot-scope="{ node, data }"> <el-tooltip :disabled="data.title.length < 11" class="item"
2022-05-27 15:07:03
3536
原创 Vue的动态组件应用
什么是动态组件？动态组件指的是动态切换组件的显示与隐藏如何实现动态组件渲染？Vue提供了一个内置的,专门用来实现动态组件的渲染，这个标签就相当于一个占位符，需要使用is属性指定绑定的组件https://www.jianshu.com/p/ff78c48a25b9https://www.jb51.net/article/230511.htm#_lab2_1_0...
2022-04-19 16:44:29
1250
原创 vue中插槽的理解与使用
什么是插槽（slot）？插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制简单来说就是组件外部维护参数及结构,内部安排位置插槽类型：默认插槽、具名插槽、作用域插槽。默认插槽<!-- 组件（父）-->
2022-03-23 16:10:54
1714
原创 浏览器网页生成过程，重绘重排，与优化
网页生成过程HTML被HTML解析器解析成DOM树CSS则被CSS解析成CSSOM树DOM树CSSOM树结合，生成一颗渲染树(Render Tree)生成布局（flow），即将所有渲染树的所有节点进行平面合成将布局绘制再屏幕上第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。如图：渲染：网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断重新渲染。重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。重排比重绘大（谁
2022-01-13 11:35:11
1493
原创 最常见前端面试vue篇（持续更新完善~）
1.vue生命周期函数beforeCreate( 创建前 )created（创建后）beforeMount（挂在前）mounted（挂载后）beforeUpdate（数据更新前调用）updated（更新后）beforeDestroy（实例销毁前）beforeUnmountdestroyed（实例销毁后） unmountedactivated（被 keep-alive 缓存的组件激活时调用）decactived（被 keep-alive 缓存的组件停用时调用）2.vue响应式原理实现m
2021-12-27 15:57:31
868
3
原创 原型和原型链 深度理解
原型：是function对象的一个属性，定义了构造函数创造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法。 _proto_是function的一个属性 constructor 是每一个function 都有的默认函数。 主要作用： 实列化对象，constructor是自动调用 传参，为属性赋值 <script type="text/javascript"> function person(n){ // 属性..
2021-12-24 17:07:07
2106
1
原创 vue中使用v-for时为什么要用到key？为什么不能用index作为key？
vue中使用v-for时为什么要用到key？为什么不能用index作为key？
2021-12-22 16:52:09
406
原创 详解Vuex 使用和原理
vuex是什么专为vue.js 设计的应用程序开发的状态管理模式采用集中式存储管理应用的所有组件状态，以相应的规则保证状态以一种可预测的方式反生变化vue的数据：组件内部数据：仅在一个组件内使用的数据（data字段）应用级别数据：多个组件公用的状态什么情况下使用vuex：多个视图依赖于同一个状态来自不同的视图行为需要变更同一个状态vuex 的核心概念store：类似于容器，包含应用的大部分状态一个页面只能有一个store状态存储是响应的（定义的数据变得时候，使用的该数据的地方跟着都变了
2021-12-22 15:27:15
6857
原创 computed和watch有何区别？
计算属性computed：支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed如果computed 属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在
2021-12-22 14:20:31
1383
原创 对MVVM的理解
MVVMModel数据模型，普通的JS数据对象View前端展示页面，这里是DOM标签ViewModel用于双向绑定数据与页面，也是Vue的实例MVVM 强调的是双向数据绑定，页面输入会导致模型数据改变，模型数据的改变也会影响页面数据展示与渲染其核心就是 ViewModel 通过 DOM 监听实现。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel（桥梁）进行交互，Model 和 ViewModel之间的交互是双向的， 因此View 数据的变化会同步到Mo
2021-12-22 11:43:28
516
原创 执行上下文、this 的指向简单易懂
1、this的绑定和函数的声明位置没有关系，只取决于函数的调用方式2、当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里调用、函数的调用方式、传入的参数等信息，this就是这个活动记录的一个属性，会在函数执行的过程中用到直接调用function get(content){ console.log(content)}get('哈哈') get.call(window,'哈哈')上面的语法糖作为对象的方法调用var person = { name:'
2021-12-16 16:51:12
1779
原创 call apply bind 区别与应用
call apply bind 的理解存在的意义: 改变函数执行时上下文，改变this指向，代码复用let obj = { name:"张三"}function Child(name){ this.name = name}Child.prototype = { constructor:Child, showName:function(){ console.log(this.name); }} let child = new Child('里斯') chil
2021-12-16 10:31:58
1080
原创 ElementUI中的el-dropdown传入多参数
最近工作中因为业务中按钮的增多，导致页面排版按钮过多，页面不够美观，用户体验不佳，于是想到利用el-dropdown做一个下拉按钮（把多个按钮整合到了一起，下拉实现）但是ElementUi官方文档中的handleCommand方法只允许接入一个参数，这个参数用于触发你选择的是哪一个选项。而我们实际中还需要传入一个当前行数（如果和我一样，也是用table显示数据的话）的对象进去，后面要使用这个对象的某些字段传给后台进行一些增删改查的操作。ElementUi官方文档中el-dropdown的样例如下：e
2021-12-13 14:13:45
5050
2
原创 数组去重方法总结
let arr = [1,2,34,5,67,1,2,2,143,45,6,7,8]Set 去重function uniqu(arr){ // return Array.from(new Set(arr)) return [...new Set(arr)]}console.log(unique(arr));两次循环function unique(arr){ for(let i = 0;i<arr.length;i++){ for(let j=i+1;j<arr.len
2021-12-10 15:23:09
1515
原创 ES6的Array.fill()方法
Array.fill()Array.fill()平时用的不多，这里记一下。Array(10).fill(item)即那个item进行的添加到数组中10个相同的内容ES6为Array增加了fill()函数，使用制定的元素填充数组，其实就是用默认内容初始化数组。该函数有三个参数。语法：arr.fill(value, start, end)//value：填充值。//start：填充起始位置，可以省略。//end：填充结束位置，可以省略，实际结束位置是end-1。例：填充初始化数组co
2021-12-07 17:08:19
2252
原创 BFC的理解
BFC的理解**块级格式化上下文，它指一个独立的块级渲染区域。只有block-level BOX（块级类型的盒子参与）参与，**该区域拥有一套渲染规则来约束块级盒子的布局，并且与区域外部无关。从一个现象说起一个盒子不设置height，当内容子元素都浮动时，无法撑起自身这个盒子没有形成BFC*如下代码*<div class="father"> <div class="son"></div> <div class="son"></div>
2021-11-11 16:50:58
126
原创 js的事件循环机制event-loop
js的事件循环机制js的语言特点单线程，解释型语言（解释一行执行一行）event-loop事件循环机制 由三部分组成调用栈 微任务队列 消息队列event-loop开始的时候会从全局一行一行的执行，遇到函数调用，会压入到调用栈中，被压入的函数被称之为帧，当函数执行完后会从调用栈中弹出代码如下//例function fn1(){ console.log(1);}function fn2(){ console.log(2); fn1() console.log(3);}
2021-11-10 17:01:26
2206
转载 JavaScript执行机制
知识点1、场景分析2、执行机制相关知识点3、以实例来说明JavaScript的执行机制4、相关概念1、场景分析/* 以下这段代码的执行结果是什么？ 如果依照：js是按照语句出现的顺序执行这个理念， 那么代码执行的结果应该是： //"定时器开始啦" //"马上执行for循环啦" //"执行then函数啦" //"代码执行结束" 但结果并不是这样的，得到的结果是： //"马上执行for.
2021-11-10 11:12:46
1386
原创 那些操作会造成内存泄露,解决方法
那些操作会造成内存泄露1.闭包闭包可以维持函数内局部变量，使其得不到释放。function assignHandler(){ var element = document.getElementById("someElement"); element.onclick = function(){ alert(element.id); };}...
2021-11-09 15:22:10
6537
原创 作用域作用域链深层次理解到闭包的底层（深度好文）
作用域作用域分为全局作用域和局部作用域就是一个变量作用的范围1.全局作用域（1）全局作用域在页面打开时被创建，关闭时销毁（2）在script标签中的变量和函数，作用域为全局，在页面的任意位置都可以访问。（3）在作用域中有全局对象window，代表一个浏览器窗口，由浏览器创建，可以直接调用（4）全局作用域中声明的变量和函数会作为window的对象直接调用。2.函数作用域（1）调用函数时，函数作用域被创建，函数执行完毕，函数作用域销毁（2）没调用一次就会创建一个新的作用域，他们之间是相护独立
2021-10-29 15:38:02
1594
转载 工作中常用到的前端小知识
1. JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个新线程中严格的要求了
2021-10-11 13:26:59
1511
原创 深拷贝浅拷贝学习
this 的指向function get(content){console.log(content)}get(‘哈哈’)get.call(window,‘哈哈’)上面的语法糖var person = {name:‘张三’,run:function (time){console.log(this.name + time);}}person.run(100)person.run.call(person,100) 上面的语法糖箭头函数this箭头函数中的this是再定义函数的时候绑定
2021-09-27 17:47:28
1623
原创 vue兄弟组件之间通信（EventBus 事件总线）
有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：通信方法let bus = new Vue()//触发A组件中的事件bus.$emit('event',123)//在组件B创建的钩子监听事件bus.$on('event',function(n){ console.log(n)})代码演示使用一个空的 Vue 实例作为事件总线 // main.js 也可以在其它地方创建比如自己的utils里 export var bu.
2021-08-31 17:24:55
2031
原创 hasOwnProperty使用简介
hasOwnProperty()表示是否有自己的属性。这个方法会查找一个对象是否有某个属性但是不会去查找它的原型链。let obj = { name:'张三', fn:function (){ }, hobby:['篮球','足球','乒乓球'], where:{ province:'北京', city:'北京', }}console.log(obj.hasOwnProperty('name')); //trueconsole.log(obj.hasOwnPropert
2021-08-26 11:22:54
1919
原创 JavaScript预编译习题详解（看完就懂）
预编译：作用域创建阶段就是预编译阶段。预编译什么时候发生要想完成预编译习题，先要知道预编译的时候做了什么事情：预编译分为全局预编译和局部预编译，全局预编译发生在页面加载完成时执行，而局部预编译发生在函数执行的前一刻。tip：预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 。只有在解释执行阶段才会进行变量初始化 。首先JavaScript的执行过程会先扫描一下整体语法语句，如果存在逻辑错误或者语法错误，那么直接报错，程序停止执行，没有错误的话，开始从上到下解释一行执行
2021-08-11 17:29:03
2012
原创 element cell-click使用方法
<el-table width="100%" border :data="tableData" @cell-click="handleClick" ></el-table>methods:{ handleClick(row,column,event,cell){ console.log(row,column,event,cell) }}
2021-08-10 13:30:21
3909
原创 Invalid prop: custom validator check failed for prop “index“. 解决
开发过程中遇到的问题解决方法： index的值不能有空格，并且是字符串类型
2021-08-05 17:21:12
2169
转载 10个实现炫酷UI设计效果的CSS生成工具
文章的很多工具非常好用，建议收藏根据设计领域的最新趋势，我选择了10个值得你关注的CSS生成工具，以帮助你构建漂亮炫酷实用的UI界面。这些工具将有助于提升设计人员和前端开发人员的工作。1、Neumorphism地址：https://neumorphism.io/它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。但是这个工具，可以直接在线调试UI风格，并直接生成CSS代码。2、带有渐变的图标地址：https://www.ico
2021-07-21 10:54:46
2226
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人