自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(164)
  • 收藏
  • 关注

原创 vue数据持久化仓库

这是先给一个初始值。为空,然后判断他啊的长度,data:this.data。这个最后点data,是接口中,返回数据的名称,有可能为res,有可能为list等等。当第一次进入页面的时候会比较慢行。它是读取这个数组,然后将他储存到本地存储上面。等下次再进这个页面的时候,就不会在重新请求数据而产生白屏。引入本页面所要存储数据的接口,在终端导入:npm i pinia 和 npm i pinia-plugin-persistedstate。首先在src中创建store文件夹,并创建一个根据本页面相关的名称,

2024-05-26 18:17:41 228

原创 react diff 原理

React的Diff算法(也称为React Diff原理或React Diffing策略)是React框架中用于优化DOM更新的核心机制。其核心思想是通过比较新旧Virtual DOM的差异,仅更新有变化的部分,以提高渲染效率。通过上述策略和原理,React Diff算法能够高效地找出新旧Virtual DOM之间的差异,并仅更新实际DOM中发生变化的部分,从而显著提高React应用的渲染性能和效率。

2024-05-26 14:29:31 293

原创 vue的图片上传

关于vue3的图片上传,这里记录一下,有兴趣的朋友可以参考。

2024-05-25 18:15:57 263

原创 当你根据接口中的数据状态来渲染时该怎么渲染

在vue3中,当我们用到一个数组的时候,比如array,用其渲染的时候,其中,有一项时根据状态要求渲染的时候,我们可以根据computed的计算属性来其进行过滤并返回一个新的数组。

2024-05-25 09:05:27 525

原创 介绍下 npm 模块安装机制,为什么输入 npm install 就可以自动安装对应的模块

npm(Node Package Manager)模块安装机制是Node.js生态系统中非常重要的一部分,它允许开发者轻松管理和安装Node.js项目的依赖项。下面我将详细介绍npm模块的安装机制,以及为什么输入就可以自动安装对应的模块。

2024-05-24 21:22:17 457

原创 Vue.js组件设计原则

遵循以上原则进行设计,可以帮助你创建出高质量、可维护、可复用的Vue.js组件。

2024-05-24 21:20:59 364

原创 vue 组件中 data 为什么必须是函数

是一个函数时,每次 Vue 创建一个新的组件实例,都会调用这个函数并返回一个新的对象作为该实例的数据。这样,每个组件实例都会拥有自己独立的数据副本,它们之间的数据互不影响。是一个对象,那么这个对象在多个组件实例之间将是共享的,这会导致所有的组件实例都访问和修改同一份数据,这显然不是我们想要的。必须是一个函数而不是一个对象,这是因为 Vue 组件是可复用的,并且每个组件实例都需要拥有自己独立的数据状态。必须是函数,是为了确保每个组件实例都拥有自己独立的数据状态,从而避免数据污染和意外的行为。

2024-05-23 21:06:54 598

原创 为什么避免 v-if 和 v-for 一起用?

一起使用在同一个元素上,主要是因为它们会导致一些潜在的性能问题和逻辑复杂性。为了避免这些问题,Vue 官方建议不要在同一个元素上同时使用。元素本身不会被渲染到页面上),然后在这些副本中分别应用。会首先遍历整个数组或对象,并为每一个元素创建一个。这种方式既保证了性能,又降低了代码的复杂性。相反,你可以使用一个。避免在 Vue 中将。

2024-05-23 21:05:31 471

原创 怎么定义vue-router的动态路由?怎么获取传过来的值

在 Vue Router 中,你可以通过在路由路径中使用冒号()来定义动态路由参数。例如,如果你有一个用户资料页,其 URL 可能类似于/user/123,其中123是用户的 ID。path: '/user/:id', // 这里的 :id 是一个动态参数},// 其他路由...routes})在这个例子中,:id是一个动态路由参数,它会被匹配到的 URL 中的相应部分替换。

