- 博客(23)
- 收藏
- 关注
RSS订阅原创 vue3 使用Pinia
全局状态管理工具 类似vuex.js 有如下特点：完整的 ts 的支持；足够轻量，压缩后的体积只有1kb左右;去除 mutations，只有 state，getters，actions；actions 支持同步和异步；代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的无需手动添加 store，store 一旦创建便会自动添加；支持Vue3 和 Vue2官方文档。
2024-03-06 18:08:41
862
原创 Proxy跨域
主要是出于浏览器的同源策略限制，它是浏览器最核心也最基本的安全功能。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。例如 http://xxxx.com -> https://xxxx.com 存在跨域 协议不同例如 https://127.x.x.x:8001 -> https://127.x.x.x:8002 存在跨域 端口不同例如 https://www.xxxx.com -> https://www.yyyy.com 存在跨域 域名不同。
2024-03-06 17:38:06
376
原创 Vue3 性能优化
从Performance页的表现结果来看，得分37分，并提供了很多的时间信息，我们来解释下这些选项代表的意思：FCP (First Contentful Paint)：首次内容绘制的时间，浏览器第一次绘制DOM相关的内容，也是用户第一次看到页面内容的时间。Speed Index: 页面各个可见部分的显示平均时间，当我们的页面上存在轮播图或者需要从后端获取内容加载时，这个数据会被影响到。LCP (Largest Contentful Paint)：最大内容绘制时间，页面最大的元素绘制完成的时间。
2024-03-06 17:21:22
465
原创 Vue3 微任务和宏任务 event loop 和 nextTick
单线程就意味着所有的任务都需要排队，后面的任务需要等前面的任务执行完才能执行，如果前面的任务耗时过长，后面的任务就需要一直等，一些从用户角度上不需要等待的任务就会一直等待，这个从体验角度上来讲是不可接受的，所以JS中就出现了异步的概念。所有的同步任务都是在主进程执行的形成一个执行栈，主线程之外，还存在一个"任务队列"，异步任务执行队列中。就是创建一个异步任务，那么它自然要等到同步任务执行完成后才执行。，然后进行下一个tick如此形成循环。，然后清空当次宏任务中的所有。代码从上到下按顺序执行。
2024-03-05 15:47:13
220
原创 Vue3 集成Tailwind CSS
1.增强代码的可读性 （利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。2.将未来的 CSS 特性带到今天！（PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。
2024-03-05 15:25:48
452
原创 Vue3定义全局函数和变量
Prototype 属性 使用 app.config.globalProperties 代替 然后去定义变量和函数。我们正好可以使用全局函数代替Filters。声明文件 不然TS无法正确类型 推导。
2024-03-05 14:22:26
523
原创 vue3 transition动画组件
自定义过度时间 单位毫秒通过自定义class 结合css动画库animate css安装库 npm install animate.css引入 import 'animate.css'使用方法官方文档。
2024-03-02 17:58:21
600
1
原创 vue3 Teleport传送组件
Teleport Vue 3.0新特性之一。Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响。
2024-03-02 17:01:48
271
1
原创 hexo实现背景花瓣飞舞效果
在_config.butterfly.yml文件中找到inject，引入jquery和petal.js文件。在source目录下js文件中新增petal.js文件。
2023-01-16 16:51:39
288
原创 CSS实现边框底部渐变色的4种方法
这我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。使用两个盒子叠加，给外层的盒子设置渐变色背景和 padding，给内层盒子设置纯色背景。
2023-01-10 14:16:23
3722
1
原创 2023跨年烟花（浪漫烟花+自定义音乐+雪花飘飘+自定义文字）
可以自定义跨年文字可自定义更换背景音乐具有雪花效果项目文件index.html、gameCanvas-4.0.js、script.jsMetingjs官网文档。
2023-01-05 15:09:59
432
原创 JS获取当前时间的年、月、日、时间等
/获取当前时间(从1970.1.1开始的毫秒数)//获取当前毫秒数(0-999)// 获取的是前一天日期。//获取当前月份(0-11,0代表1月)date .getDay();//获取当前星期X(0-6,0代表星期天)//获取当前分钟数(0-59)//获取完整的年份(4位)//获取当前秒数(0-59)//获取当前小时数(0-23)// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期。//获取当前日(1-31)//获取当前年份(2位)// 获取的是前一天日期。
2022-12-29 14:26:48
5220
原创 vue插槽solt的使用
使用插槽是在存在父子关系的组件，可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。上边默认插槽和具名插槽基本都是父组件中决定要插入到子组件中的内容，子组件自行决定插槽的位置。具名插槽，就是实现在子组件中自行决定自己要显示什么内容。具名插槽就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将内容根据name来填充对应的内容。
2022-12-29 10:06:34
414
原创 前端js实现canves画布中拖拽、放大、缩小、旋转图片和文字，设置背景图片，导出
最近在研究canves，想实现一个可以在画布中操作上传的内容，不经意间发现了个插件Fabric.js。Fabric.js 是一个强大的H5 canvas框架，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。image。
2022-12-16 16:18:48
3003
翻译 vue中通过js-web-screen-shot插件实现截屏功能
【代码】vue中通过js-web-screen-shot插件实现截屏功能。
2022-08-26 16:44:34
3847
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人