自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Vue Router的介绍与引入

说大白话点就是它帮助你根据不同的 url 来展示不同的页面(组件),不用自己写 if / else路由配置影响整个项目,所以建议单独用config目录、单独的配置文件去集中定义和管理。Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。在这里是记录我引入Vue Router的全过程,引入方面也最好先看官方文档。展示由 Vue.js 的过渡系统提供的过渡效果。模块化、基于组件的路由配置。路由参数、查询、通配符。

2024-05-19 23:03:02 42

原创 React中JSX语法入门

通过使用大括号{},可以在JSX中使用任何有效的JavaScript表达式,包括变量、函数调用、算术运算和条件语句等。JSX将HTML标签和JavaScript代码结合在一起,可以在其中使用JavaScript表达式,并且可以通过使用大括号{}来嵌入JavaScript代码。通过使用JSX,我们可以在JavaScript代码中嵌入HTML标记,从而更容易地构建可复用的UI组件。在React中的JSX中,也可以使用任何有效的JavaScript表达式,包括变量、函数调用、算术运算、条件语句等。

2024-05-19 23:01:03 473

原创 高阶组件和Hooks

而使用Hooks,我们可以在函数组件中轻松地管理状态和实现复杂的组件逻辑。性能优化:避免不必要的渲染,使用React.memo进行组件的浅层比较,合理使用shouldComponentUpdate或useMemo来提高性能。通过理解和灵活运用高阶组件和Hooks,以及其他优秀的编码实践,我们可以开发出更加高效、可维护和灵活的React应用程序。要使用高阶组件,您可以将它应用于组件,并将返回的新组件渲染到您的应用程序中。组件化和模块化:将功能拆分成小而独立的组件,使得代码更易于理解、测试和维护。

2024-05-19 22:57:12 612

原创 React中的页面跳转方式详解

React Router 是 React 官方推荐的路由库,它提供了一些组件,用于管理应用程序的不同页面之间的导航。使用 React Router 可以通过编写简单的代码来实现页面跳转。可以实现在 React 中的页面跳转,但它不是推荐的做法,因为它会刷新整个页面,而不是单独更新组件。组件提供了一种不刷新整个页面的跳转方式。元素的接口,但它不会导致整个页面的刷新。React Router 中的。使用 React Router。组件包裹应用程序,并使用。组件提供了一个类似于。

2024-05-19 22:53:09 157

原创 react使用组件

组件是常规的 JavaScript 函数,所以你可以将多个组件保存在同一份文件中。——我们可以认为 Gallery 是一个 父组件,将每个 Profile 渲染为一个“孩子”。这是 React 的神奇之处:你可以只定义组件一次,然后按需多处和多次使用。<Profile /> 以大写 P 开头,所以 React 知道我们想要使用名为 Profile 的组件。<section> 是小写的,所以 React 知道我们指的是 HTML 标签。组件,你可以在其他组件中使用它。例如,你可以导出一个内部使用了多个。

2024-05-19 22:49:31 61

原创 使用 JSX 书写标签语言

每个 React 组件都是一个 JavaScript 函数,它会返回一些标签,React 会将这些标签渲染到浏览器上。网页是构建在 HTML、CSS 和 JavaScript 之上的。多年以来,web 开发者都是将网页内容存放在 HTML 中,样式放在 CSS 中,而逻辑则放在 JavaScript 中 —— 通常是在不同的文件中!SX 是 JavaScript 语法扩展,可以让你在 JavaScript 文件中书写类似 HTML 的标签。反之,彼此无关的细节是互相隔离的,例如按钮的标签和侧边栏的标签。

2024-05-19 22:47:10 130

原创 传递给组件

每个父组件都可以通过为其子组件提供道具来将一些信息传递给子组件。Props 可能会让您想起 HTML 属性,但您可以通过它们传递任何 JavaScript 值,包括对象、数组和函数。但是你可以将任何道具传递给自己的组件,比如 ,来自定义它们。例如,、、、、和是您可以传递给 :classNamesrcaltwidthheight<img>您可以通过列出它们的名称来阅读这些道具,这些道具在内部和后面用逗号分隔。在此代码中,组件不会将任何 props 传递给其子组件:ProfileAvatar。