2024-05-17 18:29:19 255

原创 Vue如何打包上传至服务器?及其步骤。打包后刷新页面404怎么解决?

打开你的Vue项目所在的文件夹,使用VSCode或其他你喜欢的编辑器打开。在VSCode的终端中,输入npm run build(假设你的package.json文件中已经配置好了这个命令)。这个命令会启动Vue的打包过程,将你的项目打包成一个可以在服务器上运行的静态文件。打包完成后,你会在项目根目录下看到一个名为dist的文件夹,这个文件夹中就是打包后的静态文件。

2024-05-17 08:15:22 179

原创 什么是泛型?泛型的具体使用?

在TypeScript(TS)中,泛型(Generics)是一种在定义函数、接口或类时创建灵活的可复用组件的方法。泛型允许你创建可重用组件,这些组件可以工作于多种数据类型,而不是只能工作于单一数据类型。通过泛型,你可以编写灵活的代码,这些代码可以处理不同的数据类型,而无需为每种数据类型编写单独的函数或类。

2024-05-16 08:24:53 154

原创 <template>标签的作用是什么?<slot>标签的作用是什么?

template>和都是 Vue.js 框架中用于模板编程的标签,但它们在功能和应用场景上有所不同。

2024-05-16 08:09:13 1126

原创 什么是枚举?列举几个枚举的使用场景

例如,在图形界面编程中,你可能需要定义一组颜色,如红色、绿色、蓝色等。使用枚举可以确保颜色值在代码中的一致性,并避免使用魔法数字(即直接使用数字表示颜色)。这些值在枚举类型中是唯一的,并且它们的名称在类型上是关联的。使用枚举可以提高代码的可读性和可维护性,因为它们提供了类型安全的常量集合。此外,枚举还可以与switch语句一起使用,以便根据枚举值执行不同的操作。在处理具有多种状态或类型的对象时,可以使用枚举来表示这些状态或类型。使用枚举可以确保这些选项的合法性,并提供类型安全的访问方式。

2024-05-14 17:18:40 304

原创 一般可以用哪些值作为key?如果用索引值作为key 会出现什么样的问题?

是一个特殊的属性,它主要用于帮助React识别哪些元素发生了变化、被添加或被移除。当在列表(如数组)中渲染元素时,为每一个元素提供一个唯一的。但需要注意的是,这些属性必须是唯一的,并且不会随着时间而改变。:如果数据源有一个唯一的标识符,如数据库中的ID,那么它是最理想的。这是因为ID是唯一的,可以确保React准确地识别每一个元素。:如果数据源中没有ID,也可以考虑使用其他稳定的属性作为。:当没有其他稳定的属性可用时,有时可能会使用索引值作为。因此,在可能的情况下,最好使用唯一的、稳定的属性作为。

2024-05-13 16:06:45 349

原创 对比state和props的区别

总的来说,State和Props在React中各自扮演着不同的角色,它们共同协作以实现组件间的数据传递和状态管理。通过合理地使用State和Props,我们可以构建出更加灵活、可维护和可重用的React组件。State和Props在React中都是用于组件间数据传递的重要概念,但它们之间存在一些显著的区别。

2024-05-13 16:05:36 179

原创 dom驱动和数据驱动的理解

在数据驱动的模式下,开发人员将关注点放在数据本身上,由框架负责根据数据的变化自动更新页面内容。数据驱动的优势在于,开发人员只需关注数据的状态和交互逻辑,而不需要手动操作DOM,从而减少了手写繁琐的DOM操作代码的量。当数据发生变化时,开发人员需要手动选择要更新的DOM元素,并修改其属性或内容以反映新的数据状态。总结来说,DOM驱动和数据驱动的主要区别在于它们对数据和DOM操作的处理方式。DOM驱动需要开发人员直接操作DOM来更新页面内容,而数据驱动则通过数据和视图之间的绑定关系,自动处理UI的更新和渲染。

