前端
关注
分享
扫一扫
用来记录自己前端学习
颜妮儿
学不完，根本学不完
展开
-
React类组件生命周期
初始化阶段（constructor：如果不初始化state或不进行方法绑定，可以不需要为组件实现构造函数，是类的构造函数）componentWillMount：render之前最后一次修改状态的机会render：只能访问this.props和this.state，不允许修改状态和DOM输出componentDidMount：成功render并渲染完成真实DOM之后触发，可以修改DOM，推荐在这个函数中完成数据请求、订阅函数的调用、设置setInterval等运行阶段compone原创 2022-03-14 17:13:49 · 350 阅读 · 0 评论 -
oninput与onchange事件
使用原生js为input标签绑定oninput事件与onchange事件的区别:onchange事件是当标签的内容改变且失去焦点时触发； oninput事件是输入框的值发生改变时就触发。在React中的onInput与onChange事件并没有什么区别，都是在用户输入时持续触发，如果要达到原生onchange事件的效果，需要onBlur事件配合使用。...原创 2022-02-20 11:59:17 · 1081 阅读 · 0 评论 -
Ref的使用
1：给标签设置ref="xxx" 通过这个获取this.refs.xxx，ref可以获取到应用的真实dom2：给组件设置ref="xxx" 通过这个获取this.refs.xxx，ref可以获取到组件对象3：新写法myRef = React.createRef()<div ref={this.myRef}> Hello </div>//访问：this.myRef.currrent...原创 2022-02-18 16:45:21 · 2075 阅读 · 0 评论 -
bind,call,apply
三者都是用来改变函数中this的指向，区别体现在： call改变函数this指向后，会立即调用该函数，如果调用函数还有其他参数时，写在第一个参数后面，不同参数之间用逗号分隔。 bind是只改变this指向，执行bind后并不执行调用函数，其它和call一样。 apply与call的区别在于，当调用函数有其他参数时，会把参数放在一个数组里面，作为apply的第二个参数。 var obj1 = { name: 'obj1', getName() {原创 2022-02-18 11:50:06 · 298 阅读 · 0 评论 -
React事件
事件绑定：React事件绑定与原生事件绑定的区别二者都采用on+事件名的方式来绑定一个事件，React中事件是驼峰命名，原生事件全是小写。在React中并不是直接绑定在真实的dom结点上（绑在dom上会更消耗内存），而是采用事件代理模式，是合成事件。Event对象：事件handler会被自动传入一个event对象，这个对象和普通的浏览器event对象所包含的方法和属性都基本一致。不同的是React中的event对象并不是浏览器提供的，而是它自己内部所构建的。React中的事件对象同样具有ev原创 2022-02-18 10:56:58 · 427 阅读 · 0 评论 -
JSX语法
JSX是将HTML语法直接加入到Js代码中，再通过翻译器转换为纯Js后由浏览器执行，在实际开发中，JSX在产品打包阶段都已经编译成纯Js，不会带来任何副作用，反而会让代码更加直观并易于维护。JSX的编译过程由Babel的编译器实现。JSX代码：RectDom.render(<div id='aa' className='b'> 111</div>, document.getElementById('root'))经过解释器转换后的代码：RectDom原创 2022-02-17 14:05:57 · 289 阅读 · 0 评论 -
页面布局之浮动布局
流式布局：块的默认布局方式是流失布局。默认块会充满整个页面的宽度，前面的块在前面，后面的块在后面，一个块占有一行。即使前面块的宽度不能占满整个页面宽度并且一行能放下多个块，也不会并排显示，而是依次从上往下排列。设置块的浮动属性，可以实现多个块在一行显示，完成浮动布局。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X原创 2022-02-16 15:36:01 · 597 阅读 · 0 评论 -
画菱形和平行四边形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画菱.原创 2022-02-06 22:19:46 · 864 阅读 · 0 评论 -
前端画三角形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画三.原创 2022-02-06 21:41:29 · 169 阅读 · 0 评论 -
溢出的文字隐藏
word-break:自动换行normal:使用浏览器默认的换行规则break-all:允许在单词内换行keep-all:只能在半角空格或连字符处换行（不允许将单词拆开）主要处理英文单词white-spacewhite-space设置或检索对象内文本显示方式。通常我们适用于强制一行显示内容normal:默认处理方式nowrap:强制在同一行内显示所有文本，知道文本结束或者遭遇br标签才换行text-overflow:文字溢出text-overflow:clip原创 2022-01-16 20:51:54 · 487 阅读 · 0 评论 -
元素的四种定位
定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准 静态static 不脱标，正常模式 不可以 正常模式 相对定位relative 不脱标，占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标，不占有位置 可以 相对定位父级移动位置 固定定位fixed 完全脱标，不占有位置 可以 相对浏览器移动位置 补充：叠加次序：z-index只对设置定位为相对定位或绝对定位或固定定原创 2022-01-16 17:09:11 · 433 阅读 · 0 评论 -
清除浮动的影响
额外标签法通过在浮动元素的末尾添加一个空的标签 例如<div style="clear:both"></div>，或者其他标签br等均可。——W3C推荐优点：通俗易懂，书写方便缺点：添加许多无意义的标签，结构化较差。父级添加overflow属性方法可以通过出发BFC的方式，可以实现清除浮动的效果。给父级添加：overflow为 hiddden | auto | scroll都可以实现。优点：代码简洁缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，原创 2022-01-16 15:01:49 · 196 阅读 · 0 评论 -
CSS选择器（类选择器、伪类选择器、伪元素选择器）
类选择器：.xxx{填写样式}伪类选择器：:xxx{填写样式}常用伪类选择器：:link，:visited，:hover，:active，:target，:first-child，:last-child，:nth-child(n)（第n个子元素，n从0开始）:enable，:disabled伪元素选择器：::xxx{填写样式； content:"添加的内容"}常用伪元素选择器：...原创 2022-01-15 14:30:53 · 895 阅读 · 0 评论 -
页面内锚点跳转+目标伪类选择器
页面内跳转的锚点设置的两种方式：一：<a href="#xxx">名称</a> 目标模块：<h3 id="xxx">这是锚点指向的模块/h3>二：<a href="#xxx">名称</a> 目标模块：<a name="xxx">这是锚点指向的模块/h3>用 :target伪类选择器用来选择选中的目标模块，进行样式设置。<!DOCTYPE html><html lang="en"&.原创 2022-01-12 17:03:35 · 434 阅读 · 0 评论 -
line-height的使用
line-height原创 2022-01-12 12:28:36 · 2372 阅读 · 0 评论 -
VS-Code的使用
快捷键的使用工作区快捷键Mac 快捷键 Win 快捷键 作用 备注 Cmd + Shift + P Ctrl + Shift + P，F1 显示命令面板 Cmd + B Ctrl + B 显示/隐藏侧边栏 很实用 Cmd + \ Ctrl + \ 拆分为多个编辑器 【重要】抄代码利器 Cmd + 1、2 Ctrl + 1、2 聚焦到第 1、第 2 个编辑器 同上重要 Cmd + +、.原创 2022-01-03 14:03:10 · 3363 阅读 · 0 评论 -
pdf.js渲染pdf文件的时候不展示表单问题
问了大佬这个问题的解决方式，先记着，有备无患。原创 2021-04-19 14:46:54 · 576 阅读 · 0 评论 -
通过postMessage完成窗口页面和iframe之间通信
通过postMessage完成窗口页面和iframe之间通信最近在做项目的时候，遇到这样一个需求：在主项目中点击文件，然后进行在线文件编辑。由于主项目的框架是vue而编辑器是react，所以采取iframe的方式进行嵌入到页面。相当于在主项目页面中添加一个开关用于控制关闭iframe，在编辑器完成后，通过点击开关，然后主页面通知iframe保存数据，数据成功保存后再通知主页面关闭iframe。一下是主页面的vue代码：//监听和取消监听message事件，回调是关闭iframe的方法mount原创 2021-04-19 13:53:04 · 649 阅读 · 0 评论 -
前端解析URL参数
前端解析URL参数写了一个简陋的方法通过正则来匹配指定参数的值：export const getQuery = (query, string) => { let reg = new RegExp(`${query}=[\\w]+`); let str = string.match(reg); if (!str || !str.length) return ''; return str[0].split('=')[1];};调用const getParams=()=>{原创 2021-03-12 16:26:16 · 642 阅读 · 0 评论 -
vscode安装node-snippets
vscode安装node-snippets扩展后没有代码提示问题安装好扩展后，输入node后仍没有代码提示，需要观察自己的代码所在文件路径是否全是英文路径：然后大多都以了如果还有不行，就尝试在设置里面输入prevent，取消下面的选中：最终效果：...原创 2020-11-19 10:30:14 · 2295 阅读 · 0 评论 -
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路：先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下：视图中显示3张图片，并通过CSS的透视和旋转实现3D效果，当无任何操作时，图片自动循环轮播。当鼠标划到轮播图时，则停止轮播，滑出时继续自动轮播，此效果通过触发mouseenter和mouseleave事件和计时器来实现。当鼠标在轮播图上向左右滑动时，根据方向轮播下一站或上一张图片，通过触发mousedown和mouseup事件时，的鼠标的clientX来判断方向。无缝轮播思路视图中都会原创 2020-07-22 18:24:16 · 1678 阅读 · 1 评论