当前位置：首页 > news >正文

React 全栈体系（三）

news 文章来源：https://blog.csdn.net/sgsgkxkx/article/details/132478348 2025/2/3 22:38:22

第二章 React面向组件编程

四、组件三大核心属性3: refs与事件处理

1. 效果

需求: 自定义组件, 功能说明如下:
- 点击按钮, 提示第一个输入框中的值
- 当第2个输入框失去焦点时, 提示这个输入框中的值

请添加图片描述

2. 理解

组件内的标签可以定义ref属性来标识自己

3. 编码

3.1 字符串形式的ref

<input ref="input1"/>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_字符串形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = this.refsalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = this.refsalert(input2.value)}render(){return(<div><input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/></div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

3.2 回调形式的ref

<input ref={(c)=>{this.input1 = c}}/>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_回调函数形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = thisalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = thisalert(input2.value)}render(){return(<div><input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_回调ref中回调执行次数的问题</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{state = {isHot:false}showInfo = ()=>{const {input1} = thisalert(input1.value)}changeWeather = ()=>{//获取原来的状态const {isHot} = this.state//更新状态this.setState({isHot:!isHot})}saveInput = (c)=>{this.input1 = c;console.log('@',c);}render(){const {isHot} = this.statereturn(<div><h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}<input ref={this.saveInput} type="text"/><br/><br/><button onClick={this.showInfo}>点我提示输入的数据</button><button onClick={this.changeWeather}>点我切换天气</button></div>)}}//渲染组件到页面ReactDOM.render(<Demo/>,document.getElementById('test'))</script>
</body>
</html>

3.3 createRef创建ref容器

myRef = React.createRef() 
<input ref={this.myRef}/>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4_createRef</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{/* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/myRef = React.createRef()myRef2 = React.createRef()//展示左侧输入框的数据showData = ()=>{alert(this.myRef.current.value);}//展示右侧输入框的数据showData2 = ()=>{alert(this.myRef2.current.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

4. 事件处理

通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件处理</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{/* (1).通过onXxx属性指定事件处理函数(注意大小写)a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref*///创建ref容器myRef = React.createRef()myRef2 = React.createRef()//展示左侧输入框的数据showData = (event) =>{console.log(event.target);alert(this.myRef.current.value);}//展示右侧输入框的数据showData2 = (event) =>{alert(event.target.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

5. 收集表单数据

5.1 效果

需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息

在这里插入图片描述
请添加图片描述

5.2 理解

包含表单的组件分类
- 受控组件
- 非受控组件

5.3 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = thisalert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input ref={c => this.username = c} type="text" name="username"/>密码：<input ref={c => this.password = c} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存用户名到状态中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密码到状态中savePassword = (event)=>{this.setState({password:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveUsername} type="text" name="username"/>密码：<input onChange={this.savePassword} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>对象相关的知识</title></head><body><script type="text/javascript" >let a = 'name'let obj = {} // {name:'tom'}obj[a] = 'tom'console.log(obj);</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>演示函数的柯里化</title></head><body><script type="text/javascript" >/* function sum(a,b,c){return a+b+c} */function sum(a){return(b)=>{return (c)=>{return a+b+c}}}const result = sum(1)(2)(3)console.log(result);</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高阶函数_函数柯里化</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//#region /* 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 function sum(a){return(b)=>{return (c)=>{return a+b+c}}}*///#endregion//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中saveFormData = (dataType)=>{return (event)=>{this.setState({[dataType]:event.target.value})}}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>密码：<input onChange={this.saveFormData('password')} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_不用函数柯里化的实现</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中saveFormData = (dataType,event)=>{this.setState({[dataType]:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

React 全栈体系（三）

第二章 React面向组件编程四、组件三大核心属性3: refs与事件处理 1. 效果需求: 自定义组件, 功能说明如下: 点击按钮, 提示第一个输入框中的值当第2个输入框失去焦点时, 提示这个输入框中的值 2. 理解组件内的标签可以定义ref属性来标识自己 3. 编码 3.1 字符串形式…...

编程日记 2023/8/26 1:47:00

腾讯云下一代CDN -- EdgeOne加速MinIO对象存储

省流使用MinIO作为EdgeOne的源站。背景介绍项目中需要一个兼容S3协议的对象存储服务，腾讯云的COS虽然也兼容S3协议，但是也只是支持简单的上传下载，对于上传的时候同时打标签这种需求，就不兼容S3了。所以决定自建一个对象存储…...

编程日记 2023/8/26 1:45:59

GitLab CI 指南前置工作部署GitLab 部署GitLab-Runner 注册Runner到GitLab docker exec -it gitlab-runner bash # 进入容器 gitlab-runner register #调用register命令开始注册 # 在Gitlab Setting中找到Runners，如下图所示Enter the GitLab instance URL (for example, …...

编程日记 2023/8/26 1:44:57

MyBatis的核心技术掌握，简单易懂（上）

目录一.MyBatis中的动态SQL 二.MyBatis中的模糊查询 1. # 符号 2. $ 符号 ---问题 ---所以大家知道 # 和 $ 在MyBatis中的模糊查询中的区别了嘛？？ 三.MyBatis 中的结果映射 1. resultType： 2. resultMap： ---问题 ---…...

编程日记 2023/8/26 1:43:54

Redisson自定义序列化

Redisson自定义序列化_redisson 序列化_yzh_1346983557的博客-CSDN博客 redis存取的数据一定是可序列化的，而可序列化方式可以自定义。如果不同客户端设置的可序列化方式不一样，会导致读取不一致的问题。常见的序列化方式有几下几种...

编程日记 2023/8/26 1:42:51

MongoDB Long 类型 shell 查询

场景 1、某数据ID为Long类型，JAVA 定义实体类 Id Long id 2、查询数据库，此数据存在 3、使用 shell 查询，查不到数据 4、JAVA代码查询Query.query 不受任何影响分析尝试解决（一） long 在 mongo中为 int64 类型…...

编程日记 2023/8/26 1:41:48

回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测

回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测目录回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测效果一览基本介绍模型描述程序设计参考资料效果一览基本介绍 MATLAB实现GA-…...

编程日记 2023/8/26 1:40:44

Spring cache整合Redis使用介绍

🍓 简介：java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…...

编程日记 2023/8/26 1:39:43

Metasploit提权

一、bypassuac 用户账户控制（User Account Control，简写作UAC)是微软公司在其Windows Vista及更高版本操作系统中采用的一种控制机制。其原理是通知用户是否对应用程序使用硬盘驱动器和系统文件授权，以达到帮助阻止恶意程序（有时也…...

编程日记 2023/8/26 1:38:40

TypeScript三种特殊类型

1.any类型说明：any类型代表着可以赋值任意类型 let nickname:any"王二"nickname15nicknametruenicknameundefinednicknamenullnickname{}2.unknown类型说明：类似any类型；只是不能赋值到其它类型上；除了any和known。…...

编程日记 2023/8/26 1:37:39

如何使用CSS实现一个响应式轮播图？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现响应式轮播图的示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界记得点击上方或者右侧链接订阅本专栏哦几何带…...

编程日记 2023/8/26 1:36:37

数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成

数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成目录数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成生成效果基本描述模型描述程序设计参考资料生成效果基本描述 1.MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成； 2.马尔科夫链蒙特卡洛方…...

编程日记 2023/8/26 1:35:33

【从零开始的rust web开发之路二】axum中间件和共享状态使用

系列文章目录第一章 axum学习使用第二章 axum中间件使用文章目录系列文章目录前言一、中间件是什么二、中间件使用常用中间件使用中间件使用TraceLayer中间件实现请求日志打印自定义中间件共享状态前言上篇文件讲了路由和参数相应相关的。axum还有个关键的地方是中间件…...

编程日记 2023/8/26 1:34:30

Vue操作时间

一、获取现在时间 const currentTime () > {let date new Date();let year date.getFullYear(); //月份从0~11，所以加一let month date.getMonth();let dateArr [date.getMonth() 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),…...

编程日记 2023/8/26 1:33:27

数据库——Redis 常见数据结构以及使用场景分析

文章目录 1. string2. list3. hash4. set5. sorted set 你可以自己本机安装 redis 或者通过 redis 官网提供的在线 redis 环境。 1. string 介绍 ：string 数据结构是简单的 key-value 类型。虽然 Redis 是用 C 语言写的，但是 Redis 并没有使用 C 的字符串…...

编程日记 2023/8/26 1:32:25

数学建模-规划工具箱yalmip

官网下载实例 %% yalmip 求解 yalmip clc;clear;close all; %% %sdpvar实型变量 intvar 整形变量 binvar 0-1型变量 psdpvar(3,1); %定义变量 %目标函数要把求最大值转化为最小值 Objective-p(1)^2p(2)^2-p(2)*p(3);%约束条件 Constraints[0<p<1,(p(1)^2p…...

编程日记 2023/8/26 1:31:24

[SQL挖掘机] - 窗口函数 - 计算移动平均

介绍: 在窗口函数使用时，计算的是累积到当前行的所有的数据的相关操作。实际上，还可以指定更加详细的汇总范围。该汇总范围称为框架 (frame)。其实这里也可以理解成一个窗口, 这个窗口是我们可以进行设置的. 之前我们介绍的窗口函数是根据partition…...

编程日记 2023/8/26 1:30:21

域名和hostname

最近用git克隆远程仓库时总是超时，报错说是代理的问题，但打开和关闭代理都没能解决问题，后面了解到可以关闭git命令的全局代理： git config --global --unset http.proxy git config --global --unset https.proxy如果下次要用的…...

编程日记 2023/8/26 1:29:16

echarts 甘特图一组显示多组数据

<template><el-button type"primary" click"addlin">添加线</el-button><el-button type"success" click"addArea">添加区域</el-button><div ref"echart" id"echart" class&qu…...

编程日记 2023/8/26 1:28:15

1139. 最大的以 1 为边界的正方形；2087. 网格图中机器人回家的最小代价；1145. 二叉树着色游戏

1139. 最大的以 1 为边界的正方形核心思想：枚举正方向的右下角坐标（i，j），然后你只需要判断四条边的连续一的最小个数即可，这里是边求连续一的个数同时求解结果。 087. 网格图中机器人回家的最小代价核心…...

编程日记 2023/8/26 1:27:13

css滚动条的使用

前言： css滚动条的使用。 1、使用案例1：背景不要，只展示一个滚动条如果是默认整体，::就够用了，如果是某个元素，可以 .abc:: ,如果是scss这种的 &:: ::-webkit-scrollbar {width: 6px; } ::-webkit…...

编程日记 2023/8/26 1:26:12

优化Python代理爬虫的应用

当我们在资源受限的环境中使用Python代理爬虫时，我们需要采取一些优化措施，以确保程序的高效性和稳定性。在本文中，我将分享一些关于如何优化Python代理爬虫在资源受限环境下的应用的实用技巧。首先我们来了解，哪些情况算是资源…...

编程日记 2023/8/26 1:25:10

[C++] STL_vector使用与常用接口的模拟实现

文章目录 1、vector的介绍2、vector的使用2.1 vector的定义2.2 vector迭代器的使用2.3 vector的空间增长问题 3、vector的增删查改3.1 push_back（重点）3.2 pop_back（重点）3.3 operator[]（重点）3.4 insert3.…...

编程日记 2023/8/26 1:24:07

【LeetCode】167. 两数之和 II - 输入有序数组 - 双指针

目录标题 2023-8-23 09:25:08 2023-8-23 09:25:08 自己写的不是常量级的额外空间，但是写出来了，记录一下。下次写的时候，请用双指针。 （其实我想了想一想，双指针就没感觉出来：因为我只想到双指针两个都…...

编程日记 2023/8/26 1:23:07

YOLOV1

YOU ONLY LOOK ONCE...

编程日记 2023/8/26 1:22:05

美团增量数仓建设新进展

摘要：本文整理自美团系统研发工程师汤楚熙，在 Flink Forward Asia 2022 实时湖仓专场的分享。本篇内容主要分为四个部分： 建设背景核心能力设计与优化业务实践未来展望点击查看原文视频 & 演讲PPT 一、美团增量数仓的建设背景美团数仓架…...

编程日记 2023/8/26 1:21:04

LeetCode解法汇总2337. 移动片段得到字符串

目录链接： 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目： https://github.com/September26/java-algorithms 原题链接：力扣（LeetCode）官网 - 全球极客挚爱的技术成长平台描述： 给你两个字…...

编程日记 2023/8/26 1:20:01

Fpass与Fstop

在MATLAB中，“Fpass”、“Fstop”、"Apass"和"Astop"是数字滤波器设计中常用的参数。它们用于定义滤波器的频率响应和滤波器的性能。 "Fpass"表示通带频率，指的是滤波器允许通过的频率范围。在数字滤波器设计中&#xff0…...

编程日记 2023/8/26 1:18:58

Java快速入门体验

Java快速入门体验一、环境信息1.1 硬件信息1.2 软件信息二、Maven安装2.1 Maven介绍2.2 Maven安装包下载2.3 Maven安装2.4 Maven初始化三、Java安装3.1 JDK下载3.2 JDK安装3.3 JDK初始化四、开发环境搭建4.1 安装开发工具4.2 关联Maven环境4.2.1 新建JAVA项目4.2.2 Maven与…...

编程日记 2023/8/26 1:17:56

父组件传给子组件的数据是异步的，为什么会导致子组件比父组件先执行？

当父组件传递给子组件的数据是异步获取的时候，可能会导致子组件先执行的问题。这是因为在 Vue 的更新机制中，当组件的模板开始渲染时，会立即触发子组件的创建和挂载过程，而父组件的数据可能还没有完全加载完成。具体来说&#xf…...

编程日记 2023/8/26 1:16:54

两学一做党员考试网站/宁德市医院东侨院区

第一章两个夜晚，两个黎明[一]死亡之夜就像风暴来临前的序幕，那些骇人的狂暴都隐藏于平静的海面之下，看不出一丝剧变的征兆。郭凯和往常一样，守着他生意清淡的水果摊，百无聊赖地打着盹，直到筐里的蜜桃外皮…...

编程日记 2025/2/3 22:24:52

重庆智能网站建设推荐/网络营销外包推广

思路：(1)写出代码打印实心的金字塔。(2)修改代码，把金字塔抛空。(3)修改代码，把金字塔倒转。(4)修改倒转后的代码，把金字塔抛空。(5)修改代码，把具体的数进行参数化。1、写出代码打印实心金字的金字塔：<…...

编程日记 2025/2/3 21:05:08

天津建设网站的公司哪家好/铜陵seo

题目描述请实现一个函数按照之字形打印二叉树，即第一行按照从左到右的顺序打印，第二层按照从右至左的顺序打印，第三行按照从左到右的顺序打印，其他行以此类推。class Solution { public:vector<vector<int> > Print(…...

编程日记 2025/2/3 20:49:56

制作网站题材/百度营销app

酷播云的全终端调用代码范例，支持pc，手机，微信观看多终端 （推荐使用，该代码可自动兼容微信、手机、PC、平板、智能电视终端） <script src//player.polyv.net/script/polyvplayer.min.js></scri…...

编程日记 2025/2/3 20:26:15

深圳中小企业网站制作/接广告赚钱的平台

本文提供了一个linux下访问GPIO的约定的概述。这些调用使用gpio_* 命名前缀。没有别的调用会使用这个前缀或是相关的__gpio_*前缀。转自：http://blog.163.com/w541097221126/blog/static/9550215201472152343989/ 什么是GPIO？GPIO----“通用目的输入/输出…...

编程日记 2025/2/3 19:46:26

大连仟亿科技有限公司/南宁百度快速排名优化

一、package与original-package 开发java过的都知道有包层次的概念,刚接触android一阵子,发现只有 <manifest xmlns:android"http://schemas.android.com/apk/res/android" package"com.aa.bb"> 加入我的activity不在这个目录下,J就会报错&#xff0…...

编程日记 2025/2/3 19:34:11