2024-05-12 09:38:01 304

原创 axios的post请求,数据为什么要用qs处理?什么时候不用?

在axios中,当使用POST请求发送数据时,有时需要用到qs库来处理数据。这主要是因为qs库能够帮助我们将复杂的JavaScript对象或数组序列化为URL编码的字符串,也就是将对象或数组转换为符合。格式接收数据时,建议使用qs库来处理数据。在其他情况下,可以直接发送数据或根据需要进行适当的处理。总的来说,当需要发送复杂对象的POST请求,并且后端服务或API要求使用。那么,什么时候不需要使用qs处理数据呢?为什么需要使用qs处理数据呢?

2024-05-12 09:37:00 247

原创 axios的安装和引入

如果你想在Vue的全局范围内使用Axios,你可以把它挂载到Vue的原型上。Axios是一个基于Promise的HTTP库,可以在浏览器和Node.js中使用。以上就是Axios的安装、引入和使用的基本步骤。如果你需要更详细的信息或遇到任何问题,都可以查阅Axios的官方文档或相关教程。这样,你就可以在Vue组件的methods、computed或created等选项中通过。来访问Axios了。

2024-05-12 09:34:07 793

原创 Vue的生命周期函数有哪些?

Vue的生命周期函数指的是Vue实例从创建到销毁的过程中,自动执行的特定函数。这些函数允许你在Vue实例的不同阶段添加自定义的代码。Vue 2.x 和 Vue 3.x 的生命周期函数略有不同,但基本的概念是相似的。

2024-05-12 09:30:07 467

原创 关于TS的的注意事项和一些基本问题

TypeScript(TS)是JavaScript的一个超集,它添加了静态类型、接口和类等功能,使得代码更加健壮和易于维护。

2024-05-09 08:13:05 365

原创 关于react的注意事项和问题

在使用React时,有一些重要的注意事项和问题需要考虑。

2024-05-09 08:10:00 455

原创 什么是async和await?

async和await是 JavaScript(特别是 ES2017 及更高版本)中用于处理异步操作的关键字。它们使得异步代码看起来、写起来更像同步代码,从而提高了代码的可读性和可维护性。

2024-05-06 14:01:09 264

原创 mvvm 和mvc模式的区别

综上所述,MVVM和MVC模式在数据绑定方式、应用领域、组件解耦与重用性以及测试性等方面存在明显的区别。选择哪种模式取决于具体的应用程序要求、开发团队的偏好以及技术栈等因素。

2024-04-26 17:05:32 677

原创 <form>元素的主要作用

1.数据收集:用户可以在表单中输入各种类型的数据,例如文本、数字、日期等。这些数据可以通过表单的提。2.与服务器交互:通过表单的提交操作,表单中的数据将被发送到服务器。3.用户交豆:表单可以包含各种类型的交互控件,例如文本框、下拉菜单、复选框、单选按钮等,用户可以使。4.验证和安全性:表单可以包含验证机制,例如必填字段、数据格式验证等,以确保用户输入的数据符合要。此外,通过使用安全传输协议(如HTTPS),可以确保在提交表单时数据的安全传输。需要执行相应的操作,例如保存数据到数据库、生成动态页面等。

2024-04-23 08:19:31 194

原创 JS中浅拷贝和深拷贝的区别,浅拷贝的危害

为了避免这些问题,当需要复制一个对象时,如果对象中包含对象或数组属性,或者包含可能产生副作用的函数,那么应该使用深拷贝而不是浅拷贝。如果对象的属性值仍然是一个对象或数组,那么复制的只是这个对象或数组的引用,而不是对象或数组本身。也就是说,如果修改了原对象中的某个对象或数组属性,那么复制后的对象中的对应属性也会发生变化,因为它们实际上引用的是同一个对象或数组。也就是说,如果对象的属性值是一个对象或数组,那么深拷贝会复制这个对象或数组本身,而不是它的引用。因此,修改原对象中的任何属性都不会影响到复制后的对象。

