自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(205)
  • 问答 (1)
  • 收藏
  • 关注

原创 react的参数值和Vue的参数值有什么区别

此外,React还使用state和props来管理组件的状态和接收来自父组件的数据。Vue的参数通常是在组件的props中进行定义,并在父组件中通过属性(attributes)的形式传递给子组件。Vue的模板语法使得这些参数的传递和使用相对直观和易于理解。Vue通过直观的模板语法和props机制实现参数的传递和组件复用,而React则通过JSX、state和props等机制实现更加明确和可控的组件状态和参数管理。React和Vue在参数值的处理上存在一些区别,这主要体现在它们的设计理念和语法上。

2024-04-26 21:10:40 318

原创 vue的v-model、v-if、v-for用react语法实现

在React中,没有直接对应于Vue中的v-modelv-if和v-for的指令,但你可以使用React的特性和组件来实现类似的功能。

2024-04-26 21:09:28 337

原创 TypeScript 类型兼容性

TypeScript里的类型兼容性是基于结构子类型的。结构类型是一种只使用其成员来描述类型的方式。它正好与名义(nominal)类型形成对比。(译者注:在基于名义类型的类型系统中,数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同,它是基于类型的组成结构,且不要求明确地声明。在使用基于名义类型的语言,比如C#或Java中,这段代码会报错,因为Person类没有明确说明其实现了Named接口。

2024-04-25 21:16:40 669

原创 使用react-vant上传图片遇到的问题

图片上传成功后,点击删除图标清除图片后会出现file undefined的报错。判断file的长度,当file的长度不为0时在执行change事件。使用react-vant Uploader上传图片后出现的问题。先试用upload上传图片。

2024-04-25 21:15:40 167

原创 TypeScript 类型兼容性

TypeScript里的类型兼容性是基于结构子类型的。结构类型是一种只使用其成员来描述类型的方式。它正好与名义(nominal)类型形成对比。(译者注:在基于名义类型的类型系统中,数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同,它是基于类型的组成结构,且不要求明确地声明。在使用基于名义类型的语言,比如C#或Java中,这段代码会报错,因为Person类没有明确说明其实现了Named接口。

2024-04-24 20:18:13 887

原创 TypeScript 类型推论

这节介绍TypeScript里的类型推论。即,类型是在哪里如何被推断的。

2024-04-24 20:17:21 372

原创 TypeScript 枚举

使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。

2024-04-23 13:02:40 756

原创 typescript 泛型约束

你应该会记得之前的一个例子,我们有时候想操作某类型的一组值,并且我们知道这组值具有什么样的属性。在例子中,我们想访问arg的length属性,但是编译器并不能证明每种类型都有length属性,所以就报错了。相比于操作any所有类型,我们想要限制函数去处理任意带有.length属性的所有类型。只要传入的类型有这个属性,我们就允许,就是说至少包含这一属性。为此,我们需要列出对于T的约束要求。为此,我们定义一个接口来描述约束条件。创建一个包含.length属性的接口,使用这个接口和extends。

2024-04-23 12:53:49 283

原创 TypeScript 泛型类型

,锁定了之后代码里使用的类型。对于描述哪部分类型属于泛型部分来说,理解何时把参数放在调用签名里和何时放在接口上是很有帮助的。一个相似的例子,我们可能想把泛型参数当作整个接口的一个参数。注意,我们的示例做了少许改动。不再描述泛型函数,而是把非泛型函数签名作为泛型类型一部分。这引导我们去写第一个泛型接口了。除了泛型接口,我们还可以创建泛型类。注意,无法创建泛型枚举和泛型命名空间。我们也可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以。这样接口里的其它成员也能知道这个参数的类型了。

2024-04-22 20:10:41 335

原创 TypeScript 泛型

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

2024-04-22 20:07:34 325

原创 typescript 推断类型

这叫做“按上下文归类”,是类型推论的一种。它帮助我们更好地为程序指定类型。

2024-04-22 07:44:25 358

原创 TypeScript 函数

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。

2024-04-22 07:41:17 703

原创 TypeScript 类

传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015,也就是ECMAScript 6开始,JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript,我们允许开发者现在就使用这些特性,并且编译后的JavaScript可以在所有主流浏览器和平台上运行,而不需要等到下个JavaScript版本。

2024-04-21 09:39:29 253

原创 typescript 混合类型

当接口继承了一个类类型时,它会继承类的成员但不包括其实现。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时,这个接口类型只能被这个类或其子类所实现(implement)。因为JavaScript其动态灵活的特点,有时你会希望一个对象可以同时具有上面提到的多种类型。当你有一个庞大的继承结构时这很有用,但要指出的是你的代码只在子类拥有特定属性时起作用。一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性。,这对私有成员的兼容性是必需的。的所有成员,包括私有成员。

2024-04-21 09:36:13 263

原创 typescript 类类型

与C#或Java里接口的基本作用一样,TypeScript也能够用它来明确的强制一个类去符合某种契约。你也可以在接口中描述一个方法,在类里实现它,如同下面的setTime接口描述了类的公共部分,而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。

2024-04-21 09:35:18 211

原创 typescript 可索引的类型

TypeScript支持两种索引签名:字符串和数字。可以同时使用两种类型的索引,但是数字索引的返回值必须是字符串索引返回值类型的子类型。与使用接口描述函数类型差不多,我们也可以描述那些能够“通过索引得到”的类型,比如。模式,并且它们也会确保所有属性与其返回值类型相匹配。因为字符串索引声明了。,它描述了对象索引的类型,还有相应的索引返回值类型。接口,它具有索引签名。这个索引签名表示了当用。来索引时,JavaScript会将它转换成。)去索引,因此两者需要保持一致。字符串索引签名能够很好的描述。

2024-04-21 09:32:34 150

原创 typescript 函数类型

函数的参数会逐个进行检查,要求对应位置上的参数类型是兼容的。如果你不想指定类型,TypeScript的类型系统会推断出参数类型,因为函数直接赋值给了。它就像是一个只有参数列表和返回值类型的函数定义。这样定义后,我们可以像使用其它接口一样使用这个函数类型的接口。下例展示了如何创建一个函数类型的变量,并将一个同类型的函数赋值给这个变量。对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配。如果让这个函数返回数字或字符串,类型检查器会警告我们函数的返回值类型与。接口中的定义不匹配。

2024-04-21 09:24:35 259

原创 typescript 只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用readonly你可以通过赋值一个对象字面量来构造一个Point。赋值后,x和y再也不能被改变了。ypeScript具有类型,它与Array<T>上面代码的最后一行,可以看到就算把整个赋值到一个普通数组也是不可以的。

2024-04-21 09:23:25 323

原创 TypeScript 接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

2024-04-21 09:20:36 241

原创 typescript解构

展开操作符正与解构相反。它允许你将一个数组展开为另一个数组,或将一个对象展开为另一个对象。解构也能用于函数声明。它们不会被展开操作所改变。这里的语法开始变得混乱。为 undefined ,你也可以给属性以不同的名字。这创建了2个命名变量。

2024-04-21 09:05:15 277

原创 typescript块级作用域变量

const在我们最初谈及获取用var声明的变量时,我们简略地探究了一下在获取到了变量之后它的行为是怎样的。直观地讲,每次进入一个作用域时,它创建了一个变量的环境。就算作用域内代码已经执行完毕,这个环境与其捕获的变量依然存在。因为我们已经在city的环境里获取到了city,所以就算if语句执行结束后我们仍然可以访问它。回想一下前面setTimeout的例子,我们最后需要使用立即执行的函数表达式来获取每次for循环迭代里的状态。实际上,我们做的是为获取到的变量创建了一个新的变量环境。

2024-04-21 08:58:07 116

原创 typescript let

我们提过使用var声明时,它不在乎你声明多少次;你只会得到1个。var x;var x;var x;在上面的例子里,所有x的声明实际上都引用一个相同的x,并且这是完全有效的代码。这经常会成为bug的来源。好的是,let声明就不会这么宽松了let x = 10;let x = 20;// 错误,不能在1个作用域里多次声明`x`并不是要求两个均是块级作用域的声明TypeScript才会给出一个错误的警告。return x;return x;f(true, 0);

2024-04-21 08:51:32 160

原创 TypeScript 变量声明

let和const是JavaScript里相对较新的变量声明方式。像我们之前提到过的,let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题。const是对let的一个增强,它能阻止对一个变量再次赋值。因为TypeScript是JavaScript的超集,所以它本身就支持let和const。下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替var。如果你之前使用JavaScript时没有特别在意,那么这节内容会唤起你的回忆。如果你已经对var。

2024-04-21 08:46:29 230

原创 type script Never

never类型表示的是那些永不存在的值的类型。例如,never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;变量也可能是never类型,当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。即使any也不可以赋值给never。下面是一些返回never。

2024-04-21 08:39:15 247

原创 typescript Any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用any在对现有代码进行改写的时候,any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。你可能认为Object有相似的作用,就像它在其它语言中那样。但是Object当你只知道一部分数据的类型时,any类型也是有用的。

2024-04-21 08:37:26 221

原创 TypeScript 元组 枚举

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。比如,你可以定义一对值分别为string和number类型的元组。

2024-04-21 08:27:13 193

原创 TypeScript基础类型

为了让程序有价值,我们需要能够处理最简单的数据单元:数字,字符串,结构体,布尔值等。TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。

2024-04-21 08:24:45 465

原创 计算属性和方法有什么区别?怎样选择

它用于弹出一个包含问候语的警告框。这个方法没有依赖任何计算属性或数据,而是直接执行了一个具体的操作。在模板或组件的其他部分,我们可以调用这个方法来实现相应的功能。总的来说,选择使用计算属性还是方法应该根据具体的需求和场景来决定。会自动重新计算并返回新的值。在模板中,我们可以直接使用。两个依赖数据进行计算。当这两个依赖数据发生变化时,在这个示例中,我们定义了一个计算属性。在这个示例中,我们定义了一个方法。来显示这个计算属性的值。

2024-04-13 19:48:31 174

原创 vue3中覆盖组件样式的方法

选择哪种方法取决于你的项目需求和个人偏好。在大型项目中,建议使用模块化、可维护的样式解决方案,如 CSS 模块或 CSS 变量。对于小型项目或快速原型,全局样式或组件内样式可能更为方便。

2024-04-13 19:43:52 450

原创 什么是vue的计算属性?为什么使用?怎么使用?举例说明

Vue的计算属性(Computed Properties)是一种用于处理视图逻辑的特殊属性。它的值是基于其他响应式数据的衍生值,这些值会自动缓存并根据依赖的数据进行更新。当依赖的数据发生变化时,计算属性会重新计算。这种机制可以提高性能,避免不必要的计算。总之,Vue的计算属性是一个强大的特性,它可以帮助我们更有效地管理视图逻辑和数据变换。通过合理利用计算属性,我们可以提高性能、简化模板,并使代码更加清晰和易于维护。作为依赖,对其进行反转操作,并返回结果。,而不需要在模板中编写反转逻辑。

2024-04-13 19:28:24 356

原创 简述mvvm模式

MVVM模式是一种软件设计模式,它将应用程序的数据模型、用户界面和视图逻辑进行了清晰的分离。在MVVM中,Model代表数据模型,View代表用户界面,而ViewModel则是这两者之间的协调者,负责将Model中的数据转化为View能够理解的格式,同时处理View中的用户输入。

2024-04-13 19:26:22 272

原创 什么是渐进式框架

这种方式的好处在于它使得项目的起点低、上手快,同时随着项目的增长,可以逐步引入更复杂的特性,而不需要一开始就全面使用框架的所有功能。你可以根据需要逐步引入更多的 Vue 特性,如组件、指令、过滤器、生命周期钩子、路由、状态管理等。Vue.js 的核心库只关注视图层,不仅易于上手,也便于与第三方库或已有项目整合。同时,Vue.js 提供了丰富的官方库和社区资源,允许你在需要时逐步扩展功能,如状态管理、路由、构建工具等。下面是一个简单的 Vue.js 示例,展示了一个基本的“Hello, World!

2024-04-13 19:21:44 588

原创 简述框架和函数库的区别

当你使用React进行开发时,你需要遵循React的约定和规范,利用它提供的组件和工具来构建应用程序。你只需要调用这些函数,并传入相应的参数,就可以轻松实现数学运算的功能,而无需自己编写这些函数的底层实现。在React的较新版本中,你还可以使用函数组件和Hooks API来编写更简洁和灵活的代码。实际上,这两个库都提供了更多的功能和选项,你可以根据项目的需求进一步探索它们的文档和API。当谈到框架和函数库的差异时,我们可以通过具体的例子来更直观地理解它们的应用和用途。在上面的示例中,我们定义了一个名为。

2024-04-13 19:18:51 492

原创 Vue3 Ajax(axios)

Vue 版本推荐使用 axios 来完成 ajax 请求。

2024-04-04 22:04:21 1169

原创 Vue 组合式 API

Vue 组合式 API 生命周期钩子在 Vue2 中,我们通过以下方式实现生命周期钩子函数:export default { beforeMount() { console.log('V2 beforeMount!') }, mounted() { console.log('V2 mounted!') }};在 Vue3 组合 API 中实现生命周期钩子函数可以在setup()函数中使用带有on前缀的函数:import { onBeforeMou

2024-04-04 21:56:18 488

原创 Vue3 组合式 API

Vue3 组合式 API(Composition API) 主要用于在大型组件中提高代码逻辑的可复用性。传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。Vue3 使用组合式 API 的地方为 setup。在 setup 中,我们可以按逻辑关注点对部分代码进行分组,然后提取逻辑片段并与其他组件共享代码。因此,组合式 API(Composition API) 允许我们编写更有条理的代码。

2024-04-04 21:52:59 264

原创 将一维数组转树形

在Element Plus框架中,将一维数组转换为树形结构通常涉及到一个转换函数,该函数可以根据数组中每个元素的特定属性(如父ID)来构建层级关系。对象来建立id和对应项的映射。然后,它遍历输入数组中的每一项,根据每一项的。对象中是否已经存在当前项的id,如果不存在则创建一个新的对象,并初始化一个。对象,用于快速查找和构建层级关系。最后,它返回了一个根元素列表。查找父节点,如果找到了父节点,则将当前项添加到父节点的。),则将当前项作为根节点添加到。数组来存放根节点,以及一个。,这个列表代表了树的根部。

2024-04-02 21:09:32 393

原创 vuex和pinia

Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态的一致性。Vuex通过提供一个全局的状态管理机制,将应用中的状态存储在一个单一的、可预测的状态树中(即store),并允许任何组件访问和修改这些状态。同时,Pinia在设计之初就对TypeScript提供了原生的支持,提供了更好的类型推导和类型检查的支持。首先,从设计理念上看,Vuex采用全局单例模式,通过一个store对象来管理所有的状态,组件通过store对象来获取和修改状态。

2024-04-02 20:39:46 907

原创 生命周期钩子

在Vue中,生命周期钩子是指在Vue实例创建到销毁的过程中,Vue自动调用的函数。这些钩子函数为开发者提供了在Vue实例的不同阶段执行自定义逻辑的机会。

2024-04-01 21:54:21 565

原创 Pinia的数据持久化

Pinia的数据持久化可以通过多种方式实现,例如使用vuex-persistedstate插件或专门为Pinia设计的插件如pinia-plugin-persist。假设我们有一个简单的Vue 3应用程序,其中包含一个用户模块,用于保存和管理用户的信息。当应用程序重新加载时,Pinia会从localStorage中恢复这个状态,使得。接下来,我们定义一个用于管理用户信息的Pinia store。现在,我们需要在应用程序中使用这个store,并在适当的时候保存和恢复用户信息。首先,我们安装并设置Pinia。

2024-04-01 20:59:31 476

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除