^小福气^
码龄1年
  • 54,253
    被访问
  • 109
    原创
  • 45,261
    排名
  • 48
    粉丝
关注
提问 私信

个人简介:个人学习笔记

  • 加入CSDN时间: 2021-06-30
博客简介:

小福气的博客

博客描述:
记录个人在学习和开发的过程中遇到的问题和有意思的小案例
查看详细资料
  • 3
    领奖
    总分 447 当月 36
个人成就
  • 获得43次点赞
  • 内容获得20次评论
  • 获得163次收藏
创作历程
  • 1篇
    2022年
  • 117篇
    2021年
成就勋章
TA的专栏
  • 样式布局
    1篇
  • Vue
    5篇
  • 原生javascript
    85篇
  • react
    6篇
  • 浏览器兼容性
    9篇
  • node学习
    1篇
  • 面试题
    2篇
  • MINA原生微信小程序
    9篇
兴趣领域 设置
  • 前端
    javascriptechartsreact.js
  • 测试
    postman
  • 最近
  • 文章
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

flexible.js实现rem自适应布局

flexible.js的rem自适应布局
原创
发布博客 2022.02.22 ·
296 阅读 ·
0 点赞 ·
0 评论

【问题场景】el-table表格结合el-pagination分页器使用时,全选框每次点击都是true,且没有出现对应的选中样式

el-table表格结合el-pagination分页器使用时,全选框每次点击都是true,且没有出现对应的选中样式。即全选功能异常!
原创
发布博客 2021.11.19 ·
731 阅读 ·
1 点赞 ·
0 评论

useEffct hook模拟生命周期

