Typescript系列
文章平均质量分 76
itpeilibo
不怕孤独,努力沉淀;
于淡泊中,平和自在。
展开
-
【Vue3】封装按钮组件
目的:封装一个通用按钮组件,有大、中、小、超小四种尺寸,有默认、主要、次要、灰色四种类型。原创 2023-03-07 08:30:00 · 684 阅读 · 1 评论 -
【Vue3】封装数字框组件
vue3.0封装组件支持v-model的时候,父传子。## 数量选择组件-v-model语法糖> 目标:掌握vue3.0的v-model语法糖原理在vue2.0中v-mode语法糖简写的代码 ``在vue3.0中v-model语法糖有所调整:原创 2023-03-06 08:30:00 · 2319 阅读 · 5 评论 -
【Vue3】vue3 + ts 封装城市选择组件
城市数据并不是直接从接口服务器中获取的,而是从阿里云服务器上获取的数据,所以不能使用封装好的request发送请求,直接使用。注意:完整地址需要父组件传递给子组件,将来如果登录的用户,父组件可以获取到完整的地址。能够封装城市选择组件,并且完成基础的显示隐藏的交互功能。(3)子组件选择完城市,需要将数据传递给父组件。(1)父组件将城市数据传递给子组件。(2)子组件接收,并且进行展示。(4)点击弹层外部,关闭弹层。(4)点击弹层外部,关闭弹层。(4)父组件接受数据并且处理。(4)父组件接受数据并且处理。原创 2023-02-28 08:30:00 · 7791 阅读 · 0 评论 -
【Vue3】面包屑组件封装
目标:掌握面包屑组件如何使用。(2)注册成全局组件应用。原创 2023-02-22 12:32:48 · 417 阅读 · 0 评论 -
【Vue3】组件数据懒加载
电商类网站,尤其是首页,内容有好几屏,而如果一上来就加载所有屏的数据,并渲染所有屏的内容会导致首页加载很慢。添加了ref类型提示:MaybeElementRef -> 暴露出去的taget如果赋值类型不对会进行提示。首页中,很多地方都应该使用组件数据懒加载这个功能,不管是哪个模块使用,下面代码都会重复书写。数据懒加载:等组件正式进入到可视区中时,才把组件内部的ajax请求发起,否则不请求数据。目标:封装组件数据懒加载可复用的逻辑。(1)封装通用的懒加载数据api。给ref添加组件类型。原创 2023-02-20 08:30:00 · 2427 阅读 · 0 评论 -
【Vue3】首页主体-面板组件封装
新鲜好物、人气推荐俩个模块的布局结构上非常类似,我们可以抽离出一个通用的面板组件来进行复用。(4)插槽处理,右侧的查看全部和面板具体的内容不应该写死。(3)父组件传入title和subTitle。标题和子标题应该有父组件传递进来,不能写死。目标:封装一个通用的面板组件。(2)props处理。原创 2023-02-14 08:30:00 · 644 阅读 · 0 评论 -
【Vue3 组件封装】vue3 轮播图组件封装
项目中会多次使用到轮播图组件,但是轮播图渲染的数据是不一样的。但是轮播图的基本功能都是一样的,比如图片切换,自动播放等等。(1)父传子的方式将数据传给通用轮播图组件。(4)覆盖样式,控制箭头和小圆点的位置。目标: 基于pinia获取轮播图数据。文件中封装接口,用于获取轮播图数据。因此需要封装一个通用的轮播图组件。文件中定义轮播图数据的类型声明。(4)通过开发者工具查看数据。(1)通用轮播图的基本结构。(2)全局注册通用轮播图。(1)父组件传值给轮播图。(3)在广告组件中使用。(3)轮播图的播放逻辑。原创 2023-02-10 00:23:21 · 5108 阅读 · 0 评论 -
【TypeScript】TS 看这一篇就够了
目标:能够理解TypeScript中有哪些数据类型可以将 TS 中的常用基础类型细分为两类:JS 已有类型原始类型,简单类型(复杂数据类型(数组,对象,函数等)TS 新增类型联合类型自定义类型(类型别名)接口元组字面量类型枚举void泛型是可以在保证类型安全前提下,让函数等与多种类型一起工作,从而实现复用,常用于:函数、接口、class 中需求:创建一个 id 函数,传入什么数据就返回该数据本身(也就是说,参数和返回值类型相同)原创 2023-02-06 00:20:56 · 4390 阅读 · 17 评论 -
【TypeScript】TS类型声明文件
项目内共享类型如果多个 .ts 文件中都用到同一个类型,此时可以创建 .d.ts 文件提供该类型,实现类型共享。Props } from './index' //通过import导入 // type Props = { x: number;Props } from './index' //通过import导入 // type Props = { x: number;x : number;Props } //创建需要共享的类型,并使用export导出操作步骤:创建 index.d.ts 类型声明文件。原创 2023-01-19 09:29:16 · 2658 阅读 · 7 评论 -
【TypeScript】TS泛型
泛型是可以在保证类型安全前提下,让函数等与多种类型一起工作,从而实现复用,常用于:函数、接口、class 中需求:创建一个 id 函数,传入什么数据就返回该数据本身(也就是说,参数和返回值类型相同)比如,id(10) 调用以上函数就会直接返回 10 本身。但是,该函数只接收数值类型,无法用于其他类型为了能让函数能够接受任意类型,可以将参数类型修改为 any。但是,这样就失去了 TS 的类型保护,类型不安全。原创 2023-01-16 08:30:00 · 1283 阅读 · 2 评论 -
【TypeScript】TS基础
目标:能够理解TypeScript中有哪些数据类型可以将 TS 中的常用基础类型细分为两类:JS 已有类型原始类型,简单类型(复杂数据类型(数组,对象,函数等)TS 新增类型联合类型自定义类型(类型别名)接口元组字面量类型枚举void。类型注解,数组类型,联合类型,类型别名,函数类型,void 类型,可选参数,对象类型,接口类型,元组类型,类型推论,字面量类型,枚举类型 ,数字枚举,字符串枚举,枚举实现原理,any 类型,类型断言 ,原创 2023-01-13 09:53:10 · 642 阅读 · 1 评论 -
【TypeScript】Ts基本概念
TypeScript 是什么?TypeScript 简称:TS,是 JavaScript 的超集,简单来说就是:JS 有的 TS 都有- TypeScript = Type + JavaScript(在 JS 基础之上,为 JS 添加了类型支持)- TypeScript 是*微软*开发的开源编程语言,可以在任何运行 JavaScript 的地方运行为什么要有typescript - 背景:JS 的类型系统存在“先天缺陷”弱类型,JS 代码中绝大部分错误都是类型错误(Uncaught TypeErro原创 2023-01-12 10:26:45 · 428 阅读 · 0 评论 -
【TypeScript】TS与Vue
vue3配合ts中,还需要额外安装一个vscode插件:Typescript Vue Plugin。## defineProps与Typescript 目标:掌握defineProps如何配合ts使用,## defineEmits与Typescript 目标:掌握defineEmit如何配合ts使用,## ref与Typescript 目标:掌握ref配合ts如何使用,## reactive与Typescript目标:掌握reactive配合typescript如何使用computed与Typescript原创 2023-01-18 09:18:57 · 699 阅读 · 2 评论