一起来看烟花吧-CSDN博客

原创【计算机】单位制前缀的歧义-KB、kb、MB混用

单位制前缀的歧义

2023-03-05 16:55:04 1236

原创 [CSS] vertical-align属性的不同效果

line-boxes模型参考：张鑫旭博客行内级元素（包括display属性为inline和inline-block的元素）会相互挨着排成行。如果一行排不下，就会在下方再建一行。每一行的内容都会被装在一个**行盒子(line-boxes)**中，内容的高度不同，行盒子的高度也不同。在行盒子内部，可以通过vertical-align来对齐个别元素。line-boxes行盒子（line boxes）: 概念如上所示。行盒子的高度是该行内各个元素在垂直方向上对齐完之后撑开的最大高度。行内盒子（inlin

2022-04-28 22:23:15 609

原创 [CSS] CSS元素定位

元素定位定位就是将指定元素放到页面的任意位置。通过定位可以任意摆放元素，比浮动强大。可以通过position来设置。可以通过position来设置可选值static默认值，元素没有开启定位ralative开启元素相对定位absolute开启元素绝对定位fixed开启元素固定地位（固定定位也是绝对定位的一种）relative通过position: relative;开启相对定位开启后，可以通过left，right，top，bottom来设置元素的偏移量，left表示元素相对于其定位位置的

2022-04-14 17:39:42 4157

原创 [Vue脚手架项目] 通过ProvidePlugin实现loadash的全局按需导入

项目背景vue脚手架项目,vue-cli4需求需要用到lodash中的一些方法，如cloneDeep函数，所以适合按需导入而且在项目的多个文件中都会用到这个方法，所以希望能全局导入，而不是在每个用到的模块中去引入。方案step1: 通过npm下载loadash包step2：新建src/plugins/lodash.js文件，来引入需要的函数。import { cloneDeep, merge } from 'lodash'export { cloneDeep, merge,}

2021-11-24 20:33:18 746

原创 [JavaScript] 轮播图利用原生js的setTimeout结合CSS3的过渡transition实现轮播图的无缝滚动

