ChuXiaos-CSDN博客

原创在 Vue 的template中使用 Pug 的完整教程

（原名 Jade）是一种高效的网页模板引擎，通过缩进式语法和简洁的写法减少 HTML 的冗长代码。Pug 省略了尖括号和闭合标签，使用缩进定义结构，使代码更简洁、可读。

2025-06-05 16:11:58 1035

原创 CSS 史上最全面的选择器大全以及兼容性整理（共计 118 个）

本文整理了截至2025年最全面的CSS选择器大全，共计118个选择器，涵盖基本、组合、属性、伪类和伪元素等类型。主要内容包括：6种基本选择器（如类型、类、ID选择器），6种组合器（如后代、子选择器），9种属性选择器，71种伪类选择器（如:hover、:focus）和25种伪元素选择器（如::before）。文章通过示例代码和可视化效果展示每种选择器的用法，并标注浏览器兼容性，帮助开发者实现精准样式控制。特别提醒列组合器(||)和嵌套选择器(&)仍属实验性功能，需注意浏览器支持情况。

2025-06-02 17:38:36 761

原创 JavaScript 全部运算符完全指南（截至 ES2025）

本文全面介绍JavaScript运算符（截至ES2025），涵盖17类运算符：算术、赋值、比较、逻辑、位运算等基础运算符，以及新增的可选链、空值合并等实用运算符。通过清晰的分类表格和代码示例，详细说明每种运算符的功能和用法，如+加法、===严格相等、??空值合并等。特别介绍了ES6+新增运算符如**幂运算、??=空值合并赋值等，帮助开发者掌握现代JavaScript的运算符特性。文章结构清晰，示例实用，适合各层次开发者参考学习。

2025-05-26 02:28:43 835

原创 JavaScript 冷门语法与不常用特性全解析

JavaScript 冷门语法特性解析：本文系统梳理了 JavaScript 中 11 个不常用或已废弃的语法特性，包括 with 语句、标签语句、void 运算符、逗号表达式等。这些特性在早期代码中可见，但因可读性差、性能问题或安全隐患逐渐被淘汰。现代 JavaScript 提供了更优替代方案，如解构赋值替代 with、函数封装替代标签语句、标准注释替代 HTML 风格注释等。文章详细分析了每个特性的问题风险，并给出最佳实践建议，帮助开发者识别老代码中的&qu

2025-05-25 23:34:38 922

原创 Vue 3 响应式基础全面教学：从核心到进阶全面解析

本文全面讲解 Vue 3 响应式系统，从核心概念到具体用法，帮助新手掌握 ref 和 reactive 的使用。内容分为：核心概念：解释响应式原理，对比 ref（适合基本类型）和 reactive（适合对象）核心 API：详细演示 ref（需用.value操作）和 reactive（直接修改属性）的用法工具函数：介绍 isRef（检测类型）、unref（自动解包）、toRef（属性转ref）等实用工具提供完整代码示例和常见问题提示，如模板中ref自动解包、reactive不能整体替换等注意事项

2025-05-25 23:17:35 936

原创 Vue 组件开发中 CSS 的 BEM 规范完全指南【Typescript和scss】

《Vue 组件开发中的 BEM 规范完全指南》详细介绍了 BEM（Block、Element、Modifier）命名规范在前端开发中的应用，特别是在 Vue 组件中的使用。BEM 通过清晰的命名规则（如 .block__element--modifier）帮助开发者减少样式冲突、提高代码可读性和可维护性，并促进团队协作。文章首先解释了 BEM 的基本概念和语法，随后展示了如何在传统 CSS 和 Vue 组件中应用 BEM。重点介绍了通过 TypeScript 和 SCSS 封装 BEM 工具函数的方法，包括

2025-05-15 01:01:08 425

原创 Vue中 Lottie 实现SVG动画完全指南

Lottie 是一个由 Airbnb 开发的库，它可以在 Web、iOS、Android 和 React Native 上渲染 Adobe After Effects 动画。简单来说，设计师可以在 After Effects 中创建精美的动画，然后通过 Bodymovin 插件导出为 JSON 格式，开发者再通过 Lottie 库将这些 JSON 文件渲染成高质量的动画。这意味着你可以在你的网站或应用中使用复杂的动画，而不需要使用 GIF 或视频，从而获得更好的性能和质量。在传统的 Web 开发中，如果我们

2025-03-11 21:51:30 1771

原创 vue中Echarts地图下钻实现方案-从零开始实现省市县三级下钻

最近在网上搜Echarts地图下钻的实现方案，发现各种方案层出不穷，几乎都是一大堆的冗余代码，或者是包含各种业务代码，很难找到通俗易懂的实现方案，所以决定写这篇文章记录下来，方便大家查阅。

2024-12-18 23:22:59 1575

原创最新全国各省市区县地图GeoJSON数据批量下载

阿里云的DataV.GeoAtlas官网地图数据是无法批量下载的，只能一个一个的下载，最近在做Echarts地图下钻的功能，需要大量地区的json数据，挨个下载又觉得很麻烦，所以做了个简易node脚本用来批量下载。

2024-12-18 15:26:12 2071

原创安装oh-my-zsh，配置命令行高亮，命令提示，打造高效终端

Oh My Zsh 是一款社区驱动的命令行工具，正如它的主页上说的，Oh My Zsh 是一种生活方式。它基于 zsh 命令行，提供了主题配置，插件机制，已经内置的便捷操作。给我们一种全新的方式使用命令行。Oh My Zsh 是基于 zsh 命令行的一个扩展工具集，提供了丰富的扩展功能。安装 Oh My Zsh 前提条件：必须已安装 zsh笔者是 Mac 系统，以下操作都是基于 Mac 系统或者 Ubuntu。（其他Linux发行版安装方式大同小异）oh-my-zsh官网Tab 补全功能强大。

2024-01-13 19:58:20 35757 6

原创 img标签使用第三方链接出现403的解决办法

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值，服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。隐藏referrer信息后，图片资源可以正常访问了。

2024-01-07 12:24:28 1204 1