编程技术

文章分享了为Halo博客接入AI智能索引的完整流程与踩坑经验。作者选择智谱AI作为Embedding模型供应商，首先在应用市场安装Halo的AI基座与AI套件，并在智谱开放平台创建API Key。配置AI Foundation基座时需添加供应商并填写通用API端点与密钥，模型必须手动添加，因为自动获取不到所需的Embedding模型，需正确填写模型ID和类型。设置默认模型后，在AI套件中完成连通性测试。随后建立向量索引并开启AI对话功能，即可实现AI优先基于站内文章内容总结回答。读者按此步骤可少走弯路，顺利完成博客AI智能搜索部署。

本文介绍一个 Vue 古诗列表展示组件案例，涵盖父组件向子组件传递数据、v-for 循环渲染、props 类型验证与自定义验证器等核心技能。子组件通过 slice(0, num) 限制显示数量，并设置唯一 key 提升渲染效率；props 定义 poemArr（必填数组，需含 author 与 describe 字段）和 num（默认 2，范围 1-3）。父组件维护诗歌数据数组并动态绑定给子组件。案例还展示了 scoped 样式隔离、卡片式布局与配色方案，并给出扩展建议（动态数量、搜索过滤）。读者可掌握 Vue 组件通信、列表渲染、数据切片及验证器写法，适合初学 Vue 组件开发时练习。

本文介绍Vue中动态绑定props的用法，包括`v-bind`及简写冒号语法，支持字符串、数字、布尔、数组、对象、表达式及响应式数据。重点讲解两种对象传递方式：`v-bind="obj"`将对象属性分别绑定到多个props，以及`:init="obj"`将完整对象作为单个props传递，并对比特点与适用场景。还涉及响应式数据传递（`reactive`/`ref`）、应用场景（表单、列表、条件渲染）、注意事项（对象引用传递、props验证）。通过示例说明动态绑定实现灵活的父子组件通信，强调单向数据流，帮助读者根据场景选择合适方式。

Vue 中父组件通过 props 向子组件传递数据，实现组件间通信与数据共享。静态绑定时属性值默认为字符串，通过组件标签属性传参；子组件需用 defineProps 声明接收，否则数据被忽略。props 遵循单向数据流，子组件不可直接修改，需通过事件通知父组件；同时支持类型验证、必填、默认值及自定义校验。命名上子组件声明用 camelCase，模板中使用推荐 kebab-case。动态绑定可用 v-bind（:num="值"）传递变量或表达式，且能保留非字符串类型。Props 为响应式，父组件数据变化会自动同步。该机制保证了数据流可预测性和组件复用性。

本文针对 Vue 项目中组件样式全局生效导致的冲突问题，介绍 Scoped CSS 解决方案。通过为 `<style>` 添加 `scoped` 属性，Vue 自动为组件元素添加唯一 `data-v-xxx` 属性，使 CSS 选择器限定在当前组件内，实现样式隔离。文中给出父组件、全局组件、局部组件的修改示例，并总结特性：父组件 scoped 样式不渗透子组件内部，但子组件根元素受双方影响；若需影响子组件内部，可使用 `::v-deep`、`/deep/` 或 `:deep()` 深度选择器，或改用 CSS Modules。同时提醒避免过度使用 scoped、注意少量运行时开销、覆盖第三方库样式时需用深度选择器、scoped 优先级遵循 CSS 规则。最终三个组件样式相互隔离，边框、背景及布局均按预期显示。

案例概述 本案例演示了 Vue 3 中组件的两种注册方式：全局注册和局部注册，以及如何在父组件中引用这些组件。 组件结构 src/components/2026516/ ├── 2.vue # 父组件（主组件） ├── GlobalComponent.vue # 全局组件

该文解析了基于HarmonyOS ArkUI 3.0与TypeScript开发的用户登录页面。页面采用声明式UI与分层组件架构，通过@Entry、@Component、@State等装饰器实现状态驱动的界面更新。核心功能包括手机号非空及格式校验（正则表达式）、实时错误反馈、防重复提交的登录流程，并展示输入框封装、按钮加载态切换、条件渲染成功视图等关键实现。文章还详解了以#1FA485为主色的视觉规范、响应式布局策略及性能优化思路，如最小化状态管理、减少嵌套层级。整体架构清晰，是学习ArkUI声明式开发、表单验证与移动端界面设计的实用范例。

本文解析基于 HarmonyOS ArkUI 开发的注册页面 textinput1.ets，展示声明式 UI 与响应式状态管理的最佳实践。页面采用分层组件结构，使用 @State 管理账号、密码、邮箱及提交状态，通过条件渲染切换注册表单与成功视图。关键技术包括：TextInput 的 onChange 双向绑定、按钮加载状态与防重复提交、setTimeout 模拟网络请求、$r() 资源引用，以及统一绿色主题与百分比布局的响应式设计。文章还涵盖性能优化要点，如最小化状态变量、减少嵌套和条件渲染。该范例架构清晰，适合开发者学习用 ArkUI 快速构建高质量移动端表单界面。

本文介绍了一个基于 Vue 3 和 Bootstrap 5 开发“学习计划表”应用的完整案例。项目通过 VSCode 搭建，引入 Bootstrap CDN 样式，并实现以下核心功能：使用 `v-for` 动态渲染表格数据，展示序号、科目、内容、地点、完成状态和操作列；通过 `v-model` 绑定完成状态开关，并用动态 `id` 与 `label` 关联解决点击文字无法切换状态的问题；删除功能限定只有“已完成”的计划才能删除，否则弹出提示；新增计划通过表单提交实现，包含必填校验、`v-model.trim` 去除首尾空格，以及下拉框动态选项。案例覆盖 Vue 常用指令和事件绑定、修饰符等关键知识点，适合练习组件内数据管理、条件渲染和表单交互，最终提供可直接复用的完整代码。

自定义文本样式 ps：必须配合 maxLines 使用，用来控制文本超出容器范围时的显示方式 写法 .textOverflow({overflow:TextOverflow.None}) TextOverflow.None