react中的函数式组件是一个纯函数,它没有自己的状态,也没有自己的生命周期的,因而需要借助hooks去实现更多的功能。1.模拟componentWillMount、componentWillUnmountfunction Demo() { useEffect(() => { // 相当于 componentDidMount console.log("我模拟了componentDidMount") return () =>
原创
发布博客 2021.10.28 ·
228 阅读 ·
1 点赞 ·
1 评论

自定义浏览器滚动条scrollbar样式(IE、Firefox、webkit内核浏览器)

1 IE浏览器1.1 IE浏览器对滚动条的样式属性如下表:1.2 滚动条各样式图示:2webkit内核滚动条样式属性3FireFox浏览器——使用jquery插件插件:jquery-custom-content-scrollerhttp://manos.malihu.gr/jquery-custom-content-scroller/使用案例:<!doctype html><html><head><met...
原创
发布博客 2021.10.16 ·
203 阅读 ·
0 点赞 ·
0 评论

前端开发使用模拟数据的两个方式以及使用步骤:json-server和mock.js

作为前端开发人员,当后端还没有写好接口,但是我们又不想写静态的数据的话,可以使用模拟数据。1、json-server和mock.js简介 json-server:利用json-server,可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。更详细的json-server:json-server - npmhttps://www.npmjs.com...
原创
发布博客 2021.10.14 ·
679 阅读 ·
4 点赞 ·
0 评论

前端开发使用模拟数据的两个方式以及使用步骤:json-server和mock.js

作为前端开发人员,当后端还没有写好接口,但是我们又不想写静态的数据的话,可以使用模拟数据。1、json-server和mock.js简介 json-server:利用json-server,可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。更详细的json-server:json-server - npmhttps://www.npmjs.com...
原创
发布博客 2021.10.14 ·
679 阅读 ·
4 点赞 ·
0 评论

常用的浏览器兼容问题,包含滚动条、获取事件对象、获取非行内样式、获取鼠标编码值、事件监听等

1、滚动条//1.滚动条到顶端的距离(滚动高度)var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;2、获取非行内样式//获取非行内样式兼容 IE:currentStyle 标准:getC
原创
发布博客 2021.10.09 ·
19 阅读 ·
0 点赞 ·
0 评论

lazyLoad:React中的组件懒加载案例及注意点

1. 什么叫懒加载? 懒加载:随用随载。即在需要的时候才进行加载。2. 为什么要设置懒加载? React和Vue都是单页面应用。 在单页应用中,如果没有设置懒加载,webpack打包后的文件就会很大;从而造成进入首页时,需要加载的资源过多,时间过长,不利于用户体验。 运用懒加载,就则可以将页面进行划分,在需要的时候加载对应的页面。可以有效的分担首页所承担的加载压力,减少首页加载用时。3. 案例演示注意点1: react是一种按需引入的机制...
原创
发布博客 2021.09.28 ·
345 阅读 ·
0 点赞 ·
0 评论

windows10系统的mongodb超详细安装教程,包含mongoDB服务的安装、可视化工具MogonDB Compass的安装

简述 mongo是一个非关系型的数据库系统,只要安装了mongoDB服务就可以使用了。但是此时只能通过命令行窗口去操作数据库,所以我们可以安装一个可视化工具,类似于mysql数据库的navicat。 最后的效果图如下: 2.安装mongo服务(三步)第一步:下载mogon,进入官网,选择好版本后,点击左下角的Download下载。注意点1:注意是选中的On-premises注意点2:本教程的安装是压缩包方式的安装,不是镜像,所以选择package时选择zip...
原创
发布博客 2021.09.24 ·
257 阅读 ·
0 点赞 ·
0 评论

Vue内置指令:v-html、v-cloak

v-html的作用?向指定节点中渲染包含html结构的内容。 v-html与插值语法的区别?(1) v-html会替换掉节点中所有的内容,{{xx}}则不会。(2) v-html可以识别html结构。v-html的使用容易导致安全问题,慎用(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。(2)一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上!v-cloak的作用?v-cloak本质是一个特殊属性,Vue实例创...
原创
发布博客 2021.08.28 ·
39 阅读 ·
0 点赞 ·
0 评论

手写闭包:闭包的作用、概念、写法案例

闭包闭包的作用:隐藏变量,避免全局污染;可以读取函数内部的变量。闭包的概念: 有一个A函数,在A函数内部返回一个B函数;在A函数外部有变量引用这个B函数;B函数内部访问着A函数内部的私有变量。(核心就是利用执行空间不销毁的原理)写法1:注意输出结果的不同 for(var i=0;i<10;i++){ ~function(){ setTimeout(()=>{ console.log(i);//10次10 获得执行次数
原创
发布博客 2021.08.21 ·
176 阅读 ·
0 点赞 ·
0 评论

前端常用库-nanoid和UUID:用来生成唯一的id、key在react虚拟DOM中的作用,以react/vue中key为例子

1.key在react虚拟DOM中的作用简单来说,key是虚拟DOM对象的一个标识,在真实DOM的显示和更新中有着极其重要的作用。当状态中的数据发生变化时,react会根据变化后的新数据去生成新的虚拟DOM;然后,react会将新的虚拟DOM和旧的虚拟DOM进行diff比较;从而决定哪些虚拟DOM可以复用、哪些虚拟DOM需要进行更新;最后,需要更新的DOM转化为真实DOM,进行真实DOM的更新,渲染到页面。可以复用的DOM就继续使用原来的。2...
原创
发布博客 2021.08.19 ·
740 阅读 ·
0 点赞 ·
0 评论

ES6模块化的3种使用方式和对应的注意点

ES6之前javascrip没有模块化的概念,是ES6的新特性。本文主要介绍js模块化的使用。一、ES6模块化的第一种方式:1.1 使用方法导出数据:export {xxx};在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部其他模块中是无法获取的。如果你希望外部模块可以读取模块当中的内容,使用export来对其进行暴露(输出)。导入数据:import {xxx} from “path”; 如导入 -a.js文件1.2 注意点注意点1:..
转载
发布博客 2021.08.13 ·
157 阅读 ·
0 点赞 ·
0 评论

通过call、apply、bind去改变函数的this指向以及this指向详解

一、this指向详解this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话不那么严谨,作为一般情况下是可以的)再加下面的补充,就完美啦:情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题(在严格版中的默认的this不再是window,而是undefined。)
转载
发布博客 2021.08.12 ·
89 阅读 ·
0 点赞 ·
0 评论

React 中 refs 的作用是什么?

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return (
转载
发布博客 2021.08.12 ·
131 阅读 ·
0 点赞 ·
0 评论

ES6展开运算符的使用(展开、合并数组,拷贝(copy)数组和对象)

1 展开数组let arr1 = [1,3,5,7]console.log(...arr1);//1 3 5 72 合并数组let arr1 = [1,3,5,7]let arr2 = [2,4,6,12]console.log(...arr1,...arr2,8,7);//1 3 5 7 2 4 6 12 8 73在函数中使用(用于计算输入的所有数字的总和)该方法适用于输入的参数数量不确定的情况。无需理会传入的参数有多少,只需要调用即可。function sum(..
原创
发布博客 2021.08.10 ·
380 阅读 ·
0 点赞 ·
2 评论

2021前端最新最全面试题(答案持续更新中)

这篇面试题文章很赞,转载是为想保存下来。文章链接:https://www.cnblogs.com/liandudu/p/14276948.html
转载
发布博客 2021.08.07 ·
307 阅读 ·
0 点赞 ·
0 评论

深拷贝与浅拷贝的实现方案与应用场景

1 写在前面首先我们得清楚基本概念。拷贝(Copy)即复制。浅拷贝:创建一个新对象,保存原始对象属性值精准拷贝。如果属性是基本类型,拷贝的是基本类型的值,如果属性是引用类型,拷贝的是内存地址,并不会占用新的内存,这种情况下如果其中一个对象改变了这个地址,会影响到另一个对象。浅拷贝只复制指向某个对象的指针,而不复制对象本身。新旧对象共享同一块内存。深拷贝:将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,增加了内存,且修改新对象不会影响原对象。新对象与原对象不共享内存。
转载
发布博客 2021.08.06 ·
176 阅读 ·
0 点赞 ·
0 评论

移动端开发vw+rem布局,即等比缩放布局(什么是vw?如何设置根元素html的字体大小?如何换算vw单位?文末:移动端开发步骤详解链接)

1 什么是vw?vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。1vw 视口宽度的1%100vw 视口宽度的100%1vh 视口高度的1%100vh 视口高度的100%2为什么要将根元素html字体大小设置为100px?是为了方便计算。 我们都知道,根元素默认的字体大小是12px,即 html{...
原创
发布博客 2021.08.05 ·
323 阅读 ·
0 点赞 ·
0 评论

移动端vw+rem等比缩放布局开发的详细步骤:包含px与rem的单位换算、二倍图以及如何使用UI给的设计稿等(开发工具HBuilder)

1 单位换算公式:/ 2 /
原创
发布博客 2021.08.05 ·
1716 阅读 ·
0 点赞 ·
0 评论
加载更多