2024-05-19 22:44:34 234

原创 React中JSX语法入门

通过使用大括号{},可以在JSX中使用任何有效的JavaScript表达式,包括变量、函数调用、算术运算和条件语句等。JSX将HTML标签和JavaScript代码结合在一起,可以在其中使用JavaScript表达式,并且可以通过使用大括号{}来嵌入JavaScript代码。通过使用JSX,我们可以在JavaScript代码中嵌入HTML标记,从而更容易地构建可复用的UI组件。在React中的JSX中,也可以使用任何有效的JavaScript表达式,包括变量、函数调用、算术运算、条件语句等。

2024-05-12 10:59:33 771

原创 生命周期钩子

onMounted() 也可以在一个外部函数中调用,只要调用栈是同步的,且最终起源自 setup() 就可以。每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。还有其他一些钩子,会在实例生命周期的不同阶段被调用,最常用的是 onMounted、onUpdated 和 onUnmounted。下面是实例生命周期的图表。

2024-05-12 10:54:04 219

原创 插槽 Slots

在之前的章节中,我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props,但组件要如何接收模板内容呢?在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。地方渲染各异的内容,但同时还保证都具有相同的样式。(slot outlet),标示了父元素提供的。(slot content) 将在哪里被渲染。组件更加灵活和具有可复用性。(以及相应的样式),而其内部的内容由。

2024-05-12 10:51:46 366

原创 组件 v-model

defineModel() 返回的值是一个 ref。一个名为 update:modelValue 的事件,当本地 ref 的值发生变更时触发。一个名为 modelValue 的 prop,本地 ref 的值与其同步;defineModel 是一个便利宏。它的 .value 和父组件的 v-model 的值同步;当它被子组件变更了,会触发父组件绑定的值一起更新。3.4 开始,推荐的实现方式是使用。声明了一个 prop,你可以通过给。可以在组件上使用以实现。

2024-05-12 10:49:19 205

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

它的值是基于其他响应式数据的衍生值,这些值会自动缓存并根据依赖的数据进行更新。当依赖的数据发生变化时,计算属性会重新计算。总之,Vue的计算属性是一个强大的特性,它可以帮助我们更有效地管理视图逻辑和数据变换。性能优化:计算属性内部有缓存机制,只有当依赖的数据发生变化时,才会重新计算。代码复用:如果需要在多个地方使用相同的逻辑,计算属性可以确保逻辑的一致性,并减少代码的重复。简化模板:通过将复杂的逻辑放在计算属性中,模板可以更加简洁和清晰。在计算属性中,可以编写任何逻辑,只要最终返回一个结果即可。

2024-05-11 08:38:41 358

原创 什么是渐进式框架

在 JavaScript 中,我们创建了一个新的 Vue 实例,并通过 el 选项将其挂载到 id 为 app 的元素上。这种方式的好处在于它使得项目的起点低、上手快,同时随着项目的增长,可以逐步引入更复杂的特性,而不需要一开始就全面使用框架的所有功能。然而,Vue.js 的功能远不止于此。你可以根据需要逐步引入更多的 Vue 特性,如组件、指令、过滤器、生命周期钩子、路由、状态管理等。同时,Vue.js 提供了丰富的官方库和社区资源,允许你在需要时逐步扩展功能,如状态管理、路由、构建工具等。

2024-05-11 08:36:51 372

原创 typescript 推断类型

简短地说,传递给一个函数的参数个数必须与函数期望的参数个数一致。与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。如果带默认值的参数出现在必须参数前面,用户必须明确的传入 undefined值来获得默认值。在TypeScript里,我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。默认参数的默认值消失了,只保留了它是一个可选参数的信息。在所有必须参数后面的带默认初始化的参数都是可选的,与可选参数一样,在调用函数的时候可以省略。可选参数必须跟在必须参数后面。

2024-05-11 08:30:44 345

原创 Vue生成Canvas二维码

