前言 众所周知,在vue2的时候使用一个vue组件要么全局注册,要么局部注册。但是在setup语法糖中直接将组件import导入无需注册就可以使用,你知道这是为什么呢?注:本文中使用的vue版本为3.4.19。 关注公众号:【前端欧阳】,给自己一个进阶vue的机会 看个demo 我们先来看个简单的d ...
CSS 属性计算过程 你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{ color : red; } 上面的 CSS 代码中,p 是元素选择器,color 就是其中的一个 CSS 属性。 但是要说 CSS 属性的计算过程,还真的不是很清楚。 没关系,通过此 ...
写在开头 点赞 + 收藏 学会 前端常用的截图保存的方法 利用 Blob 对象和 URL.createObjectURL:可以将截图数据转换为 Blob 对象,然后使用 URL.createObjectURL 方法生成一个临时的 URL,将这个 URL 赋值给 <a> 标签的 ...
写在开头 点赞 + 收藏 学会 前言 随着我用 URL.createObjectURL 这个 API 越来越多次,越发感觉真的是一个很好用的方法,列举一下我在项目中用到它的场景吧~ 图片预览 以前我们想要预览图片,只能是上传图片到后端后,获取到url然后赋予给img标签,才能 ...
在使用锚点跳转时,以下情况可能导致页面跳转位置出现误差: 固定定位元素(Fixed Position Elements): 当页面有固定定位的导航栏或其他固定元素时,跳转到锚点时,这些固定元素可能会遮挡锚点目标,导致用户看不到预期内容。 动态内容加载(Dynamic Content Loading) ...
写在开头 点赞 + 收藏 学会 在项目中我们可能会遇到当鼠标在某个区域内,我们希望滚动鼠标里面的内容可以横向滚动; 比如我们一些常见的后台状态栏: 那这种该怎么写?请看栗子 代码如下: <template> <div> <div class="top"> <div class ...
JS中有一些操作可以动态地执行JS代码,并修改或新建词法作用域,这种操作虽然带来了更多的灵活性,但是会严重地影响到性能。 ...
1. 不使用临时变量来交换变量的值
2. 对象解构,让数据访问更便捷
3. 浅克隆对象
4. 合并对象
5. 清理数组
6. 将 NodeList 转换为数组
7. 检查数组是否满足指定条件
8. 将文本复制到剪贴板
9. 删除数组重复项
10. 取两个数组的交集
11. 求数组元素的总和
12. ... ...
随便写的小网页练习: 原视频:十分钟学会写网页【编程前端入门】 简介: 本期重做了好几遍,是全新的视角和概念,从浏览器底层渲染原理到实现网站的演示,一节课讲透,必看的一期。后面不管是写小程序还是App,都会用到这一期的概念。 这一期内容是我做完第一章个人网站后更新的,用来替代原先没做好的第三节, ...
写在开头 点赞 + 收藏 学会 在日常的开发过程中,我们都会有一些常用的代码片段,这些代码片段可以直接复制到各个项目中使用,非常方便。如果你有接手过别人的项目,就可以很明显感受到几个项目一般都会有一些相同的工具类方法,这些方法就是之前开发者的常用代码片段。 现在前端社区相当完 ...
应用场景: 实现目标: 在网页端实现大文件(文件大小 >= 2 G) 断点续传 实际方案: 发送多次请求, 每次请求一部分文件数据, 然后通过续写将文件数据全部写入. 难点: 无法实现文件续写, 最后采用 StreamSaver 来解决这个问题. 1. 首先从 git hub 将 StreamSav ...
SoybeanAdmin —— 一个清新优雅、高颜值且功能强大的后台管理模板。基于最新的前端技术栈,包括 Vue3、 Vite5、 TypeScript、 Pinia 和 UnoCSS。 ...
你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢?setup语法糖是如何编译成setup函数的呢? ...
RSS(Really Simple Syndication)是一种 XML 格式,用于网站内容的聚合和分发,让用户能快速浏览和跟踪更新。RSS 文档结构包括 `<channel>` 和 `<item>` 元素,允许内容创作者分享标题、链接和描述。通过 RSS,用户可以定制新闻源,过滤不相关信息,提高... ...
写在开头 点赞 + 收藏 学会 在后台系统中有一种常见的功能,点击按钮将整个网页全屏,再点击退出全屏。 浏览器提供了2种全屏方式,一种通过API在js中实现,另一种是按F11键进入全屏模式。 但F11进入的全屏模式优先级更高,无法通过API退出。 基本知识 元素全屏 检查可用 ...
一、背景 ‘熵增’问题一直是所有软件开发中都会遇到的问题,不管是前端还是后端都会遇到,老的系统在需求不断变更或者迭代,代码量会越来越大,最终都会形成一座‘屎山’,今天主要讨论前端对于这种情况的解决方案。 目前前端的解决方案有比较古老的iframe,但是iframe是完全隔绝了应用,导致应用之间的通信 ...
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:修能 这是一段平平无奇的 SQL 语法 SELECT id, sum(name) FROM student GROUP BY id ORDER BY id; ...
写在开头 点赞 + 收藏 学会 前言 在这之前公司项目的文档预览的方式都是通过微软在线预览服务,但是微软的在线服务有文件大小限制,想完整使用得花钱,一些图片文件就通过组件库antd实现,因为我们项目存在多种类型的文件,所以为了改善用户的体验,决定把文件预览单独弄一个拆出一个项 ...
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有 ::-webkit-scrollbar 规范可以控制滚动条,可是,::-webkit-scrollbar 是非标准特性,在 MDN 文 ...
setup概述 setup是Vue3中新的配置项,值是一个函数,组件中所用到的数据、方法、计算属性、监视等等,均配置在setup中。 setup函数返回的对象中的内容,可直接在模版中使用。 setup中不能使用this关键字,this是undefined。 setup会在beforeCreate() ...