2024-04-23 00:30:00 263

原创 数组相关方法

请注意,不同的编程语言可能提供了不同的数组方法和功能,因此具体的方法名称和用法可能会有所不同。上述方法主要基于JavaScript的描述,因为JavaScript在Web开发中广泛使用,并且具有丰富的数组操作方法。在使用特定编程语言时,请查阅该语言的文档以获取准确的数组方法列表和用法说明。数组在编程中是一种非常基础且重要的数据结构,它提供了许多方法来操作和处理数据。

2024-04-22 14:18:15 301

原创 ts中函数形状有几种定义方式

来定义函数类型更为常见,因为类型别名更简洁,且更容易阅读和理解。接口通常用于描述对象的形状,特别是当对象包含多个属性或方法时。在TypeScript(TS)中,函数形状(即函数的类型)可以通过多种方式定义。在选择如何定义函数形状时,应考虑代码的清晰度和可读性,以及代码库中的一致性。请注意,虽然接口可以用来描述函数的形状,但在实践中,使用类型别名(

2024-04-22 07:52:13 216

原创 TS中const和readonly的区别

在TypeScript中都是用来实现不可变性的,但它们的用途和上下文有所不同。都是用于确保变量或属性不被重新赋值的工具,但它们的使用场景和语义有所不同。在TypeScript(TS)中,主要用于类属性和接口属性。

2024-04-22 07:50:51 386 1

原创 TS中 type和interface的区别

在 TypeScript 中都是强大的类型定义工具,它们各自具有不同的优点和适用场景。在选择使用哪一个时,应考虑你的具体需求、代码的可读性以及与其他 TypeScript 功能的兼容性。都是用于定义类型的方式,但它们之间存在一些关键的区别。在TypeScript(TS)中,

2024-04-22 07:48:40 886

原创 vue怎么实现父子组件传值

在父组件中,你可以通过在子组件标签上添加自定义属性(即props)来传递数据给子组件。然后在子组件中,你可以通过。子组件可以通过触发事件($emit)来向父组件传递数据。父组件可以通过监听这个事件来获取子组件传递的数据。在Vue中,父子组件之间的传值主要通过props和事件($emit)来实现。在这个例子中,子组件有一个按钮,当点击这个按钮时,会触发。方法就会被调用,并接收到子组件传递的数据。这个prop传递给了子组件。方法来处理这个事件。监听了这个事件,并定义了一个。在这个例子中,父组件将。

2024-04-20 03:30:00 312

原创 Git项目如何配置,如何上传至GitHub。其详细步骤

完成以上步骤后,你的项目代码就已经成功上传至GitHub的远程仓库中了。之后,你可以通过Git进行版本控制,与其他协作者共同管理和维护项目代码。二、上传至GitHub。一、Git项目的配置。

2024-04-20 01:00:00 546

原创 什么是嵌套路由?如何定义嵌套路由

这时,就可以在下半部分使用嵌套路由,根据导航链接的路径渲染不同的子组件。嵌套路由是路由的一个特性,它允许在一个路由组件内部定义其他的路由组件。在Web前端中,嵌套路由的实现通常基于项目中的页面结构,特别是当页面由多层嵌套的组件组合而成时。嵌套路由的主要目的是在路由内部嵌套子路由,以便根据导航路径展示不同的组件内容。这些子组件是嵌套在父路由组件中的,因此形成了嵌套路由的结构。子路由是一个路由数组,其中每个路由对象都可以继续定义自己的子路由,从而实现多层嵌套的路由结构。在定义路由时,可以使用。

2024-04-20 01:00:00 428

原创 vue切换页面白屏问题怎么解决

Vue 切换页面时出现白屏问题,可能由多种原因引起。

2024-04-20 00:45:00 807

原创 什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择

它们基于其他响应式数据的衍生值,会自动缓存并根据依赖的数据进行更新。计算属性通常用于处理对数据的变换、过滤、组合等操作,以便在模板中更清晰地呈现逻辑。总的来说,Vue的计算属性是一个强大的特性,可以帮助开发者更有效地管理视图逻辑和数据变换。在实际开发中,应根据具体需求选择使用计算属性还是方法。

2024-04-20 00:15:00 333

原创 axios拦截器的使用?

否则,我们返回一个被拒绝的 Promise,并在控制台中打印错误信息。如果服务器返回了错误的状态码(如 401 或 403),我们还执行了一些额外的操作,如跳转到登录页面或提示用户。Axios 拦截器是一种强大的功能,允许你在请求被发送到服务器之前,或者服务器响应被送到应用之前,对其进行“拦截”和修改。这在你需要统一处理请求和响应,或者在请求发送前添加一些公共信息(如认证令牌)时非常有用。你可以在这里对响应数据进行一些处理,或者在响应错误时执行一些操作。请求拦截器会在请求被发送到服务器之前被调用。

2024-04-19 05:30:00 485

原创 深入理解Vue生命周期钩子及其应用

钩子在数据更新时调用,发生在虚拟DOM打补丁之前。因为Vue不会在这里停止追踪变化,所以这个钩子中适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。调用后,Vue实例指示的所有东西都会解绑,所有的事件监听器都会被移除,所有的子实例也会被销毁。通过深入理解Vue的生命周期钩子,我们可以更好地控制和管理Vue组件的行为,从而实现更高效、更稳定的前端应用。

2024-04-19 04:45:00 292 1

原创 vue----axios的七大特性

Vue和Axios都是前端开发中的常用工具,但它们各自的功能和特性有所不同。Vue是一个构建用户界面的渐进式框架,而Axios则是一个基于Promise的HTTP库,用于浏览器和node.js中发送请求。总的来说,Vue和Axios各自具有独特的特性和优势,它们可以协同工作,共同构建出高效、稳定且易于维护的前端应用。

2024-04-19 03:30:00 195

原创 vuex和pinia区别

综上所述,Vuex和Pinia在架构设计、体积、TypeScript支持、响应式系统、代码风格、生态系统以及Vue版本要求等方面都存在明显的差异。选择使用哪一个库取决于项目的具体需求、规模以及开发团队的偏好。Vuex和Pinia都是Vue.js的状态管理库,它们各自具有一些独特的特点和优势。

2024-04-19 02:00:00 194

原创 TypeScript中的“as”语法是什么?

在TypeScript中,"as" 关键字是一种类型断言的方式。类型断言是一种告诉TypeScript编译器“相信我,我知道我在做什么”的方式。当你比TypeScript编译器更了解某个值的类型时,你就可以使用类型断言。注意,类型断言并不会进行实际的类型检查,它只是一种告诉TypeScript编译器的方式。因此,应该谨慎使用类型断言,确保你确实知道你在做什么。然而,这种语法在JSX中可能会与标签语法混淆,因此推荐使用 "as" 语法。另外,还有一种旧的类型断言语法,使用尖括号。

2024-04-19 01:45:00 231

原创 什么是cookie?cookie的优缺点

通常由名称、值、域名、路径、过期时间等字段组成,用于辨别用户身份、跟踪用户活动、保存用户设置等。具体来说,当用户访问一个网站时,服务器会将Cookie发送给用户的浏览器,浏览器会将Cookie保存在用户的计算机上。这样,当用户再次访问该网站时,浏览器会自动将Cookie发送给服务器,服务器可以根据Cookie中的信息来识别用户。因此,在使用Cookie时,需要权衡其优缺点,并根据具体的应用场景和需求来决定是否使用以及如何使用。同时,也需要遵守相关的隐私和安全规定,保护用户的个人信息和数据安全。

2024-04-19 01:00:00 217

空空如也

空空如也

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

TA关注的人

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