- 博客(168)
- 收藏
- 关注
RSS订阅转载 CSS布局之网格布局
网格布局也称grid布局，利用grid布局可以很轻松的实现很多的网页布局，Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。上图这样的布局，就是 Grid 布局的拿手好戏。
2023-08-07 16:15:15
269
转载 数组的reduce方法
打印结果可以看到， reduce 就是对 arr 从左到右进行累加求和， 如果没有传入函数迭代的初始值， 初始值默认是数组第一位 ， prev 就是计算结束后的返回值。除了平时我们可以用它去求一个数组的和，又或者是乘积，我们还可以拿他去做很多很多的事情，比如 计算数组中每个元素出现的次数，数组去重，扁平数组等等。打印结果可以看到，我们传入函数迭代的初始值之后，也就是让 prev 从10开始累加，然后接着迭代累加 prev。要执行的函数，要执行的函数中也可以传入参数，如下。arr：被遍历的数组。
2022-09-09 16:37:20
208
转载 getBoundingClientRect() 与 offset
offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于 可视区窗口。原文链接：https://blog.csdn.net/itSeven7/article/details/78855223。Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。right 方向的值是基于 元素右侧边框到可视区左边的距离。bottom方向的值是基于 元素底部到可视区顶部的距离。..
2022-08-11 13:49:19
390
转载 2022年了，这些ES7-ES12的知识点你都掌握了嘛？
前言听说现在大家在工作中ES6语法都已经用的炉火纯青了，那ES7-ES12的新特性你现在都用上了嘛？很多的新特性在开发中还是很实用的，也解决了很多js存在的问题。自己熬夜爆肝一个周末,总结出了ES7-ES12的语法，希望对你能有一定的帮助。最后，了解真相，你才能获得真正的自由！ES2016(ES7)Array.prototype.includes()includes()方法用来判断一个数组是否包含一个指定的值，如果包含则返回true，否则返回false。语法arr.inclu...
2022-02-06 15:41:32
269
转载 Vue事件总线（EventBus）使用详细介绍
前言vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即 **EventBus**来通信。EventBus的简介EventBus又称为事件总线。在Vue中可以使用EventBus来作为...
2021-11-01 10:49:24
654
转载 html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）
1. 大家都知道，强制一行溢出显示省略号(...)的情况很简单overflow:hidden;//超出的隐藏text-overflow:ellipsis;//显示省略符号来代表被修剪的文本。white-space:nowrap;//不换行2. 但是如果要强制两行甚至多行的话，需要用到css3的知识点网上大多版本都是：overflow: hidden; // 超出的文本隐藏text-overflow: ellipsis; // 溢出用省略号显示display: -webkit-
2021-10-14 16:13:03
1573
转载 循环调用异步操作
最近遇到一道比较有趣的面试题，题目很简单但是涉及到了很多小的知识点，还蛮有意思的。一个普通的for循环输出i// 正常写一个for循环输出ifor (var i = 0; i < 5; i++) { console.log(i);}console.log(i);假设你是一个面试者，你说说这几行代码会输出什么？，你的内心活动会不会是“这特么不就是一个循环吗？面试官既然这么问老子（他还笑肯定不是好东西，肯定有陷阱），好好想一下，这好像和我看的那个闭包的题很像啊，这面试官是..
2021-10-12 09:44:07
518
转载 详解CSS3中:nth-child的用法
CSS3中:nth-child的实际用途：不适用低版本的IE浏览器！（1）:nth-child(n + 4)选取大于等于4的标签，其中"n"为整数，下同.demo01 li:nth-child(n+4){background:#090}（2）:nth-child(-n + 4)选取小于等于4的标签.demo01 li:nth-child(-n+4){background:#090}（3）:nth-child(2n)选取偶数标签，其中的2n也可以写
2021-09-10 11:15:34
1906
转载 mock.js的使用方法
在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。一.简单示例在这里我举的例子是在vue项目中如何使用mock.js。安装mockjsnpm install mockjs --save-dev 在项目中创建
2021-07-05 17:07:06
382
转载 2021-06-15css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是flex-basis，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，...
2021-06-15 14:01:05
155
转载 解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题
在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。如上图所示，现在表格下方是未出现水平滚动条的，处于表格宽度刚好够显示所有字段的临界值，固定列出现了高度变小的情况，导致显示不全。上图为检查元素找到的固定列的DOM元素，固定列的DOM元素是独立于表格body的，所有在开发代码中，给该列设置任何class或style是无法添加在固定列这个DOM元素上的。从这个DOM元素可以看
2021-05-28 11:14:32
2169
转载 Element UI VUE table表头与数据错位问题解决方案
问题分析：个人在做项目时，屏幕的大小以及滚动条（横向滚动条，竖向滚动条）的出现会导致标题描述的问题，经过查阅资料做出如下解决方案，供各位同仁参考1、CSS样式解决横向滚动条出现时错位问题请在Element-UI的 scss 文件中添加.el-table th.gutter{display: table-cell!important;}2、竖向滚动条出现时，出现错位请在 绑定数据后添加如下代码this.$nextTick(()=>{t...
2021-05-28 11:01:49
1089
转载 git restore 和 git restore --staged 的区别
git restoregit restore <file>表示将在工作空间但是不在暂存区的文件撤销更改示例：E:\JavaDev\template_workspace\zhw-free>git status On branch master Your branch is up to date with 'origi...
2021-05-25 09:20:12
462
转载 e.preventDefault()与e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡<table border='1'> <tr> <td><span>冒泡事件测试</span></td> <td><span>冒泡事件测试2</span></td> </tr></table>我们先看这段js代码：<script> $('ta...
2021-05-21 17:28:26
821
转载 vue-cli项目中.postcssrc.js
module.exports = { "plugins": { "postcss-import": {}, //用于@import导入css文件 "postcss-url": {}, //路径引入css文件或node_modules文件 "postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比 "postcss-write-svg": { utf8: false }, //用来处理移动端1px的解...
2021-05-20 15:18:22
716
转载 typeof与instanceof区别
typeof用于判断数据类型，返回值为6个字符串，分别为string、Boolean、number、function、object、undefined。 var a = [34,4,3,54], b = 34, c = 'adsfas', d = function(){console.log('我是函数')}, e = true, f = null, g; console.lo.
2021-05-19 17:09:01
3818
转载 git拉取远程分支并创建本地分支
一、查看远程分支使用如下git命令查看所有远程分支：git branch -r查看远程和本地所有分支：git branch -a查看本地分支：git branch在输出结果中，前面带*的是当前分支。二、拉取远程分支并创建本地分支方法一使用如下命令：git checkout -b 本地分支名x origin/远程分支名x使用该方式会在本地新建分支x，并自动切换到该本地分支x。采用此种方法建立的本地分支会和远程分支建立映射关系。方式二使用如下命令：g...
2021-05-18 16:27:20
135
转载 npm 使用注意
2.6.1 npm init使用 npm init 初始化一个空项目是一个好的习惯，即使你对 package.json 及其他属性非常熟悉，npm init 也是你开始写新的 Node.js 应用或模块的一个快捷的办法。npm init 有智能的默认选项，比如从根目录名称推断模块名称，通过 ~/.npmrc 读取你的信息，用你的 Git 设置来确定 repository 等等。2.6.2 npm installnpm install 是我们最常用的 npm 命令之一，因此我们需要好好了解下这个命
2021-05-18 09:08:49
142
转载 windows下nvm安装node之后npm命令找不到问题解决办法
主要关键解解决办法：===》》适用于所有东西的安装安装有关环境配置类的软件及其他，一般情况下切记不要安装到c盘programfiles下，否则会出现各种问题的报错！！！切记！nvm安装步骤：1、下载nvm-setup安装包2、打开安装包，选择nvm的存放路径，以及nodejs的存放路径，这里切记不要选择到c:/program files,这里的两个路径是为了自动在系统中添加环境变量的路径；3、打开nvm文件夹下的settings.txt文件，在最后添加以下代码：node_mi.
2021-05-12 10:01:53
1931
转载 Windows下完全卸载node.js并安装node.js的多版本管理工具nvm-windows
前言由于高版本的node.js导致gulp执行build命令失败，我需要在Windows下卸载掉已有的node.js并安装一个多版本管理工具nvm-windows，方便切换不同版本的node.js。nvm是Linux下常用的一个node.js多版本管理工具，但是nvm不能在Windows下使用，在GitHub上有个项目叫nvm-windows，可以让我们在Windows下对node.js进行多版本管理。nvm-windows的下载地址：https://github.com/coreybutler/
2021-05-12 09:53:37
328
转载 nrm安装与配置
1.nrmnrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在npm源间切换2.安装nrm在命令行执行命令，npm install -g nrm，全局安装nrm。3.使用执行命令nrm ls查看可选的源。nrm ls ...
2021-05-11 15:37:52
126
转载 微前端——qiankun（乾坤）实例
一、什么是微前端微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！二、为什么使用微前端不同团队间开发同一个应用技术栈不同希望每个团队都可以独立开发，独立部署项目中还需要老的应用代码我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。三、qiankun框架**文档地址：**https://qianku
2021-05-11 15:06:35
1137
转载 关于Vue 项目中配置全局属性 process.env 的配置
关于Vue中全局属性的配置，在此记录一下。1.env.development(我不是个连接)文件，这是开发环境下的配置文件。2.env.production(我仍然不是个连接)文件，这是生产环境下的配置文件。3.env(你猜的不错，我仍然不是个链接)文件，这是一些全局的属性。注意以上文件：根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说 不要乱起名，也无需专门控制加载哪个文件,定义全局变量必须以VUE_APP开头.env.developm...
2021-05-10 09:35:07
1346
转载 nvm安装和配置、以及常见命令
安装步骤nvm安装nvm下载nvm https://github.com/coreybutler/nvm-windows/releases ，从中选一个版本下载解压并且安装1、windows用户选择直接安装的nvm-setup.zip版本下载安装即可2、选择nvm安装目录3、选择nodejs目录（安装目录最好没有空格）4、安装成功后cmd输入nvm查看安装是否成功6、此时npm配置nvm在nvm安装目录，找到 setting.txt用记事本打开添加如下两行node_mirr
2021-05-07 14:56:49
651
转载 charles修改请求参数
1、charles修改请求参数和返回参数方法一：抓包获取到要修改的接口，右键点击breakpoints在重新刷新要访问的接口，可以截获接口修改请求参数，执行一下方法二：选择要修改的接口，点击导航编辑按钮直接修改接口方法三Proxy→breakpoint settings方法四：先点击Disable Breskpoints ,在刷新要访问的接口，直接拦截2、charles更改请求地址Tools-Map remote setting添加要替换的地址.
2021-05-07 10:32:24
896
转载 抓包工具charles的https抓包配置
环境windows 10问题开启Charles时，通过Chrome浏览器访问https地址，提示隐私设置错误，出现“您的连接不是私密连接”。报错原因未将将Charles的SSL Certificates添加到受信任根证书列表中，需要将证书添加到受信任根证书列表中。解决 安装证书 打开 charles，依次点击：Help -> SSL Proxying -> Install Charles Root Certificate ...
2021-05-06 15:01:32
982
转载 抓包工具Charles--出现unknown情况解决办法
默认情况下，Charles只能抓取http的包，如果需要抓取https的包，需要进行以下设置1.电脑安装SSL证书通过Charles安装，进入Charles－》Help－》SSL Proxying－》Install Charles Root Certificate ，会打开证书，安装进去，下图是证书已经安装成功的结果2.Charles使能https抓包功能进入Charles - 》 Proxy - 》 SSL ProxyingSettings打开SSL设置界面，将图上所示复选框选中点击
2021-05-06 10:43:15
9937
转载 【转】Windows下charles 使用教程指南
1、下载就不用再说了，网上好多破解的安装包2、下面是pc端的抓包使用情况 Charles支持抓去http、https协议的请求，不支持socket。然后charles会自动配置IE浏览器和工具的代理设置，所以说打开工具直接就已经是抓包状态了。 这里打开百度抓包下，工具界面和相关基础功能如下图所示：上图中的7个位置是最常用的几个功能。(1)那个垃圾桶图标，功能是clear，清理掉所有请求显示信息。(2)那个望远镜图标，功能是搜索关键字，也可以使用ctrl+f实现，可以设置搜索的...
2021-04-30 17:17:53
445
1
转载 VUE操作数组方法
变异方法 ------>>>> 会改变被调用的原始数组push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。 let arrayPush = [] arrayPush.push(1) arrayPush.push(3) arrayPush.push(2) console.log(arrayPush) //=> [1,3,2]pop()方法用于删除并返回数组的最后一个元素。..
2021-04-22 16:55:26
2597
2
转载 深入了解 HTML5 History API，前端路由的生成，解读 webpack-dev-server 的 historyApiFallback 原理
文章目录1、history2、两种路由模式的生成3、historyApiFallback1、historyHistory 接口，允许操作浏览器的 session history，比如在当前tab下浏览的所有页面或者当前页面的会话记录。history属性1、length(只读)返回一个总数，代表当前窗口下的所有会话记录数量，包括当前页面。如果你在新开的一个tab里面输入一个地址，当前的length是1，如果再输入一个地址，就会变成2；假设当前总数已经是6，无论是浏览器的返回还是 h
2021-04-22 10:44:15
464
转载 webpack的optimization配置
webpack的optimization配置1.minimizer2.runtimeChunk3. noEmitOnErrors4. splitChunks1. chunks2. name3. minChunks4. minSize,maxSize,maxAsyncRequests（按需加载时候最大的并行请求数）,maxInitialRequests（一个入口最大的并行请求数）5. cacheGroups这个选项是webpack4新增的，主要是用来自定义一些优化打包策略。1.mini
2021-04-01 16:43:55
1967
转载 webpack 中，filename 和 chunkFilename 的区别是什么呢？
2.1 filenamefilename 是一个很常见的配置，就是对应于entry里面的输入文件，经过webpack 打包后输出文件的文件名。比如说经过下面的配置，生成出来的文件名为index.min.js。{ entry: { index: "../src/index.js" }, output: { filename: "[name].min.js", // index.min.js }}2.2 chunkFilenam...
2021-04-01 10:03:11
628
转载 插件 html-webpack-plugin 的详解
最近在学习webpack，接触到的第一个插件就是html-webpack-plugin,那么今天就来详解一下它的用法吧。先来上一个例子：var htmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')module.exports = { entry: './src/script/main.js', output: { filename: 'js/bundle.js
2021-03-31 15:52:46
1095
转载 mini-css-extract-plugin插件快速入门
前言webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。extract-text-webpack-plugin插件的优缺点：更多介绍请看移步：webpack.docschina.org/plugins/ext…webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）。使.
2021-03-31 15:48:31
14980
转载 flexible.js 原理解析(看了不会忘)
写关于原理解析的文章很多，每次看完理解了，后面又忘记了，这次自己整理一下，用通俗形象的话梳理一下。flexible.js用来处理移动端各种设备兼容问题。也就是怎么解决移动端尺寸众多的问题，我们的设计稿是固定，怎么办，如果设计稿是弹性的可以随意缩放该多好，想想，有办法了，就像本来你在一张大的纸上面了一副画，现在让你在小的纸上在画一次要怎么画，就是所有东西都等比例画小，如果要画到更大的纸上也是一个道理，等比画大，对不对。现在我们把设计稿分成10等份，设计稿 A = W/10，我们把设备可视区域.
2021-03-24 11:35:14
1495
转载 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen.height每个HTML元素都具有clientHeight offsetHei..
2021-03-24 11:26:55
129
转载 vue删除对象属性-添加对象属性
1：vue删除对象属性this.$delete(this.B,'name');//删除对象属性2：vue判断对象属性是否存在this.B.hasOwnProperty('name')3： vue 判断对象是否存在//对象 为空 true 不为空 falseif(!$.isEmptyObject(object) ){ console.log('exit object')}4：vue添加对象属性data() { return { B...
2021-03-20 14:28:57
830
原创 vuex存储与本地储存（localstorage、sessionstorage）的区别
1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。3.永久性：当刷新页
2021-03-19 16:59:18
450
转载 async&await用法
1、Why async&await简单的一张图可以直观的表现出 callback、promise 和 async/await 在使用时的主要区别。可以很明显的看到，callback 来控制异步的方式虽然非常简单，但也过于原始。在实际的使用中代码的逻辑顺序和业务的顺序是不相同的，错误控制基本靠手动检查err参数。而到了 Promise 中这种情况好了很多，通过链式调用，Promise 可以直接在 then 中返回一个新的 Promise 来将异步操作串联起来，也有了统一的 catch
2021-03-19 16:51:58
111
转载 【ES6】for of用法
前言：for of是ES6新增的循环方法。前面已经说到了 【JavaScript】for、forEach 、for in、each循环详解。那for of又是怎么使用的？一、使用例子使用例子（一）var arr = ['nick','freddy','mike','james'];for(var item of arr){ console.log(item);}输出结果：遍历数组里的每一项。二、使用例子（二）var arr = [ { name:'n...
2021-03-19 16:44:01
566
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人