记录---CSS Grid 布局:现代网页布局的强大工具
写在开头 点赞 + 收藏 学会 CSS Grid 布局(网格布局)是 CSS 中一种强大的二维布局系统,它彻底改变了我们构建网页布局的方式。与传统的布局方法(如浮动、定位或 Flexbox)相比,Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。 一、Grid 布局的 ...
vue3预览pdf可旋转并拖拽盖章任意位置生成新文件
对pdf旋转、拖拽公章或其他图片到pdf任意位置,生成一个新的pdf进行下载 网上搜了一下代码量都挺大的,这里自己来实现一个吧! 涉及到的技术栈:pdfjs-dist、pdf-lib、vueuse <script setup> import { ref, onMounted, computed } ...
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式 查看官网:https://vxetable.cn gitbub:https://github.com/x-extends/vxe-table gitee:https://gitee.com/x-extends/vxe-tabl ...
Web前端入门第 74 问:JavaScript 事件冒泡与事件捕获
在讨论冒泡和捕获之前,先看这么一段代码: <style> .bd { border: 1px solid #000; padding: 8px; } </style> <div id="container1" class="bd"> 外层 <div id="container2" class="bd ...
javascript中IIFE(立即执行函数表达式)到底是咋来的?
介绍 IIFE(Immediately Invoked Function Expression),中文名称:立即执行函数表达式,其实IIFE最早并不叫这个名字,而是叫做Self-Executing Anonymous Function,即自执行匿名函数。根据MDN的资料,IIFE这个说法最早由Ben ...
Web前端入门第 73 问:JavaScript DOM 常用事件那点小事
网页上各种炫酷的交互效果离不开各种 DOM 事件 的支持,在写这篇文章之前,一度以为 JS 的事件绑定/取消方式就我知道的那几种,翻阅文档之后才发现,知识面还是有待提升,多翻翻文档,就像发现新大陆一样~~ 常用事件 鼠标事件: click:鼠标左键单击 dblclick:鼠标左键双击 mousedo ...
Web前端入门第 72 问:JavaScript DOM 内容操作常用方法和 XSS 注入攻击
当项目的安全团队找上门告诉您,您开发的项目存在 XSS 安全漏洞,作为一个开发人员,就问您慌不慌?? HTML 内容写入的时候,如果稍不注意就会触发隐藏 BOSS 漏洞 XSS。 XSS 漏洞原理就是利用了网站上内容输入的地方,比如说常见的评论提交,老六 通过输入评论的地方,提交一些 包含 JS 代 ...
如何使用 vue vxe-table 来实现一个产品对比表表格
如何使用 vue vxe-table 来实现一个产品对比表表格 查看官网:https://vxetable.cn gitbub:https://github.com/x-extends/vxe-table gitee:https://gitee.com/x-extends/vxe-table 效果 ...
Web前端入门第 71 问:JavaScript DOM 节点操作(增删改)常用方法
有一个深有体会的事:发现现在很多前端同学,经常用 Vue 开发项目之后,在某些需求场景要操作 DOM 节点的时,就不知道咋办了~~ 以前接手过其他开发团队的项目,项目被漏洞扫描工具发现了异常,原因是用了一个 vue-video-player 插件用于播放视频,这插件又依赖了低版本的 video.js ...
vxe-table vue 表格禁用单元格编辑的2种实现方式
vxe-table vue 表格禁用单元格编辑的2种实现方式 查看官网:https://vxetable.cn gitbub:https://github.com/x-extends/vxe-table gitee:https://gitee.com/x-extends/vxe-table 阻止激活 ...
Web前端入门第 70 问:JavaScript DOM 节点查找常用方法
虽然目前的开发场景基本都是使用 React/Vue/Angular 等框架,但是对于一些基础的 DOM 操作,还是需要了解学习。 曾经我们讨论过这样一个问题:Vue 这些开发框架,用它们渲染页面,真的就比不用开发框架快吗? 其实这个问题很好回答的,开发框架只是优化了项目的开发效率,对于浏览器的渲染速 ...
Web前端入门第 69 问:JavaScript Promise 提供的方法都使用过吗?
Promise 这个 API 曾在 JS 领域掀起过血雨腥风,以前的大佬们都喜欢手搓一个自己的 Promise 用以理解 Promise 的原理。 Promise 的诞生,应该多少都有受到 jQuery 的异步方法 $.Deferred() 影响。 应用场景 Promise 唯一作用就是在处理异步耗 ...
1.新建pnpm+monorepo架构项目
一、前期准备: 1. 准备node环境(推荐nvm方式管理node版本); 2.安装pnpm(pnpm 通过创新存储模型解决了 npm/yarn 的磁盘冗余、依赖污染等核心痛点,尤其适合 Monorepo 项目、低存储环境及高稳定性要求的场景。若项目无特殊兼容需求,pnpm 是当前最优解。); ...
使用 vue vxe-table 实现复选框禁用,根据行规则来禁用是否允许被勾选选中
使用 vue vxe-table 实现复选框禁用,根据行规则来禁用是否允许被勾选选中 查看官网:https://vxetable.cn gitbub:https://github.com/x-extends/vxe-table gitee:https://gitee.com/x-extends/vx ...
Web前端入门第 68 问:JavaScript 事件循环机制中的微任务与宏任务
JS 是单线程语言。这句话对不对? 按照目前的情况来看,JS 自从支持了 Web Worker 之后,就不再是单线程语言了,但 Worker 的工作线程与主线程有区别,在 Worker 的工作线程中无法直接操作 DOM、window 对象或大多数浏览器 API(如 localStorage),Wor ...
在elementui,antDesign,antDesignVue中表格嵌套多个表单项校验
前言 在此记录下使用 elementui,antDesign,antDesignVue 的表格嵌套表单校验的一些经验。 要达到的目的是:有个多行表格,每一行有多个表单项(比如输入框),表单项填完值后,点击提交,校验表格中所有表单项,校验通过则将整个表格数据送到后台。还可以重新给表格赋值(比如进入详情 ...
数据可视化大屏(html + js + css)
数据可视化大屏 作为大数据的学生,每次想实现前端数据可视化大屏就头疼,不会前端就很烦,所以这次特定不断调教AI,再加上自己不断的改改改,终于花了一个下午改成了一个还过得去的可视化大屏,所以直接把源码分享在这里了,但是要自己导入echarts组件 index.html页面 <!DOCTYPE html ...
Web前端入门第 67 问:JavaScript 中的面向对象编程
此 对象 非彼对象啊,不要理解错了哦~~ 面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。 像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如: Vue 中的 组合式API 和 选项式API 也是两种编程模式的代表。 React ...
快来吸猫!跨平台 BongoCat 陪你欢乐敲键盘!
BongoCat —— 一个基于 Tauri 开发的跨平台桌面应用程序,主要提供一只可爱的猫咪形象,可根据用户的键盘或鼠标操作进行互动。 ...
Web前端入门第 66 问:JavaScript 作用域应用场景(闭包)
什么是作用域? 就像孙悟空给唐僧画个圈圈一样,这个圈圈就可以称之为作用域,这个比喻可能不太形象。 作用域和孙悟空的圈圈还是有点区别,作用域内部可以获得作用域外部的变量,而内部的变量无法逃逸到作用域外面,如果逃逸出去了,那就造成内存泄漏了,程序将会出现崩溃! 全局作用域 可以理解为就是放在 JS 最外 ...