- 博客(63)
- 收藏
- 关注
RSS订阅
原创 新手前端不要慌! 给你✊10根救命稻草
????放假了特意给大家坐火车打发时间写了这篇工具收集类的小文, 让大家轻轻松松学知识, ????"铁皮饭盒"祝大家十一快乐, 吃开心玩开心!新手阶段的前端面临的最大问题就是: “????这个咋做?”, 这个阶段的前端自己实现交互功能基本是不可能的, 那怎么体现价值呢?我给个建议: “不会写还不会用吗?”, 其实js发展这么多年,常见的功能在github上都是可以找到的, 下面我就给大家拿出我收藏多年的"救命插...
2019-10-08 08:52:34
218
原创 比vuex香的pinia最快速入门指南
如果是新项目, 完全基于setup的, 那么建议使用pinia代替vuex, vuex官网有说pinia可以理解为vuex5, vuex不会出5了.安装shellnpm i pinia -S使用首先在"main.js"中引入"pinia", 并关联到"vue"实例上.javascriptimport { createApp } from 'vue'import {cre...
2022-08-23 15:22:53
232
原创 vue3中h函数的常见使用方式
一般情况下每个vue组件都用"\renderrender是组件的一个选项, 他的返回值会被作为组件的DOM结构.```html```试试插入html:```html```可以看到html标签被当做字符串渲染了,* 并没有生成h2标签. 如何正确插入h2标签呢?*VNode如果想插入DOM就要用到"VNode", VNode是vue对页面DOM节点的描述,...
2022-08-17 09:49:46
644
原创 vue3开发拒绝cv, 快使用crud
开发管理后台基本是企业的日常需求, 基本每个前台项目都必有一个后台项目跟着, 虽然是必需品, 但是大家好像有不是那么在意他, 毕竟只有管理员用, 今天我们讲一下"增删改查"组件:crud-vue.crud-vue通过简单的JSON配置即可实现完整的"增删改查". 注意: crud-vue是基于ant-design-vue的, 所以更进一步的开发中,可直接使用ant的组件安装she...
2022-08-02 14:56:56
235
原创 docker中部署mongo一定会执行的几条命令(新手)
本文没啥特别深的技术点, 就是作为mongo新手的我的一篇踩坑入门笔记(我踩了2天), 希望帮助其他新手快速把mongo部署好.如果你不想阅读本文的文字, 那么按顺序执行命令即可完成安装部署, 最后实现在mongo中拥有"root"账号.安装mongoshelldocker pull mongo初始化容器shelldocker run -d -p 27017:27017 ...
2022-04-06 10:42:18
206
原创 vue3中什么时候封装成组件? 什么时候封装成指令? 通过实例告诉你(typescript)
什么时候封装成组件? 什么时候封装成指令?一般情况下, 如果要封装的代码中, 包含大量的 HTML,就需要用组件,反之如果仅仅对某一个 DOM/组件的根 DOM 进行操作,那么可以选择封装成指令."拖拽"等手势的识别仅仅是对某一个元素/组件上的"mouse/touch"进行识别,并不涉及DOM操作, 所以这里封装就选择"指令".最终目标(v-touch指令)先看下目标, 然后分析....
2022-03-31 11:03:59
238
原创 ⚡any-type, 傻瓜化操作, json数据生成typescript类型
今天给大家介绍我新开发的工具"any-type", 一个vscode插件, 他可以根据 javascript 字面量生成 typescript 类型.????使用场景在ts中, axios请求的数据, 为了后面的操作, 我们都是要手动标注类型的, 比如:typescriptconst response = await http.get<ResponseData>("/summ...
2022-01-20 09:42:56
364
原创 ⚡npm/yarn/pnpm快速切换/还原安装源(淘宝)
整理了3个常用包管理工具的设置, 收藏起来, 用的时候复制粘贴.????npm查看源npm get registry 临时修改npm --registry https://registry.npm.taobao.org install any-touch持久使用npm config set registry https://registry.npm.taobao.org...
2022-01-19 11:03:29
994
原创 数据分析前端正则TOP10, 必用⭐正则(77条)
你好, 我是any-rule(一个vscode插件)的作者, 感谢大家长期以来对any-rule的喜爱. 经过大家1年多的使用, any-rule后台已经有了10w+的日志记录, 年底了分享下这1年中大家最喜欢的正则有哪些.https://github.com/any86/any-rule????正则TOP10不出所料, 最常用的正则是"手机"活动????正在参加掘金的活动, 如果你觉...
2021-12-21 11:13:02
931
原创 这次typescript(4.5)给vue3安排的明明白白
之前看ts的更新日志总能看到这次为"react做了xxx", 作为vue的使用者, 羡慕. 昨天翻看日志, 突然发现vue字样, 不敢相信, 赶紧拿出我的老花镜把内容看了个明明白白.preserveValueImports这是tsconfig中新增的选项, 干什么用呢? 简单说就是ts之前的版本如果导入的变量未使用, ts编译后会删除他, 用了这个选项就可以告诉ts"别多管闲事"....
2021-12-16 10:09:56
101
原创 收藏吃灰⭐系列, typescript更新日志中文速读(已更新到4.5), 持续更新...
个人学习为主, 顺便方便他人.????首发地址: https://github.com/any86/ts-log-cn, 本文内容也会持续更新.???? 阅读须知由于个人能力有限, 所以本文只从"typescript 更新日志"中筛选类型/语法相关的知识点, 3.1之前的版本都是一些基础知识, 所以只摘取了部分内容. 如有错误还请各位多多指点帮助.注意: 类型推断的变化(放宽/收窄)和配置项以...
2021-12-13 09:16:37
152
原创 快速掌握vue3新语法(二) - setup的参数(props/emit)
因为setup的解析在其他组件选项之前, 所以setup中"this"并不是组件实例, 之前通过"this"获取的属性现在都要从setup的参数中获取, 比如"props/emit".propssetup的第一个参数是props.html<!--App.vue--><Test :number="100"/>```html {{number}} ...
2021-11-19 11:07:02
125
原创 快速掌握vue3新语法(一) - 初识(setup/reactive/ref)
"组合API"是vue3扩充的全新语法, 前面基础课中讲解的语法叫"选项API". 2种API在vue3中都支持.解决了什么?"组合API"可以更进一步拆分"选项API"中的JS逻辑. 可以把某一逻辑的"data/computed/watch/methods/声明周期钩子"单独封装到一个函数(也可单独一个文件)中. 一般给拆分后的函数命名"useXxx".拆分实际需求分析...
2021-09-29 14:09:28
186
原创 [总结]学习vue3都需要会哪些typescript的知识点?中秋回家的路上学会ts.
总结知识点vue3需要用ts可能是小伙伴没开始玩转vue3的最大障碍, 经过1年vue3+ts开发实战, 我总结了必须要会的ts知识点(内容只有官网内容的1/4), 方便大家学习vue3的时候查阅, 保证大家学会了本文轻松玩转vue3开发.????祝大家中秋快乐vue3基础如果你还没有开始接触vue3, 也可以看我整理的vue3基础教程(带视频).基础数据类型课程中的代码大家可以...
2021-09-18 14:42:44
933
原创 TypeScript系列, 通过vue3实例说说declare module语法怎么用[模块声明篇]
欠你们的本系列文章是我20年开始写的, 这个模块声明也是本系列的最后一课, 中间因为时间安排间隔了1年, 当时答应大家要补充的, 现在来还债????.中间的时间我写了vue3的入门教程, 现在写了一半了吧, 带视频的, 如果有需要的小伙伴可以去看看.https://www.yuque.com/books/share/c0ab3348-87ab-4e77-a34e-10ede7dfb00e?# ...
2021-09-17 09:35:38
3752
原创 解决页面滚动, ant design的select框和选项分离问题, 同时理解ant的html设计技巧.
通过解决我们也学一下ant的html/css设计技巧.现象滚动的时候, 这里"负责人"的选项和select框已经分离了.我用的vue版本的, 我看了下react版本的api设计, 我想2个都会出现这特殊情况.原因点击select的时候, ant做了2件事情:1. 生成"选项列表div"放在body的尾部.2. "选项列表div"会根据select相对于body元素计算当...
2021-08-25 14:35:50
258
原创 vue3只用ref, 12行代码实现"useAxios"
refref 是 vue3 新增的 api, 他的意义就是单独定义一个可以"被追踪"的变量, vue2 中所有变量都需要在data中定义, vue3 中增加了一个setup字段, 在这里我们可以更灵活的定义变量.vue3javascriptexport default defineComponent({ setup() { const countA = ref...
2021-06-22 11:42:58
163
原创 0学习成本,1秒假数据, ❤️前后端分离必看
内容摘要功能展示.开发中使用的插件.前后端分离因为vue/react的普及, 现在的开发模式都变成的前后端分离, 前端开发初期就需要假数据(数据结构).本人前端, 每次开发都苦恼于上面的需求, 所以做了下面的小工具.无脑一键假数据, 总共分2步在线预览BMOCK第一步, 输入任意JSON随便输入JSON(JSON和JS对象均支持), 点击确定.第二步, ...
2021-02-02 10:17:27
119
原创 2020年这些"正则"应该被收藏(更新, 63条)
来源: github.com/any86/any-r…火车车次/^[GCDZTSPKXLY1-9]\d{1,4}$/复制代码手机机身码(IMEI)/^\d{15,17}$/复制代码必须带端口号的网址(或ip)/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/复制代码网址(url,支持端口和"?+参数"和"#+参数)/^(((ht|...
2020-06-08 00:49:11
1177
2
原创 [⏰5分钟学会,或者1秒CV代码] d3.js 组合 vue, 新手也实现 拓扑(svg 版)
目标效果???? 在线实例源码地址如果急用, 可先cv走代码修改, 哪里没明白再回来看哪里.github.com/any86/any-t…介绍下 D3.jsd3 是一个大而全的图形库, 集成了svg 元素操作和常见图表(图形)的数据结构.本文基于v5 版本的 d3 编写, d3 的功能都是拆分成独立包的, 我们这里只需要引入d3-hierarch和d3-shape生成拓扑的数据结构./...
2020-05-19 01:39:28
967
原创 告别无聊的undefined判断, 让老vue-cli3支持"可选链"等"ES2020"特性
本文能学到什么?让老项目(基于vue-cli)支持ES新语法(处于试验阶段), 比如"可选链".了解其他目前在实验阶段的ES新语法.可选链近期看到多个群中都在聊"可选链", 所以就把单位的老项目也开启了"可选链"功能, 使用了1个月后的感受就是: 再也不用写那么长的"undefined"判断了, 可选链"真香".const obj = { foo: { bar: { ...
2020-04-28 06:46:14
5148
原创 17行代码, 学会UI组件库都在用的"el.contains(node)"
干什么用的?el.contains(node)用来判断一个元素是否在另一个元素内.一般组价库中的"下拉"和"气泡对话框"用这个特性来实现"点击组件外部关闭组件"功能.17行实现clickOutside(点击元素外部触发)本文并不是要讲如何实现一个"气泡"组件, 而是实现一个组件中的通用功能:点击元素外部触发, 希望帮助大家能举一反三.源码 :https://github.com/any...
2020-03-23 10:35:19
128
原创 17行代码实战, 深入理解UI组件库都在用的"el.contains(node)"
干什么用的?el.contains(node)用来判断一个元素是否在另一个元素内.一般组价库中的"下拉"和"气泡对话框"用这个特性来实现"点击组件外部关闭组件"功能.17行实现clickOutside(点击元素外部触发)本文并不是要讲如何实现一个"气泡"组件, 而是实现一个组件中的通用功能:点击元素外部触发, 希望帮助大家能举一反三.源码 :github.com/any86/6h/b...
2020-03-23 02:35:19
1495
原创 Vue"非常规"技巧, 或抛弃"指令", 让"原生Event"与"v-on"在一起
一句话理解"Event"类似vue中$emit, 使用new Event可以创建浏览器的原生事件,通过使用addEventListener监听事件.简单使用:// 监听el.addEventListener('abc', onAbc);// 创建事件const event = new Event(type);// 派发事件对象el.dispatchEvent(event);复制代...
2020-03-04 04:46:26
512
原创 我是any-rule作者, 2019年"开发者"都在用的正则有哪些?
如若初次any-rule是一个vscode插件, 开发者可以方便的查询常用正则.快速成长实时star✨6月28日开的项目, 截至本文star已经增长到1625, 这要非常感谢????平台曝光和各位优质开发者的认可????, 请收下微臣的膝盖orz.经过半年的维护,整理正则已经打到61条, 共计解决了45条issue, ????根据开发者反馈新增了14条正则. 下面我就列出这些新增的正则, 算是为19...
2019-12-30 03:14:33
1336
3
原创 常用JS正则大全(2019年11月12日更新)
代码仓库: https://any86.github.io/any-rule/11月12日更新"网址"匹配更准确,支持匹配vue的路由参数9月16日更新"银行卡号"根据微信支付文档, 修改卡号长度为10到30位.8月2日新增vscode插件查正则不用来回切换了, vscode中搜索"any-rule"必须带端口号的网址(或ip)/^(((ht|f)tps?):\/\/)?[\w...
2019-11-25 10:00:33
2468
转载 给新手前端的✋5段救命css代码(scss mixin)
封装成mixin复用在写????css的时候, 很多样式都是很常用但是写起来很麻烦, 虽然现在有很多成熟的ui框架, 但是我们也不能一个????简单的活动页也引入那么????大个框架吧?在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 挑选了✋5个分享给大家, 希望大家喜欢.做一名合格的"CV"工程师, "复制/粘贴"一把梭溢出显示省略号参过参数可以只是单/多行./*** 溢出省略号...
2019-11-22 01:32:23
277
转载 新手前端学typescript - 实战篇, 实现浏览器全屏(59行)
学习一门新的语言, ????最快速的方法还是看实战代码!初学ts的时候, 大家都会问"有什么实际项目可以参考吗?".好了! 满足大家的需求, 我计划定期用ts做一些业务常用小插件, 代码量尽量小(控制在????1kb以内), 方便大家阅读源码, 也方便大家有时间去实现一遍.浏览器全屏最近后台项目需要一个"全屏"的按钮, github了下, 发现都仅仅支持"开启全屏", 而没有"切换"/"监听全屏状态...
2019-11-19 00:59:14
842
转载 TypeScript系列尾声篇, 什么是声明文件(declare)? [全局声明篇]
往期目录第一课, 体验typescript第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型第五课, 命名空间(namespace)是什么特别篇, 在vue3????源码中学会typescript???? - "is"第六课, 什么是声明文件(declare)? ???? - 全局声明篇全局声明篇年底比较忙????, 受个人时间限制, 暂把"声明"部分的内容分为"全局声明篇"和"模块声...
2019-11-13 09:16:36
33552
1
转载 vue/react"联动"/"菜单"组件的小帮手, "数组"变"树"函数
新后台做菜单, ????后端说:这次菜单层级不固定.直接给把数据库中的表数据(数组)发给你.菜单需要排序.其实平时很少写数据处理, 不过觉得自己差不多能实现就答应了. 写完了觉得还挺好用就分享一下, ????菜鸟一枚, ????路过的大佬如果发现什么问题请告知, ????我必虚心接受.注: 饿了么/iview等组件库中的"级联选择器"/"导航菜单"等组件都可使用下面的函数简化操作.本文源码: github...
2019-10-23 08:21:12
193
转载 在vue3源码中学会typescript - "is"
vue3????是用typescript实现的, 所以我认为他的源码是我们学习tyepscript的最佳实践, 下面我就用他源码中的实例让大家学会使用typescript的"is"特性.直达第一课, 体验typescript第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型第五课, 命名空间(namespace)是什么特别篇, 在vue3????源码中学会typescript????...
2019-10-16 08:17:38
592
转载 新手前端不要慌! 给你✊10根救命稻草
????虽然十一长假结束了, 但是本文不会结束, 本文会一直更新实用的插件, 大家可以没事过来瞅瞅????========= 原文 =========????放假了特意给大家坐火车打发时间写了这篇工具收集类的小文, 让大家轻轻松松学知识, ????"铁皮饭盒"祝大家十一快乐, 吃开心玩开心!新手阶段的前端面临的最大问题就是: "????这个咋做?", 这个阶段的前端自己实现交互功能基本是不可能的, 那怎么体现价值呢?我...
2019-09-29 05:55:01
297
转载 揭秘vue/react组件库中5个"作者不造的轮子"
???? 这五个轮子其实是5个纯js实现的插件, 都非常优秀, 下面一一给大家揭秘.async-validator(数据验证工具)默认集成了url和email验证, 支持异步验证. element-ui和iview的表单组件都是用他实现的验证功能.import schema from 'async-validator';// 监视对象'name'字段的值是否等于muji, 且必须存在var ...
2019-09-24 08:01:37
197
转载 vue / react的UI库都在用的几个DOM API
虽然vue/react帮我们实现了操作数据映射到dom操作, 但是还是有很多不得不用DOM API的场景, 下面我就给大家列出一些UI库中经常出现的DOM API(写业务代码也可事半功倍).注: 本文是系列文章会持续更新, 大家可收藏保持关注. 也可关注我github上的笔记, 在这里发布的文章的第一版我都会存在github.com/any86/Notes上.MutationObserver...
2019-09-17 07:07:58
148
转载 初中级前端为什么要学会pr(github)?
为什么要学pr现在哪个公司招聘上不写着有github开源经历的 加分, 如果你还不能自己独立完成一个开源项目, 但是还想凑个热闹慢慢学习, 你可以从帮助别人找代码或者文档的bug开始.如果你发现了一个项目的bug, 你该如何改正并提交给作者呢? pr就是这样一个功能.总共分4步1.fork目标项目2.clone项目到本地3.修改代码然后commit4.pull request1.f...
2019-09-10 07:31:36
763
转载 真.1px边框, 支持任意数量边和圆角, 1 个万金油的方法
相关源码: github.com/any86/5a.cs…什么是"真.1px边框"????? 由于现在手机都是"高密度屏幕", 我们写的1px到了手机上会用2/3个物理像素点去显示, 这样1px边框看起来就会比较粗, 所以如果你也觉得自己的1px边框比较粗, 那么请往下看.================ 注意 ================截图因为放大了可能不明显, 你可以用手机打开这2...
2019-09-05 05:44:24
304
转载 css如何实现n宫格布局?
相关源码: github.com/any86/5a.cs…常见应用场景现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形":@include grid(3, 3, true); // 3 x 3, ...
2019-08-28 09:00:43
546
转载 为 Vue3 学点 TypeScript, 命名空间(namespace)是什么?
直达第一课, 体验typescript第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型第五课, 命名空间(namespace)是什么特别篇, 在vue3????源码中学会typescript???? - "is"第六课, 什么是声明文件(declare)? ???? - 全局声明篇什么时候要用命名空间?如果你发现自己写的功能(函数/类/接口等...)越来越多, 你想对他们进行分...
2019-08-21 08:46:47
2366
转载 基于flex-flow:column, 实现"商城分类页"充满屏幕高度
起因早上看群里有人问如何让"商城分类页"在数据不多的情况下充满屏幕高度.第一次回答(calc)相信大家的第一反应就是calc(100vh - 头高度), 我也是, 然后写了个demo:第二次回答(flex-flow:column)但是人家说头高度是padding撑起的没有具体高度, 好吧看来只能用flex-flow:column了.简单说下flex-flow:column, 默认f...
2019-08-19 02:33:14
377
转载 微信小程序文档没写支持, 但是实际支持的选择器有哪些?
小程序文档上说目前支持的选择器有：选择器样例样例描述.class.intro选择所有拥有 class="intro" 的组件#id#firstname选择拥有 id="firstname" 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 ...
2019-08-15 05:49:50
403
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人