自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 JavaScript:通过解构赋值交换两个变量的值

通过解构赋值语法,可以轻松地交换变量。let a = "hello";let b = "world";[a, b] = [b, a];// { a: 'world', b: 'hello' }

2020-09-27 11:29:14 22 1

原创 JavaScript:字符串部分打码显示

某些时候我们需要遮蔽字符串的一部分,比如,下面代码中通过 substr(-3) 得到字符串的一部分,即从字符串末尾开始往前 3 个字符,然后再用你喜欢的字符填充剩余的位置(比如说用 *)const password = "hackme";password.substr(-3).padStart(password.length, "*");// ***kme...

2020-09-27 11:27:07 40 1

原创 数据响应式原理:Proxy代理与数据劫持 && vue中的数据响应式实现 && vue中双向绑定实现

Proxy代理与数据劫持handler.set() - 是设置属性值操作的捕获器。handler.get() - 用于拦截对象的读取属性操作。……var box = document.querySelector('.box');var data = { name: 'cici', age: 18}box.innerHTML = data.age;data.age = 21;console.log(data);// ???? 如果这样写,修改了数据之后,并不能同步更新b

2020-09-24 08:44:59 30

原创 防抖和节流

防抖就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。var box = document.querySelector('.box');var testDebounce = debounce(move, 1000);box.onmousemove = testDebounce;function move(ev) { console.log(ev, this); this.innerHTML = ev.clientX;}function

2020-09-22 17:03:46 20

原创 this 的指向问题

