<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[hhcccchh的专栏]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/hhcccchh</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; hhcccchh]]></copyright><item><title><![CDATA[1.2 CSS 基础选择器、盒模型、flex 布局、grid 布局]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/159960509</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/159960509</guid><author>hhcccchh</author><pubDate>Wed, 08 Apr 2026 16:45:45 +0800</pubDate><description><![CDATA[这篇CSS教程详细介绍了核心选择器及其应用，通过代码示例演示了10种常见选择器类型：从基础的元素选择器到复杂的伪类和伪元素选择器。教程采用生动的比喻（如&quot;瞄准镜&quot;）帮助理解选择器的作用，并配有完整的HTML示例展示实际效果。特别强调了选择器优先级规则（权重计算），通过形象的分数比较说明样式覆盖原理。最后提醒慎用!important，建议采用合理的命名规范。全文将抽象概念具象化，适合初学者快速掌握CSS选择器的核心要点。]]></description><category></category></item><item><title><![CDATA[1.1 HTML 语义化标签（header、nav、main、section、footer 等）]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/159958912</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/159958912</guid><author>hhcccchh</author><pubDate>Wed, 08 Apr 2026 15:48:31 +0800</pubDate><description><![CDATA[本文通过盖房子的比喻生动讲解HTML语义化标签。用&quot;全白墙仓库&quot;比喻纯div网页的混乱，将header、nav、main等标签对应为屋顶、走廊、客厅等房屋结构。通过新闻网站代码示例展示语义化标签的实际应用，并对比纯div代码的弊端。强调语义化标签的三个优势：提升SEO、增强无障碍访问、便于团队协作。最后提供练习将div代码改写为语义化标签，建议查看大厂网站源码加深理解。核心观点是语义化标签让网页能清晰表达结构，服务各类用户和机器。]]></description><category></category></item><item><title><![CDATA[学习vue第十八天 用最简单、最详细的方式给小白讲解为什么大项目要用Vuex/Pinia！]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/157026059</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/157026059</guid><author>hhcccchh</author><pubDate>Fri, 16 Jan 2026 14:41:31 +0800</pubDate><description><![CDATA[优点✅ 简单易用✅ 灵活自由✅ 学习成本低缺点❌ 数据分散❌ 难以追踪❌ 容易混乱❌ 不适合大项目。]]></description><category></category></item><item><title><![CDATA[学习vue第十七天 用最简单、最详细的方式给小白讲解事件总线（EventBus）！]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/157024953</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/157024953</guid><author>hhcccchh</author><pubDate>Fri, 16 Jan 2026 14:01:51 +0800</pubDate><description><![CDATA[📻校园广播站：一个人说话，所有人都能听到📡无线电台：不需要物理连接，通过"频道"通信🎙️对讲机：任何人都可以发送和接收消息。]]></description><category></category></item><item><title><![CDATA[学习vue第十六天 最简单、最详细的方式给小白讲解Provide/Inject！]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/157022951</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/157022951</guid><author>hhcccchh</author><pubDate>Fri, 16 Jan 2026 11:34:26 +0800</pubDate><description><![CDATA[🎁爷爷的遗产：爷爷直接给孙子，不需要爸爸中转📡无线传输：跨越中间层，直接传递数据🔄单向数据流：只能祖先→后代，不能反向。]]></description><category></category></item><item><title><![CDATA[学习vue第十五天 子组件传递父组件（Emit事件）]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/157022393</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/157022393</guid><author>hhcccchh</author><pubDate>Fri, 16 Jan 2026 11:11:25 +0800</pubDate><description><![CDATA[步骤子组件（打电话）父组件（接电话）1声明emits准备监听 @事件名2触发 this.$emit(‘事件名’, 参数)定义处理方法3发送消息和数据接收消息和数据4完成通知处理业务逻辑。]]></description><category></category></item><item><title><![CDATA[学习vue第十四天 小白学父组件传递子组件（Props）]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/157021398</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/157021398</guid><author>hhcccchh</author><pubDate>Fri, 16 Jan 2026 10:30:57 +0800</pubDate><description><![CDATA[🎁父组件给子组件的礼物📦单向数据流：只能父→子，不能子→父🔒只读的：子组件不能修改✅要验证：确保数据类型正确现在明白父组件传递子组件了吗？就是父组件通过Props给子组件传数据，子组件声明接收并使用！😊。]]></description><category></category></item><item><title><![CDATA[学习vue第十三天 Vue3组件深入指南：组件的艺术与科学]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/156986443</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/156986443</guid><author>hhcccchh</author><pubDate>Thu, 15 Jan 2026 15:03:08 +0800</pubDate><description><![CDATA[想象你在搭乐高城堡不是一块巨大的积木 ❌而是很多小积木组合 ✅想象插槽是一个魔法口袋组件定义口袋的位置和大小使用者决定往口袋里放什么🏗️组件拆分：搭乐高积木，模块化开发🎨样式特性：各管各的地盘，互不干扰📡组件通信：传话游戏，各有各的方式🎪组件插槽：魔法口袋，灵活定制内容。]]></description><category></category></item><item><title><![CDATA[学习vue第十二天 Vue开发工具链指南：从手工作坊到现代化工厂]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/156903402</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/156903402</guid><author>hhcccchh</author><pubDate>Tue, 13 Jan 2026 14:16:52 +0800</pubDate><description><![CDATA[🏭Webpack：重工业工厂 - 功能全面但复杂🎩Vue CLI：五星管家 - 服务周到且稳定⚡Vite：特斯拉跑车 - 快速现代化🎨create-vue：iPhone - 简洁专注。]]></description><category></category></item><item><title><![CDATA[学习vue第十一天 Vue3组件化开发指南：搭积木的艺术]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/156889142</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/156889142</guid><author>hhcccchh</author><pubDate>Tue, 13 Jan 2026 10:16:21 +0800</pubDate><description><![CDATA[Vue3组件化开发指南 核心概念 组件化开发就像搭积木，每个组件是独立的功能单元。Vue3组件主要分为三种类型： 根组件：应用入口，唯一且控制整个应用 全局组件：注册一次，随处可用 局部组件：只在注册的父组件内可用 组件注册方式 全局注册：使用app.component()注册，简单但可能影响性能 局部注册：在组件内通过components选项注册，更灵活且性能优化 命名规范 推荐使用PascalCase注册组件（如UserCard），在模板中使用kebab-case（如&lt;user-card&gt;）]]></description><category></category></item><item><title><![CDATA[学习vue第十天 V-Model学习指南：双向绑定的魔法师]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/156866179</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/156866179</guid><author>hhcccchh</author><pubDate>Mon, 12 Jan 2026 16:31:36 +0800</pubDate><description><![CDATA[V-model就像一个贴心的翻译官🗣️用户说话（输入） → 翻译给数据听💾数据变化→ 翻译给页面看🔄实时同步，无需手动管理🎯修饰符加持，功能更强大掌握v-model，你就掌握了Vue表单处理的核心技能！🎉。]]></description><category></category></item><item><title><![CDATA[学习vue第九天 计算属性与侦听器]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/156769034</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/156769034</guid><author>hhcccchh</author><pubDate>Fri, 09 Jan 2026 17:31:22 +0800</pubDate><description><![CDATA[Vue3响应式计算属性与侦听器对比指南 计算属性(computed)和侦听器(watch)是Vue3响应式系统的核心特性。计算属性适合处理纯计算逻辑，具有自动缓存机制，只有当依赖变化时才重新计算；而侦听器更适合处理数据变化时的副作用操作，如异步请求或本地存储。本文通过生动比喻和实例代码，展示了二者的核心差异：计算属性是&quot;佛系计算器&quot;，负责生成新值；侦听器是&quot;监控摄像头&quot;，负责响应变化执行操作。文章还提供了30分钟学习路径和调试技巧，帮助开发者快速掌握这两个特性的适用场]]></description><category></category></item><item><title><![CDATA[学习vue第八天 Vue3 模板语法和内置指令 - 简单入门]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/156757463</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/156757463</guid><author>hhcccchh</author><pubDate>Fri, 09 Jan 2026 12:47:10 +0800</pubDate><description><![CDATA[Vue3 模板语法速查指南： 数据填充使用 {{ 表达式 }} 语法 核心指令包括 v-bind(:)、v-on(@)、v-if、v-show、v-for 等 v-if 会销毁/重建 DOM，v-show 仅切换 display 事件修饰符如 .stop、.prevent 简化事件处理 采用声明式编程，数据变化自动更新视图 学习路径：数据展示→属性绑定→事件处理→结构控制 这份30分钟速查表帮助开发者快速掌握Vue3模板核心语法，适合打印张贴随时查阅。]]></description><category></category></item><item><title><![CDATA[学习vue第七天 从单页面应用（SPA）进化为后台管理系统架构]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/155195887</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/155195887</guid><author>hhcccchh</author><pubDate>Mon, 24 Nov 2025 14:48:40 +0800</pubDate><description><![CDATA[本文介绍如何将单页面应用（SPA）重构为后台管理系统架构，主要涉及前端嵌套路由的实现。首先创建Dashboard和User两个视图组件，分别用于工作台和用户管理功能。然后配置嵌套路由，使HomeView作为布局容器，包含子路由指向不同功能页面。最后改造HomeView成为母版页，保留侧边栏和顶栏等固定结构，中间区域通过&lt;router-view&gt;动态加载子路由内容。通过这三步改造，实现了从SPA到后台管理系统的架构升级，使系统具备更灵活的路由管理和页面布局能力。]]></description><category></category></item><item><title><![CDATA[学习vue第六天 后端老哥的前端生存指南：小白来做登录]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/155106869</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/155106869</guid><author>hhcccchh</author><pubDate>Fri, 21 Nov 2025 17:10:34 +0800</pubDate><description><![CDATA[工程化构建(Vite)强类型约束组件化 UI状态管理(Pinia)路由控制以后前端再跟你说：“这个逻辑很复杂，做不了”，你就可以微微一笑，打开 IDE，帮他写完，然后留下一句：“这也叫复杂？” 😎祝你在全栈的道路上越走越远，Bug 越来越少！🚀。]]></description><category></category></item><item><title><![CDATA[学习vue第五天 Vue全家桶“四大金刚” 小白入门版]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/154952487</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/154952487</guid><author>hhcccchh</author><pubDate>Mon, 17 Nov 2025 17:18:35 +0800</pubDate><description><![CDATA[本文摘要：本文是一篇面向初学者的前端开发入门教程，采用生动比喻的方式讲解Vue.js框架及相关生态工具。文章将前端开发比作&quot;建造城堡&quot;，通过&quot;地基(Vue.js)&quot;&quot;施工队(Vite)&quot;&quot;装修公司(Ant Design Vue)&quot;&quot;导航系统(Vue Router)&quot;等形象的比喻，带领读者从创建第一个Vue页面开始，逐步实现界面美化、状态管理和页面路由等核心功能。教程包含清晰的代码示例和操作步骤，帮助后端开发者]]></description><category></category></item><item><title><![CDATA[学习vue第四天 Vue全家桶“四大金刚”速成记]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/154743292</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/154743292</guid><author>hhcccchh</author><pubDate>Mon, 17 Nov 2025 16:15:45 +0800</pubDate><description><![CDATA[本文介绍了如何从零开始构建一个基于Vue全家桶的前端管理系统。通过Vite、Vue Router、Pinia和Ant Design Vue这&quot;四大金刚&quot;的配合使用，快速搭建出一个具备用户列表和详情查看功能的单页应用。文章详细讲解了项目初始化、核心工具的配置流程，包括Pinia状态管理、Vue Router路由设置、Ant Design Vue组件库引入以及Axios请求封装等关键步骤。最后展示了如何构建基本页面布局和创建视图组件，为后续功能开发奠定基础。整个过程采用通俗易懂的比喻，帮助开]]></description><category></category></item><item><title><![CDATA[学习vue第三天 Vue 前端项目结构的说明]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/154740599</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/154740599</guid><author>hhcccchh</author><pubDate>Wed, 12 Nov 2025 15:25:19 +0800</pubDate><description><![CDATA[会遇到浏览器跨域限制。通过配置代理，我们可以让前端的请求先发给 Vite 开发服务器，再由它转发给后端，从而绕开跨域。希望这份说明能帮助你理解这个项目。简单来说，你可以把前端项目看成一个独立的、需要“编译”的服务，它“编译”后的产物 (这是 Node.js 项目的清单文件。目录) 才是需要你来部署的最终成品。把整个项目想象成一个需要“编译”和“运行”的服务。这是前端构建工具 Vite 的配置文件。配置后，前端代码里可以直接请求。）直接请求你的后端接口（比如。来实现前后端分离的联调。，特别是用于接口联调。]]></description><category></category></item><item><title><![CDATA[vue学习第二天]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/154738334</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/154738334</guid><author>hhcccchh</author><pubDate>Wed, 12 Nov 2025 14:50:41 +0800</pubDate><description><![CDATA[摘要：使用npm create vite@latest vueDemo --template vue-ts命令可快速创建Vue+TypeScript项目。进入项目目录执行npm run dev启动开发服务器，默认访问地址为http://localhost:5173/。项目采用Vite构建工具，包含src源码目录、main.ts入口文件等标准结构，支持热更新和TypeScript类型检查。开发完成后可通过npm run build生成生产代码。（150字）]]></description><category></category></item><item><title><![CDATA[vue学习第一天]]></title><link>https://blog.youkuaiyun.com/hhcccchh/article/details/154737625</link><guid>https://blog.youkuaiyun.com/hhcccchh/article/details/154737625</guid><author>hhcccchh</author><pubDate>Wed, 12 Nov 2025 14:38:06 +0800</pubDate><description><![CDATA[本文提供了前端开发环境的配置指南，包括核心工具Node.js（建议LTS版本≥16.x）及其包管理工具npm/yarn、现代化构建工具Vite、类型语言TypeScript的安装说明。推荐使用VSCode作为IDE并安装Volar、TS插件及代码规范工具ESLint+Prettier，同时需配置Git版本控制系统。文末通过示例验证了Node.js(v22.20.0)和Git(2.41.0)的成功安装，强调工具版本应参考官方文档持续更新。（149字）]]></description><category></category></item></channel></rss>