箫笛 - 博客园

2025年8月29日

摘要：自定义事件.sync 修饰符的使用在有些情况下，我们可能需要对一个 prop 进行“双向绑定” // 子组件： this.$emit('update:title', newTitle) // 父组件 <text-document v-bind:title="doc.title" v-on:upda 阅读全文

posted @ 2025-08-29 14:29 箫笛阅读(28) 评论(0) 推荐(0)

Vue - vue2 项目中使用svg 图标

摘要：在Vue项目中使用SVG图标可以提高加载速度并方便自定义，以下是几种常见的实现方式：方法一：直接导入SVG文件（推荐）首先创建一个全局组件 SvgIcon.vue： <template> <svg :class="svgClass" aria-hidden="true" v-bind="$att 阅读全文

posted @ 2025-08-29 11:01 箫笛阅读(477) 评论(1) 推荐(0)

2025年8月15日

javascript高级编程系列 - web前端中如何中断程序，等待条件满足时再返回继续执行代码？

摘要： 1. 使用 async/await 配合 Promise（推荐）封装一个等待条件满足的执行函数，通过异步等待机制实现 "暂停" 效果 /*** * conditionCheck: 条件检测函数 * interval：检测间隔时间，默认100ms * timeout：设置超时时间，默认5s * 阅读全文

posted @ 2025-08-15 11:34 箫笛阅读(41) 评论(0) 推荐(0)

2025年8月13日

Angular - forwardRef() 解决循环引用问题的原理

摘要： forwardRef() 是Angular提供的一个工具函数，用于解决组件/指令/服务之间的循环依赖问题。让我们深入了解一下它的工作原理和应用场景。循环引用问题在Angular中，当两个类相互引用时会产生循环依赖： // A 依赖 B class A { constructor(@Inject( 阅读全文

posted @ 2025-08-13 18:24 箫笛阅读(38) 评论(0) 推荐(0)

2025年8月4日

Angular - ngModel指令与双向绑定区别

摘要：在 Angular 中，ngModel 指令和 ngModel 的双向绑定是密切相关的概念，但它们的实现方式和用途存在关键区别： 1. ngModel 指令（基础功能）作用：提供表单控件的单向数据绑定和状态跟踪语法：[ngModel]（属性绑定）数据流：单向（组件 → 视图）主要功能：将组阅读全文

posted @ 2025-08-04 09:59 箫笛阅读(272) 评论(0) 推荐(0)

2025年8月1日

Angular - style属性绑定与NgStyle指令的使用区别

摘要：在 Angular 中，[style] 属性绑定和 NgStyle 指令都用于动态设置元素样式，但它们在使用方式和功能上有明显区别： 1. [style] 属性绑定（推荐方式）  <div [style.backgroundColor]="isActive ? 'gre 阅读全文

posted @ 2025-08-01 16:49 箫笛阅读(65) 评论(0) 推荐(0)

2025年7月25日

Angular - angular组件转自定义元素方法及应用

摘要： Angular 组件转为自定义元素的方法 Angular 通过 @angular/elements 包提供了将组件转换为自定义元素（Custom Elements）的能力（遵循 Web Components 标准）。以下是详细步骤： 1. 安装依赖 ng add @angular/element 阅读全文

posted @ 2025-07-25 18:43 箫笛阅读(263) 评论(0) 推荐(0)

Angular - 视图查询与内容查询区别及应用

摘要：在Angular中，视图查询（View Query）和内容查询（Content Query）都是用于获取子元素或组件的机制，但它们的查询范围和应用场景有本质区别。以下是详细对比：核心区别特性视图查询（@ViewChild / @ViewChildren）内容查询（@ContentChi 阅读全文

posted @ 2025-07-25 16:23 箫笛阅读(27) 评论(0) 推荐(0)

Angular - afterRender与afterNextRender区别及应用

摘要：在 Angular 中，afterRender 和 afterNextRender 都是用于在组件渲染后执行代码的渲染钩子（Render Hooks），但它们在触发时机和用途上有明显区别： 1. afterNextRender 触发时机：仅在下一次变更检测完成且 DOM 更新后执行一次。应用场景：阅读全文

posted @ 2025-07-25 14:55 箫笛阅读(75) 评论(0) 推荐(0)

Angular - 组件生命周期函数详解

摘要： Angular 的生命周期函数是组件和指令在创建、更新和销毁过程中自动调用的钩子方法，用于在关键阶段执行自定义逻辑。以下是核心生命周期函数及其应用场景（按调用顺序排列）： 1. ngOnChanges() 调用时机：当输入属性（@Input 绑定）的值发生变化时调用（首次调用在 ngOnInit 阅读全文

posted @ 2025-07-25 14:32 箫笛阅读(142) 评论(0) 推荐(0)

箫笛

公告