前端学习
文章平均质量分 60
果冻OoO
这个作者很懒,什么都没留下…
展开
-
总结下Promise,好记性不如烂笔头
目录Promise 的介绍和优点Promise 对象的用法和状态使用 Promise 的基本步骤promise 对象的 3 个状态Promise 的方法实例方法then()catch()finally()静态方法Promise.resolve()Promise.reject()Promise.all()Promise.race()还有些其他的Promise 链式调用(封装多个接口)手写promise几个注意点Promise ..原创 2022-04-13 17:09:01 · 764 阅读 · 0 评论 -
Vuex持久化原理——不担心刷新后数据没了
前言同样是发现问题,解决问题的角度我们来分析,首先我们遇到了什么问题呢?就是当我们对数据增删改查之后,刷新页面,咦,我们刚才操作的数据不见了。那么怎么去解决问题呢?首先想到的是把数据存储起来呗,非常聪明,我们就是这么干的。那我们下面来看一看。一、本地存储在localStorage或sessionStorage或其它存储方式中取值,这里我们不结合Vuex来看,举个简单的例子,经典案例TodoList,这里我们使用localStorage先了解一下基础知识生存期localStorag原创 2022-04-10 21:18:36 · 2555 阅读 · 0 评论 -
Vue3——封装组件数据懒加载
原理和图片懒加载差不多,目的是实现当组件进入可视区域再加载数据。这里使用 @vueuse/core 中 useIntersectionObserver 函数来实现监听进入可视区域的范围,但必须配合vue3.0的组合API方式来实现可以先看下面这篇文章了解下IntersectionObserver图片懒加载,原理你可一定要会_果冻OoO的博客-CSDN博客大致步骤:理解useIntersectionObserver的使用,各个参数的含义 改造 home-new 组件成为数据懒加载,掌..原创 2022-04-10 19:20:19 · 1684 阅读 · 0 评论 -
图片懒加载,原理你可一定要会
前言:面试时碰到了这个问题,之前练手项目的时候用过,但没有深入了解其底层原理,所以面试结果应该只能唱一首凉凉了,现做一个总结,后面继续加油,也希望大家吸取教训懒加载是什么?懒加载肯定重点突出一个‘懒’字,我们来从发现什么问题,然后怎么解决去解决的角度来看首先是有什么问题呢?在我们访问一个图片展示比较多的网页时,加载速度慢很多时候正是因为图片多导致,大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面,若用户只查看了网页的前面部分便离开,许多已经原创 2022-04-10 17:19:51 · 2157 阅读 · 0 评论 -
XMLHttpRequest Level2的新特性
目录1、设置HTTP请求时限2、FormData对象管理表单数据3、上传文件(1)定义UI结构(2)验证是否选择了文件(3)向FormData中追加文件(4)使用 xhr 发起上传文件的请求(5)监听onreadystatechange事件4、显示文件上传进度(1)导入需要的库(2)基于Bootstrap渲染进度条(3)监听上传进度的事件(4)监听上传完成的事件旧版XMLHttpRequest的缺点只支持文本数据的传输,无法用来读取和上传...原创 2021-12-27 16:48:36 · 478 阅读 · 0 评论 -
Less知识点总结
一、Css预处理器和Less基本介绍CSS预处理器之Less详解CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择,且绝大多数CSS预处理器会增加一些原生CSS不具备的特性,例如代码混合,嵌套选择器,继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。Less是一个CSS预处理器, Less文件后缀是.less 扩充了 CS原创 2021-12-27 14:25:26 · 439 阅读 · 0 评论 -
Bootstrap入门及快速复习
一、UI框架的作用UI框架概念 将常见效果进行统一封装后形成的一套代码, 例如:BootStrap。 作用 基于框架开发,效率高,稳定性高。二、BootStrap简介Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。 中文官网: https://www.bootcss.com/为什么要使用bootstrap众所周知bo原创 2021-12-24 18:26:25 · 925 阅读 · 0 评论 -
最新Flex(弹性)布局总结
一、基本介绍Flex布局/弹性布局: 是一种浏览器提倡的布局模型 布局网页更简单、灵活 避免浮动脱标的问题作用 基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。 Flex布局非常适合结构化布局 设置方式 父元素添加 display: flex,子元素可以自动的挤压或拉伸 组成部分 弹性容器 弹性盒子 主轴 侧轴 / 交叉轴二、主轴对齐方式修改主轴对齐方式属性: justify-content属性 .原创 2021-12-24 15:32:37 · 459 阅读 · 0 评论 -
JavaScript:Dom知识点总结
目录一、DOM简介二、HTML DOM 树形结构:三、DOM 节点节点类型节点父、子和同胞(1) 父级节点(2)子节点childNodes(3)子节点children(4)子节点first和last(5)兄弟节点四、DOM对象1、查找 HTML 元素常用方法(1)get方法(2)querySelector 和 querySelectorAll(3)获取特殊元素(body,html)2、事件基础(1)事件概述(2)事件三要素(.原创 2021-07-21 17:25:17 · 1025 阅读 · 0 评论 -
JavaScript:Date对象和Math对象常用知识点总结
目录一、Date对象(1)Date简介(2)创建指定日期和时间的Date对象二、Math对象一、Date对象(1)Date简介在JavaScript中,Date对象用来表示日期和时间。要获取系统当前时间,用:var now = new Date();now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)now.getFullYear(); // 2015, 年份now.getMonth(); // 5, 月份,注原创 2021-07-08 15:42:21 · 166 阅读 · 0 评论 -
JavaScript:Array对象知识点总结
一、数组简介数组对象是使用单独的变量名来存储一系列的值。JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。var stars = array();stars[0] = "Jay";stars[1] = "Huahua";stars[2] = "JJ";var stars = Array("Jay","Huahua","JJ");var stars = ["Jay","Huahua","JJ"];要取得Array的长度,直接访问length..原创 2021-07-08 14:26:09 · 155 阅读 · 0 评论 -
JavaScript:String对象知识点总结
目录前言:一、JavaScript字符串对象简介(1)多行字符串(2)模板字符串(3)字符串可以是对象(4)字符串属性(5)特殊字符二、常用字符串的操作(1)length(2)toUpperCase 和toLowerCase(3)indexOf(4)substring(5)match(6)search(7)replace(8)concat(9)split(10)localeCompare前言:自己参考其他博客和教..原创 2021-07-07 21:00:31 · 276 阅读 · 0 评论 -
最新最全css知识点总结,自用,持续更新
目录一、CSS简介二、基础知识1、css的引入方式2、基础选择器(1)标签选择器(2)id和class选择器(类选择器)(3)通配符选择器3、复合选择器(1)后代选择器 (重要)(2)子选择器 (重要)(3)并集选择器 (重要)(4)伪类选择器4、文本样式总结(1)字体类型font-family(2)字体大小font-size(3)字体颜色color(4)字体粗细font-weight(5)字体斜体font-style(6)字体复合原创 2021-07-07 16:15:24 · 2716 阅读 · 5 评论 -
HTML常用知识点总结笔记
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签(重点) (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...原创 2021-07-01 14:43:06 · 5813 阅读 · 0 评论 -
JavaScript:实现倒计时效果
案列分析这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval) 三个黑色盒子里面分别存放时分秒 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白 最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题我们这里设置了一个时间,到2021-5-20 13:14:00为例,然后天数算到了小时数里面,如果只算小时数的话记得%24就好了<!DOCTYPE html>原创 2021-05-19 11:44:39 · 191 阅读 · 0 评论 -
javascript:d1=+new date()
学习后遇到=+new date()的情况,不是很理解,就百度了下js在某个数据类型前使用‘+’,这个操作目的是为了将该数据类型转换为Number类型,如果转换失败,则返回NaN;让我们看看有+和没加号的对比图:有加号没加号:和效率有关,所以时间差每次不一样,会有点误差...原创 2021-05-12 15:46:42 · 334 阅读 · 0 评论 -
javascript:dom案例实现动态生成表格
核心思想:因为里面的学生数据都是动态的,我们需要js 动态生成。 这里我们模拟数据,自己定义好 数据。 数据我们采取对象形式存储。 所有的数据都是放到tbody里面的行里面。 因为行很多,我们需要循环创建多个行(对应多少人) 每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格, 并且把数据存入里面(双重for循环) 最后一列单元格是删除,需要单独创建单元格。 最后添加删除操作,单击删除,可以删除当前行。<!DOCTYPE html>原创 2021-05-11 17:56:56 · 738 阅读 · 0 评论 -
javascript:dom案例实现简易的留言板功能
核心思路:点击按钮之后,就动态创建一个li,添加到ul 里面。 创建li 的同时,把文本域里面的值通过li.innerHTML 赋值给 li 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore 当我们把文本域里面的值赋值给li 的时候,多添加一个删除的链接 需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的li 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;点原创 2021-05-11 16:28:14 · 907 阅读 · 1 评论 -
javascript:dom案列下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-05-07 21:11:52 · 167 阅读 · 0 评论 -
javascript:dom案列实现tab栏切换
点击对应模块,其列表选项背景色会发生变化,对应着相应的模块内容也会发生改变其思想主要是用了两个排他思想,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http原创 2021-05-07 10:39:00 · 248 阅读 · 0 评论 -
一些关于前端的笔记地址
HTML https://blog.csdn.net/wuyxinu/article/details/103515157CSS https://blog.csdn.net/wuyxinu/article/details/103583618JS https://blog.csdn.net/wuyxinu/article/details/103642800JS-下 https://blog.csdn.net/wuyxinu/article/details/103646041还有jQuery的 https原创 2021-05-06 20:22:36 · 269 阅读 · 0 评论 -
javascript:dom案列实现勾选框的全选反选
1.勾选全选框,全体选项全部选中2.其他选项全部选中,全选框被选中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; }原创 2021-05-06 19:47:51 · 331 阅读 · 0 评论 -
javascript:点击小图片切换背景图片
屏幕部分图片,点击中间的小图片,会变换背景图片html布局代码: <ul class="box"> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""&g.原创 2021-05-05 12:44:58 · 1565 阅读 · 0 评论 -
javascript中的排他思想
五个按钮如图:依次点击按钮1,按钮5,按钮3的结果如下:点击按钮,点击的按钮变成粉色。其他均不变色,利用了排他算法:1.所有元素全部清除样式2.给当前元素设置样式3.注意顺序不能颠倒,首先要把除自己外的其他人干掉,在设置自己。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont原创 2021-05-02 16:39:51 · 4680 阅读 · 5 评论 -
Js中修改css时一个小细节:js里都是驼峰命名法
Js中修改css时命名时一个小细节:js里都是驼峰命名法如下:写成这样是会报错的怎么改呢,遵守驼峰命名法就好了原创 2021-04-29 18:07:41 · 323 阅读 · 0 评论 -
vs code中less文件转换css文件除法无法生效的问题
less计算中除法不生效的问题在学rem+less的过程中遇到了less中除法不能生效,如下less文件中:css文件中:原创 2021-04-13 18:53:09 · 1287 阅读 · 2 评论