【代码】Vue生成Canvas二维码。

2024-05-05 21:40:53 286

原创 vue Props

对于以对象形式声明的每个属性,key 是 prop 的名称,而值则是该 prop 预期类型的构造函数。对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。如果一个 prop 的名字很长,应使用 camelCase 形式,因为它们是合法的 JavaScript 标识符,可以直接在模板的表达式中使用,也可以避免在作为属性 key 名时必须加上引号。选项的值是相同的,两种声明方式背后其实使用的都是 prop 选项。

2024-05-05 21:39:11 760

原创 JS tostring()和join()方法

在JavaScript中,toString()和join()都是用于处理数组的方法。方法将其转换为字符串形式。如果数组中的元素是对象或其他复杂类型,则会调用其默认的。toString()方法将数组转换为一个由每个元素字符串形式拼接而成的字符串。该方法不会改变原始数组,而是返回一个新的字符串。方法对于数组中的每个元素都会调用其。数组元素的默认分隔符是逗号。形式,而不是深层次的。

2024-05-05 21:34:58 341

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

只有当依赖的数据发生变化时,计算属性才会重新计算。如果依赖没有变化,那么每次访问计算属性都会返回之前缓存的结果,避免了不必要的重复计算。例如,当需要基于一组数据计算总和、平均值或其他聚合值时,计算属性是一个很好的选择。声明式与命令式:在计算属性中,我们可以将复杂的逻辑抽离出来,作为模板中数据的衍生属性,使得代码更加清晰和易于维护。如果需要基于依赖的数据进行计算,并且这个计算过程比较耗费性能,那么应该使用计算属性。如果只是需要执行一个具体的操作或逻辑,并且这个操作或逻辑没有固定的依赖关系,那么应该使用方法。

2024-05-05 21:31:15 299

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

在 Vue 3 中,覆盖组件样式的方法与 Vue 2 相似,但由于 Vue 3 更多地依赖于 CSS 的模块化,一些最佳实践可能会有所不同。以下是一些常用的方法来覆盖 Vue 3 中组件的样式:1. 内联样式你可以直接在组件的模板中使用 style 属性来覆盖样式。但这种方法不推荐用于大型项目,因为它会降低样式的可维护性。

2024-05-05 21:28:26 308

原创 TypeScript 类

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

2024-05-05 21:25:14 363

原创 JavaScript js写九九乘法表(两种方法)

我们可以用双重for循环,外层初始值设为i,i从1开始,到9结束,自增1。我们可以用双重for循环,外层初始值设为i,i从1开始,到9结束,自减1。我们发下第二个数都是从1开始,依次递增1,永远不大于前面的数。我们发下第二个数都是从1开始,依次递增1,永远不大于前面的数。内层从初始值设为j,j从1开始,小于等于外层的i,自增1。内层从初始值设为j,j从1开始,小于等于外层的i,自增1。前面数字每自增一次,后面数字自增一轮。前面数字每自减一次,后面数字自增一轮。第一个数每行都是自增1。

2024-05-05 21:13:51 245

原创 TypeScript基础类型

基础类型介绍为了让程序有价值,我们需要能够处理最简单的数据单元:数字,字符串,结构体,布尔值等。TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的true/false值,在JavaScript和TypeScript里叫做boolean(其它语言中也一样)。

2024-04-28 08:20:23 264

原创 typescript 混合类型

Button和TextBox类是SelectableControl的子类(因为它们都继承自Control并有select方法),但Image和Location类并不是这样的。因为只有 Control的子类才能够拥有一个声明于Control的私有成员state,这对私有成员的兼容性是必需的。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时,这个接口类型只能被这个类或其子类所实现(implement)。当你有一个庞大的继承结构时这很有用,但要指出的是你的代码只在子类拥有特定属性时起作用。

2024-04-28 08:17:46 380

原创 理解JavaScript事件循环机制

