- 博客(96)
- 资源 (17)
- 收藏
- 关注
RSS订阅
原创 vite+vue3+ts简单例子todolist
vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。本文是在《Vite + Vue3 初体验 —— Vue3 篇》的启发下写的，由于原文的代码和过程有一些需要注意的坑点，在这里我们会把步骤详细的整理以及简单的优化。创建项目使用vite创建npm init vite@latest输入项目名 如 vue-todolistvite可以构建多种框架的项目，这里选用vue选用vue-ts的组合，如果你对ts还不熟，需要
2022-03-01 20:28:15
4708
原创 新的好朋友Pinia，引领状态管理新时代
Pinia 是 Vue.js 的轻量级状态管理库，非常的受广大开发者的欢迎，尤大大更是强力推荐。Pinia作为Vue生态里Vuex的替代者，全新的Vue状态管理库，它的优势有哪些？比起Vuex好在哪些地方呢？我们就先来看看Vuex的五大优势。 可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。 抛弃了Mutations的操作，只有state、getters和actions.极大简化了状态管理库的使用，让代码编写更加容易直观。 不需要嵌套模块，符合Vu..
2022-02-18 15:40:44
2298
1
转载 一起来揭开Vue 3.0的One Piece神vue+vite新体验
前言2020年9月19日凌晨，尤雨溪大大正式发布了3.0版本，代号：One Piece。vue从一开始就是以快速上手的特性被众多开发者欢迎的框架。在随着使用者的逐渐增多，框架的规范也在不断扩大，以适应不断增长的需求。随着时间的推移，它成为了所谓的“渐进式框架”：一个可以逐步学习和采用的框架，同时随着用户应对越来越多的需求场景而提供持续的支持。首先3.0版本的特点 在Vue3中，基于对象的 2.x API 基本没有变化，3.0 还引入了 [Composit...
2020-09-24 20:28:10
2803
原创 js直接下载附件和通过blob数据类型下载文件
js下载文件方式有使用a标签的，也有直接用window.open的，还有用form表单的；这里采用的是a标签的下载方式，一种是url直接下载，另一种是文件的blob数据类型进行下载。文件blob数据类型的获取一般是后端返回文件的二进制流，前端通过请求工具获取为blob数据类型进行下载；也可以这直接通过ajax或fetch等将url转化为blob数据类型，一些特殊的附件直接通过url下载，浏览器可能会将其打开，如：pdf。
2024-01-26 14:50:08
685
原创 保姆级阿里云ESC服务器安装nodejs和服务器node服务管理工具PM2安装使用
保姆级在云服务器或服务器中安装nodejs教程，希望让你在安装的过程中少点烦恼和不必要的弯路，以及nodejs在窗口关闭后的持续执行工具pm2的安装和简单操作命令
2023-10-19 16:11:55
942
原创 React antd table组件expandedRowRender属性添加后没有值隐藏展开操作的问题
今天突然被朋友问的antd table的展开子table的问题，在根据文档操作后发现并没有问题，但是在自己操作过程中想让数据中某行不展示+符号，看了文档并没有这样的属性或者值，网上查了一下也没查到，然后就根据文档在思考了，最后看到了expandIcon 这个属性，然后就跟句这个属性来进行修改了，主要的方案就是在icon这里判断如果符合不展示的条件，就不展示这个icon就可，其他的icon就正常显示，icon回调的参数里边还给了展开关闭的方法，看来这个就是解决这个问题的方案吧。
2023-03-23 20:09:36
1079
1
原创 CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
纯CSS监听系统黑夜模式，媒体查询修改黑夜模式中的样式，js获取黑夜模式的方法与使用
2023-03-02 19:14:31
2539
转载 Vue3 UI库/相关工具/可视化/生态全分享
40+ Vue3 实用工具、UI库、插件、生态，本群内容为技术胖在视频中分享，此处仅作为个人笔记使用和分享给其他需要帮助的前端小伙伴，技术胖的原视频链接。
2023-02-21 21:41:14
897
原创 纯CSS锚点过渡效果，CSS3的属性scroll-behavior: smooth；轻松搞定置顶操作
CSS属性处理锚点滚动的过渡效果，以及过渡动画的实现操作；并通过过渡效果，轻松实现置顶效果
2022-09-26 19:12:14
2820
原创 TypeScript基础学习笔记
以下为在学习ts过程中笔记，为自己认为需要谨记的点，再次整理出来为了以后自己能温故知新，若有幸被哪位读者所读到也有所帮助的，还是非常庆幸的。由于下方为个人的学习笔记，基础知识内容不多，如有需要的朋友可以到TypeScript官网学习，这里推荐阮一峰的《TypeScript 入门教程》《TypeScript 入门教程》师傅领进门修行在个人，感觉基础的看完研究透彻，然后上项目历练效果挺好的。ts官方的定义是 Typed JavaScript at Any Scale. （添加了类型系统的JavaScript
2022-07-13 19:03:38
1896
原创 纯前端js直接导入导出json文件
现在很多公司都有多个测试环境或者其他环境，有些配置信息在其他环境需要同样的信息，按照传统只能修改数据库对于新手小白来说只能求助于服务端了，现在前端也可以直接将当前的数据导出为json文件，然后在需要的地方导入即可也不需要服务端，相对比较方便，而且还比较灵活。遵循本博客传统，话不多说上代码：代码里边注释较为清晰，方法也可以直接拿来使用的，如果在使用过程中遇到什么问题，欢迎在评论区留言，我们一起交流。如果对您有所帮助，还希望您能点赞关注。...
2022-07-12 20:34:38
5145
4
原创 vite+vue3+ts直接在样式中使用setup script中的变量
在已往的前端项目中，我们经常会碰到换肤换主题的需求，我们是多么希望能直接在js中操作css中的色值或者其他值的变动，用less有解决方案但是比较繁琐，现在setup script中我们可以直接使用js中声明出来的变量了，还可以相对自由的变化，这给我们开发带来了极大的便利。下边不多说直接上代码：有兴趣的小伙伴可以敲一下，好记性不如烂笔头，敲得多了量变引起质变是个很不错的成长之路。以上就是本文全部内容，如对你有帮助欢迎点赞留言如有疑问可以留言，也可以到QQ群一起探讨：QQ群1: 657011407， Q
2022-07-12 16:42:05
883
原创 JS中JSON序列化JSON.stringify的坑点和处理
JSON.stringify的问题在js中提到对象转JSON字符串，基本都会想到JSON.stringify这个方法，以及对应的解析方法JSON.parse方法，这个的转换也被不少人用于深拷贝的操作中。但是随着这一对方法的使用，我们会发现它们存在的弊端，比如会丢失函数和undefined类型的内容，如下：这里边的丢失内容为undefined类型c和函数f，在查询了资料后发现JSON.stringify会丢失的内容有以下内容:使用JSON.Stringify 转换的数据中，如果包含 function
2022-03-21 17:27:58
10342
原创 vite+vue3+ts路由vue-router的使用，以及参数传递
前边我们分别介绍了pinia以及vite+vue3+ts这套组合的组件传参方式，以及简单todolist的demo，这些基本上都够一个项目的开发了，这时候是不是觉得还缺点什么？那就是路由vue-router，以及数据请求axios了。axios的用法与vue2的差别不大，就是一些ts的语法问题，所以也就不对axios的用法做介绍了，本篇来介绍下vue-router路由的使用。本篇也不从创建项目开始了，对vite+vue3这套项目不了解的可以看下《vite+vue3+ts简单例子todolist》,本篇
2022-03-03 20:35:17
16611
2
原创 vite+vue3+ts父子组件传值，及属性监听watch用法
vite+vue3中父子组件传值，defineProps和defineEmits的使用，以及watch的使用
2022-03-03 16:28:45
13999
原创 获取URL中参数，以及参数和对象之间互换
现在原生h5的项目不多了，但是url传参这样的操作估计也不是很多，这里就给有需要的人，提供一点小小的帮助吧。话不多说直接上代码：获取URL中的参数并转为对象/** * 解析url中的所有参数信息 * @param url {String} 传入的地址url，默认当前访问页面的window.location.href * @returns {Object} 返回url参数所组成的Object数据对象，没有参数范会空 {} */ const parseQueryString = (url
2022-01-04 16:55:08
1051
原创 js匹配两个特殊字符中间内容的正则以及html标签之间内容的匹配
匹配两个特殊字符匹配两个特殊字符中间的内容，比如¥1234¥ 要匹配两个¥之间的数字：// 使用正则let reg = /(?<=¥).*?(?=¥)/;let str = '¥1234¥';// 使用str.match(reg); // 输出 ['1234']在这里不包含前面匹配的字符写法（?<=要匹配的开始字符），不包含后面要匹配的字符写法（?=要匹配的结束字符）有了以上直接匹配特殊字符中间内容的方式，如果带上所要匹配的字符就更直接了'¥1234¥'.match(/¥.
2021-12-28 11:43:54
8901
1
原创 Vue插槽的使用和插槽的传值操作
最近有小伙伴询问Vue中插槽的使用，或者有些对插槽比较陌生的有比较想用的，这里我就针对Vue的插槽使用方式进行简单的讲解，其实对于插槽最全的还要属官方文档，但是有些小伙伴就是不爱看官方文档，那么就来看下我这边对插槽基础使用的叙述吧，希望对你有用！！！首先我们先了解插槽的分类，插槽分为默认插槽（这个叫法可能有不一样的，但是都是一个东西，我这比较习惯成为默认插槽）、具名插槽和作用域插槽。下边将对这几个插槽的基础用法进行简单实例，讲解谈不上就是基础的使用用法让你更加便捷的使用。默认插槽默认插槽顾名思义就是默
2021-12-20 16:05:33
13733
原创 js验证字符串是否为正则表达式
js验证字符串是否为正则表达式，正确返回true，否则返回false。const isRegExp = (v) => { return Object.prototype.toString.call(v) === '[object RegExp]';}// 例子const reg = /[0-9a-z]/;console.log('是否是正则reg：', isRegExp(reg)); // 输出 trueconsole.log('是否是正则reg：', isRegExp(/[0-9a-
2021-12-15 17:07:51
4074
原创 原生js获取form表单数据以及高亮美化JSON输出展示
现在基本项目都以框架为主react和vue之类，这也就导致很多人对原生js的操作变得生疏，甚至有些工作几年的前端基础还是一知半解，问起框架来还能侃侃而谈，面对原生js就吞吞吐吐了。优秀的框架总能吸引一大堆爱好者的追随，但是原生的魅力也需要我们来了解，框架固然好用但是基础知识也要跟上才行，同样是话不多说直接上代码：serialize.js// 获取制定form中的所有表单元素const getFormElements = (formId) => { const form = document
2021-12-15 15:50:51
2770
3
原创 vue2.x和vue3.x双向绑定原理的区别，以及vue3.x双向绑定的深入解析
vue2.x和vue3.x双向绑定原理的区别vue作为mvvm模式的框架，双向绑定一直是它的一个亮点，在vue2.x的使用过程中都曾遇到过很多坑点，为了避免这些坑又做了许多不必要的操作。那么为什么会有这些问题呢？我们先来看下vue2.x的原理，相比这个有了解的都知道是Object.defineProperty()，这里不多说直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
2021-12-13 17:59:36
1195
原创 JS判断两个值是否相等，任意两个值对比，包括数组对象的对比
闲暇无聊中翻阅vuejs的源码，在里边发现了一个比较强壮的对比方法连数组对象都能正确对比；后边还有可以获取某个值在数据中是否存在，一个比较强壮的indexOf，如果对你有用欢迎点赞收藏和分享。话不多说，直接上代码：/** * 判断是否为基础类型object（这为基础类型判断，所以数组和对象是区分不开的，只为下边对比使用） * @param {any} obj 传入要判断的数据类型 * @returns 为object的为 true， 否则为false */function isObject (
2021-12-10 15:25:48
1980
原创 js的递归和while
作为一名多年前端开发的资深码农，一直对于堆啊和栈啊什么的不屑一顾，平时工作中while使用的很少，用递归反而多点，在最近无意中的一个计算操作中发现了在js中递归的缺点，然后自己做了个实验：显示用递归// 递归let num = 0;const max = 1000000;function a () { num++; console.log(`当前循环次数：${num}`); if (num === max) { return false; } else { r
2021-06-29 11:36:21
635
原创 常用的金额数字的格式化方法
常用的金额数字的格式化方法，这里提供的有千分位的和汉字金额间的转换数字金额格式化方法/** * 数字金额格式化（千分位） * @param {Number} money 要转换的金额数字 * @param {Number} num 小数点后有效数字 * @returns */const moneyFormatter = (money, num) => { num = num > 0 && num <= 20 ? num : 2; money
2021-06-03 17:29:13
1023
原创 JavaScript 16进制色值获取反色色值
JavaScript 16进制色值获取反色色值这个为js获取16进制色值的反色色值的方法/** * 16进制色值获取反色设置方法 * @param {String} oldColor 为16进制色值的字符串（例：'#000000'） * @return {String} 返回反色的色值（例：'#ffffff'） */const colorReverse = (oldColor) => { oldColor = '0x' + oldColor.replace(/#/g, ''
2021-04-16 18:01:08
4122
2
原创 JavaScript-在不修改程序源代码增加新功能（开放-封闭原则）
在我们工作中经常会遇到一些“祖传代码“要我们接手，在还没熟悉的时候突然有了新的需求，比如在一个testLoad函数中打印出所有节点的数量。这个难不倒我们，打开编辑器，搜索出 testLoad函数在的文件中的位置，在函数内部添加以下代码：testLoad = function () { // 此处省略代码 console.log('源函数的操作内容'); // 新增操作代码 console.log('输出所有节点数量', document.getElementsByTagName('*').
2021-02-05 16:57:48
1120
2
原创 纯CSS小黄人，让你眼前一亮的CSS技巧
纯CSS制作，小黄人动画这是由纯CSS制作的小黄人动画<!-- * @Author: shenzhipeng * @Email: [email protected] * @Date: 2020-08-28 14:39:49--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo.
2020-10-30 17:19:54
291
原创 React配置less以及less的全局变量设置
工作中接触react的项目比较的少，对于less的全局变量设置在vue项目中设置过，react的全局变量设置没怎么接触了。看到有小伙伴问这个，试着在网上找了下，也是花费了不少的功夫才找到不错的方式，在这里分享给大家。由于之前vue项目里没法使用sass-resource-loader，一开始也没有往这一方面想，话不多说正文开始。首先React配置Less看到这篇文章基本上是上手react项目了吧，这里就不从创建项目开始了。1. 在项目中下载安装less插件npm install --save
2020-07-01 15:02:20
9544
2
原创 MarkDown的基础用法（纯文字和语法）
Markdown 标题Markdown 的标题有两种格式。1. 使用 = 和 - 标记一级和二级标题# 我展示的是一级标题## 我展示的是二级标题2. 使用 # 号标记使用 # 号可表示 1-6 级标题，一级标题对应一个#，二级标题对应两个#，以此类推# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题Markdown 段落格式Markdown 段落Markdown 段落没有特殊的格式，直接编写文字就好，段落的换
2020-06-15 20:35:36
2259
原创 输出0～n的数字并输出多遍
输出0～n的数字并输出多遍，这个方式是输出类似010101010101，012012012012012，012301230123，这样的数列；这样输出的数列可以让一个数组按顺序循环的输出多次，这个方式叫什么算法不太清楚，或者也算不上是什么算法，先放这里如果您知道请在下方留言，谢谢！javascript方式const sFun = (value, length, vflag) => {...
2020-04-20 11:45:59
297
原创 JS的浮点型乘除法无法精确计算问题处理
JS的精确计算问题是一些做金融或一些需要计算功能的一个坑点，例如：// 加法0.1 + 0.2 = 0.300000000000000040.1 + 0.7 = 0.79999999999999990.2 + 0.4 = 0.6000000000000001 // 减法0.3 - 0.2 = 0.099999999999999981.5 - 1.2 = 0.300000000000...
2020-04-07 18:42:31
772
1
原创 h5页面置灰处理源代码，兼容IE（优雅降级提供下载浏览器链接）
h5页面置灰处理源代码兼容IE（优雅降级提供下载浏览器链接）马上要到清明节了，有朋友找我要给页面置灰的方案和方法，在网上搜的方法基本都是在Chrome上直接置灰，在ie上就有点难处理了；我找了下之前在南京遇到公祭日时候，做过类似的操作，为了方便当时用原生js写了一个，这样的好处是不依赖jq之类的，需要时候引入不需要时候废弃就行。对与IE的兼容，我们做的是优雅降级，在IE的时候提示让用户去下载...
2020-04-03 17:48:13
1763
原创 Orcale清空表数据常用的两种方式
Orcale中经常用truncate、delete来清空表的数据两种方法的区别：truncate，意思为截断表，能够不占用资源的全部删除表，优点是速度快，缺点是删除不能恢复，不能按条件删除。delete，意思为删除，此操作占用redolog，优点能够快速恢复和选择删除，缺点是删除慢，大批量的删除不建议使用。两种方式的用法，SQL如下truncate table [表名];delet...
2020-03-23 10:56:59
384
原创 React配置代理proxy(实现跨域请求)
最近有不少伙伴询问react的代理配置，自己也去试验了一下发现不少的坑，在这就将所遇到的坑和心得分享出来，希望能帮到更多的伙伴，避免踩坑。1、 直接在package.json中设置proxy属性这个是在用create-react-app脚手架搭建的react项目中的，可以直接在package.json中配置proxy：有些文章里会提示以下方式 "proxy": { "/api/*...
2020-03-03 21:24:29
46019
9
jquery使用手册.zip
2020-04-16
VSCode插件 杨超越鼓励师插件离线安装
2019-04-17
点聚weboffice,点聚weboffice全部资料和安装包
2018-08-29
JavaScript设计模式(张容铭)pdf(下载解压即可）
2018-05-10
JavaScript设计模式详细资料PDF文件(下载解压即可）
2018-05-10
windows仿Mac空格预览软件Seer
2018-04-09
cordova.js
2018-04-09
jquery跑马灯轮播图插件jquery.roundabout.js
2018-03-22
LICEcap简洁的windows录屏工具
2017-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人