自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(73)
  • 收藏
  • 关注

原创 如何让元素垂直居中?

设置容器的垂直和水平方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中。,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。来调整元素的中心点到页面的中心。来调整元素的中心点到页面的中心。定位到页面的中心,然后再通过。定位到页面的中心,然后再通过。margin设置为auto。,先将元素的左上角通过。来实现元素的水平居中。,先将元素的左上角通过。...

2022-08-01 15:38:46 1483 1

原创 tab页案例(Vue组件传值)

/*coderwhy老师Vue3+TS学习笔记*/

2022-07-05 14:01:28 589

原创 2022/7/4前端开发面经

一、选择题1.下述有关css 属性position的属性值的描述,说法错误的是?A. static:没有定位,元素出现在正常的流中B. fixed:生成绝对定位的元素,相对于父定位元素进行C. relative:生成相对定位的元素,相对于元素本身正常位置进行定位。D. absolute:生成绝对定位的元素,相对于static定位以外的第一个祖先元素进行定位。2.下面有关浏览器中使用js跨域获取数据的描述,说法错误的是?A.域名、端口相同,协议不同,属于相同的域B. js可以使用jsonp进行跨域C.通过修改

2022-07-04 18:17:22 1411 1

原创 前端面经1

双向绑定包括两个方面:1.视图变化更新数据;2.数据变化更新视图。对于视图变化更新数据,可以使用事件监听,比如input标签监听‘input’事件就可以实现。(1)在Vue2中是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter;在数据变动时发布消息给订阅者,触发相应的监听回调。设置一个set函数,当数据发生改变就会触发这个函数,所以我们只需要将一些需要更新的方法放在这个set函数里面就可以实现数据变化更新视图了。(2)在v

2022-06-30 17:13:48 290

原创 案例:购物车(Vue基础)

案例:购物车(Vue基础)

2022-06-29 12:09:29 474

原创 计算属性 vs methods

计算属性 vs methods

2022-06-28 16:58:11 117

原创 v-show和v-if的区别

v-show和v-if的区别

2022-06-28 14:20:42 78

原创 key的作用

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

2022-06-28 14:16:52 390

原创 methods方法绑定this

不使用箭头函数的情况下,this指向的是什么? 1. 在methods中要使用data返回对象中的数据:

2022-06-27 14:03:56 154

原创 牛客JS题库

请补全JavaScript代码,要求在页面上渲染出一个直角三角形,三角形换行要求使用"br"实现。三角形如下:******2.文件扩展名请补全JavaScript代码,要求以字符串的形式返回文件名扩展名,文件名参数为"filename"。3.千分位 4.单向监听请补全JavaScript代码,要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。注意:必须使用DOM0级标准事件(onchange)5.创建数组请补全Jav

2022-06-26 15:39:33 843

原创 字符串得方法

1.str.concat():用于将一个或多个字符串拼接起来,返回拼接后的新字符串;2.str.slice():此方法用来提取一个字符串,并返回一个新的字符串;3.str.substring():此方法和slice方法功能相同都是提取一个字符串,并返回提取到的字符串;4.str.trim():删除一个字符串两端的空白字符,并返回删除后的新字符串,不会改变原有字符串;5.str.toLowerCase():此方法没有参数,会将调用该方法的字符串值转为小写形式,并返回;6.str.toUpperCase():此

2022-06-15 15:10:39 79

原创 数组的方法

1.isArrary():判断参数是不是数组;2.toString():把数组转成字符串;3.valueOf():返回数组本身;4.数组名.push():在数组末尾添加元素;5.数组名.unshift():在数组开头添加元素;6.数组名.pop():删除数组的值,并返回删除的值;7.数组名.shift():删除数组的值,并返回删除的值;8.数组名.reverse(): 翻转数组;9.数组名.join(‘分割符号’):以所用的符号对数组进行拼接方法;10.数组名.sort()----排序;11.数组名.con

