![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 56
请叫我cqq
在此记录我的学习之路!!!
展开
-
一篇搞懂BFC
BFC(Block Formatting Context) 块级-格式-上下文,属于定位方案中的普通流。BFC 是 W3C CSS2.1 规范中的一个概念。引用W3C的官方解释:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context 提供了一个环境,HTML 在这个环境中按照一定的规则进行布局。原创 2022-11-14 19:39:15 · 582 阅读 · 1 评论 -
WebSocket 原理
一、 什么是 WebSocketWebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。WebSocket 本质上一种计算机网络应用层的协议,用来弥补 http 协议在持久通信能力上的不足。原创 2022-03-28 18:31:40 · 1617 阅读 · 0 评论 -
JavaScipt小技巧
前言JavaScript在越来越多的地方被使用,而且它还时不时的更新。既然更新了,就会有新的功能和新的方法来实现某些编程目标。其中一些功能可能需要使用polyfills或其他库(如Babel),以确保你的所有代码在最老的浏览器上也能如期工作。让我们来回顾一下几个有用的功能。展开运算符展开运算符太有用了,不提也罢。它允许对数组或字符串等迭代符进行扩展。这对于添加新的值是非常有用的。let arr = [1, 2, 3, 4, 5]let newArr = […arr, 6, 7]// ne原创 2022-03-25 17:37:08 · 155 阅读 · 0 评论 -
vue中动态绑定class和style
自己做个小笔记 动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div> 动态class数组:<div :class="['is-active', isRed ? 'red' : '' ]"></div> 动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div> 动态sty原创 2021-12-21 09:52:37 · 259 阅读 · 0 评论 -
js中的隐式转换与强制转换
js中的隐式转换与强制转换JavaScript 是一种动态类型的语言,在执行运算操作的过程中,有时需要转换操作数的类型。在 JavaScript 中,数据类型的转换有:隐式类型转换和强制类型转换(也叫显式类型转换)两种方式。1. 隐式类型转换隐式类型转换会自动根据运算符进行类型转换。隐式类型转换的情况主要有以下几种。如果表达式中同时存在字符串类型和数字类型的操作数,而运算符使用加号+,此时 JavaScript 会自动将数字转换成字符串。例如: alert("姑娘今年" + 18); //原创 2021-11-27 10:58:07 · 2136 阅读 · 0 评论 -
el-upload上传文件时,不触发onchange方法
el-upload上传文件时,只能上传一个文件,将limit设为1,结果出现第二次点击上传时不触发on-change方法,解决方法:在HTML中: <el-upload action="" ref="uploadFile" style="display: inline-block;" :show-file-list="false" :on-change="ChangeFile"原创 2021-11-19 16:34:03 · 7239 阅读 · 1 评论 -
JavaScript实用代码
一、日期处理检查日期是否有效该方法用于检测给出的日期是否有效:const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00"); // true计算两个日期之间的间隔该方法用于计算两个日期之间的间隔时间:const dayDif = (date1, date2) => Math.ceil(Math.abs(原创 2021-11-04 10:49:51 · 712 阅读 · 0 评论 -
JavaScript 中的Falsy和Truthy
Falsyfalsy 值 (虚值) 是在 Boolean 上下文中认定为 false 的值。在 JavaScript 中只有 8 个 falsy 值。这意味着当 JavaScript 期望一个布尔值,并被给与下面值中的一个时,它总是会被当做 false。falsefalse 关键字0数值 zero-0数值 负 zero0n当 BigInt 作为布尔值使用时, 遵从其作为数值的规则. 0n 是 falsy 值.“”, ‘’, ``这是一个空字符串 (字原创 2021-11-04 10:10:35 · 391 阅读 · 0 评论 -
js中数组和对象常用方法介绍
1.定时器的使用定时器:延时执行;JS:单线程执行 setTimeout("方法名或方法","延时") setTimeout(()=>{},1000)问题:定时器内执行内容会在延时时间过后执行方法,要想达到页面及时加载数据而不是定时器延时过后才进行第一遍数据的加载解决:定时器内执行代码块外置,定时器使用前先执行一遍注意:(1) 使用定时器时要注意及时对定时器的清除(2) 上述代码中,定时器使用先用that来指向this的原因是:因为定时器方法是定义在window下的,所以setT原创 2021-10-20 11:28:46 · 333 阅读 · 0 评论 -
vue自定义指令
vue自定义指令在vue中我们常会使用到一些指令,例如 v-model 实现数据的双向绑定,使用 v-if 进行判断,还有 v-for、v-bind等等,这些都是vue框架自带的指令,简单便捷,具体使用请访问 Vue指令的使用方法。通常情况下我们使用vue自带指令已经足够,但是在某些情况下自定义指令不能够满足我们的需求,我们就可以自定义指令,以 “使input输入框自动获取焦点” 为例,方法如下:1、局部自定义指令<template> <div class="content>转载 2021-10-14 17:25:40 · 170 阅读 · 0 评论 -
去除参数对象中的空值
// 去除参数中的空值function delUndefined(ob) { for (let e in ob) { if (typeof(ob[e]) === 'undefined' || ob[e] === null||ob[e] === '') { delete ob[e]; } else if (ob[e].constructor === Object) { if (Object.keys(ob[e]).length原创 2021-10-09 11:21:38 · 353 阅读 · 0 评论 -
js深浅拷贝
前置知识-- js的一般数据类型的存储 String Number Boolean Null Undefined-- js的引用类型的数据存储 Object1. 赋值当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。 var obj = {} var person = { name:'张三'...原创 2021-05-12 22:54:16 · 57 阅读 · 0 评论 -
vscode 自动生成vue模板
新建一个vue页面,需要自己手动创建一个vue的页面,自己写起来十分不方面,如何快捷生成一个vue模板呢1.打开vscode,在文件--》首选项--》用户片段中找到vue.json2.将vue.json中的内容替换成下面的内容{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " ", " </div>", "</t原创 2021-04-02 09:43:44 · 520 阅读 · 1 评论 -
WebSocket的使用
<template> <div class="test"> </div></template><script> export default { name : 'test', data() { return { websock: null, } }, created() { this.initWebSocket(); }, de.原创 2021-03-22 14:50:46 · 97 阅读 · 0 评论 -
vue+element 表单上传进度条
公司项目中用到了若依的框架,但是我们表单提交的时候需要展示提交进度(因为有大文件上传)为了解决这个问题,找了好多的资料,终于找到了最简单的方法在确认提交的方法中// 获取文件上传的进度let config = { onUploadProgress: progressEvent => { let complete = parseInt(progressEvent.loaded / progressEvent.total * 100) this.fi原创 2021-03-17 15:17:10 · 1412 阅读 · 0 评论 -
vue+element 表单提交
工作中我们经常会遇到表单提交,element中默认的文件上传是及时上传,很不方便,所以我们需要让上传的文件与表单的内容一起提交在表单浮层中<!-- 用户导入对话框 --><el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" :limit="1" accept="原创 2021-03-17 15:04:23 · 1168 阅读 · 0 评论 -
前端性能优化
1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP :这是一个 HTTP 请求,请求的文件大小为 28.4KB。名词解释: Queueing: 在请求队列中的时间。 Stalled: 从TCP 连接建立完成,到真正可以传输数据之间的时间差,此时间包括代理协商时间。 Proxy negotia.原创 2021-03-16 14:20:22 · 373 阅读 · 0 评论