- 博客(204)
- 收藏
- 关注
RSS订阅原创 踩坑：Vue 运行 `npm run serve` 报错 `sudo: vue-cli-service: command not found`
删除 node_modules 和 package-lock.json 文件后再执行 npm run serve 命令。
2021-03-04 17:02:23
1619
1
原创 python 小白入门 嘻嘻
官网下载：https://www.python.org/downloads/IDLE 是一个 Python Shell，可以利用 Python Shell 与 Python 交互。hello world ????1. 通过 IDLE打开 IDLE，点击左上角菜单栏 File ➡️ New File 打开新窗口，编写 python 代码。print("hello world ~")保存时文件后缀写为 .py 。点击菜单栏 Run ➡️ Run Module 运行程序。在 Pyt
2021-02-08 15:31:12
402
7
原创 【Vuetify】v-pagination 怎样输入页码跳转
Vuetify 中提供了 v-pagination 分页的功能，如下图：这样只能两个两个的往下获取页码，如果页码很多的话，查找起来极其不便，所以能不能加个输入页码跳转的功能呢？????️<v-row> <v-col cols="8"> <v-pagination v-model="pageNumber" :length="itemLength" total-visible="10" circle color="#c34450"></v-pagin
2021-01-29 09:41:43
1619
原创 vuetify 表格：表头合并单元格
我想用 vuetify 的 v-data-table 实现下面这个表格：（表头有2行，且需要单元格合并）直接上代码：<v-data-table :items="standardDesserts" hide-default-footer> <template v-slot:body="{ items }"> <thead> <tr> <template v-for="(headerItem1, idx1) in
2020-12-16 10:10:54
2027
原创 html 导出为 PDF：因页面内有横向滚动条而显示不全的解决方案
在 Vue 中，将 html 内容导出为 PDF为了使横向滚动条的内容全部展示，需要指定 width: document.getElementById(id).scrollWidth。<div ref="myContainer"> <!-- 我是需要导出的内容 --></div>// 生成pdfgetPDF() { this.generatePDF( this.$refs.myContainer, "我是下载的pdf的名字，随便起.
2020-12-16 09:11:56
4696
2
原创 JavaScript：通过解构赋值交换两个变量的值
通过解构赋值语法，可以轻松地交换变量。let a = "hello";let b = "world";[a, b] = [b, a];// { a: 'world', b: 'hello' }
2020-09-27 11:29:14
4829
7
原创 JavaScript：字符串部分打码显示
某些时候我们需要遮蔽字符串的一部分，比如，下面代码中通过 substr(-3) 得到字符串的一部分，即从字符串末尾开始往前 3 个字符，然后再用你喜欢的字符填充剩余的位置（比如说用 *）const password = "hackme";password.substr(-3).padStart(password.length, "*");// ***kme...
2020-09-27 11:27:07
866
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
255
原创 防抖和节流
防抖就是指触发事件后在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
105
原创 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
138
原创 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
249
原创 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
125
原创 中国最全亲戚关系图谱
称呼对象称呼（称谓）对此自称对他人称其家族中人对他人称自己家族中人父亲的父母祖父，祖母孙儿，孙女令祖父，令祖母家祖父，家祖母父亲的伯（叔）父/母伯（叔）祖父/母侄孙儿/女 或从孙从孙女令伯（叔）祖 父/母家伯（叔）祖父/母生（养）父/母父亲，母亲男（或儿），女儿令尊，令堂家父（严、尊），家母（慈）父亲的兄/嫂伯父，伯母侄儿，侄女令伯父，令伯母家伯父，家伯母父亲的弟/媳叔父，婶母侄儿，侄女令叔父，令婶母家叔父，家婶母...
2020-09-10 15:08:28
8688
原创 一些前端有关的文章分享（更新中）
研究如何让 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
379
原创 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
616
原创 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
1567
转载 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
549
原创 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
340
原创 Excel：快速填充1000行(自定义)数据
1. 在左上角 名称框 中输入你想填充的单元格，按 回车键 选中比如，我想填充A2到A1001行，输入 A2:A1001。2. 在 编辑栏 中输入想要填充的内容，按 command + 回车键 填充Windows 按 ctrl + 回车键
2020-08-14 09:24:44
8697
转载 HTTP 缓存机制及原理
https://mp.weixin.qq.com/s/M8Ew7xKStiGEnhGgCq5YPA为什么会有缓存？单纯的从计算机角度去说，比较抽象，咱们看一个实际的例子。比如，我们通常喜欢把没看完的书放在书架上，而看完以及没有看的书放在箱子中保存。如果我们把所有的书保存在箱子中，每次看书都要去箱子中找，所以非常麻烦和耗时(这里的箱子，可以想象成服务器)。当我们开始看新书时，第一次从箱子中取出，看了一半，然后我们直接放到书架上，当下次再看书的时候，直接从书架中取出，这里的书架，就是我们下边要讲到的.
2020-08-10 11:31:44
171
转载 解析从 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
2334
原创 CSS：固定外框尺寸，里面的图片尺寸不固定，让图像自适应外框
object-fit该属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。fill | contain | cover | none | scale-downfill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的
2020-08-06 08:53:51
1683
原创 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
813
原创 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
6458
原创 Markdown 文档中文内锚点链接跳转（中文）
[](#)内容详情请见[附录](#appendix)## appendix我是附录内容啦啦啦啦啦……() 里的 # 只有一个，下面的 ##为二级标题（标题写几个#都行，一级到六级）但是，如果#后面写的是中文就会出现问题。DOMException: Failed to execute ‘querySelector’ on ‘Document’: … is not a valid selector.如果链接中含有中文，会出现中英文转换问题，默认转换成的链接里会含有大写字母，进而报错。可
2020-07-13 16:25:19
14002
4
原创 在 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
1148
3
原创 Webpack(二)：核心特性
上一篇的最后提出了对模块化打包方案或工具的诉求：能够将散落的模块打包到一起；能够编译代码中的新特性；能够支持不同种类的前端资源模块。目前，前端领域有一些工具能够很好的满足以上这 3 个需求，其中最为主流的就是 Webpack、Parcel 和 Rollup。如何使用 Webpack 实现模块化打包？如何通过 Loader 实现特殊资源加载？如何利用插件机制横向扩展 Web...
2020-06-01 15:42:23
650
原创 Webpack：开发一个可以加载 markdown 文件的 Loader
开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。markdown 一般是需要转换为 html 之后再呈现到页面上的，所以我们希望导入 md 文件后，直接得到 markdown 转换后的 html 字符串，如下图所示：└─ webpack-loader ······················· sample root dir ├── src ································· source dir │ ├─
2020-05-29 17:17:17
1597
原创 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
21112
1
原创 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
874
原创 通过监听当前路由的变化，动态更新面包屑的内容
引入 vuetify 的 Breadcrumbs 组件来实现面包屑功能。发现路由变了之后，面包屑内容没有更新。需要刷新才会变化。此时，就需要：监听当前路由的变化，动态更新面包屑的内容watch: { $route() { this.getBreadCrumbs(); }},created() { this.getBreadCrumbs();},...
2020-05-21 13:40:07
1148
原创 git pull 本地有未提交的改动而报错的解决办法
在远端设置无误的情况下，git pull 出错一般是由于本地有未提交的改动造成的。第一步： git stash 将本地的改动暂存第二步： git pull 获取最新更新第三步： git stash pop 将改动还原
2020-05-19 08:44:49
2566
原创 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
4651
转载 关于前端安全的几个提示
作为前端开发人员，我们最关心的是性能、SEO 和 UI/UX——安全性却经常被忽略。我们应该记住，就安全性而言，前端现在与后端或 DevOps 承担着同样的责任。前端可能会发生几千种恶意攻击。常见攻击不受限制的文件上传这是一种将恶意文件上传到服务器然后对系统执行的攻击方式。攻击可能包括：使文件系统或数据库超载，接管完整的系统，客户端攻击，将攻击转发到后端系统或进行简单的破坏。点击劫持这是一种恶意用户诱骗正常用户点击网页或不属于该站点的元素的攻击方式。这种攻击可能会导致用户在不经意间提供凭
2020-05-12 13:24:17
558
原创 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
831
原创 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
475
原创 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
8447
原创 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
3597
原创 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
295
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人