- 博客(148)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 el-autocomplete实现输入搜索时依据 name 进行搜索，选择后绑定 code 的功能
绑定的内容随disabled变化。删除绑定内容，再恢复非disabled状态时，不会残留影子在页面上。这是一个目前实现了的方案。文中的代码有些混乱，请理解精华部分及主题思想即可。
2025-04-02 17:27:04
207
原创 遍历数组时，如何获取数组每个元素索引号
map方法也接受一个回调函数，该回调函数有两个参数：当前元素和当前元素的索引。它会返回一个新的数组，其中包含每个元素经过回调函数处理后的结果。entries 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引及其对应的值。for...of 循环可以直接遍历这个迭代器对象。以上这些方法都可以在遍历数组时获取每个元素的索引号，你可以根据具体的需求选择合适的方法。forEach 方法接受一个回调函数，该回调函数有两个参数：当前元素和当前元素的索引。这种方法通过一个计数器 i 来跟踪当前元素的索引。
2025-03-27 20:24:36
202
原创 用数组遍历出来的页面，随节点创建的ref存储在数据仓库中，如果数据删除，页面相关节点也会删除，数据仓库中随节点创建的ref会不会也同时删除
数据仓库里存储的 ref 不会随 DOM 节点的删除自动清理，需要在数据更新时手动处理。
2025-03-27 20:16:20
238
原创 一个数组有4个元素,a=[1,2,3,4]用a=[]和splice(0)是不是一样的效果
a = [] 会让变量 a 指向新的空数组，原数组不受影响。a.splice(0) 会直接清空原数组，并且返回被删除的元素组成的数组，所有引用该数组的变量都会受到影响。所以，a = [] 和 a.splice(0) 效果不同。
2025-03-27 20:08:46
279
原创 清空数组，或删除数组还有什么方法
不同的方法适用于不同的场景，你可以根据具体需求选择合适的方法来清空或删除数组。如果需要直接修改原数组且希望所有引用都受到影响，可以使用 a.length = 0 或 a.splice(0)；如果需要在删除元素的过程中对每个元素进行处理，可以使用 pop() 或 shift() 方法；如果不希望修改原数组，可以使用 filter() 方法。
2025-03-27 20:04:18
213
原创 变量自减1的写法
如果只是单纯地让变量自减 1，且不需要获取自减前的值，使用 -- 运算符是最好的选择，它简洁高效。如果需要在代码中明确表达减法的操作，或者希望代码更具可读性，使用 -= 运算符是不错的选择。对于初学者，或者在需要强调减法逻辑的场景下，可以使用直接减法并重新赋值的方式。
2025-03-27 19:51:40
185
原创 ＜router-view＞有什么用
<router-view> 是一个占位符组件，它的主要功能是根据当前的路由路径动态渲染对应的组件。在单页面应用中，页面不会像传统多页面应用那样进行整体刷新，而是通过切换不同的组件来实现页面内容的更新，<router-view> 就是用来显示这些动态切换的组件的区域。<router-view> 是 Vue Router 中实现路由切换和组件动态渲染的核心组件，它使得单页面应用能够在不刷新整个页面的情况下，动态显示不同的内容，提升了用户体验。
2025-03-27 19:40:38
306
原创 数据仓库pinia中，getter和actions有什么区别
如果计算逻辑只是简单地从现有的状态中派生出新的数据，并且希望利用缓存机制提高性能，方便在组件中展示计算结果，那么将其放在 getters 中是合适的。而如果计算逻辑涉及到异步操作、修改状态或者复杂的业务逻辑，那么应该放在 actions 中。
2025-03-27 19:34:57
389
原创 数据仓库getter的应用
getters 里可以放置任意数量的计算属性。getters 本质上是一个对象，你可以根据需求定义多个不同名称的计算属性。不过，为了保证代码的可读性和可维护性，建议根据功能将相关的计算逻辑组织在一起，避免 getters 过于庞大和复杂。
2025-03-27 18:51:32
305
原创 有console.error有没有console.success
/ 自定义 console.success 方法// 使用 console.log 并结合 CSS 样式输出成功信息');// 使用自定义的 console.success 方法console.success('操作成功！');
2025-03-27 00:39:39
301
原创 据仓库有两个对象a:{},b:{},a中的键值是从b中复制出来的，v-model明明绑定的是数据仓库的a对象，但为什么更新时，a,b两个对象同时更新。JSON.parse(JSON.stringify
当你遇到 v-model 绑定数据仓库中的对象 a，但更新时 a 和 b 两个对象同时更新的情况，这通常是因为 a 和 b 指向了同一个内存地址，也就是它们是浅拷贝关系，而非深拷贝。下面详细分析并给出解决方案。
2025-03-27 00:37:43
108
原创 ＜Transition＞和＜KeepAlive＞组件一起用有什么用
在 Vue 3 中， <Transition> 和 <KeepAlive> 都是内置组件，将它们组合使用 <Transition> <KeepAlive> <component :is="view"></component> </KeepAlive> </Transition> 可以实现带有过渡动画效果的组件缓存功能，下面详细解释其作用和原理。
2025-03-25 19:43:39
423
原创 ＜KeepAlive＞和＜keep-alive＞有什么区别
大小写规范：Vue 2 用的是 kebab-case（短横线命名）的 <keep-alive>，而 Vue 3 采用 PascalCase（大驼峰命名）的 <KeepAlive>，这是 Vue 3 在模板语法上的统一规范。使用场景：功能上两者基本一致，都是用于缓存组件实例，避免重复创建和销毁。但在 Vue 3 里，<KeepAlive> 搭配了一些新的 API 和特性，例如 include、exclude 和 max 等属性，让缓存管理更加灵活。
2025-03-25 19:39:00
502
原创 vue3中watch 函数参数说明
在子组件示例中，() => props.parentValue 就是一个 getter 函数，它返回 props.parentValue 的值，作为 watch 要监听的数据源。}` 就是这个回调函数。在子组件示例中，{ immediate: false } 就是配置对象，这里设置 immediate 为 false，表示初始化时不立即执行回调。
2025-03-25 16:41:22
611
原创 明明写了监听页面滚动的函数，为什么监测不到
为什么监测不到页面的滚动呢。在实际生产过程中，很有可能您想监听的是某一个元素的滚动，所以要确定是想监听某一个元素的滚动还是整个页面的滚动。上面这个代码监听的是页面的滚动。而不是某一个元素的滚动。
2025-03-25 13:11:40
109
原创 在＜el-row＞＜el-col＞＜el-col＞中，通过点击固定位置的按钮，实现其中一列显示或隐藏
通过什么样的方式按钮不会随着 el-col 的隐藏而消失，能正确实现点击按钮切换显示状态的功能。通过将按钮移到 el-row 外面，同时添加一个样式类来实现类似的视觉效果。
2025-03-25 13:03:46
216
原创 ＜el-card v-for=““ :ref=““＞记录每一个card的ref,监听每个card的滚动，滚动到相应card时，左侧相应目录添加背景
以下分别给出 Vue 2 和 Vue 3 的实现示例，用于循环渲染 el-card 并记录每个 card 的 ref，监听每个 card 的滚动，当滚动到相应 card 时，为左侧相应目录添加背景。
2025-03-25 12:58:51
556
原创 cb(results)；回调函数为什么用cb表示
在复杂的项目中，可能会有很多不同的变量和函数，如果使用完整的描述性名称，可能会导致命名冲突，而 cb 相对来说比较独特，不容易与其他名称重复。使用 cb 这个名称，让代码更加简洁易读，同时也符合开发者的习惯。总之，使用 cb 作为回调函数的参数名是一种简洁、通用且符合行业惯例的做法，有助于提高代码的可读性和可维护性。通用：callback 是回调函数在编程领域中通用的名称，cb 作为其缩写，在很多代码库和项目中都被广泛使用，开发者看到 cb 就能立刻明白它代表的是一个回调函数。
2025-03-24 12:58:30
336
原创 在 el-autocomplete 组件的 fetch-suggestions 方法里，cb 是一个回调函数
cb 回调函数的作用是把过滤后的建议选项传递给 el-autocomplete 组件，从而确保组件能够正确显示这些选项。在使用 el-autocomplete 时，必须在 fetch-suggestions 方法中调用这个回调函数，不然组件就无法显示建议选项。
2025-03-24 12:56:47
208
原创 value-key 的作用
在 el-autocomplete 组件中，value-key 是一个非常重要的属性，它用于指定选项对象中作为值的字段名。当选项列表是一个包含多个属性的对象数组时，value-key 能帮助组件明确哪个属性是实际要使用的值。比如，选项列表为 [{id: '01', name: 'ab'}, {id: '02', name: 'cd'}]，若设置 value-key="id"，就表明组件会以 id 字段的值来进行匹配和绑定。
2025-03-24 12:52:19
429
原创 v-model的值一定是响应式吗
v-model 的值是否响应式取决于它绑定的数据是否是响应式的。在 Vue 开发中，要确保绑定到 v-model 的数据是通过 Vue 提供的响应式机制（如 Vue 2 的 data 选项、Vue 3 的 ref 和 reactive）创建的，这样才能实现双向数据绑定和响应式更新。
2025-03-24 12:30:37
464
原创 在什么情况下使用＜script setup＞语法糖更好
语法糖能够很好地与模板和样式部分结合，使整个组件的代码结构更加清晰。你可以在一个文件中完成组件的所有功能，包括模板、逻辑和样式，提高开发效率。你可以轻松地导入和使用组合式函数，将复杂的逻辑拆分成多个函数，提高代码的可维护性和复用性。语法糖可以让代码风格更加一致，降低团队成员之间的沟通成本。它让代码的结构更加紧凑，变量和方法的定义更加直观。当你专注于实现组件的业务逻辑，而不想被 Vue 组件的模板结构所干扰时，如果组件的逻辑较为简单，只是处理一些基本的数据绑定、事件处理，使用。在单文件组件（SFC）开发中，
2025-03-23 17:55:42
237
原创 vue3中＜script setup＞语法糖是什么意思。为什么叫语法糖，为什么叫糖，它甜吗
在 Vue 3 里，属于一种语法糖。下面会详细解释它的含义，以及为何被叫做语法糖。
2025-03-23 17:47:22
210
原创 刷新页面pinia数据会不会消失
在刷新页面时，Pinia 存储的数据默认会消失。这是因为页面刷新会重新加载整个应用程序，导致内存中的数据被清空，Pinia 存储的数据也不例外。不过，你可以通过一些方法来实现刷新页面后数据的持久化。
2025-03-23 17:40:20
284
原创 使用 map 方法从原 tableList 数组中提取每个对象的 id 属性，组成一个新的仅包含 id 的数组
【代码】使用 map 方法从原 tableList 数组中提取每个对象的 id 属性，组成一个新的仅包含 id 的数组。
2025-03-23 17:31:07
103
原创 如果vue加载页面的时候，需要加载很多子vue ，能不能先加载一个，让页面处于能用的状态，多余的在后台加载。
v-if 指令可以根据条件来决定是否渲染组件，利用这个特性可以先渲染一个必要的子组件，其余组件在合适的时机再渲染。通过以上方法，可以在 Vue 中实现先加载一个子组件让页面可用，其余子组件在后台或按需加载的效果。在 Vue 3 中，可以使用 Vue.lazy 函数来创建异步组件，实现更简洁的按需加载。Vue 支持动态组件和异步组件，结合这两个特性可以实现子组件的按需加载。
2025-03-23 17:23:18
363
原创 既然有那么多保留属性。为什么还是会绑定:is,:ref等
在这个示例中，currentComponent 变量能够动态改变，通过 :is 绑定，可在 ComponentA 和 ComponentB 之间动态切换显示。在这个示例中，item.id 作为 :key 的值，确保了每个列表项都有唯一的标识。key 属性用于帮助 Vue 识别哪些元素发生了变化，通过 :key 动态绑定，可以确保在列表渲染时，Vue 能够高效地更新 DOM。ref 属性用于获取 DOM 元素或者组件实例，借助 :ref 动态绑定，能够在循环或者条件渲染里为每个元素或者组件分配唯一的引用。
2025-03-23 17:15:07
277
原创 :ref 和 this.$refs 的区别及 $ 的作用
在 Vue 模板中，:ref 这种写法是使用了 Vue 的动态绑定语法（: 是 v-bind: 的缩写）。ref 是一个特殊的属性，用于给元素或组件注册引用信息。当你使用 :ref 时，通常是在动态地为元素或组件设置引用名称，例如在循环中为每个元素或组件分配不同的引用名。
2025-03-23 17:10:14
511
原创 const count = ref(0)；是什么意思。count最终会是什么值
代码含义解释在 Vue 3 的组合式 API 里，const count = ref(0);这行代码的作用是定义一个响应式的变量 count，并且把它的初始值设置为 0。
2025-03-23 16:55:01
212
原创 在vue3的＜script setup＞语法糖中，method和计算属性等都怎么添加
在 <script setup> 语法糖中，添加方法、计算属性等和普通的组合式 API 用法相似，但更简洁，不需要显式地从 setup 函数返回。以下分别介绍如何添加方法、计算属性、监听器等。
2025-03-23 16:51:52
189
原创 除了setup的表达方法，vue3还有什么表达方法
script setup> 是 Vue 3 引入的一种更简洁的语法糖，用于组合式 API 的编写。它可以让你更直接地在 <script> 标签中编写逻辑，而不需要 setup 函数的包裹。选项式 API 是 Vue 2 中就有的风格，Vue 3 仍然支持这种方式。它将不同功能的代码（如数据、方法、生命周期钩子等）分组到不同的选项中。你可以根据项目的需求和个人的编码习惯选择合适的表达方式。
2025-03-23 15:24:18
270
原创 vue3中如何添加method
在 setup 函数外部的 methods 对象里添加新方法，这样添加的方法和 Vue 2 里的方法定义方式类似，能直接通过 this 访问组件的其他属性和方法。若要在当前的 Vue 3 组件里添加新的 method（方法），可以在 setup 函数外部的 methods 对象中添加，也可以在 setup 函数内部定义并返回。下面分别介绍这两种方式。在 setup 函数内部定义方法，然后在返回对象中添加该方法，这种方式更符合 Vue 3 组合式 API 的风格。在 methods 对象中添加方法。
2025-03-23 15:20:32
269
原创 vue3怎么定义计算属性
在 Vue 3 中，你可以使用 computed 函数来定义计算属性。computed 函数来自 Vue 3 的组合式 API，它有两种使用方式：只读计算属性和可写计算属性，下面分别介绍这两种方式。
2025-03-23 15:16:58
333
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人