![](https://img-blog.csdnimg.cn/20200930090325130.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端知识
文章平均质量分 78
分享前端的小知识。
前端发现
致力于分享前端技术文章,让前端变得容易!
展开
-
Vue3新的script setup语法糖,拿来吧你!
大家好,我是小佑@小佐https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。作为一名前端程序员,说起Vue3相信大家都不会陌生,它是当下最火热的前端人员必备的框架。虽然Vue3已经发布很长的一段时间了,但是真正使用在项目中确是比较少的,大家或许都还在尝鲜阶段,还不是特别熟悉新的写法,尤其是从Vue2的组件式API更改为Vue3的Composition API,刚开始尝鲜的小伙伴可能还在吐槽Vue3中原创 2021-07-21 10:59:33 · 5434 阅读 · 10 评论 -
vue事件总线实现
如何实现事件总线?原创 2023-06-24 11:19:08 · 177 阅读 · 0 评论 -
Vue3中父子表单组件数据同步问题
vue大型表单组件数据如何优雅实现?原创 2023-04-06 21:08:36 · 1862 阅读 · 1 评论 -
JS算法:超大数相加的奇技淫巧
字符做加法?原创 2023-01-10 21:29:48 · 630 阅读 · 0 评论 -
微信小程序实现海报功能经历
前言大家好,我是《前端发现》。发现前端,发现技术,让前端变得更加容易。实现海报?你想到的应该是html2canvas吧,但,这里是小程序,好像并不通用。只能用canvas一笔一划去描述了吗?答案肯定是不对的,今天介绍一个Painter插件,它可以帮助你快速完成小程序上的海报功能。前期准备去github下载插件需要的文件。下载地址:[https://github.com/Kujiale-Mobile/Painter]。下载好找到文件里面的components/painter,复制整个painter文件原创 2022-04-11 15:49:11 · 2617 阅读 · 3 评论 -
面试官刁难系列一:手写图片懒加载代码
前言今天是跟面试官开撕的第一天,当你过五关斩六将终于来到面试官面前时,他可能在面试你之前写过如下的代码:<el-image :src="url" lazy></el-image>没错,就是这么轻描淡写的一句代码,他心里却有了不一样的想法。lazy 这个属性它是如何实现图片懒加载的?请说说你的思路。头脑顿时一场空。"只怪我平时只复制粘贴写业务代码了,草率了!"你可能此时是这样想的。幸运的是,今天是开撕的一天,今天就甩出你自信的代码给面试官。element-plus实现思路转载 2021-08-26 11:29:31 · 416 阅读 · 0 评论 -
最新Vue3+Vite+Setup开发秘籍(包含源代码)
前言大家好,我是《前端发现者》,发现前端,发现技术,让前端变得更加容易。今天给大家带来一篇Vue3的开发文献,供大家在开发过程中查阅,一时看不完 收藏 点起来✌️Vue3就在前几天尤大大发布了 V3.2.2 的版本了,此次更新在前端程序员看来可谓是皆大欢喜、欢呼雀跃。那么问题来了?旧项目要不要从Vue2升级为Vue3呢?新项目要使用Vue3吗?答:旧项目暂且不考虑升级。新项目可以尝试用Vue3开始搞起(纯属个人意见,仅供参考!)这个怎么说呢?旧项目需要考虑稳定,毕竟是已经在使用的产品,要原创 2021-08-20 18:01:35 · 1052 阅读 · 0 评论 -
盘点Vue3那些有趣的API
从开始的Vue到Vue2再到现在的Vue3,前端开发人员一直被迫营业,永远也追不上尤大大写代码的脚步????今天我们放慢追赶的脚步,一起来看看尤大大在Vue3书写了哪些有趣的API,有些可能说不上哪里有趣,但是看起来就是比之前舒服一些(强迫症在线发作…)。文末有尤大大连夜写的新需求data选项?回想在Vue2中我们创建响应式数据是这样的:...data() { return { num:1 }}...而Vue3会 setup 组合式API这个选项了,为此引入了ref、r原创 2021-08-17 13:21:52 · 250 阅读 · 1 评论 -
JS数组reduce的妙用,收藏等于学会!
说到处理数组的方法,想必大家都不陌生了,今天我们一起来学习下理数组常见场景下的????方法。首先来看看 reduce 方法可以传入哪些参数function(pre,cur,index,arr)pre:必需,初始值或计算结束后的返回值cur:非必需,当前处理的元素index:非必需,当前处理元素的索引arr:非必需,当前元素所属的数组对象直接看看????const list = [1,2,3,4,5]const result = list.reduce(function (pre, c原创 2021-08-17 13:16:44 · 241 阅读 · 0 评论 -
你正在使用哪个版本的JS特性?
相信JS的新特性我们都一直在使用,不得不说,每个版本的新特性都能给我们带来不一样的"爽"体验。那么,你知道你使用的JS特性是哪个版本发布的呢?❝面试官:你都在用哪个版本的JS新特性?蔡姬我:别急,我先总结一番。❞那就让我们一起来回顾下那些年使用过的JS特性。ES2015(ES6)let/const关键字字符串模版语法函数传参默认值箭头函数导入导出解构赋值rest参数class类Promiselet/const解决之前只有函数才有作用域的问题{ var a原创 2021-08-05 13:18:37 · 1164 阅读 · 0 评论 -
Vue2与Vue3组件通信方式总结
我们都知道Vue作为一个轻量级的低门槛入门前端框架,其核心就是 组件化开发 。Vue就是由多个组件组建成的,组件化是它的精髓,更是它的强大之处。各组件实例之间是相互独立的,这也就意味着不同组件之间数据是无法相互共用。但实际项目开发中,我们时常需要其他组件的数据,为此诞生了组件通信的问题。针对组件之前的关系:父子、兄弟、子孙的不同选用的数据传输方式也不一样,今天就来做个总结。Vue2组件通信父组件向子组件传值props父组件以属性的方式传值给子组件子组件通过props方式接收数据在父组件中引原创 2021-08-02 09:40:13 · 649 阅读 · 0 评论 -
一文搞定Vue3中使用Vuex
伴随着Vue3的出现,基于Vue3的各种插件和框架也都陆续开发出来了。如Vue3对应的Vue-Router4.x和Elementui-plus等等,今天来聊聊基于Vue3的Vuex4.x。vuex4.x的官网如下:https://next.vuex.vuejs.org/安装Vuexnpm方式npm install vuex@next --saveyarn方式yarn add vuex@next --save可以看到现在是使用vuex@next来安装next的版本的,使用以上命令安装的最新版原创 2021-07-26 16:41:16 · 802 阅读 · 0 评论 -
小程序接入vant Weapp组件的详细步骤
刚创建的项目的文件结构首先在你项目的根目录下打开终端,输入npm init 对项目初始化这时会生成pachage.json文件。继续在终端运行以下命令我这里用这个:npm i vant-weapp -S --production运行完如图所示:安装成功后 回到小程序开发工具 点击 工具 => 构建npm运行完截图:完成后在编辑器右边的详情把红框内的打勾上使用组件在你想使用组件库的的json文件内引入组件。比如你想在fundIncome页面内使用button组件原创 2020-10-26 11:18:07 · 2932 阅读 · 27 评论 -
项目中总会用到的方法,即开即用(持续更新ing)
前言:你是否有这样的烦恼,每构建一次项目都会用到很多过滤器?本篇将为你解决这个烦恼,这里整理了很多在开发中需要用到的过滤器或方法,都是复制即用的。时间过滤器// 对Date的扩展,将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd原创 2020-10-18 21:33:25 · 311 阅读 · 1 评论 -
Vue中移动端使用postcss-px2rem和lib-flexible解决自适应
前端页面移动端免不了需要自适应高度宽度字体大小等等,如果直接写rem的话那会很麻烦,前端还需要根据设计图自己去转rem写样式,那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。添加依赖postcss-pxtoremyarn add postcss-pxtorem 或 nmp install postcss-pxtorem添加依赖lib-flexibleyarn add lib-flexible 或 npm install lib-flexible在package.j原创 2020-09-22 14:13:10 · 1511 阅读 · 30 评论 -
小程序底部弹起组件化与插槽案例
小程序中经常会遇到点击从底部弹出一个框,并且框在底部的位置,假设多个页面都需要用到这种特效的话,建议是写成自定义组件会比较好(个人建议!!!)。直接看设计效果:类似于这种情况的效果:点击按钮弹出一个框,显示相应的信息。框内的信息多种多样,为此我这里作成了插槽,用法类似于vue的slot。bottomDialog.jsComponent({ /** * 组件的属性列表 */ /** *注:这里需要启用插槽 */ options: { multipleSlo原创 2020-07-23 17:20:16 · 606 阅读 · 38 评论 -
你想要的js正则表达式都在这!
一、校验数字的js正则表达式1、数字:^[0-9]*$2、n位的数字:^\d{n}$3、至少n位的数字:^\d{n,}$4、m-n位的数字:^\d{m,n}$5、零和非零开头的数字:^(0|[1-9][0-9]*)$6、非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$7、带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$8、正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$9、有两位小数的正实数:^[0-9]+(原创 2020-10-10 12:37:46 · 1460 阅读 · 39 评论 -
JS中三大家族方法
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域...转载 2018-08-22 12:07:32 · 635 阅读 · 0 评论 -
认识可选链和双问号语法
目录可选链操作符(双问号操作符)nullish coalescing operatorBigInt我们都知道一个新的ECMAScript标准的发布需要经过五个阶段,分别是Stage 0-Stage 4阶段,每个阶段都需要TC39的审批和全体成员的一致同意才能提交至下一个阶段。本文中提到的特性是处于Stage 3 || Stage 4阶段。所以说以下提到的新特性很快就可以为我们程序员造福了,下面...原创 2020-01-05 16:48:24 · 2907 阅读 · 22 评论 -
最简单的使用git上传项目到github仓库
最简单的使用git上传项目到github仓库前言介绍前期准备交流前言介绍每当完成一个自己努力之后的项目实现后,心中总有多多少少的成就感,就像跟别人分享或者写下自己的心得,那么开源github绝对是一个交流学习的好机会。下面我将介绍如何利用git将项目发布到github上。前期准备首先你需要一个github账号,未注册的朋友请走快捷通道 ↓点击去注册有了账号之后我们需要安装git工具,同...原创 2019-06-08 16:36:55 · 424 阅读 · 0 评论 -
使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目前言介绍创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建一个movie为例的项目。前期环境准备第一步 :安装好npm、node从官网下载本机对应的npm版本和node版本,这里不做介绍。安装完成后检查是否安装成功。检验方法:打开控制命令行程序-》cmd,输入node...原创 2019-06-08 13:09:07 · 1670 阅读 · 19 评论 -
我认知的ES6语法
工作中难免会遇到有关于ES6语法的用法及注意事项。以下是个人总结的一些知识,如有不足或错误还望指正!那么,在ES6中,我们有哪些改变的地方呢?1、变量声明之前的写法:var a;//声明一个变量avar PI=3.14;//声明一个常量PI并赋值ES6的写法:let a;//声明一个变量aconst PI=3.14;//声明一个常量PI并赋值ES6中引入了let、const。...原创 2019-02-16 00:33:02 · 321 阅读 · 0 评论