事件调用环境谁触发事件,函数里面的this指向的就是谁。.box1, .box2 { width: 100px; height: 100px; border: 1px solid black; background: #0A8CD2; position: relative; left: 0; transition: 1s;}<div class="box1"></div><div class="box2"></div>

2020-09-22 13:39:27 18

原创 JavaScript:随机生成一个指定长度的验证码

function randomCode(len) { const allStr = 'azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789.*&^%$#@!~'; let code = ''; for (let index = 0; index < len; index++) { code += allStr.charAt(Math.floor(Math.random() * 72)); } c

2020-09-17 09:05:22 19

原创 CSS:div 水平垂直居中

flex<div class="parent"> <div class="child"></div></div>.parent { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100wh;}.child { width: 100px; height: 100px; background-co

2020-09-10 16:54:50 33

原创 中国最全亲戚关系图谱

称呼对象称呼(称谓)对此自称对他人称其家族中人对他人称自己家族中人父亲的父母祖父,祖母孙儿,孙女令祖父,令祖母家祖父,家祖母父亲的伯(叔)父/母伯(叔)祖父/母侄孙儿/女 或从孙从孙女令伯(叔)祖 父/母家伯(叔)祖父/母生(养)父/母父亲,母亲男(或儿),女儿令尊,令堂家父(严、尊),家母(慈)父亲的兄/嫂伯父,伯母侄儿,侄女令伯父,令伯母家伯父,家伯母父亲的弟/媳叔父,婶母侄儿,侄女令叔父,令婶母家叔父,家婶母...

2020-09-10 15:08:28 908

原创 一些前端有关的文章分享(更新中)

研究如何让 JS 写得更漂亮:https://mp.weixin.qq.com/s/LlNuFg4XFWKVShys1SOf1w研究 memaid 及其样式修改:https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes一个可以任意精度的十进制算数运算的库:https://github.com/MikeMcl/big.js/研究 vue 中的表格导出问题:https://www.cnblogs.com/qiu-Ann.

2020-09-07 09:21:29 59

原创 text-align:justify 两端对齐无效?

⚠️ text-align:justify 样式应用的最后一行文字不会生效(如果只有一行,那第一行同样是最后一行)可以通过使应用该样式部分不成为单行,在后面加点东西解决。???? 伪类解决方案:p.test { text-align: justify;}p.test:after { content: ""; display: inline-block; width: 100%;}<p class="test">只有一行很短的文字</p>text

2020-09-04 09:32:54 24

原创 Markdown 如何设置图片的宽度?

线上使用 <img> 添加图片,会显示路径不对。解决方案:一、把图片挪到 static 目录下。.├── blog/ ├── images ├── male.svg └── female.svg └── test.md├── src/└── static/ └── avators/ ├── male.svg └── female.svg……<img src="/avators/m

2020-09-03 09:28:21 110

转载 Chrome 开发者工具使用技巧

原文链接:https://mp.weixin.qq.com/s/Tep_dngnKCO6fPAqJ0ZdbgChrome 的命令菜单命令菜单之于 Chrome,就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。首先,我们打开 Chrome 开发者工具,然后使用以下快捷键打开命令菜单:windows:Ctrl + Shift + PmacOS:Cmd + Shift + P或者我们可以按照下图所示的步骤将其打开:然后,我们可以转到“命令”面板,在这.

2020-08-25 10:24:34 67

原创 npm install 报错:gyp: No Xcode or CLT version detected!

在命令行输入:sudo rm -rf $(xcode-select -print-path)xcode-select --install???? 参考链接:https://www.cnblogs.com/zhennann/p/12272058.html

2020-08-18 10:47:02 94

原创 Excel:快速填充1000行(自定义)数据

1. 在左上角 名称框 中输入你想填充的单元格,按 回车键 选中比如,我想填充A2到A1001行,输入 A2:A1001。2. 在 编辑栏 中输入想要填充的内容,按 command + 回车键 填充Windows 按 ctrl + 回车键

2020-08-14 09:24:44 143

原创 Excel:快速在每个单元格后面添加相同的内容

选择所有的单元格 ➡︎ 右键 ➡︎ 设置单元格格式 ➡︎ 自定义 - “@xxx”

2020-08-14 09:08:24 149

转载 HTTP 缓存机制及原理

https://mp.weixin.qq.com/s/M8Ew7xKStiGEnhGgCq5YPA为什么会有缓存?单纯的从计算机角度去说,比较抽象,咱们看一个实际的例子。比如,我们通常喜欢把没看完的书放在书架上,而看完以及没有看的书放在箱子中保存。如果我们把所有的书保存在箱子中,每次看书都要去箱子中找,所以非常麻烦和耗时(这里的箱子,可以想象成服务器)。当我们开始看新书时,第一次从箱子中取出,看了一半,然后我们直接放到书架上,当下次再看书的时候,直接从书架中取出,这里的书架,就是我们下边要讲到的.

2020-08-10 11:31:44 60

转载 解析从 Vue 初始化到首次渲染生成 DOM 以及从 Vue 数据修改到页面更新 DOM 的流程

https://mp.weixin.qq.com/s/G5nwszLRk0W51Ui_IykJxQVue 初始化从最简单的一段 Vue 代码开始:<template> <div> {{ message }} </div></template><script>new Vue({ data() { return { message: "hello world", }; },});&.

2020-08-10 10:55:33 203

原创 CSS:固定外框尺寸,里面的图片尺寸不固定,让图像自适应外框

object-fit该属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。fill | contain | cover | none | scale-downfill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。cover被替换的

2020-08-06 08:53:51 78

原创 CSS:滚动 (scroll-behavior & scroll-snap-align)

scroll-behavior - 设置是立即滚动还是平滑的滚动值:auto:滚动框立即滚动。smooth:滚动框通过一个用户代理预定义的时长、使用预定义的时间函数,来实现平稳的滚动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

2020-07-16 09:52:33 83

原创 CSS:选择高亮(设置高亮状态的样式 / 禁止文本选择高亮)

设置处于高亮状态的样式 - ::selection::selection CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。只有一小部分CSS属性可以用于 ::selection 选择器。禁止文本选择高亮 - user-select: none;CSS 属性 user-select 控制用户能否选中文本。<!DOCTYPE html><html lang="en"><head> <meta charset=

2020-07-14 09:33:00 464

原创 Markdown 文档中文内锚点链接跳转(中文)

[](#)内容详情请见[附录](#appendix)## appendix我是附录内容啦啦啦啦啦……() 里的 # 只有一个,下面的 ##为二级标题(标题写几个#都行,一级到六级)但是,如果#后面写的是中文就会出现问题。DOMException: Failed to execute ‘querySelector’ on ‘Document’: … is not a valid selector.如果链接中含有中文,会出现中英文转换问题,默认转换成的链接里会含有大写字母,进而报错。可

2020-07-13 16:25:19 303

原创 在 Vue 中,将 html 内容导出为 PDF

需要用到两个插件:html2canvas 和 jsPDFnpm install html2canvasnpm install jspdf --saveimport html2canvas from 'html2canvas';download() { // 下面的"print"为需要导出内容的id(把想导出的html内容用div包起来,加上id="print"即可) html2canvas(document.getElementById("print")).then(function

2020-06-10 16:47:01 440 2

原创 Webpack(二):核心特性

上一篇的最后提出了对模块化打包方案或工具的诉求:能够将散落的模块打包到一起;能够编译代码中的新特性;能够支持不同种类的前端资源模块。目前,前端领域有一些工具能够很好的满足以上这 3 个需求,其中最为主流的就是 Webpack、Parcel 和 Rollup。如何使用 Webpack 实现模块化打包?如何通过 Loader 实现特殊资源加载?如何利用插件机制横向扩展 Web...

2020-06-01 15:42:23 183

原创 Webpack:开发一个可以加载 markdown 文件的 Loader

开发一个可以加载 markdown 文件的加载器,以便可以在代码中直接导入 md 文件。markdown 一般是需要转换为 html 之后再呈现到页面上的,所以我们希望导入 md 文件后,直接得到 markdown 转换后的 html 字符串,如下图所示:└─ webpack-loader ······················· sample root dir ├── src ································· source dir │ ├─

2020-05-29 17:17:17 572

原创 Javascript:补0(填充字符串到目标长度)

当给定数字位数不足8位时,则在左边补充0以补足8位数。let num = 900;let nStr = num.toString().padStart(8,'0');console.log(nStr); //00000900padStart()用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。语法str.padStart(targetLength [, padString])参数targetLength当前字符

2020-05-29 09:32:44 941

原创 Vue 动画:CSS 动画原理 & animate.css 库的使用 & 同时使用过渡和动画 & Js 动画与 Velocity.js 的结合 & 多个元素或组件的过渡 & 动画封装

Vue 中 CSS 动画原理<div id="app"> <div v-if="show">hello world</div> <button @click="handleClick">切换</button></div><script> var vm = new Vue({ el: '#app', data: { show: true }, methods: {

2020-05-22 10:00:08 300

原创 通过监听当前路由的变化,动态更新面包屑的内容

引入 vuetify 的 Breadcrumbs 组件来实现面包屑功能。发现路由变了之后,面包屑内容没有更新。需要刷新才会变化。此时,就需要:监听当前路由的变化,动态更新面包屑的内容watch: { $route() { this.getBreadCrumbs(); }},created() { this.getBreadCrumbs();},...

2020-05-21 13:40:07 323

原创 git pull 本地有未提交的改动而报错的解决办法

在远端设置无误的情况下,git pull 出错一般是由于本地有未提交的改动造成的。第一步: git stash 将本地的改动暂存第二步: git pull 获取最新更新第三步: git stash pop 将改动还原

2020-05-19 08:44:49 338

原创 CSS:实现文字环绕在图片周围的效果

要想让文字环绕在图片的周围,让图片 float 就可以了;如果还想要实现文字圆形环绕图片的效果,可以使用 shape-outside: circle(); 属性。<p>《程序员修炼之道(从小工到专家)》 <img class="left" src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_1

2020-05-18 09:37:19 373

转载 关于前端安全的几个提示

作为前端开发人员,我们最关心的是性能、SEO 和 UI/UX——安全性却经常被忽略。我们应该记住,就安全性而言,前端现在与后端或 DevOps 承担着同样的责任。前端可能会发生几千种恶意攻击。常见攻击不受限制的文件上传这是一种将恶意文件上传到服务器然后对系统执行的攻击方式。攻击可能包括:使文件系统或数据库超载,接管完整的系统,客户端攻击,将攻击转发到后端系统或进行简单的破坏。点击劫持这是一种恶意用户诱骗正常用户点击网页或不属于该站点的元素的攻击方式。这种攻击可能会导致用户在不经意间提供凭

2020-05-12 13:24:17 198

原创 CSS:背景图片的使用(将背景图片完美适合窗口 & 创建三角背景图片 & 在背景图片上添加渐变叠加 & 制作网格背景图片 & 文字镂空背景图片效果)

1. 如何将背景图片完美的适合浏览器窗口?background-position: center;background-attachment: fixed;background-size: cover;2. 如何在CSS中使用多个背景图片?用 , 分隔。background-image: url(图片1路径), url(图片2路径);background-position: 图片1position, 图片2position;……3. 如何创建三角背景图片?效果图:通过创建两个

2020-05-12 11:07:01 246

原创 Vue 组件:$ref & 父子组件的数据传递 & 组件参数校验与非 props 特性 & 给组件绑定原生事件 & 非父子组件间的传值 & 在 Vue 中使用插槽 & 作用域插槽 & 动态组件

使用组件的细节点<table> <tbody> <row></row> <row></row> <row></row> </tbody></table><script>Vue.component('row', { template: '<tr><td>This is a row</td></tr>

2020-05-11 17:32:43 157

原创 CSS:悬浮提示文本

https://github.com/haizlin/fe-interview/issues/2008Way 1⃣️<div class="wrap"> 我是一个元素 <div class="tips"> 这是悬浮提示文字 </div></div>.wrap { position: relative; display: inline-block; margin: 4em;}.tips { position.

2020-05-11 10:25:55 314

原创 CSS:实现一个斑马线效果 (条纹背景)

斑马线效果<div class="zebra-crossing"></div>.zebra-crossing { width: 180px; height: 100px; margin: 1em; background: linear-gradient(to right, #fff 50%, #bbbbbb 0); background-size: 30px 100%;}几种条纹背景的实现1. 基础渐变<div class="demo1"&g

2020-05-11 09:35:39 515

原创 JavaScript:将 arguments 对象转换为数组;对数组中所有的值求和;条件短路;对条件使用逻辑或;逗号运算符;用 length 调整数组大小;通过数组解构对值进行交换;动态属性名……

https://mp.weixin.qq.com/s/q36K4uPcLWdZq_wQvPflIQ1. 将 arguments 对象转换为数组arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。但它与其他数组不同,我们可以访问其元素值并获得长度,但是不能在其上使用其他的数组方法。不过,我们可以将其转换为常规数组:var argArray = Array.prototype.slice.call(arguments);2. 对数组中所有的值求和var .

2020-05-09 09:29:55 118

原创 Vue 基础:Vue 实例生命周期 & 模版语法 & 计算属性、方法与侦听器 & 样式绑定 & 条件渲染 & 列表渲染 & set

♻️ Vue 实例生命周期生命周期函数就是Vue实例在某一个时间点会自动执行的函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...

2020-05-08 16:52:10 98

原创 Vue 入门:el: '#app' 是什么意思 & component 组件 & 实现 ToDoList

????‍♀️ 用原生 js 实现基本页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...

2020-05-06 15:53:26 2205 2

原创 Webpack(一):背景介绍

Webpack 本质是一个模块化打包工具,通过“万物皆模块”这种设计思想,巧妙地实现了整个前端项目的模块化。Webpack 解决的问题如何在前端项目中更高效地管理和维护项目中的每一个资源。模块化的演进过程Stage 1 - 文件划分方式Stage 2 - 命名空间方式Stage 3 - IIFEStage 4 - IIFE 依赖参数模块加载的问题更为理想的方式应该是在...

2020-04-28 16:20:42 125

原创 如何在 Vue 中使用 Font Awesome 字体图标

安装???? 参考链接:https://blog.csdn.net/zyj362633491/article/details/86422353

2020-04-26 16:20:03 516

原创 GitHub 中如何进行文件模糊查找

在任何存储库中按 t 键进行访问,然后就可以输入要查找的文件的名称。

2020-04-26 09:21:36 458

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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