2022-06-14 17:29:24 84

原创 前端手撕代码

目录1.数组去重1.1 indexOf1.2 ES6 Set2.快速排序2.1 冒泡排序2.2 sort3. 防抖和节流4.浅拷贝和深拷贝1.2 ES6 Set2. 快速排序2.1 冒泡排序2.2 sort升序x-y降序y-x3. 防抖和节流4. 浅拷贝和深拷贝5. 事件委托6. instanceofinstanceof:左边是对象,右边是类;7. call、apply、bind他们每个都有自己的特

2022-06-14 10:04:49 213

原创 constructor()构造函数

创建实例:

2022-06-13 10:08:46 2070

原创 同步与异步

概念:同步就是后一个任务等待前一个任务执行完毕之后,再执行,执行顺序和任务的排列顺序一致。概念:异步是非阻塞的,异步逻辑与主逻辑相互独立,主逻辑不需要等待异步逻辑完成,而是可以立刻继续下去。2.2.2 promise异步编程的一种解决方案,比传统的解决方案----回调函数和事件----更合理且强大。有三个状态:当promise状态发生改变,就会触发then()里的响应函数处理后续步骤。catch就是用来捕获异常的promise.all可以将多个promise实例包装成一个新的Promi

2022-06-12 15:50:44 81

原创 使用Svg绘制图形

svg绘制的图形是矢量图形,放大依旧不会模糊,;与css相似;canvas绘制图形是通过控制dom。<body> <svg width="800" height="800"> <!-- 1. 绘制矩形 --> <rect width='50' height='50' style="fill:red;" /> <!-- 2. 绘制线段 --> <line x1="100" y1="100"

2022-05-08 14:58:37 1001

原创 案例:使用Canvas绘制图形

1. 编写canvas标签,指定宽高;2. 获取canvas DOM对象;3. 获取canvas对象;4. 设置绘图属性;5. 调用绘图API.<body> <canvas id="canvas" width="800" height="800"></canvas> <script> const canvas = document.getElementById('canvas'); // getContext()

2022-05-08 14:35:57 873 1

原创 Ajax知识

第一章 Ajax基础1. Ajax基础1.1 传统网站中存在的问题 网速慢的情况下,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间 1.2 Ajax概念 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。 1.3 Ajax 的应用场景 页面上拉加载更多 数据列表数据无刷新 分页表单项离开焦点

2022-05-07 17:47:02 212

原创 GET和POST的区别

get是从指定的资源请求数据,post是向指定的资源提交要处理的数据 get请求可以被缓存,post请求不会被缓存 get请求传输的数据有长度限制,一般为2048字符,post请求传输的数据没有大小限制 get请求的数据一般追加在URL的末尾,post请求的数据在http请求体中 一般不使用GET请求发送如密码这样的敏感信息。get请求比post请求更安全...

2022-05-07 17:37:48 142

原创 TCP流量控制、拥塞控制

流量控制就是让发送方的发送速率不要太快,要让接收方来得及接收; 接收方会通过接收窗口(rwnd)告诉发送方,它还能接收多少字节;也就是说,发送方的发送窗口不能超过接收方给出的接收窗口的数值; 特殊情况:接收方给发送方发送零窗口的报文段,过了一会缓存又有了一些存储空间。于是接收方向放送方发送了 rwnd=400 的报文段。然而这个报文段在传送过程中丢失了。放送方一直等待接收方发送非零窗口的通知,而接收方也一直等待发送方发送的数据。如果没有其他措施,这种互相等待的死锁局面将一直延续下去;..

2022-05-07 17:29:51 474

原创 TCP和UDP

TCP是面向连接的; UDP是无连接的,即发送数据前不需要先建立链接。 TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达; UDP尽最大努力交付,即不保证可靠交付。 并且因为tcp可靠,面向连接,不会丢失数据因此适合大数据量的交换。 TCP是面向字节流,UDP面向报文,并且网络出现拥塞不会使得发送速率降低(因此会出现丢包,对实时的应用比如IP电话和视频会议等)。 TCP只能是1对1的; UDP支持1对1,1对多。 TCP..