效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .content { width: 4

2021-07-26 23:24:58 1365 7

原创 [Vue] 父组件明明按照正确的绑定方式更新了传递给子组件的prop属性子组件却没有及时更新。解决方案：key值 nextTick watch监听。

prop介绍prop是单向数据流，父组件传递给子组件的数据发生改变，而子组件的页面中引用了该prop，那么按理说子组件会重新渲染，将最新的prop渲染到页面上。能正常更新的案例在父组件中启动定时器，每隔1s对状态数据parentNum进行加一操作。父组件中引用子组件时将parentNum作为属性传入。下面的例子实现的效果是子组件每隔一秒都会更新。从0开始每隔一秒加1并更新在页面上。<template> <div class="parentC

2021-07-20 22:42:44 4892 1

原创 [JavaScript] 原生js实现图片懒加载（并且使用节流来限制频率）

效果使用原生js实现图片懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html, body{ padding: 0; margin: 0; width: 100%;

2021-07-19 20:57:29 438 4

原创【JavaScript】 JavaScript标识符重名问题-形参与变量同名问题详解

文章目录形参和变量同名时形参和函数名时形参和arguments同名时参考形参和变量同名时预处理阶段会处理形参，变量声明提前、函数声明提前。主要是一个预处理的顺序。后处理的可能会覆盖先处理的结果。根据测试案例得出处理顺序时：变量声明提前、形参赋值、函数声明提前。所以如果同时有函数和形参同名的化，标识符指的是函数声明。感觉这样理解挺好的。function fn(a){ alert(a); // hello var a; alert(a); // hello}fn('hel

2021-07-10 22:40:03 1243 3

原创 [ES6]Symbol Iterator Generator Async使用小结

async函数简介ES2017 标准引入了 async 函数，使得异步操作变得更加方便。定义一个async函数async function foo() { await 异步操作; await 异步操作；}async关键字表示后面的这个函数中有异步操作。await关键字等待后面的操作返回结果后再继续往下执行。使用promise来处理异步操作function test1() { return new Promise(function (resolve, reject) {

2021-06-06 20:44:53 367

原创 [CSS] 同一个BFC下的垂直相邻外边距的重叠问题及其解决方案

目录标题同一个BFC下的垂直相邻外边距会发生重叠重叠情况举例兄弟元素之间的垂直方向的相邻外边距重叠父子元素之间的垂直方向的相邻外边距重叠解决外边距重叠问题父子元素之间的垂直方向的相邻外边距重叠兄弟元素之间的垂直方向的相邻外边距重叠设计一个css类可以同时解决高度塌陷（子元素浮动导致）和父子元素垂直相邻外边距重叠问题同一个BFC下的垂直相邻外边距会发生重叠相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直外边距相邻时，它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。

2021-04-18 22:24:37 772

原创 [CSS] 什么是元素的BFC属性，如何应用BFC的特性

目录标题什么是BFC如何开启元素的BFC属性BFC的特性和应用同一个BFC下的垂直相邻外边距会发生重叠通过开启BFC可以避免垂直外边距的重叠的问题开启了BFC的元素可以包含浮动的元素开启BFC的元素不会被浮动的元素覆盖什么是BFC根据w3c的标准，在页面中元素都含有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭。默认是关闭。Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区

2021-04-18 21:52:31 737

原创 [Vue源码] 图解Vue源码 DOM-diff算法中的子节点更新策略

介绍Vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作DOM,而操作真实DOM非常耗费性能。Vue通过JS模拟出一个称为虚拟DOM节点来代表一个真实的DOM节点。当数据发生变化时，我们对比变化前后的虚拟DOM节点，通过DOM-Diff算法计算出需要更新的地方，然后去更新需要更新的视图。本文主要介绍DOM-diff算法中的子节点更新策略。首先看下面的流程图的位置A，当我们发现新旧的虚拟DOM节点是同一个节点时(key值相同)，我们会对这两个节点进行精细化比较。然后进入

2021-04-15 22:01:17 724

原创 [JavaScript] 利用正则表达式将浮点数的整数部分每三位添加一个逗号，如1234567.12转换为1,234,567.12

String.prototype.repace(param1, param2)方法可以替换字符串中的一部分内容为指定的内容。第一个参数是原字符串中将要被替换的内容，可以是字符串，也可以是正则匹配，如果是字符串的话，只能替换一个地方；如果是正则表达式并且开启了全局标志的话可以替换所有匹配到的地方。第二个参数是要替换成的内容，可以是字符串，也可以是回调函数。接下来看一下题目’1234567.12’转换为’1,234,567.12’其实并没有将原字符串的某些内容替换成逗号，而是在一些位置插入了一个逗号。

2021-04-15 20:01:17 653

原创 [JavaScript] Object常用方法小结 for..in和Object.keys的区别

目录标题IntroductionObject.definePropertyObject.definePropertiesObject.prototype.hasOwnPropertyObject.create()Object.assignObject.getOwnPropertyDescriptorObject.getPrototypeOfObject.prototype.isPrototypeOf属性值 in 对象in操作符和Object.prototype.hasOwnProperty的区别for...

2021-04-13 17:50:22 655

原创 CSS伪元素利用伪元素为input输入框添加图标伪元素before的垂直居中

目录标题伪类和伪元素封装一个有前缀和后缀的input输入框总结参考伪类和伪元素伪类专门用来表示元素的一种特殊的状态。比如：访问过的链接，普通的链接，获取焦点文本框伪元素表示元素中的一些特殊的位置。比如::before表示元素最前面的部分CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。在CSS3中，通过::创建伪元素，通过:选中伪类。浏览器也接收将::before写做:before封

2021-01-29 21:27:35 8169

原创 [CSS] CSS包含块包含块是如何影响元素的margin padding width height百分比属性值的设置的

这里写目录标题CSS样式中的包含块确定一个元素的包含块position属性确定包含块包含块的影响举例非绝对定位元素的包含块例1-1：包含块例1-2：包含块没有设置宽度例1-3：包含块没有设置高度例1-4：包含块没有设置高度但被子元素撑高例1-5：包含块必然是块元素绝对定位元素（absolute）的包含块例2-1：absolute定位的元素的包含块例2-2：absolute定位元素的包含块例2-3：包含块没有设置宽度例2-4：包含块没有设置高度例2-5：包含块没有设置高度例2-6：包含块没有设置高度但被子元素

2021-01-29 21:17:09 454

原创 Vue组件通信-在父组件中触发子组件中的函数在子组件中将函数执行结果返回给父组件

在父组件中触发子组件中的函数，子组件将函数执行的结果返回给父组件ref参考官网：https://cn.vuejs.org/v2/api/#refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向子组件实例。<p ref="p">hello</p>

2020-12-12 17:46:12 1140

原创 Eslint、Prettier搭配使用

前提需要安装了node.js初始化项目npm init -y在vscode扩展商店中安装eslint安装完成后，在vscode的settings.json中进行配置。{ "eslint.enable": true, // eslint生效 "eslint.options": { // 执行eslint命令的时候有效 "extensions": [ ".js", ".vue", ".ts

2020-12-11 17:51:09 6728

原创二次封装elementUI的时间选择器，可以选择以日月年为单位

目录标题elementUI封装的时间选择器二次封装成一个组件效果如下子组件全局注册自定义组件父组件中使用二次封装的时间选择器通信方式参考elementUI封装的时间选择器element-UI的时间选择器如下图所示，通过type属性可以设置日期选择器的时间单位，可以以日、周、月、年为单位。这里二次封装时间选择器，让一个时间选择器可以选择以日，月，年为单位。<div class="container"> <div class="block"> <span c

2020-12-08 10:43:59 1613

原创 Element-UI表单校验注意规则，表单嵌套时的校验(form中嵌套form)

表单校验的规范Element-UI的表单校验如果不按照官网官方写，可能会出现很多校验怪异的问题，特总结如下。el-form标签的rules属性上绑定整个表单的校验规则rules除了可以添加成el-form标签的属性外，还可以单独的为el-form-item添加rules，单独的会覆盖整体的el-form-item的prop属性作用：根据el-form上绑定的rules属性和这个prop属性来找到这一项的检验规则,所以prop属性的值必须在rules属性中找到校验规则后根据el-form的mod

2020-12-01 16:15:01 6789 2

原创 css水平居中方案垂直居中方案块级/内联元素居中方案

水平居中对于块级元素⭐可以设置左右margin为auto<style>.outer { height: 100px; background-color: yellowgreen;}.inner { width: 100px; height: 50px; margin-left: auto;/**/ margin-right: auto;/**/ background-color: red;}</style>&lt

2020-11-14 11:24:13 243

原创 [JavaScript] 执行上下文(执行环境) 变量对象作用域链闭包 this 小结

mdn对闭包的介绍一个函数和对其周围状态（词法环境）的引用捆绑在一起，这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。JavaScript中的函数会形成了闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。看下面的例子，当fn2被

2020-11-14 11:17:50 298

原创 element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题高宽设置)

element-ui的官网页面使用的这个滚动条，但是在官网文档中没有介绍这个组件。在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。在项目中使用这个组件时由于各层的样式没有设置好，可能会显示出原生的滚动条，特此记录。搭建脚手架项目，安装element-ui插件按需引入需要的组件import Vue from 'vue'import { Scrollbar} from 'element-ui'Vue.use(Scrollbar)使用&lt

2020-10-20 20:59:31 15648 3

原创 Vuex状态管理-mapState的基本用法详细介绍

使用vuex集中管理状态Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化// store.js/*vuex的核心管理对象模块:store */import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 状态对象const state = { // 初始化状态这里放置的状态可以被多个组件共享 count: 1,

2020-09-30 11:54:02 44181 14

原创 DOM元素尺寸位置计算总结clientWidth&offsetWidth&offsetParent&offsetLeft&scrollWidth&scrollLeft

CSS盒模型CSS中的 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。链接：https://blog.csdn.net/chenjie9230/article/details/108718480content-box:包括内容区padding-box:包括内容区+内边距border-box:包括内容区+内边距+边框浏览器内核浏览器内核Google ChromeWebkit 俗称为Chromium内核或Chrome内核Internet E

2020-09-23 21:18:39 764

原创 [CSS] 什么是CSS盒模型块级盒子和内联盒子的区别

文章目录什么是盒子模型盒子的四个组成部分内容区边框内边距注意：当元素的宽度的值被设置为auto时外边距⭐垂直外边距的重叠问题例1例2例3例4例5⭐解决父子元素的外边距重叠问题块级盒子和内联盒子的行为表现区别外部显示类型和内部显示类型内联元素变块元素display属性什么是CSS 盒模型盒模型的各个部分标准盒模型css还有一个替代盒模型(IE盒模型)。参考什么是盒子模型CSS处理网页时,它认为每个元素都包含在个不可见的盒子里。为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相

2020-09-21 20:44:55 1597 2

原创回调函数异步回调函数同步回调函数

什么是回调函数function test (x, y, cb) { console.log(x+y); cb();}test(1,2, function () {alert(1)}); // 我们在调用test函数的时候传递了一个匿名函数作为实参/***********也可以这样写***************/function test (x, y, cb) { console.log(x+y); cb();}function test2 () {

2020-08-21 09:48:20 410

原创 [Javascript] 正则表达式匹配的常用方法总结

正则正则表达式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。正则表达式对象属性lastIndex下一次匹配开始的位置ignoreCase是否使用了 “i” 标记使正则匹配忽略大小写global是否使用了 “g” 标记来进行全局的匹配.multiline是否使用了 “m” 标记使正则工作在多行模式（也就是，^ 和 $ 可以匹配字符串中每一行的开始和结束（行

2020-07-16 09:11:32 9045 2

原创 [ES6] Promise.then()使用小结

这里写自定义目录标题promise简介promise容器中的执行顺序resolve函数和reject函数中的参数如果回调函数中传递一个正常的值如果回调函数中传递一个promise实例对象Promise.prototype.then()resolve和reject回调函数的中的return返回值如果返回值为一个参数如果返回值为一个新的promise实例resolve和reject回调函数中抛出异常Promise.prototype.catch()参考文章promise简介为了解决回调地狱嵌套，在EcmaS

2020-07-04 19:41:38 33138 11

一起来看烟花吧的博客