- 博客(21)
- 收藏
- 关注
RSS订阅原创 学习VUE3——组件（二）
在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。这时就需要用到插槽。<slot>元素是一个(slot outlet)，标示了父元素提供的(slot content) 将在哪里被渲染。插槽内容可以是任意合法的模板内容，不局限于文本。Vue 组件的插槽机制是受原生 Web Component <slot> 元素的启发而诞生。
2024-06-07 17:45:55
1495
1
原创 学习VUE3——模板引用ref
在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的attribute是一个特殊的 attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说，或。注意，你只可以在组件挂载后才能访问模板引用。
2024-05-29 16:58:43
703
原创 学习VUE3——侦听器watch、watchEffect
当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。需要在某些状态改变时，执行一些操作，如：进行异步操作接口获取、修改另一处状态等，就需要用到侦听器watch。然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
2024-05-29 10:05:57
1056
原创 学习VUE3——生命周期
/ 组件挂载完成后执行// 在组件因为响应式状态变更而更新其 DOM 树之后调用// 在组件实例被卸载之后调用// 在组件被挂载之前被调用// 在组件即将因为响应式状态变更而更新其 DOM 树之前调用// 在组件实例被卸载之前调用// 在捕获了后代组件传递的错误时调用// 当组件渲染过程中追踪到响应式依赖时调用（仅在开发环境中有效）// 当响应式依赖的变更触发了组件渲染时调用（仅在开发环境中有效）// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
2024-05-28 10:45:59
1287
原创 学习VUE3——事件修饰符、按键修饰符
为了让方法能更专注于数据逻辑而不用去处理 DOM 事件的细节，Vue 为 v-on 提供了事件修饰符。Tip：使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用会阻止元素及其子元素的所有点击事件的默认行为，而则只会阻止对元素本身的点击事件的默认行为。和修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。请勿同时使用和，因为已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则会被忽略，并且浏览器会抛出警告。
2024-05-22 16:40:45
904
1
原创 TS学习——命名空间、模块、声明文件
命名空间一个最明确的目的就是解决重名问题。命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。
2024-05-17 13:45:25
739
原创 TS学习——类class
TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性，比如 类、接口等。
2024-05-15 17:29:40
870
原创 TS学习——接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
2024-05-14 17:57:07
157
原创 TS学习——函数
在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识。还有一种情况是我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
2024-05-10 15:29:04
830
1
原创 TS学习——变量声明
原因是(animal as Fish).swim() 这段代码隐藏了 animal 可能为 Cat 的情况，将 animal 直接断言为 Fish 了， TypeScript 编译器信任了我们的断言，故在调用 swim()时没有编译错误。可 swim 函数接受的参数是 Cat | Fish，一旦传入的参数是 Cat 类型的变量，由于 Cat 上没有 swim 方法，就会导致运行时错误了。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。
2024-05-08 17:19:09
1815
1
原创 移动端table组件(带全屏旋转功能)——解决Ant Design Vue的a-table组件旋转页面后在移动端中滚动轴失效的问题
Ant Design Vue(3.2.13)的a-tablevue3在移动端开发中需要给页面增加一个table组件展示数据，并且组件带有全屏功能（点击全屏按钮后，弹出对话框窗口，横屏展示该table）。但在旋转页面后，发现table的X轴滚动失效。组件样式：由于横屏展示是通过transform将页面旋转90度实现的，旋转后原X轴变成了Y轴，但组件仍需要按照盒子的原方向去计算滚动(滚动、宽高等需要按盒子未旋转前方向)。所以造成了计算数据的混乱，导致触碰拖动滚动表格失效。
2024-04-30 16:32:57
1039
原创 VUE3中，使用ant-design-vue表格滚动报错ResizeObserver loop completed with undelivered notifications.
ResizeObserver解决方法
2024-04-24 16:58:31
883
原创 VUE3安装依赖卡死：idealTree:jdCrm: sill idealTree buildDeps
~~这个命令会检查 npm 缓存中的所有包，并移除任何不完整或损坏的缓存条目。2、终端或cmd命令提示符中命令行输入npm cache verify；1、删除系统盘下C:\Users\系统用户名文件夹\下的.npmrc；完成后再重新安装依赖，卡顿解决。
2024-03-27 11:12:38
798
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人