2022-05-07 17:28:07 451

原创 Vue组件传值

1. 父组件向子组件传值① 子组件在props中创建一个属性,用以接收父组件传过来的数据;② 父组件中注册子组件。通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据传递到子组件的内部,供子组件使用;③ 在子组件标签中添加子组件props中创建的属性;④ 把需要传给子组件的值赋给该属性。注意:① prop 是子组件用来接受父组件传递过来的数据的一个自定义属性;②父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 “prop”;.

2022-05-07 17:18:47 1079 1

原创 js的垃圾回收机制

1. 定义指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。像 C 这样的编程语言,具有低级内存管理原语,开发人员使用这些原语显式地对操作系统的内存进行分配和释放。而 JavaScript 在创建对象(对象、字符串等)时会为它们分配内存,不再使用对时会“自动”释放内存,这个过程称为垃圾收集。2. 内存生命周期中的每一个阶段:分配内存 — 内存是由操作系统分配的,它允许您的程序使用它。在低级语言(例如 C 语言)中,这是一个开发人员需要自己处理的显式执行的操作。然而,在高级语.

2022-05-07 14:55:20 155

原创 懒加载、预加载

1. 概念懒加载:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。预加载:指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间,提高用户的体验。2. 应用它适用于图片很多,页面很长的电商网站的场景。3. 原理懒加载的实现原理是:将页面上图片的 src 属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面

2022-05-07 14:52:32 347

原创 Js延迟加载的方式

1. 作用js 的加载、解析和执行会阻塞页面的渲染过程,因此我们希望 js 脚本能够尽可能的延迟加载,提高页面的渲染速度。2. 方式(1)将 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行。(2) 给 js 脚本添加 defer 属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样。(3)给 js 脚本添.

2022-05-07 14:36:59 2285

原创 什么操作会造成内存泄漏?

1. 使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收。2. 设置了 setInterval 定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收。3. 获取一个 DOM 元素的引用,而后面这个元素被删除,由于我们一直保留了对这个元素的引用,所以它也无法被回收。4. 不合理的使用闭包,从而导致某些变量一直被留在内存当中。...

2022-05-07 14:34:37 243

原创 作用域链、原型链

1. 作用域链作用保证对执行环境有权访问的所有变量和函数的有序访问,通过作用域链,我们可以访问到外层环境的变量和函数。2.作用域链概念作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象(也就是全局对象)始终是作用域链的最后一个对象。当我们查找一个变量时,如果当前执行环境中没有找到,我们可以沿着作用域链向后查找。3.原型链当访问一个对象的属性时, 会在

2022-05-07 14:15:24 474

原创 堆和栈的理解

堆和栈的概念存在于数据结构中和操作系统内存中。在数据结构中,栈中数据的存取方式为先进后出。而堆是一个优先队列,是按优先级来进行排序的,优先级可以按照大小来规定。完全二叉树是堆的一种实现方式。在操作系统中,内存被分为栈区和堆区。栈区内存由编译器自动分配释放,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈。堆区内存一般由程序员分配释放,若程序员不释放,程序结束时可能由垃圾回收机制回收。...

2022-05-06 10:04:32 2340 1

原创 自执行函数

1. 自执行函数(1)声明一个匿名函数(2)马上调用这个匿名函数。2. 作用创建一个独立的作用域。好处:防止变量弥散到全局,以免各种js库冲突。隔离作用域避免污染,或者截断作用域链,避免闭包造成引用变量无法释放。利用立即执行特性,返回需要的业务函数或对象,避免每次通过条件判断来处理3. 场景一般用于框架、插件等场景。...

2022-05-06 10:02:17 328

