React 面向组件编程（下）

news2024/11/17 15:58:48

目录

  • 前言：
  • 一、受控组件与非受控组件
    • 1. 受控组件
    • 2. 非受控组件
    • 3. 效果展示
    • 4. 总结：
  • 二、组件的生命周期
    • 1. 对生命周期的理解
    • 2. 生命周期的三个阶段（旧）
    • 3. 生命周期的三个阶段（新）
    • 4. 新旧生命周期的区别
    • 5. 重要的勾子
    • 6. 即将废弃的勾子
  • 三、高阶函数和函数柯里化的理解
    • 1. 高阶函数
    • 2. 函数的柯里化
    • 3. 使用函数柯里化代码示例
    • 4. 不用函数柯里化代码示例
  • 总结：

前言：

在React面向组件编程中，除了上一章节的组件实例的三大核心属性以外，还有很多重要的内容比如：React 的生命周期，受控组件与非受控组件，高阶函数和函数柯里化的理解等，在本文中会给大家继续讲解React 面向组件编程中剩余的内容。

一、受控组件与非受控组件

表单的组件分类：

  1. 受控组件
  2. 非受控组件

多数情况下，推荐使用受控组件实现表单。在受控组件中，表单数据由组件控制。
另外一种是非受控组件，这种方式下表单组件由DOM自身控制。

