- 博客(230)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue.js功能实现博客
在实际开发中，你可能会遇到更复杂的场景和需求，但基本的 Vue 知识和技巧（如数据绑定、事件处理、组件通信等）将是你构建 Vue 应用的基石。在开始之前，请确保你的开发环境中已经安装了 Node.js 和 npm。今天我们将通过一个简单的示例来展示如何使用 Vue.js 创建一个简单的计数器功能，并在此过程中解释每个步骤。通过上面的步骤，我们创建了一个简单的 Vue 计数器应用。命令来启动你的 Vue 应用，并在浏览器中查看计数器功能是否按预期工作。现在你应该可以在本地浏览器中看到你的 Vue 应用了。
2024-05-22 21:15:32
86
原创 vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
在Vue 3中，我们可以使用JavaScript的Date对象来获取当前时间，并基于当前时间计算未来一周的日期。然后，这些日期可以在Vue模板中循环显示。下面，我们将逐步完成这个任务，并附上相应的代码和注释。
2024-05-22 21:12:21
100
原创 react 使用 Reducer 和 Context 进行纵向扩展
Reducer 允许您合并组件的状态更新逻辑。上下文允许您将信息深入传递到其他组件。您可以将 reducer 和 context 组合在一起，以管理复杂屏幕的状态。中的此示例中，状态由 reducer 管理。在像这样的小例子中，这很有效，但是如果你中间有几十个或几百个组件，那么传递所有状态和函数可能会非常令人沮丧！reducer 有助于使事件处理程序保持简短。但是，随着应用的增长，您可能会遇到另一个困难。若要让其他组件读取任务列表或更改它，必须显。当前状态和更改它的事件处理程序作为道具。
2024-05-21 21:32:49
229
原创 react通过上下文深入传递数据
但是，如果必须将道具传递到中间的许多组件，或者应用中的许多组件需要相同的信息，则传递道具可能会变得冗长且不方便。但是，当您需要将一些道具深入树中传递时，或者如果许多组件需要相同的道具时，传递道具可能会变得冗长和不方便。最接近的共同祖先可能与需要数据的组件相距甚远，将。如果有一种方法可以在不传递道具的情况下将数据“传送”到树中需要它的组件，那不是很好吗？允许父组件将一些信息提供给其下树中的任何组件（无论其深度如何），而无需通过 prop 显式传递它。是将数据通过 UI 树显式传递到使用它的组件的好方法。
2024-05-21 21:14:17
101
原创 react不同元件处于同一位置复位状态
单击该复选框时，计数器状态将重置。虽然你渲染了 ，但从 a 变为 a 的第一个子项。当子项从 DOM 中移除时，它下面的整棵树（包括它的状态）也被破坏了。最初，它的第一个子项包含一个 .但是当你换入 时，React 会从 UI 树中删除 并销毁其状态。在这里，您可以在同一。
2024-05-20 08:19:07
187
原创 React同一位置的相同组件保留状态
勾选或清除复选框时，计数器状态不会重置。它是同一位置的相同组件，所以从 React 的角度来看，它是相同的计数器。同一位置的相同组件保留状态。
2024-05-20 08:17:20
154
原创 React保留和重置状态
只要你在树中的同一位置渲染相同的组件，React 就会保持状态。当您给出组件状态时，您可能会认为该状态“存在于”组件内部。React 通过该组件在渲染树中的位置将它所持有的每个状态片段与正确的组件相关联。状态在组件之间是隔离的。React 根据它们在 UI 树中的位置来跟踪哪个状态属于哪个组件。您可以控制何时保留状态以及何时在重新渲染之间重置状态。在 React 中，屏幕上的每个组件都具有完全隔离的状态。例如，如果并排渲染两个组件，则每个组件都将获得自己的独立和状态。状态绑定到渲染树中的位置。
2024-05-20 08:14:36
876
原创 react保留和重置状态
只要你在树中的同一位置渲染相同的组件，React 就会保持状态。当您给出组件状态时，您可能会认为该状态“存在于”组件内部。React 通过该组件在渲染树中的位置将它所持有的每个状态片段与正确的组件相关联。状态在组件之间是隔离的。在 React 中，屏幕上的每个组件都具有完全隔离的状态。例如，如果并排渲染两个组件，则每个组件都将获得自己的独立和状态。这是因为当 React 删除一个组件时，它会破坏它的状态。如果它被删除，或者不同的组件在同一位置被渲染，React 就会丢弃它的状态。状态绑定到渲染树中的位置。
2024-05-16 20:51:59
214
原创 REACT 在组件之间共享状态
在 React 应用程序中，许多组件将有自己的状态。例如，即使是客户端路由库，通常也是通过将当前路由存储在 React 状态，并通过 props 传递来实现的！由于它位于两个面板的上方，并且可以控制它们的道具，因此它将成为面板当前处于活动状态的“真相来源”。要做到这一点，请从他们俩身上删除状态，将其移动到他们最近的共同父级，然后通过道具将其传递给他们。通常，当您仍在弄清楚状态的每个部分“居住”的位置时，您会向下或向上移动状态。当 是 时，第一个面板处于活动状态，当它处于活动状态时，它是第二个面板。
2024-05-13 21:49:37
698
原创 REACT选择状态结构
当你编写一个包含某种状态的组件时，你必须选择使用多少个状态变量，以及它们的数据应该是什么形状。例如，如果您忘记打电话和在一起，您最终可能会陷入两者同时存在的情况。虽然您也可以更新，但更简单的解决方法是删除重复项。在此示例中，您不是对象（创建与内部对象的重复项），而是保持 in 状态，当您调用 or 时，会触发重新渲染，然后根据新数据计算下一个。这是因为会触发重新渲染，并会找到标题更新的项目。现在，假设您要添加一个按钮来删除您已经访问过的地方。目前，它将所选项目存储为状态变量中的对象。为什么这是一个问题？
2024-05-13 21:47:35
890
原创 React 中重新实现强制实施表单
将所有交互表示为状态更改，可以在以后引入新的视觉状态，而不会破坏现有状态。它还允许您更改每个状态中应显示的内容，而无需更改交互本身的逻辑。就像设计人员一样，在添加逻辑之前，您需要为不同的状态“模拟”或创建“模拟”。例如，这里只是表单的视觉部分的模拟。您希望避免状态内容中的重复，因此您只跟踪必要的内容。然后，需要一个状态变量，表示要显示的视觉状态之一。您知道它们是必不可少的，因为您无法在不破坏功能的情况下删除它们中的任何一个。你的第一个想法可能不是最好的，但没关系——重构状态是这个过程的一部分！
2024-05-12 13:13:27
1309
原创 react 对输入做出反应与状态
对于孤立的示例来说，操作 UI 已经足够好了，但在更复杂的系统中，管理起来会成倍增加。添加新的 UI 元素或新的交互需要仔细检查所有现有代码，以确保没有引入 bug（例如，忘记显示或隐藏某些内容）。这是另一种思考方式：想象一下，在一辆车里骑在某人旁边，然后轮流告诉他们去哪里。您无需直接操作 UI 的各个部分，而是描述组件可能处于的不同状态，并在它们之间切换以响应用户输入。在 React 中，你不会直接操作 UI，这意味着你不会直接启用、禁用、显示或隐藏组件。他们不知道你想去哪里，他们只是听从你的命令。
2024-05-12 13:10:04
444
原创 react 逻辑 AND 运算符 （&&)
React 将其视为 JSX 树中的一个“洞”，就像 或 一样，并且不会在其位置上渲染任何东西。但是，如果左侧是 ，那么整个表达式都会得到该值 （），并且 React 会很乐意渲染而不是什么都没有。例如，一个常见的错误是编写类似 .很容易假设它在 is 时什么都不渲染，但它确实渲染了它本身！在 React 组件中，当你想在条件为 true 时渲染一些 JSX 时，它经常会出现。如果 JavaScript 的左侧（我们的条件）为 ，则。这种风格是最冗长的，但也是最灵活的。要修复它，请将左侧设为布尔值：。
2024-05-12 12:59:34
409
原创 JSX 有条件地包括
这种风格适用于简单的条件，但要适度使用。如果组件因嵌套条件标记过多而变得混乱，请考虑提取子组件来清理。在 React 中，标记是代码的一部分，因此您可以使用变量和函数等工具来整理复杂的表达式。虽然这种重复是无害的，但它可能会使你的代码更难维护。你必须在代码中的两个地方执行此操作！在这种情况下，你可以有条件地包含一点 JSX，使你的代码更加。JSX 树将由组件返回。JavaScript 有一个紧凑的语法来编写条件表达式——条件（三元）运算符 （
2024-05-12 12:57:37
198
原创 REACT 条件渲染
您的组件通常需要根据不同的条件显示不同的内容。在 React 中，你可以使用 JavaScript 语法（如语句、 和运算符）有条件地呈现 JSX。在某些情况下，您根本不想渲染任何内容。例如，假设您根本不想显示包装好的商品。组件必须返回某些内容。如果为 true，则组件将不返回任何内容。否则，它将返回 JSX 进行渲染。如果 prop 是 ，则此代码。有条件地不返回任何内容。有条件地返回 JSX。
2024-05-12 12:54:43
157
原创 传递给组件
每个父组件都可以通过为其子组件提供道具来将一些信息传递给子组件。Props 可能会让您想起 HTML 属性，但您可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。您可以通过列出它们的名称来阅读这些道具，这些道具在内部和后面用逗号分隔。这使您可以在代码中使用它们，就像使用变量一样。现在，您可以配置为使用不同的道具以多种不同的方式进行渲染。可以传递给标签的 prop 是预定义的（ReactDOM 符合。添加一些逻辑，使用 和 props 进行渲染，就完成了。组件，比如 ，来自定义它们。
2024-05-08 08:01:51
240
原创 JSX 中带有大括号的 JavaScript
JSX 允许您在 JavaScript 文件中编写类似 HTML 的标记，将渲染逻辑和内容保持在同一个位置。在这种情况下，您可以在 JSX 中使用大括号来打开 JavaScript 窗口。除了字符串、数字和其他 JavaScript 表达式之外，您甚至可以在 JSX 中传递对象。对象也用大括号表示，例如 .因此，要在 JSX 中传递 JS 对象，必须将该对象换行在另一对大括号中：.请注意 之间的区别，前者指定使图像变圆的 CSS 类名，后者读取名为 的 JavaScript 变量的值。尝试更改 和 的值。
2024-05-08 07:58:07
558
1
原创 使用 JSX 书写标签语言
是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。
2024-05-05 20:45:20
336
1
原创 从同一文件中导出和导入多个组件
但你可以将其在新文件中进行默认导出，或者将。组，而不展示整个图集。包含两个导出：一个是默认导出的。中均导入了这两个组件。首先，用具名导出的方式，将。接着，用具名导入的方式，从。导出，此时，你不能定义。，另一个是具名导出的。
2024-05-05 20:38:37
346
原创 react组件的导入与导出
组件的神奇之处在于它们的可重用性：你可以创建一个由其他组件构成的组件。但当你嵌套了越来越多的组件时，则需要将它们拆分成不同的文件。这样可以使得查找文件更加容易，并且能在更多地方复用这些组件。
2024-05-05 20:28:44
1036
1
原创 react使用组件
现在你已经定义了 组件，你可以在其他组件中使用它。例如，你可以导出一个内部使用了多个 组件的 组件：浏览器所看到的 注意下面两者的区别：然而 包含更多的 HTML：。这是浏览器最后所看到的：嵌套和组织组件 组件是常规的 JavaScript 函数，所以你可以将多个组件保存在同一份文件中。当组件相对较小或彼此紧密相关时，这是一种省事的处理方式。如果这个文件变得臃肿，你也可以随时将 移动到单独的文件中。你可以立即在 关于引入的页面 中学习如何做到这些。因为 组件在 组件中渲染—
2024-05-05 20:25:58
323
原创 第一个组件
一直以来，创建网页时，Web 开发人员会用标签描述内容，然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。如下所示（你可以编辑下面的示例）：使用定义名为Profile的 JavaScript 函数。React 组件是常规的 JavaScript 函数，但组件的名称必须以大写字母开头，否则它们将无法运行！
2024-05-05 20:24:33
1053
原创 解决React报错Encountered two children with the same key
尽管如此，除非你在渲染有成千上万个元素的数组，否则你很有可能不会注意到使用索引和唯一标识符之间有什么区别。方法的函数被调用，其中包含了数组中的每个元素和正在处理的当前元素的索引。然而，这可能会导致React在幕后做更多的工作，而不是像独一无二的。属性的值是出于性能方面的考虑，以确保它只更新在渲染期间变化的列表元素。更好的解决方案是，使用一个能唯一标识数组中每个元素的值。方法返回的两个或两个以上的元素具有相同的。属性提供独一无二的值，或者使用索引参数。在上面的例子中，我们可以使用对象上的。
2024-04-29 12:52:59
403
原创 Each child in a list should have a unique “key“ prop. Check the render method的报错解决
从上面的代码中可以看到我们遍历的时候加了key了，加在了div上面，但是我们注意看在div前面其实还有个空标签，那就意味div其实是二级节点，而key是要加入到一级节点的。
2024-04-29 12:45:49
268
原创 react的参数值和Vue的参数值有什么区别
此外，React还使用state和props来管理组件的状态和接收来自父组件的数据。Vue的参数通常是在组件的props中进行定义，并在父组件中通过属性（attributes）的形式传递给子组件。Vue的模板语法使得这些参数的传递和使用相对直观和易于理解。Vue通过直观的模板语法和props机制实现参数的传递和组件复用，而React则通过JSX、state和props等机制实现更加明确和可控的组件状态和参数管理。React和Vue在参数值的处理上存在一些区别，这主要体现在它们的设计理念和语法上。
2024-04-26 21:10:40
498
2
原创 vue的v-model、v-if、v-for用react语法实现
在React中，没有直接对应于Vue中的v-modelv-if和v-for的指令，但你可以使用React的特性和组件来实现类似的功能。
2024-04-26 21:09:28
608
3
原创 TypeScript 类型兼容性
TypeScript里的类型兼容性是基于结构子类型的。结构类型是一种只使用其成员来描述类型的方式。它正好与名义（nominal）类型形成对比。（译者注：在基于名义类型的类型系统中，数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同，它是基于类型的组成结构，且不要求明确地声明。在使用基于名义类型的语言，比如C#或Java中，这段代码会报错，因为Person类没有明确说明其实现了Named接口。
2024-04-25 21:16:40
810
原创 使用react-vant上传图片遇到的问题
图片上传成功后，点击删除图标清除图片后会出现file undefined的报错。判断file的长度，当file的长度不为0时在执行change事件。使用react-vant Uploader上传图片后出现的问题。先试用upload上传图片。
2024-04-25 21:15:40
317
原创 TypeScript 类型兼容性
TypeScript里的类型兼容性是基于结构子类型的。结构类型是一种只使用其成员来描述类型的方式。它正好与名义（nominal）类型形成对比。（译者注：在基于名义类型的类型系统中，数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同，它是基于类型的组成结构，且不要求明确地声明。在使用基于名义类型的语言，比如C#或Java中，这段代码会报错，因为Person类没有明确说明其实现了Named接口。
2024-04-24 20:18:13
892
原创 TypeScript 枚举
使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。
2024-04-23 13:02:40
758
原创 typescript 泛型约束
你应该会记得之前的一个例子，我们有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性。在例子中，我们想访问arg的length属性，但是编译器并不能证明每种类型都有length属性，所以就报错了。相比于操作any所有类型，我们想要限制函数去处理任意带有.length属性的所有类型。只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。为此，我们需要列出对于T的约束要求。为此，我们定义一个接口来描述约束条件。创建一个包含.length属性的接口，使用这个接口和extends。
2024-04-23 12:53:49
285
原创 TypeScript 泛型类型
，锁定了之后代码里使用的类型。对于描述哪部分类型属于泛型部分来说，理解何时把参数放在调用签名里和何时放在接口上是很有帮助的。一个相似的例子，我们可能想把泛型参数当作整个接口的一个参数。注意，我们的示例做了少许改动。不再描述泛型函数，而是把非泛型函数签名作为泛型类型一部分。这引导我们去写第一个泛型接口了。除了泛型接口，我们还可以创建泛型类。注意，无法创建泛型枚举和泛型命名空间。我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。这样接口里的其它成员也能知道这个参数的类型了。
2024-04-22 20:10:41
337
原创 TypeScript 泛型
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
2024-04-22 20:07:34
327
原创 TypeScript 函数
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。
2024-04-22 07:41:17
706
原创 TypeScript 类
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript，我们允许开发者现在就使用这些特性，并且编译后的JavaScript可以在所有主流浏览器和平台上运行，而不需要等到下个JavaScript版本。
2024-04-21 09:39:29
254
原创 typescript 混合类型
当接口继承了一个类类型时，它会继承类的成员但不包括其实现。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。因为JavaScript其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。，这对私有成员的兼容性是必需的。的所有成员，包括私有成员。
2024-04-21 09:36:13
267
原创 typescript 类类型
与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime接口描述了类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。
2024-04-21 09:35:18
213
空空如也
通过地理定位获取用户当前城市名，并将城市名输出到网页
2024-02-21
点击div显示下拉框，然后下拉框中的点击事件不生效。
2023-11-24
JS中让二级菜单栏一直保持展开状态,页面跳转也不会改变
2023-11-16
如何在一个登录界面设置让浏览器后退按钮变灰？
2023-11-13
echarts用同一份数据制作不同的图表类型
2023-11-06
在修改弹窗中修改了个人信息，怎么将修改后的信息显示在原来的页面中
2023-10-25
jQuery检测手机号是否已经注册
2023-10-13
JS切换页码后复选框选中状态还在
2023-09-22
jsp怎样通过选择下拉列表的
2023-09-21
JS中用sort对两个数组中的数据进行排序
2023-09-19
JS九宫格抽奖功能，一次抽奖结束后，返回到第一个值重新开始？
2023-09-06
js九宫格抽奖怎么实现重新开始
2023-09-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人