Web前端入门第 77 问：JavaScript 由程序触发绑定事件的几种方式
开发中经常会遇这样的需求：点击 A 元素的时候，需要触发 B 元素的事件，比如：点击一个 div 元素，然后触发 input:file 的 click 事件，用来选择文件上传。
click 方法
以上需求可通过元素的 click 方法触发：
<style>
.test2 {
padding: 4px;
margin-top: 12px;
}
</style>
<input type="file" class="test1" ...
vxe-tree vue 树组件实现关键字搜索
vxe-tree vue 树组件实现关键字搜索
查看官网：https://vxeui.com
gitbub：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui
代码
实现方式通过输入框输入内容，对数据进行筛选过滤
<template>
<div>
<div>
<vxe-input v-model="filterName" type="search" clearable @c ...
JavaScript
数据类型
基础类型: String、Number、Boolean、null、undefined、Symbol 存储在栈中，赋值变量和比较均为数据本身。
引用类型：Object、Array、Map、Function 存储在堆中，使用new创建，赋值变量和比较均是内存地址。
检测数据类型
1.typeof 基本数据类型
不能区分null，数组，对象，正则，因为返回的都是”object”
type ...
Web前端入门第 76 问：JavaScript 鼠标事件(mouse) enter/leave 和 over/out 区别
题外话
在考察事件基础的时候，会经常被问及 click、mousedown、mouseup 它们三者执行的先后顺序是怎样的？
如果平时没太注意，这细节可能就会忽略，毕竟很少会在同一个元素上面同时绑定这三个事件~~
直接上示例：
<div class="c">测试点击事件</div>
<script>
(() => {
const c = document.querySelector('.c')
...
企业级图表方案AG Charts v12正式发布：全新功能提升图表交互体验与开发效率
AG Grid成立于英国，致力于提供优秀的企业级数据表格及图表解决方案。
AG Grid及AG Charts是其两大主要的高性能企业级JavaScript数据表格及图表解决方案，被全球开发者广泛采用。广泛应用于金融、电信、制造等行业，支持 Angular、React、Vue 和纯 JavaScript 项目，拥有企业级的性能与功能深度，凭借其卓越的性能、丰富的 ...
记录---在Vue项目中启用HTTPS本地开发
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
现代前端开发中，启用HTTPS本地环境越来越重要。本文将详细介绍如何在Vue项目中配置HTTPS开发服务器，使用mkcert工具生成可信证书，解决跨域问题并模拟真实生产环境。
为什么需要HTTPS本地开发？
使用浏览器新特性（如地理位置API）
解决第三方登录（OAuth）的loca ...
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vxe-upload vue 实现附件上传、手动批量上传附件的方式
查看官网：https://vxeui.com
gitbub：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui
安装
npm install vxe-pc-ui@4.6.47
// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...
createApp(Ap ...
记录---grid实现瀑布流
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
效果图
瀑布流布局原理
瀑布流布局（Waterfall Layout）是一种等宽不等高的多列布局方式，视觉上元素像瀑布一样逐列填充。核心原理：
等宽多列：将容器划分为多个等宽的列。
动态填充：元素按顺序优先插入当前高度最短的列，保证布局紧凑。
基于 CSS Grid 的实现思路
CSS ...
Web前端入门第 75 问：JavaScript 性能优化之事件委托（事件代理）原理
如今 Vue 大行其道，大部分开发场景直接使用 @click 就实现了事件绑定，可能都没思索过 JS 中的事件性能优化。
事件委托原理
事件委托 其主要是利用了事件冒泡这个特性。
以点击事件 click 为例：将事件绑定在父元素上，点击子元素会通过冒泡的方式触发父元素的点击事件。这种绑定事件的方式，就称之为 事件委托，也称为 事 ...
Cesium 无人机巡检三维效果实现
uavInspection.js代码
/**
* 无人机巡检
*/
import * as mars3d from "mars3d"
import * as Cesium from 'mars3d-cesium'
import * as turf from "@turf/turf"
import { getMap } from '@/components/mars3dMap/js/index.js'
import { getHeightByLngLat } from '@/components/mars3dMap/js/utils.js'
import GlowLineM ...
企业级数据网格方案AG Grid Enterprise 34 发布：聚焦过滤、编辑与树数据管理的全面升级
AG Grid成立于英国，致力于提供优秀的企业级数据表格及图表解决方案。
AG Grid及AG Charts是其两大主要的高性能企业级JavaScript数据表格及图表解决方案，被全球开发者广泛采用。凭借其卓越的性能、丰富的功能与高度可定制性，成为构建复杂数据驱动型应用的优选工具库。
近日，AG Grid Enterprise 34 正式发布，作为 2025 ...
记录---CSS Grid 布局：现代网页布局的强大工具
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它彻底改变了我们构建网页布局的方式。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。
一、Grid 布局的基本概念
1. 什么是 Grid 布局？
CSS G ...
vue3预览pdf可旋转并拖拽盖章任意位置生成新文件
对pdf旋转、拖拽公章或其他图片到pdf任意位置，生成一个新的pdf进行下载
网上搜了一下代码量都挺大的，这里自己来实现一个吧！
涉及到的技术栈：pdfjs-dist、pdf-lib、vueuse
<script setup>
import { ref, onMounted, computed } from 'vue';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import { useDraggable } ...
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-table
第一种，整列根据内容自适应宽度
整列根据内容自适应宽度，包括表头、表体、表尾同时自定义宽度，适用需要完整显示的场景
<temp ...
Web前端入门第 74 问：JavaScript 事件冒泡与事件捕获
在讨论冒泡和捕获之前，先看这么一段代码：
<style>
.bd {
border: 1px solid #000;
padding: 8px;
}
</style>
<div id="container1" class="bd">
外层
<div id="container2" class="bd">
内层
<div id="container3" class="bd">
最内层
<div id="container4" class="bd">
按 ...
javascript中IIFE（立即执行函数表达式）到底是咋来的？
介绍
IIFE(Immediately Invoked Function Expression)，中文名称：立即执行函数表达式，其实IIFE最早并不叫这个名字，而是叫做Self-Executing Anonymous Function，即自执行匿名函数。根据MDN的资料，IIFE这个说法最早由Ben Alman于2010年提出，下面我们一起来看看这个名字的来龙去脉。
2010年11月5日，Ben Alman写下来他的 ...
Web前端入门第 73 问：JavaScript DOM 常用事件那点小事
网页上各种炫酷的交互效果离不开各种 DOM 事件 的支持，在写这篇文章之前，一度以为 JS 的事件绑定/取消方式就我知道的那几种，翻阅文档之后才发现，知识面还是有待提升，多翻翻文档，就像发现新大陆一样~~
常用事件
鼠标事件：
click：鼠标左键单击
dblclick：鼠标左键双击
mousedown / mouseup：鼠标按下/释放
mousemove ...
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
效果
代码
<template>
<div class="demo-page-wrapper">
<vxe-grid v-bind="gridOptions">
<template #img11>
<vxe- ...
Web前端入门第 71 问：JavaScript DOM 节点操作（增删改）常用方法
有一个深有体会的事：发现现在很多前端同学，经常用 Vue 开发项目之后，在某些需求场景要操作 DOM 节点的时，就不知道咋办了~~
以前接手过其他开发团队的项目，项目被漏洞扫描工具发现了异常，原因是用了一个 vue-video-player 插件用于播放视频，这插件又依赖了低版本的 video.js 插件，而扫描工具发现的异常就是低版本的 ...