1. 受控组件

  1. 受控组件通过 props 获取其当前值，并通过回调函数(比如 onChange )通知变化
  2. 表单状态发生变化时，都会通知 React，将状态交给 React 进行处理，比如可以使用 useState 存储
  3. 受控组件中，组件渲染出的状态与它的 value 或 checked 属性相对应
  4. 受控组件会更新 state 的流程
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(); // 阻止默认事件
        
        let {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={this.saveUsername} name="username" />    
                    密码：<input type="text" onChange={this.savePassword} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

2. 非受控组件

非受控组件将数据存储在 DOM 中，而不是组件内，这比较类似于传统的 HTML 表单元素。

  1. 非受控组件的值不受组件自身的 state 和 props 控制
  2. 非受控组件使用 ref 从 DOM 中获取元素数据
class Login extends React.Component {
    handleSubmit=(event)=>{
        // console.log(e>=event)
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this
        alert(`你输入的用户名是${username.value},密码是${password.value}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" ref={c=>this.username = c} name="username" />    
                    密码：<input type="text" ref={c=>this.password = c} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

3. 效果展示

在这里插入图片描述

4. 总结：

  1. React 中的组件分为受控组件和非受控组件
  2. 受控组件的两个要点：
    • 组件的 value 属性与 React 中的状态绑定
    • 组件内声明了 onChange 事件处理 value 的变化
  3. 非受控组件更像是传统的 HTML 表单元素，数据存储在 DOM 中，而不是组件内部，获取数据的方式是通过 ref 引用
  4. 一些建议：
    • 尽可能使用受控组件
    • 受控组件是将状态交由 React 处理，可以是任何元素，不局限于表单元素
    • 对于有大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智
    • 在受控组件中，数据流是单向的( state 是变化来源)，因此在改变 state 时都应该使用 setState ，而不要强制赋值
    • Refs 不能用于函数式组件，因为函数式组件没有实例
    • 在函数式组件内部，是可以使用 Refs 的

二、组件的生命周期

所谓的React生命周期，就是指组件从被创建出来，到被使用，最后被销毁的这么一个过程；
而在这个过程中，React提供了我们会自动执行的不同的钩子函数，我们称之为生命周期函数；

组件的生命周期大致分为三个阶段：组件挂载阶段，组件更新阶段，组件销毁卸载阶段

react在版本16.3前后存在两套生命周期，16.3之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。

1. 对生命周期的理解

  1. 组件从创建到死亡它会经历一些特定的阶段。
  2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2. 生命周期的三个阶段（旧）

在这里插入图片描述

  1. 初始化阶段： 由ReactDOM.render()触发—初次渲染
    1. constructor()
    2. componentWillMount()
    3. render()
    4. componentDidMount()
  2. 更新阶段： 由组件内部this.setSate()或父组件重新render触发
    1. shouldComponentUpdate()
    2. componentWillUpdate()
    3. render()
    4. componentDidUpdate()
  3. 卸载组件： 由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期旧</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/react-dom.development.js"></script>

    <!-- 引入babel：
            1. ES6 ==> ES5
            2. jsx ==> js
    -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Count extends React.Component {
            state = {
                count:0
            }
            add = ()=>{
                // 获取原状态
                let {count} = this.state
                // 更新状态
                this.setState({count:count+1})
            }
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = ()=>{
                this.forceUpdate() // 强制更新
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("Count --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log("Count ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("Count ---- componentDidUpdate");
            } 
            render(){
                console.log("render");
                let {count} = this.state
                return(
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新</button>
                    </div>
                )
            }
        }

        // 父组件
        class A extends React.Component {
            state = {carName:'小三轮'}
            changeCar = ()=>{
                this.setState({carName:"宾利"})
            }
            render(){
                console.log('A ---- render');
                return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子组件
        class B extends A {
            // 组件将要接收新的props的钩子
            componentWillReceiveProps(){
                console.log('B ---- componentWillReceiveProps');
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("B --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log("B ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("B ---- componentDidUpdate");
            } 
            render(){
                console.log('B ---- render');
                return(
                    <div>
                        我是B组件，接收到的车是：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test'))
    </script>
</body>
</html>

3. 生命周期的三个阶段（新）

在这里插入图片描述

  1. 初始化阶段： 由ReactDOM.render()触发—初次渲染
    1. constructor()
    2. getDerivedStateFromProps
    3. render()
    4. componentDidMount()
  2. 更新阶段： 由组件内部this.setSate()或父组件重新render触发
    1. getDerivedStateFromProps
    2. shouldComponentUpdate()
    3. render()
    4. getSnapshotBeforeUpdate
    5. componentDidUpdate()
  3. 卸载组件： 由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期新</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心库 -->
    <script src="../js/17.0.1/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/17.0.1/react-dom.development.js"></script>
    <!-- 引入babel：1. ES6 ==> ES52. jsx ==> js -->
    <script src="../js/17.0.1/babel.min.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            state = {
                count:0
            }
            add = ()=>{
                // 获取原状态
                let {count} = this.state
                // 更新状态
                this.setState({count:count+1})
            }
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = ()=>{
                this.forceUpdate() // 强制更新
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("Count --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log("Count ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("Count ---- componentDidUpdate");
            } 
            render(){
                console.log("render");
                let {count} = this.state
                return(
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新</button>
                    </div>
                )
            }
        }

        // 父组件
        class A extends React.Component {
            state = {carName:'小三轮'}
            
            constructor(props) {
                state
            }
            changeCar = ()=>{
                this.setState({carName:"宾利"})
            }
            static getDerivedStateFromProps(props, state) {
                // 这里必须要一个返回值 ==> state or null
                // 这里的state会覆盖掉原本的状态，并且后续也无法修改
                // 能将外部的接收的props 赋值给组件自身的 state
                // 如果你希望自身的state一直，全部依赖于外部的props，那么可以使用这个生命周期函数
                return {carName:"QQ"}
            }
            // 获取护具更新前的快照，能拿到旧的props和state
            // 必须有返回值
            getSnapshotBeforeUpdate = (prevProps, prevState) => {

            }
            render(){
                console.log('A ---- render');
                return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子组件
        class B extends A {
            // 组件将要接收新的props的钩子
            UNSAFE_componentWillReceiveProps(){
                console.log('B ---- componentWillReceiveProps');
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("B --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 将要挂载时
            UNSAFE_componentWillMount() {
                console.log("Count --- componentWillUnMount");
            }
            // 组件将要更新的钩子
            UNSAFE_componentWillUpdate() {
                console.log("B ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("B ---- componentDidUpdate");
            } 
            render(){
                console.log('B ---- render');
                return(
                    <div>
                        我是B组件，接收到的车是：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test'))
    </script>
</body>
</html>

4. 新旧生命周期的区别

  1. 新生命周期中去掉了三个 will 钩子，分别为 componentWillMount、componentWillReceiveProps、componentWillUpdate；
  2. 新生命周期中新增了两个钩子，分别为 getDerivedStateFromProps（从 props 中得到衍生的 state ）和 getSnapshotBeforeUpdate。

5. 重要的勾子

  1. render：初始化渲染或更新渲染调用
  2. componentDidMount：开启监听, 发送ajax请求
  3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

6. 即将废弃的勾子

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

警告：

现在使用会出现警告，下一个大版本需要加上 UNSAFE_ 前缀才能使用，以后可能会被彻底废弃，不建议使用。

三、高阶函数和函数柯里化的理解

1. 高阶函数

如果一个函数符合下面2个规范中的任何一个，那么它就属于一个高阶函数

  1. 若A函数，接收的参数是一个函数，那么A就可以称为高阶函数
  2. 若A函数，它的返回值依然是一个函数，那么A就可以称为高阶函数

常见的高阶函数：Promise，setTimeout，arr.map(数组方法)

2. 函数的柯里化

通过函数继续调用，返回值为函数的方式，实现多次接受参数，最后统一处理的函数编码形式

function sum(a){
    return (b)=>{
        return (c)=>{
            return a + b + c
        }
    }
}
const result = sum(1)(2)(3)
console.log(result);

3. 使用函数柯里化代码示例

class Login extends React.Component {
    // 初始化状态
    state = {
        username:'', // 用户名
        password:'', // 密码
    }
    // 保存表单数据到状态中
    saveFormDate=(dataType,event)=>{ // 标识当前标签
        this.setState({[dataType]:event.target.value})
    }
    // 表单提交的回调
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={(event)=>this.saveFormDate('username',event)} name="username" />    
                    密码：<input type="text" onChange={(event)=>this.saveFormDate('password',event)} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

4. 不用函数柯里化代码示例

class Login extends React.Component {
    // 初始化状态
    state = {
        username:'', // 用户名
        password:'', // 密码
    }
    // 保存表单数据到状态中
    saveFormDate=(dataType)=>{ // 标识当前标签
        return (event)=>{ // 这里的回调谁执行？ input标签的 onChange事件
            this.setState({[dataType]:event.target.value})
        }
    }
    // 表单提交的回调
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={this.saveFormDate('username')} name="username" />    
                    密码：<input type="text" onChange={this.saveFormDate('password')} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 React 面向组件编程（下），不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409824.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信小程序项目实例——扫雷

微信小程序项目实例——扫雷

今日推荐&#x1f481;‍♂️ 2023许嵩演唱会即将到来&#x1f3a4;&#x1f3a4;&#x1f3a4;大家一起冲冲冲&#x1f3c3;‍♂️&#x1f3c3;‍♂️&#x1f3c3;‍♂️ &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e…
阅读更多...
JavaWeb之Cookie详解(一)

JavaWeb之Cookie详解(一)

一.Cookie简介 Cookie是在HTTP协议下&#xff0c;服务器维护客户工作站上信息的一种方式&#xff0c;其作用是维护服务端与客户端浏览器的会话状态。由于HTTP协议的特点是无状态性&#xff0c;它对于事务处理没有记忆能力&#xff0c;所以服务端不会记录当前客户端浏览器的访问…
阅读更多...
image-conversion 图片压缩，vue

image-conversion 图片压缩，vue

image-conversion &#xff0c;vue&#xff0c;element 需求&#xff1a;需要用户上传图片时候&#xff0c;对大尺寸图片进行压缩&#xff0c;减小图片大小&#xff0c;减少服务器的压力。 用到的第三方插件image-conversion 文档&#xff1a; https://www.npmjs.com/packag…
阅读更多...
vue2 前端导出el-table表格为Excel文件 （自带样式）

vue2 前端导出el-table表格为Excel文件 （自带样式）

前话&#xff1a;我只是个自学到工作的小菜鸟&#xff0c;如果有大佬有更好的方法&#xff0c;希望不吝赐教。 1.电脑环境 node版本 14.20.0 vue-cli 4.4.0 (如果你的项目是vue-cli 5 版本&#xff08;即webpack5&#xff09;的会有很多问题&#xff0c;解决办法写在后边)…
阅读更多...
echarts：实现3D地图版块叠加动效散点+轮播高亮效果

echarts：实现3D地图版块叠加动效散点+轮播高亮效果

需求描述 如下图所示&#xff0c;展示3D效果的地图版块&#xff0c;并叠加显示动效散点&#xff1a; 实现思路 首先是3D地图版块效果的实现&#xff0c;可以参考广州3D地图&#xff1b;而动效散点的实现&#xff0c;可以参考地图发散分布。 这里再提一个经过尝试并不行的思…
阅读更多...
大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS

大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS

文章目录&#x1f4da;web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合&#x1f48c;表白网页 125套 (集合)&#x1f499;Echarts大屏数据展示 150套 (集合)一、基于HTMLEcharts技术制作二、基于VUEEcharts技术制作&#x1f381;更多源码&#x1f4da;web前端期末大作…
阅读更多...
统计网站访问量（自己开发）

统计网站访问量（自己开发）

网站的运营者或者开发者肯定都想知道&#xff0c;自己网站每天的使用情况。比如每天有多少访问量、用户都点击哪些功能、用户对网站上哪些功能感兴趣。知道了这些信息才能定位网站后面的开发方向&#xff0c;比如持续优化点击率高的模块 、裁撤用户不感兴趣的模块&#xff0c;打…
阅读更多...
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

一般的话scroll-view在组件里面使用,而页面里面则使用onReachBottom()这个方法居多 1,onReachBottom 上拉触底后加载更多(未固定表头) 页面结构: <view class"box"><table border"0"><thead><th>名称</th><th style&qu…
阅读更多...
解决axios异步请求问题（异步变为同步）

解决axios异步请求问题（异步变为同步）

遇到的问题 在目前一个需求中&#xff0c;我需要等待axios请求完成后&#xff0c;判断请求是否出现异常&#xff0c;然后来判断是否关闭弹窗 修改后大概代码如下&#xff1a; async submitForm() {let flag false//表单验证&#xff0c;默认通过let formValidation truethis…
阅读更多...
HTML小游戏22 —— html5版疯狂光头强网页游戏（附完整源码）

HTML小游戏22 —— html5版疯狂光头强网页游戏（附完整源码）

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…
阅读更多...
利用nvm下载nodejs

利用nvm下载nodejs

利用nvm下载nodejs 在开发过程会一直遇到nodejs的版本问题&#xff0c;直接安装则只有一个版本&#xff0c;极其不方便nvm则是用来管理nodejs的工具&#xff0c;可以通过nvm来安装切换不同版本的nodejs安装前需要先卸载自己原有的node版本&#xff0c;不然那会有可能报错。卸载…
阅读更多...
在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

在vue3vite项目下按需引入vant报错Failed to resolve import解决方案问题描述原因分析解决方案问题描述 近日尝试使用vitevue3vant开发项目过程中&#xff0c;参考vant官网开发指南->快速上手->引入组件 按照上述配置好后&#xff0c;运行vite环境报错&#xff1a;Fai…
阅读更多...
【JavaScript】【5】定时器（包含回调函数与Promise）

【JavaScript】【5】定时器（包含回调函数与Promise）

文章目录前言一、回调函数二、 Promisepromise对象Promise对象的生成加载图片写成一个Promise三、定时器与清除定时器的方法四、京东购物车倒计时案例五、发送验证码案例在这里插入图片描述总结前言 什么是定时器 JavaScript提供定时执行代码的功能&#xff0c;叫做定时器&…
阅读更多...
【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目

【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目

【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目 文章目录【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目写在前面一、Vue CLI脚手架1.1 认识Vue CLI1.2 Vue CLI 安装和使用二、Vue create 项目的过程2.1 创建项目2.2选择 Manually select features创建2.3 选择Vue的版…
阅读更多...
Vue Router4 ，prams 传参失效和报错问题

Vue Router4 ，prams 传参失效和报错问题

Vue3 使用 Vue Router 时&#xff0c;prams 传参失效和报错问题 我尝试使用 prams 传递数据 <script setup> import { useRouter } from vue-routerconst router useRouter() const params { id: 1, name: ly, phone: 13246566476, age: 23 } const toDetail () >…
阅读更多...
HTML 实现仿 Windows 桌面主题特效

HTML 实现仿 Windows 桌面主题特效

&#x1f482; 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】&#x1f91f; 风趣幽默的人工智能学习网站&#xff1a;&#x1f449;人工智能&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】&#x1f4ac; 免费且实用的计算机相关知识题库&a…
阅读更多...
vue 方法按照顺序执行

vue 方法按照顺序执行

在调用后台方法的时候&#xff0c;由于调用了多个方法&#xff0c;但是执行的时候并没有按照顺序执行&#xff0c;前端需要后台返回的数据&#xff0c;对数据进行页面展示&#xff0c;由于没有按照顺序执行&#xff0c;导致前台页面报错。解决办法采用new Promise单独执行每个方…
阅读更多...
Vue3父子组件间传参通信

Vue3父子组件间传参通信

Vue3 父子组件间通信前言一、父传子 defineProps二、子传父 defineEmits三、子组件暴露属性给父组件 defineExpose四、依赖注入Provide / Inject参考前言 本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3TypeScript 一、父传子 defineProps 父组件传值给…
阅读更多...
使用TS对axios的进行简单封装

使用TS对axios的进行简单封装

1.安装axios npm i axios2.在合适路径下新建request.ts&#xff08;名称可随意&#xff09;&#xff0c;例如可以在项目的src下创建utils文件夹创建request.ts 3.导入axios并创建axios实例 //引入axios import axios from axios//使用指定配置创建axios实例 const instance …
阅读更多...
css字体加粗(dw怎么在css里字体加粗)

css字体加粗(dw怎么在css里字体加粗)

css怎么设置前3个字加粗 举个例子&#xff1a; 比如都在一个标签里 这里是文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容 这里是文字内容文字内容文字内容文字内容文字内 这里是文字内容文字内容文字内容文字内容文字内 .test p span{font-weight:bold;} …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023