JavaScript作为前端开发的核心语言之一,其事件循环机制是实现异步编程的关键。本文将深入探讨JavaScript事件循环机制,帮助您更好地理解它是如何工作的,以及如何在前端开发中充分利用这一机制。1. 什么是事件循环?JavaScript是单线程的,这意味着它一次只能执行一段代码。然而,前端开发中需要处理各种异步任务,例如处理用户输入、发起网络请求、执行定时器等。为了应对这些异步任务,JavaScript引入了事件循环机制。事件循环是一种机制,用于管理和调度异步任务的执行。

2024-04-28 08:15:01 415

原创 Map循环注意事项

给每个生成的元素添加唯一的key属性: 在使用map()方法生成组件列表时,为了帮助React准确地识别和更新每个组件,需要为每个生成的元素(组件)添加一个唯一的key属性。避免在组件内部进行复杂的逻辑或副作用操作: 尽量避免在map()方法的回调函数中编写过多的复杂逻辑、网络请求或其他副作用操作。注意map()方法的返回类型: map()方法对原始数组进行遍历并生成一个新的数组。这可能会导致不可预测的结果。注意循环中的条件判断: 在map()方法的回调函数中,避免进行复杂的条件判断或过度依赖外部变量。

2024-04-28 08:13:00 201

原创 身份证号码自动判定出生年月及性别年龄

【代码】身份证号码自动判定出生年月及性别年龄。

2024-04-28 08:12:02 114

原创 jquery获取子元素的一些方法

想要真正理解,还是得靠代码.光看不练那都是纸上谈兵。注意:find和children的区别,代码已给出。3.通过父元素的children进行查找。2.通过父元素进行find查找。1.通过id,class等。获取子元素的一些方法。

2024-04-28 08:10:34 157

原创 如何在JS中实现修改URL参数而不刷新页面

在上面的代码中,首先使用URL构造函数获取当前URL,然后创建一个URLSearchParams对象来处理URL参数。然后,通过set方法来修改指定参数的值。最后,将修改后的参数设置回URL中,并使用history.replaceState()方法将新的URL应用到浏览器历史记录中,从而实现修改URL参数而不刷新页面。注意:上述代码仅适用于现代浏览器。如果需要兼容较旧的浏览器,可以考虑使用一些第三方库,如query-string或URLSearchParams-polyfill来处理URL参数。

2024-04-28 08:09:04 121

原创 变量和函数提升(js的问题)

如果是var赋值声明的函数,变量提前,函数体停留在本地。• 函数声明提前:整个函数体提前。• 变量声明提前:值停留在本地。变量声明提前,函数声明提前。

2024-04-22 06:38:39 147

原创 css伪类伪元素都有哪些区别是什么

伪元素(Pseudo-element):伪元素则是选择元素的某个部分,例如元素的第一个字母、内容之前或之后插入的内容等,用 :: 语法表示,例如 ::first-letter、::before 和 ::after。伪元素:旧版本的 IE 对伪元素的支持有限,通常需要使用单冒号的语法来兼容,例如 :before、:after。伪类:伪类通常用于根据元素的状态或位置选择元素,例如鼠标悬停时改变样式、选中特定的子元素等。伪元素:伪元素使用双冒号 :: 表示,例如 ::before、::after。

2024-04-22 06:35:23 114

原创 JavaScript 继承的方式和优缺点

