前言 在Vue3.5版本中响应式 Props 解构终于正式转正了，这个功能之前一直是试验性的。这篇文章来带你搞清楚，一个String类型的props经过解构后明明应该是一个常量了，为什么还没丢失响应式呢？本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5 关注公众号：【前端欧阳】，给自己一 ...

Pintree 是一个开源项目，旨在将浏览器书签导出成导航网站。通过简单的几步操作，就可以将书签转换成一个美观且易用的导航页面。 ...

随着JavaScript在前后端开发中的广泛应用，测试已成为保证代码质量的关键环节。 为什么需要单元测试 在我们的开发过程中，经常需要定义一些算法函数，例如将接口返回的数据转换成UI组件所需的格式。为了校验这些算法函数的健壮性，部分开发同学可能会手动定义几个输入样本进行初步校验，一旦校验通过便不再深 ...

本文介绍了 ES Modules (ESM) 在浏览器环境中的运行原理，详细阐述了 ESM 的三大加载步骤：构建、实例化、求值，并讨论了其动态加载能力、循环依赖处理方式及与 CommonJS 的区别。 ...

认识并学习下还没来得及学习的一些 HTML5 标签 <ruby> 标签 HTML <ruby> 元素被用来展示东亚文字注音或字符注释。 比如: <ruby>兄弟<rt>xiongdi</rt></ruby> <rt> 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元 ...

<el-dialog width="600px" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleBeforeClose" @open="handleOpe ...

IntersectionObserver (自动监听元素是否进入了设备的可视区域之内) 示例： const io = new IntersectionObserver(callback, option); // 获取元素 const target = document.getElementById( ...

同步加载 阻塞模式，响应安全性强 过多JS加载会影响页面效率 默认情况下，JS是同步加载，及优先加载外部JS，只有当JS文件加载完成，don和css才开始加载 <script src = 'index.js' ></script> 异步加载 非阻塞加载，执行效率高 动态创建script defer ...

一、实现一个光影墙 1. 根据自定义坐标点，输出一个光影墙 /** * 添加光影墙 */ function addLightWall() { const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array( ...

1. Performance API 的用处 Performance API 是浏览器中内置的一组工具，用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括： 监控页面资源加载：跟踪页面中的资源（如 CSS、JavaScript、图片）的加载时间。 分析页面加载时间：从导航到页面完全渲 ...

此教程适应于以webpack，vue-cli，vite等脚手架构建的vue项目。当然，vue2和vue3都是可以滴。 1. 前提：你的代码库已经提交到Github上 如果没有的话，请到GitHub上新建仓库，并把你本地的项目提交到GitHub上新建的仓库里。 具体方法，可以参考我的博客 Git使用记 ...

一、解构 如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。 （一）显示样式 在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。 <style type="text/css"> .center { ...

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霁明 什么是CORS CORS（跨域资源共享）是一种基于HTTP头的机制，可以放宽浏览器的同源策略，实现不同域名网站之间的通信。 前置知识 同源定义：协议、域 ...

1、使用 Object.entries() 和 Object.fromEntries() // 将对象转换为数组并转换回来，以便于操作 const person = { name: 'jack', age: 20 }; const entries = Object.entries(person); ...

安装vite npm create vite@latest 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue + ts 项目，运行: # npm 7+，需要添加额外的 --： npm create vite@latest my-vue-app - ...

codecv —— 一款制作简历的工具，帮助你以 Markdown 的简洁语法快速编写生成专业的简历，并支持转为 PDF 保存，还提供了海量模板。 ...

前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑，这个新增的API好像和watch API回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景 ...

一、飞线效果 功能说明：支持设置点的个数，飞线速度、起始和终止颜色值、线宽、线的大小 原理： 1. 首先绘制一条与线长度相同的线，线中各点的大小逐渐变小 2. 如何让线动起来？假设点的个数总共为num个，传入的点的下标为a，通过变化的时间计算出移动的下标b，如果a+b>=num则代表，该点可见，否则 ...

在 Web 开发中，我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新（如按下 F5 键或点击浏览器刷新按钮）或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验，例如在使用 vue 的时候需要进行权限控制，就需要判断在刷新后根据登录者的权限去添加对应的路 ...

问题描述： 今天在写vue项目时，用到了element plus中的el-upload组件，发现这么一个问题： 组件各个功能都是正常的，也可以上传图片，但是 虚线框里那么大一片区域只有中间那个十字是可以点击的 点击查看代码 <el-upload class="ImageUpload" :action ...