前端
文章平均质量分 55
HTML\CSS\JS\Vue
whyfail
编程界崇尚以简洁优雅为美,很多时候,如果你觉得一个概念很复杂,那么很可能是你理解错了!
展开
-
UnoCss常用样式写法
UnoCss常用样式写法。原创 2024-06-18 11:27:06 · 1043 阅读 · 0 评论 -
Vue.observable — 最小化的跨组件状态存储器
Vue.observable,让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象原创 2024-04-29 15:19:02 · 128 阅读 · 0 评论 -
vue2的双向绑定
vue2的数据双向绑定浅谈原创 2024-04-25 16:14:29 · 1447 阅读 · 0 评论 -
深入理解SPA、CSR与SSR的区别及应用
深入理解SPA、CSR与SSR的区别及应用原创 2024-03-13 17:16:40 · 759 阅读 · 0 评论 -
66 个 CSS 函数,一网打尽!
随着技术的不断进步,CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力,还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数,逐一剖析它们的功能和用法,一起进入这个充满魔力的 CSS 函数世界!转载 2024-02-20 19:45:00 · 408 阅读 · 1 评论 -
3D词云图
实现一个3D词云图原创 2024-02-01 21:15:00 · 499 阅读 · 2 评论 -
npm 淘宝镜像正式到期
2024年 1 月 22 日,淘宝原镜像域名(`registry.npm.taobao.org`)的 HTTPS 证书正式到期。原创 2024-01-30 08:50:02 · 1000 阅读 · 0 评论 -
Sass(Scss)、Less的区别与选择 + 基本使用
Sass(Syntactically Awesome Stylesheets)是一种成熟且功能强大的CSS预处理器。Sass有两种语法格式:缩进格式(.sass)和SCSS格式(.scss),其中SCSS更接近原生CSS,易于学习和迁移。原创 2023-12-27 21:45:00 · 3527 阅读 · 0 评论 -
一个不用充钱也能让你变强的 VSCode 插件!!!
今天给大家推荐一款不用充钱也能让你变强的 vscode 插件 通义灵码(TONGYI Lingma),可以称之为 copilot 的替代甜品 💪原创 2023-11-10 08:52:42 · 1560 阅读 · 0 评论 -
个人前端脚手架——create-wl-app
开箱即用前端脚手架——create-wl-app原创 2023-07-27 13:34:25 · 203 阅读 · 0 评论 -
前端网页字体优化指南
前端网页字体优化指南转载 2023-04-23 17:19:56 · 517 阅读 · 0 评论 -
自动更新package.json中的version小版本号
自动更新package.json中的version小版本号原创 2022-11-24 10:58:12 · 1012 阅读 · 0 评论 -
nvm——node.js多版本管理工具(推荐 nvm-desktop)
node.js多版本管理工具原创 2022-09-29 13:53:28 · 769 阅读 · 0 评论 -
当moment遇见Vite产生的国际化配置问题
当moment遇见Vite产生的国际化配置问题原创 2022-07-13 16:55:30 · 1444 阅读 · 0 评论 -
Docker 入门终极指南,详细版!
Docker 入门终极指南,详细版!别再说不会用 Docker 了转载 2022-07-13 09:28:10 · 537 阅读 · 0 评论 -
Vite使用vw适配方案
Vite使用vw的方案,适用于vue、react原创 2022-06-17 13:49:30 · 1468 阅读 · 0 评论 -
node脚本:将项目中所有px单位转rem
node脚本:将项目中所有px单位转rem原创 2022-06-02 22:34:55 · 715 阅读 · 0 评论 -
npm一些实用命令
一、nrm方便更换镜像源全局安装nrm:npm install -g nrm使用nrm ls可以查看源列表(前面带 * 的为当前正在使用的源)如果出现如下结果,没有下载成功。可以使用sudo npm install -g nrm,然后输入电脑密码就可以了。如果出现没有带(*)而且nrm current没有输出结果可以通过sudo npm install Pana/nrm -g通过源码下载(过程可能会很慢,七八分钟左右)当然也可以使用手动配置镜像源:npm.原创 2022-03-09 10:48:14 · 1218 阅读 · 0 评论 -
淘宝npm源将在2022年5月31日更换域名服务
淘宝为了提供更稳定、更安全、更符合国家法律法规要求的镜像服务(说人话就是怕国家找茬所以要低调),将要更换淘宝npm源的服务器,并且老的域名npm.taobao.org 和 registry.npm.taobao.org 将不再使用。2022年5月31日0时,这两个老域名将会停止服务,截至目前,通过老域名安装npm包已经会被301到新域名 registry.npmmirror.com淘宝 NPM 镜像站切换新域名啦1.通过cnpm使用淘宝镜像:npm install -g cnpm --re..原创 2022-02-10 16:25:20 · 4263 阅读 · 2 评论 -
package-lock.json的作用
背景不知道大家平时在开发中有没有注意到,你的项目中有两个文件:package.jsonpackage-lock.json应该很多人平时都不会去关注这两个文件有啥关系吧!今天就给大家简单地讲讲吧,这样下次面试官问起时,大家也可以装装杯了~~例子背景在package.json中,vue的版本是^2.6.14。"vue": "^2.6.14",^的意思是,假如过几天Vue在大版本 2下更新了小版本 2.6.15,那么当你npm install时Vue会自动升级为2.6.15引.转载 2022-02-09 13:27:15 · 15186 阅读 · 7 评论 -
call,apply,bind的区别
一、call,apply,bind的相同点:都是改变this指向的;第一个参数都是this要指向的对象;都可以利用后续参数传参;二、call,apply,bind的区别:call和bind的参数是依次传参,一一对应的;但apply只有两个参数,第二个参数为数组;call和apply都是对函数进行直接调用,而bind方法返回的仍是一个函数;例如:var a ={ name:'一一', age:'22', sex:'女', ho.原创 2022-02-09 11:32:30 · 11967 阅读 · 0 评论 -
this的指向
一、作为对象的方法调用当函数作为对象的方法被调用时:this指向该对象const obj = { a:'小磊同学', getName: function(){ console.log(this === obj, this.a); }};obj.getName(); // true, 小磊同学二、作为普通函数调用当函数不作为对象的属性被调用,而是以普通函数的方式:this总是指向全局对象(在浏览器中,通常是Window对象)window.name = '小磊同学'.原创 2022-01-13 20:06:29 · 569 阅读 · 0 评论 -
中国N01
中国N01<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国 NO1&.原创 2021-07-01 16:44:51 · 85 阅读 · 0 评论 -
base64转文件流
base64转文件流// dataurl:base64const base64toFile = (dataurl, filename = "file") => { let arr = dataurl.split(","); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split("/")[1]; let bstr = atob(arr[1]); let n = bstr.length; le原创 2021-06-29 17:35:18 · 1903 阅读 · 0 评论 -
了解一下iframe的一些使用
一、iframe基本概念通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。<iframe src="www.baidu.com"></iframe>但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性frameborder:是否显示边框,1(yes),0(no)height:框架作为一个普通元素的高度,建议在使用css设置。width:框架作为一个普通元素的宽度,建议使用cs.原创 2021-05-19 22:55:20 · 711 阅读 · 0 评论 -
JS处理DOM元素来获取数据
一、需求处理一个dom树元素,比如获取树中某一段数据const dom = "<div><ul><li>测试1</li><li>测试2</li><li>测试3</li><li>测试4</li></ul></div>"获取该dom中li标签内中数据二、原生JS处理const dom = "<div><ul><.原创 2021-05-05 10:38:08 · 477 阅读 · 0 评论 -
神奇的JS
一、删除数组中的空数据['','a','b','c',''].filter(Boolean)//返回 ["a", "b", "c"]二、!取反!true //false!false //true!1 //false!0 //true三、~运算符(位非)用于对一个二进制操作数逐位进行取反操作~[1,2,3].indexOf(4) //0...原创 2021-04-28 21:17:25 · 73 阅读 · 0 评论 -
font-family可以设置的字体
一、小米米官网font-family: “Arial”,“Microsoft YaHei”,“黑体”,“宋体”,sans-serif;二、font-family:中文字体的英文名称宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB.原创 2021-04-10 11:06:06 · 3906 阅读 · 0 评论 -
Css实现较为漂亮的滚动条样式
Css实现较为漂亮的滚动条样式先看样子实现 <div class="test test-scrollbar"> <div class="scrollbar"></div> </div> .test-scrollbar::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-scr.原创 2021-03-20 00:04:02 · 587 阅读 · 0 评论 -
JS 原型链
原型链转载 2021-03-17 17:15:27 · 358 阅读 · 0 评论 -
40 个 CSS 布局技巧
40 个 CSS 布局技巧转载 2021-03-17 15:54:47 · 79 阅读 · 0 评论 -
二进制图片转可展示内存URL链接
有的时候会遇到的问题是这样子的,上传的二进制图片用来展示,往往没有办法展示,这时候可以使用下面的这个方法进行转化展示。URL.createObjectURL(blob)bolb:这是二进制图片文件返回值为可用于本地展示的图片链接具体原理可自行百度谷歌...原创 2021-03-11 11:21:12 · 646 阅读 · 0 评论 -
可用的rtsp、rtmp、http网络直播地址
可用的rtsp、rtmp、http网络直播地址tmp://58.200.131.2:1935/livetv/cctv1 cctv1综合rtmp://58.200.131.2:1935/livetv/cctv2 cctv2财经rtmp://58.200.131.2:1935/livetv/cctv3 cctv3综艺rtmp://58.200.131.2:1935/livetv/cctv4 cctv4中文国际rtmp://58.200.131.2:1935/livetv/cc.原创 2020-10-11 11:19:43 · 7290 阅读 · 1 评论 -
右键绑定CMD
在工作中,不时会需要cmd进行操作,你还在使用目录方式召唤出cmd嘛,有点麻烦,这里有办法召唤CMD。一、用Power Shell代替CMD众所周知, cmd能干的Power Shell同样能干可以在任何地方Shift + 右键二、注册CMD绑定有的兄弟就是情有独钟与cmd,也是有办法的新建一个cmd.reg 文件,使用记事本打开,复制一下内容,点击运行Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SO..原创 2020-11-08 14:15:52 · 267 阅读 · 0 评论 -
CSS完美初始化
Github上引用次数最多的necolas下载原创 2020-10-30 22:34:36 · 150 阅读 · 0 评论 -
input type=file 上传文件,同一个文件第二次上传无反应
用input file上传文件,掉用onchange方法时,多次上传同一个文件时功能失效,不会发送ajax请求input[type=file]使用的是onchange去做onchange监听的为input的value值,只有再内容发生改变的时候去触发而value在上传文件的时候保存的是文件的内容,只需要在上传成功的回调里面,将当前input的value值置空即可。event.target.value="";设为空之后在次点击就可实现同一文件多次上传操作...原创 2020-07-06 14:43:07 · 1001 阅读 · 2 评论 -
常见CSS样式改动
去掉多文本输入框右下三角图形css改变resize: none !important;隐藏滚动条,但依旧具备可以滚动的功能css改变div::-webkit-scrollbar { display: none}鼠标经过变成小手css改变cursor: pointer; ...原创 2020-07-03 16:49:11 · 120 阅读 · 0 评论 -
JS 中的闭包到底是什么?
简述什么是闭包var local = '变量'function foo(){ console.log(local)} 三行代码中,有一个局部变量 local,有一个函数 foo,foo 里面可以访问到 local 变量。好了这就是一个闭包:函数 和 函数内部能访问到的变量(也叫环境)的总和,就是一个闭包。我听说闭包是需要函数套函数,然后 return 一个...转载 2020-05-01 02:57:18 · 1187 阅读 · 0 评论 -
ES6/ES2015核心内容(下)
import export这两个家伙对应的就是es6自己的module功能。我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。这有可能导致两个问题:一方面js代码变得很臃肿,难以维护另一方面我们常常得很注意每个script标签在html中的位置,因为它...原创 2020-04-18 21:27:38 · 1117 阅读 · 0 评论 -
ES6/ES2015核心内容(上)
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了…在...原创 2020-04-18 21:21:01 · 1134 阅读 · 0 评论