1.这种方式的高效率体现它只调用了一次 Parent 构造函数,并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。3.因此,还能够正常使用 instanceof 和 isPrototypeOf。1.方法都在构造函数中定义,每次创建实例都会创建一遍方法。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。2.可以在 Child 中向 Parent 传参。1.避免了引用类型的属性被所有实例共享。2.与此同时,原型链还能保持不变;二、借用构造函数(经典继承。

2024-04-22 06:33:46 333

原创 ES6 中类的定义

【代码】ES6 中类的定义。

2024-04-22 06:28:51 100

原创 Vue Router的介绍与引入

说大白话点就是它帮助你根据不同的 url 来展示不同的页面(组件),不用自己写 if / else路由配置影响整个项目,所以建议单独用config目录、单独的配置文件去集中定义和管理。Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。在这里是记录我引入Vue Router的全过程,引入方面也最好先看官方文档。展示由 Vue.js 的过渡系统提供的过渡效果。模块化、基于组件的路由配置。路由参数、查询、通配符。

2024-04-22 06:24:57 191

原创 Vue3中props的原理与使用

前言props指父组件往子组件中传入参数,我们来介绍下如何理解vue3的props的原理介绍了解其原理之前我们要清楚vue的虚拟节点是什么,有什么表现。虚拟节点主要分成两种,分别是组件类型及元素类型,当然还有文本类型等特殊的虚拟节点。虚拟节点都会接收三个基本参数,分别是type, props, childrenprops是父组件往子组件传入的参数children是父组件往子组件传入的插槽对于元素类型而言:type是当前节点的元素类型,如div。

2024-04-22 06:21:58 798

原创 vue中404解决方法

在服务器上,检查服务器的配置文件,例如nginx配置文件是否正确设置了路由重定向。确保服务器能够正确地处理所请求资源。检查是否正确安装依赖:如果使用了第三方库或组件,确保已经正确安装了相应的依赖。)是否正确配置了所请求资源的路径。确保路径大小写和文件名正确匹配。通常是因为找不到所请求的资源。确保路由配置正确:检查路由配置文件(通常是。请根据你的具体情况选择相应的解决方法。模式来处理路由,即在URL中添加。模式:默认情况下,Vue使用。在Vue路由配置中添加。检查服务器配置:如果你的。

2024-04-22 06:16:27 223

原创 Vue 中如何模块化使用 Vuex

方法触发 mutation 来修改状态。在 main.js 中引入。这样就可以在组件中通过。

2024-04-22 06:13:39 497

原创 实现一个JavaScript动态日期功能

在本文中,我们将编写一个JavaScript函数,该函数将获取当前的日期并将其格式化为特定的格式。这个JavaScript代码首先等待页面加载完成,然后获取id为"date"的元素,并调用getCurrentDate()函数获取当前日期。最后,我们将当前日期显示在页面上。摘要:在本文中,我们将通过编写一个简单的JavaScript函数来实现一个动态日期的功能,这个函数可以获取当前的日期并将其格式化为特定的格式。要使用这个函数,我们只需要在HTML页面中调用它,并将返回的日期显示在页面上。

2024-04-22 00:44:56 251

原创 CSS知识点

书⾯解释:BFC(Block Formatting Context)这⼏个英⽂拆解 Box: CSS布局的基本单位,Box 是 CSS 布局的对象和基本单位, 直观点来说,就是⼀个⻚⾯是由很多个 Box 组成的,实际就是上个问题说的盒模型 Formatting context:块级上下⽂格式化,它是⻚⾯中的⼀块渲染区域,并且有⼀套渲染规则,它决定了其⼦元素将如何定位,以及和其他元素的关系和相互作⽤ 简⽽⾔之,它是⼀块独⽴的区域,让处于BFC内部的元素与外部的元素互相隔离。使⽤dom控制样式时的差别。

2024-04-22 00:39:31 318

原创 Vue 中的 computed 和 watch 的区别

computed适用于那些需要根据其他属性计算出一个新值的场景,而watch适用于那些需要在属性变化时执行异步或开销较大的操作的场景。computed 是一个计算属性,它根据已有的数据计算出一个新的值,并将这个值缓存起来,只有当依赖的数据发生变化时,才会重新计算。自动缓存:computed 的计算结果会被缓存起来,只有当依赖的数据发生变化时,才会重新计算,减少了重复计算的开销。响应式:computed 的计算结果是响应式的,当依赖的数据发生变化时,会自动更新计算结果,并触发相关的视图更新。

2024-04-22 00:36:51 292

原创 Vue-router的动态路由:获取传递的值

Vue.js是一款流行的JavaScript框架,用于构建单页面应用程序。它提供了许多有用的功能,其中之一是Vue-router,它允许您轻松地管理应用程序的路由。Vue-router支持动态路由,这意味着您可以在路由中使用变量,并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由,以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由,这在使用Vue-router时是非常常见的。

2024-04-22 00:32:07 459

空空如也

空空如也

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

TA关注的人

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