
前端
文章平均质量分 66
Amy.Wang
这个作者很懒,什么都没留下…
展开
-
在react中使用decorator遇到的问题
如果package.json 里面还没有 babel 配置,需要先执行npm run eject。如果安装了sass,还是报这个错误,删掉node_modules文件夹;b.在项目根目录新建jsconfig.json,添加代码。原创 2022-11-24 19:29:24 · 420 阅读 · 0 评论 -
npm、yarn、pnpm
npm,yarn与pnpm原创 2022-10-16 22:56:26 · 227 阅读 · 0 评论 -
service worker相关知识
service worker是浏览器运行在后台,与网页主线程独立的另一个线程,这种工作子线程的出现通常是为了做一些比较耗费性能的计算,有需要时再和主线程通讯,告知主线程计算结果,这样将渲染与计算独立开开,就避免了阻塞情况。 service worker本质上充当web应用程序、浏览器与网络(可用时)之间的代理服务器,它会拦截网络请求并根据网络是否可用来采取适当的动作,更新来自服务器的资源,是web worker的一种,它是一个注册在指定源和路径下的事件驱动worker。特点:...原创 2022-05-24 09:49:32 · 3064 阅读 · 0 评论 -
vue随记
目录1. 常见的修饰符使用(self修饰符)2.mixin:抽离组件公共逻辑3.实现v-model1. 常见的修饰符使用(self修饰符)<!--阻止单击时间继续传播--><a v-on:click.stop="doThis"></a><!--提交事件不再重载页面--><form v-on:submit.prevent="onSubmit"></form><!--修饰符可以串联-->...原创 2022-03-27 21:12:57 · 1552 阅读 · 0 评论 -
::before和::after伪元素的用法
css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。所以不要用:before转载 2021-07-05 14:32:53 · 167 阅读 · 0 评论 -
解析页面从输入URL到加载显示完成的过程
1、首先,在浏览器地址栏中输入url,浏览器开启一个线程处理该请求。2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。5、握手成功后,浏览器向服务器发送http请求,请求数据包。6、服务器处理收到的请求,将数据返回至浏览器7、浏览器收到HTTP响应8、读取页面内容,浏览器渲染转载 2020-08-20 12:32:39 · 213 阅读 · 0 评论 -
一个div宽度或高度固定,另一个div铺满剩余空间
一. 一个div宽度固定,实现如下效果: box1固定宽度200px; box2铺满页面剩余部分<div class="wrapper"> <div class="box1"></div> <div class="box2"></div></div>1. 利用flex布局.wrapper { display: flex;}.box1 { width: 200px; height: 200px翻译 2020-08-18 23:52:19 · 2261 阅读 · 0 评论 -
css实现水平垂直居中的几种方式
1. 利用flex布局:align-items: center垂直居中 justify-content:center水平居中<div class="box"> <div class="child"></div></div>.box { width: 100vw; height: 500px; background: skyblue; position: relative;}.child { width: 200px转载 2020-08-18 23:19:50 · 396 阅读 · 0 评论 -
“==”VS“===”、浅比较VS深比较、浅拷贝VS深拷贝(实现js对象的深拷贝)
浅拷贝:复制对象的所有变量都含有与原来的对象相同的值,改变任何一个对象,其他对象的值都会被改变 深拷贝:不仅将原对象的各个属性复制过来,而且对原对象所包含的各个属性中的对象也依次采用深拷贝的方式递归的复制到新对象上;深拷贝时,一个对象的改变不会影响另一个对象实现深拷贝的方式:目标对象是数组【arr1 = [4,5,2]】1. for... inlet arr2 = []for (let index in arr1) { arr2[index] = arr1[index]}2.原创 2020-08-13 12:54:26 · 1072 阅读 · 0 评论 -
样式引入:link与@import的区别
1. link标签是浏览器元素,不仅可以加载css样式,还可以定义RSS, rel连接属性等;@import是css引入的语法规则,只能用来引入样式表;2 页面加载时,link引入的css样式表被同时加载,@import引入的css样式在页面加载完成后被加载;3. link标签是HTML元素,不存在兼容性问题,@import是css2.1才定义的语法规则,只有在IE5+的浏览器上才能被识别;4. 通过js操作DOM,插入link改变样式, DOM是基于文档的,无法使用@import的方式插入样.原创 2020-08-13 12:28:04 · 453 阅读 · 0 评论 -
element开发-Table表格多选表头添加文字
要实现在table多选框checkbox后添加文字,效果如下:<el-table-column type="selection"></el-table-column>/deep/ .el-table__header-wrapper .el-checkbox__input::after { content: '全选'; position: absolute; margin-left: 5px;}...原创 2020-07-02 22:39:45 · 3851 阅读 · 1 评论 -
div中的弹性元素分为指定行显示,且每个弹性元素不跨行完整展示
项目有如下需求:1.标签最多展示两行,超出部分以“...”显示;2. 每个标签内容不能被拆分,一行至少展示一个完整的标签,如果该标签的内容在一行内展示不了,则其内容以“...”展示;最终UI如下: <div class="report-card" v-for="item in articleList" :key="item.articleId"> &...原创 2020-02-16 09:06:28 · 270 阅读 · 0 评论 -
es5继承与es6继承
es5中的继承方式:1. 原型链继承 缺点:1. 创建实例时无法像父类构造函数传递参数; 2. 因为指定了原型,所以不能实现多继承; 3. 父类构造函数上的属性被所有子类共用,给原型上的属性赋值会改变其他子类的属性值;// es5const Parent = function (name, ag...原创 2020-02-02 15:39:51 · 218 阅读 · 0 评论 -
new的过程实现
《JavaScript模式》中提到,new的过程要有三步:• 创建一个空对象,将它的引用赋给 this,继承函数的原型。• 通过 this 将属性和方法添加至这个对象• 最后返回 this 指向的新对象,也就是实例(如果没有手动返回其他的对象)更准确的来说应该是:•以构造器的prototype属性为原型,创建新对象;•将this(也就是上一句中的新对象)和调用参数传给...原创 2020-02-02 10:44:03 · 780 阅读 · 0 评论 -
手写vue-router相关知识点
hash模式:location.hash: 获取url的hash值; window.onhashchange监听hash的改变history模式:location.pathname:获取路径; window.onpopstate监听history变化vue.use的用法:把你给它的东西调用一遍;如果你给它的是一个方法,那么它会直接执行这个方法,如果你给它的东西里有一个install属性...原创 2020-02-01 18:42:21 · 189 阅读 · 0 评论 -
CSS易混淆知识点
css选择器div span{color:bule;}:后代选择器, 作用于div中所有的span标签;div>span{color:bule;}:儿子选择器, 作用于div里的span标签div+span{color:orange;}:毗邻选择器,作用于紧挨着div下面的一个span标签;div~span{color:red}:兄弟选择器,作用于所有与div处于同一级的sp...原创 2020-02-01 16:37:50 · 447 阅读 · 1 评论 -
JS中的bind、call、apply方法
bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用call 和 apply 是为了动态改变 this 而出现的,当一个 object 没有某个方法(banana没有say方法),但是其他的有(apple有say方法),我们可以借助call或apply用其它对象的方法来操作。function fruits() {}fruits.prototype = { ...原创 2020-02-01 16:12:31 · 232 阅读 · 0 评论