自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 收藏
  • 关注

原创 总结Vue3的11种传参通信方式,非常齐全

vue3出来很久了,也非常成熟了,平时项目只管用也没多想,直至今天想写一编关于vue3传参,然后我总结一下竟然总结出来11种方式那么多,11种我分别列了出来,由于vue3有两种setup写法,下面我将用最简洁的代码例子针对主流的父传子子传父兄弟组件传参(mitt)$attrsrefsv-model路由传参vuex传参pinia传参浏览器缓存空闲想总结一下,纯人工肝了一天终于写好了,我尽量用最简洁易懂的方式写了,如果有什么写错了或者不够明细都欢迎大家指出。

2024-04-14 13:55:52 4561 2

原创 直接对比Vuex和Pinia在项目中的用法,5分钟就会用

我相信看这编文章的大部分都是会vuex和pinia其中一个状态管理的,想对比学习另一个。所以我将会从安装->使用->修改状态,每一步进行横向对比学习,这样会更加通俗易懂。如果有某一天忘记了某个地方的写法回头查看一下也起到了笔记的作用。

2024-04-14 13:53:32 822 1

原创 vue3+TypeScript+axios封装一个网络请求函数,拿了就能用

做业务的时候我估计大家请求网络的方法调了无数次了,但很少自己去封装一个,刚好最近有个vue3+TypeScript的新坑我负责去搭框架,封装axios请求的时候发现和JS还是有点区别的,所以记录一下。

2024-04-07 16:37:23 769

原创 你真的理解flex:1吗,用示例告诉你flex:1实际代表的是三个属性的简写

flex:1实际上是三个属性的缩写,最近工作上叫别人调一下样式,涉及到flex:1,又刚好涉及要改变flex:1的默认属性,他竟然不知道是什么回事?又跟别一个说了下也是不知道,估计是比较冷门了,所以才说明一下。

2024-04-07 10:56:36 282

原创 JavaScript不建议直接声明undefined的原因,极致的严谨和仔细

很多人写JavaScript代码时习惯用var a = undefined 这种写法,其实这种写在某种情况下会产生意想不到的bug,又或者说undefined本身就是JavaScript的一个bug??为什么这么说呢, 因为undefined它应该是关健字才合理的,但undefined在JavaScript里面压根就不是关健字,它是window的一个属性即window.undefined, 没想到吧。一个很有意思的小知识点,单纯是分享一下互相学习。

2024-04-05 16:19:57 373 1

原创 通俗易懂地重写浏览器console.log,让你在控制台个性化展示

前端朋友问到了一个问题:你说说怎么重写console.lo然后特意去看了一下文档,确实可以重写成自己喜欢的样式,还挺有意思的。首尾呼应开头问题,其实就是和普通函数封闭的思维是一样,动态传参修改样式,不传就取默认值。重写的确实比较随意简单,主要就是看个思路知道能这么玩,如果写的不好希望能指出问题啊。(1)通过%c能调整打印内容的css样式,并且只有%c后面的内容才会生效。我们浏览器用conlose.log其实是可以改变样式的,甚至添加图片。我们重写console.log主要用到的是%c占位符个性化去调整样式。

2024-04-05 16:15:47 616 1

原创 总结出五种场景下JavaScript中的this指向,覆盖项目中各种情况的this指向

想起以前刚刚入行的时候时不时遇到一下 this 相关的小问题,虽然这是 JavaScript 的基础知识,但情况太多了很多人都没有掌握好各种常见情况下的this指向,这就容易"指错方向"导致出现BUG,所以空闲想自己整理一下几种常见 this 指向并且附带例子代码说明。, 在箭头函数中,this的指向是由外层(函数或者全局)作用域来决定,如果往外层作用域查找 this 的指向,只要没有非箭头函数(普通函数)的包裹,就。上面就是我总结出来的五种场景的this指向,如有更多补充或者建议,可以指点指点啊。

2024-04-03 10:40:53 872 1

原创 用vue实现动态锚点定位,页面滚动和点击菜单联动效果

用vue实现动态锚点定位,页面滚动和点击菜单联动效果,主用到vue+javascript实现锚点功能

2024-04-03 10:32:00 986 1

原创 通过学会Proxy代理的用法彻底理解vue3响应式原理思路,附带对比vue2响应式原理

由于Proxy构造出来的实例对象是对目标对象的一个代理,因此 Proxy 在构造过程中是不需要 prototype 进行初始化的,因为其他构造函数之所以需要 prototype,是因为构造出来的对象需要一些初始化的成员,所以将这些成员定义到了 protoype 上,Proxy 只是用来代理其他对象,所以本身不需要 prototype。如上代码例子所示,proxy 对整个对象进行了拦截,只要获取里面的属性内容就会触发 get 方法,设置对象就触发 set 方法。

2024-03-31 16:49:41 376 1

原创 通过学会Object.defineProperty的用法彻底理解vue2响应式原理,附带对比vue3响应式原理

大白话就是vue写在data里面的变量,在页面初始化的时候会通过Object.defineProperty递归去拦截所有属性,然后通过get把对应属性的依赖收集放到一个数组里面,当我们改变一个data里面的属性时,Object.defineProperty就用forEach去循环更新依赖数组里面的属性,这样就实现了双向绑定。上面其它属性是一带而过,开始讲最重要的两个属性 set和get这也是vue2双向绑定的绝对核心,至于这两个属性什么作用的?get: 读取时内部调用的函数,默认值是undefined。

2024-03-31 16:43:02 1017 2

原创 微信小程序嵌入 H5 页面(webview)基本用法和父子传参数说明

最近实现一个功能需要在小程序嵌入其它系统内部的一个页面(用vue写的H5页面),但小程序是无法使用iframe的,所以最终选择小程序官方的webview实现,本文对基本用法和父子传参进行说明

2024-03-29 15:41:58 3032 2

原创 小程序webview嵌入H5页面(H5用vue实现)实现免登录

最近实现一个功能需要在小程序嵌入其它系统内部的一个页面(用vue写的H5页面),但小程序是无法使用iframe的,所以最终选择小程序官方的webview实现,但是嵌入后一打开这个嵌入的页面就会自动跳转到H5的登录页,原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的,本文就是解决这个问题的。

2024-03-29 15:22:56 635 1

原创 横向比较微信小程序和vue的语法与结构差异,让你快速理解用法

不少前端开发估计长期使用vue框架进行前端开发,但不可避免会有特殊情况需要人手去接坑其它项目,而刚好那个项目是原生微信小程序项目怎么办???其实很简单,一对一对地与vue进行横向对比就行,通过这样的方式最多一个上午就能直接上去写页面了,本文主打一个简洁毕竟写的长编大论的看的都累,所以下面将说明: - 并且对小程序的目录结构进行简洁说明。 - 对vue和小程序语法进行横向对比。 - vue与小程序标签的差异。 - 父子传递

2024-03-27 18:31:17 1216

原创 iframe嵌入页面实现免登录思路(以vue为例)

最近实现一个功能需要使用iframe嵌入其它系统内部的一个页面,但嵌入后出现一个问题,就是一打开这个页面就会自动跳转到登录页,原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的,本文就是解决这个问题的。

2024-03-27 18:05:37 1965

原创 js常用的深拷贝方式与里面的坑

js前端开发常用的深拷贝与其中的缺陷

2023-07-18 09:00:26 130 1

原创 全面讲解前端性能优化

中高级前端应该会的性能优化

2023-02-24 14:56:51 358

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除