原创 事件流、事件冒泡、事件捕获

1. 事件流从页面中接收事件的顺序。也就是说当一个事件产生时,这个事件的传播过程,就是事件流。IE中的事件流叫事件冒泡;2. 事件冒泡事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样3. 事件捕获事件捕获是不太具体的元素应该更早接受到

2022-05-06 10:00:32 261

原创 面向对象的理解

万物皆对象,把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法;也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.面向对象具有封装性,继承性,多态性。封装:隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而继承和实现接口以及运行时的类型绑定机制 所产生的多态,使

2022-05-06 09:58:27 93

原创 怎么实现异步编程?

1. 回调函数优点:简单、容易理解和部署;缺点:不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。2. 事件监听优点:可以绑定多个事件,每个事件可以指定多个回调函数,而且可以“去耦合”(Decoupling),有利于实现模块化;缺点:整个程序都要变成事件驱动型,运行流程会变得很不清晰。3. 发布/订阅性质与“事件监听”类似,但是明显优于后者。4. Promises对象是CommonJS工作组提出的一种规范,目

2022-05-06 09:56:40 65

原创 null 和 undefined 的区别

null是被赋值的,表示啥都没有 undefined通常是一个变量已经被声明,但是没有赋值 null和undefined都是否定值 null和undefined都是原始值 typeofnull=object null!==undefined但是null==undefined1. nullnull是空或者不存在的值 null一定是被赋值的 像这样,我们给变量a赋值nulllet a = null;console.log(a);// null2...

2022-05-06 09:53:11 2785

原创 CSS媒体查询

假设你现在正用一台显示设备,同时你也想把它投影到屏幕上,或者打印出来,而显示设备、屏幕投影和打印等这些媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法。 当媒体查询为真时,相关的样式表或样式规则会按照正常的级联规则被应用。 当媒体查询返回假,标签上带有媒体查询的样式表仍将被下载(只不过不会被应用)。包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。...

2022-05-06 09:32:47 253

原创 CSS 预处理器、后处理器

1. CSS预处理器CSS预处理器定义了一种新的语言。其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件。预处理器例如:LESS、Sass,用来预编译Sass或less,增强了css代码的复用性,还有层级、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。2.CSS后处理器C

2022-05-06 09:31:00 842

原创 rem布局

优点:在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了,兼容性也非常的好。缺点:(1)在奇葩的设备上表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。(2)使用iframe引用也会出现问题。(3)rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚,还是为了看的更多的问题。...

2022-05-06 09:21:00 84

原创 css常见区别

1. width:100%会使元素box的宽度等于父元素的content box的宽度。2. width:auto会使元素撑满整个父元素,margin、border、padding、content区域会自动分配水平空间。

2022-05-06 09:19:12 186

原创 Vue的指令

什么是指令?什么是自定义属性 指令的本质就是自定义属性 指令的格式:以v-开始。1. v-cloak插值表达式存在的问题:“闪动”如何解决该问题:使用v-cloak指令 解决该问题的原理:先隐藏,替换好值之后再显示最终的值2. v-text 填充纯文本相比插值表达式更加简洁3. v-html 填充HTML片段存在安全问题 本网站内部数据可以使用,来自第三方的数据不可以用4. v-pre 填充原始信息显示原始信息,跳过编译过程(分析编译过程)5. v-once 只编.

2022-04-19 09:11:47 124

原创 Vue 生命周期

主要阶段 挂载(初始化相关属性) ① beforeCreate ② created ③ beforeMount ④ mounted 更新(元素或组件的变更操作) ① beforeUpdate ② updated 销毁(销毁相关属性) ① beforeDestroy ② destroyed Vue实例的产生过程 ① beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。...

2022-04-14 17:00:35 32735

原创 v-if与v-show的区别

v-show 本质就是标签display设置为none,控制隐藏 v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。 v-if 是动态的向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。 ...

2022-04-14 16:58:25 47

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除