Vue组件（详解）

news2025/1/22 6:35:39

目录

组件：

全局组件：

在HTML页面声明template：

局部组件：

局部组件第一种方式：

局部组件第二种方式：

插槽slot：

匿名插槽：

具名插槽：

父子组件通信：

简单粗暴型$refs和$parent:

$refs父组件获取子组件数据：

 $parent子组件获取父组件数据：

正规型父子通信：

子组件获取父组件数据：

父组件获取子组件数据：

非父子组件的通信：

混入mixin：

局部混入：

全局混入：

最后送大家一句话：

官网地址：组件注册 — Vue.js (vuejs.org)

组件：

组件可以简单的理解为模块化的单元，Vue组件能够提高代码重用性的。使用组件可以解决频繁更改需求的问题

将来每一个组件都是一个单独的文件，最终运行都会放在一个页面上。

组件都有的三步骤：声明、注册、使用；全局组件除外，因为全局组件声明的时候就已经注册了

全局组件：

指在不同作用域内均可使用的组件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <hello></hello><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    //声明加注册
    Vue.component("hello",{
        template:`<div>hello，{{name}}</div>`,
        data(){//这边也是可以加data以及其他的各种主属性
            return{
                name:"我是hello"
            }
        },
    })
    let app=new Vue({
        el:"#app"
    })
</script>
</html>

浏览器结果：

在HTML页面声明template：

当然局部组件也可以将template声明在HTML页面上，和全局的写法一样。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <hello></hello><!--使用-->
    </div>
    <template id="myhello">
        <div>hello，{{name}}</div>
    </template>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    //声明加注册
    Vue.component("hello",{
        template:"#myhello",//通过id选择器选择上面的id
        data(){
            return{
                name:"我是hello"
            }
        },
    })
    let app=new Vue({
        el:"#app"
    })
</script>
</html>

效果和刚开始的一样，我就不做演示了；此种方法在HTML页面写的时候有提示并且js里面也不会太乱，两种方法都行，喜欢用哪个就用哪个。

局部组件：

指只在定义该组件的作用域内可以使用的组件

局部组件第一种方式：

这次方式是声明注册在一起；这种方式不太建议使用，复用性不强并且js代码太多不方便查看

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai></baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    let app=new Vue({
        el:"#app",
        components:{
            baibai:{//声明加注册
                template:`<div>拜拜{{name}}</div>`,
                data() {//data是在局部组件baibai里面
                    return {
                        name:"小明"
                    }
                },
            },
        },
    })
</script>
</html>

浏览器结果：

局部组件第二种方式：

这次方式是声明和注册分开使用；这种方式当前主流使用，复用性强并且简洁易懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai></baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var baibai={//声明
        template:`<div>拜拜{{name}}</div>`,
        data() {
            return {
                name:"小明"
            }
        }
    }
    let app=new Vue({
        el:"#app",
        components:{
            baibai//注册
        },
    })
</script>
</html>

上面注册我用的是简写；下面是写全的注册，基本上没人会把这个写全；

但是看到别人代码写全要能看懂

let app=new Vue({
    el:"#app",
    components:{
        baibai:baibai//注册
    },
})

插槽slot：

插槽（slot）其目的在于让组件的可扩展性更强，用来混合父组件的内容与子组件自己的模板

举个栗子： 比如说游戏中的武器可以镶嵌宝石，但是你要先有槽才能往里插宝石。

匿名插槽：

匿名插槽从字面意思来理解就是没有名字的插槽，特点是可以放置任何想要放的内容

 如果有多个插槽的话，使用匿名插槽页面就会有多个内容。

 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai>
            <div>我是插槽的内容</div><!--组件中间的内容-->
        </baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var baibai={//声明
        template:`<div>
                    <slot></slot>
                    拜拜{{name}}
                    <slot></slot>
                </div>`,
        data() {
            return {
                name:"小明"
            }
        }
    }
    let app=new Vue({
        el:"#app",
        components:{
            baibai//注册
        },
    })
</script>
</html>

 浏览器结果：

 因为写了两个插槽所以网页上输出了两个内容。

具名插槽：

具名插槽可以用一个特殊属性name，配置分发的内容，多个具名插槽可以有不同的名字

 具名函数在HTML代码列举了三种实现方式，萝卜白菜各有所爱，那个适合自己用那个

 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai>
            <!--第一种方式-->
            <div slot="tou">头部内容，旧语法，据说2.6.0后废弃，但是我2.7.0还能使用</div>
            <!--第二种方式-->
            <template #shenti>
                <div>
                    身体内容，新语法，缩写
                </div>
            </template>
            <!--第三种方式-->
            <template v-slot:jiao>
                脚部内容，新语法
            </template>
        </baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var baibai={//声明
        template:`<div>
                    <slot name="tou"></slot>
                    <slot name="shenti"></slot>
                    <div>拜拜{{name}}<div>
                    <slot name="jiao"></slot>
                </div>`,
        data() {
            return {
                name:"小明"
            }
        }
    }
    let app=new Vue({
        el:"#app",
        components:{
            baibai//注册
        },
    })
</script>
</html>

 浏览器结果：

父子组件通信：

在Vue中父子传值也是非常重要的一个操作，用好了代码编写起来会更简便。

简单粗暴型$refs和$parent:

这两个属性的作用是获取到子组件实例数组和父组件实例。

有了实例，就可以很方便的操作组件的属性和方法。

$refs父组件获取子组件数据：

$refs的使用需要，在子元素上通过ref属性声明自己的引用名

写法：

 <dawa ref="dawa"></dawa><!--子类的组件；ref声明的名称父组件中要通过它来获取数据-->

下面这个实例是在父组件写了一个按钮绑定点击事件来操作子组件的age数据让其加一

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
        <dawa ref="dawa"></dawa><!--里面ref属性不写的话就传不了值-->
        <button type="button" @click="AgeFun">子类年龄+1</button><!--在父类里面写的按钮-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{{childName}}--{{age}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        methods: {
            AgeFun(){
                //拿到子组件的age值并且+1
                this.$refs.dawa.age=this.$refs.dawa.age+1
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

下面的这个结果是我点击了两次后的结果

浏览器结果：

 也可以在浏览器控制台获取父组件数据：

 $parent子组件获取父组件数据：

每个子组件只有一个父组件，子组件可以直接通过$parent就可以拿到父组件的数据不用声明去父组件名

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
        <dawa></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{{childName}}--{{age}}
                <!--在子组件中写了一个按钮操作修改父类的name属性-->
                <button type="button" @click="updateFu">改父类名</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods: {
            updateFu(){
                this.$parent.name="爹爹"//点击后修改父类名称改为爹爹
            }
        },
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

下面的这个结果是我点过后的结果

正规型父子通信：

市面上大部分用的都是这种父子通信的方式，相对简单粗暴型会比较难理解一点。

子组件获取父组件数据：

传值属性名规则：

  • 父组件传的属性名最好不要和子组件的属性名一样
  • 父组件传的属性名不要出现大写，可以用英文下划线：”_“ 隔开

传值写法：

age属性是固定的值，name是单项数据绑定和父组件的name属性绑定

<dawa age="18" :name="name"></dawa>

获取写法：

在子组件中和data同级写props来获取

props:["age","name"]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
        <dawa age="18" :name="name"></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{{childName}}--{{age}}
                <br>
                <!--在子组件中将获取的属性简单演示一下-->
                父组件----{{age}}--{{name}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        props:["age","name"],
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

浏览器结果：

父组件获取子组件数据：

父组件获取子组件数据，采用的是$emit，自定义事件的方式完成的。

父组件获取子组件数据需要做两件事情：

父组件在使用子组件时要给它绑定一个自定义事件

<!--@zidingyi是一个自定义事件，此事件会在后面在子组件注册-->
<dawa @zidingyi="fuFun" ></dawa>
//父组件里的方法
methods:{
    fuFun(val){
        // 拿到数据
        console.log(val);
    }
}

 子组件主动去出发这个事件并传递数据

//点击后给父组件传值
template:`
    <div>
        <button @click="butFun">给父组件传值</button>
    </div>
`,
//子组件里的方法
methods:{
    butFun(){
        // 子组件触发自定义事件zidingyi，同时传递数据
        this.$emit('zidingyi','数据1');
    }
}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
        <dawa @zidingyi="fuFun" ></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{{childName}}--{{age}}
                <button @click="butFun">给父组件传值</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods:{
            butFun(){
                this.$emit('zidingyi',this.childName);
            }
        }
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        methods: {
            fuFun(val){
                console.log(val);
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

点击后，父类中的方法执行了，在控制台打印了子类的数据。

浏览器结果：

非父子组件的通信：

非父子组件通信就是子组件可以和另一个子组件传数据，子组件和父组件也可以互相传数据

通信分三步：

创建一个公共组件

Vue.prototype.$middleBus = new Vue();

发送方，在公共组件上，触发一个事件

this.$middleBus.$emit('zhidingyi','你好,我是'+this.childName);

接收方，监听公共组件上的这个zhidingyi事件，并接受数据

这个代码一般都写在生命周期钩子里，部署完只执行一次，mounted钩子是最适合的。

this.$middleBus.$on('zhidingyi',val=>{
     // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向dawa
     console.log(this.childName+"接收到了值，值是："+val);//在控制台打印一下
});

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
        <dawa></dawa>
        <erwa></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    //在Vue类的原型对象上，增加一个公共组件
    Vue.prototype.$middleBus = new Vue();
    var dawa={
        template:`
            <div>
                子组件1----{{childName}}--{{age}}
                <button @click="butFun">给其他人传值</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods: {
            butFun(){
                this.$middleBus.$emit('zhidingyi','你好,我是'+this.childName);
            }
        },
    }
    var erwa={
        template:`
            <div>
                子组件2----{{childName}}--{{age}}
            </div>
        `,
        data() {
            return {
                childName:"二娃",
                age:12,
            }
        },
        mounted() {
            this.$middleBus.$on('zhidingyi',val=>{
                // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
                console.log(this.childName+"接收到了值，值是："+val);//在控制台打印一下
            });
        },
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa,erwa
        },
    })
</script>
</html>

点击完以后，在控制台二娃接收到了数据

浏览器结果：

混入mixin：

提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

局部混入：

混入组件要写在上面，要不会出现找不到报错

其他的组件可以直接使用混入组件的属性

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{{name}}
        <dawa></dawa>
        <erwa></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var sanwa= {
        data() {
            return {
                mixinname: '三娃',
            };
        },
        mounted() {
            console.log('我是混入的组件,我的名字叫:'+this.mixinname);
        },
    };
    var dawa={
        template:`
            <div>
                子组件1----{{childName}}--{{age}}--混入组件的名称：{{mixinname}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        mixins:[sanwa]
    }
    var erwa={
        template:`
            <div>
                子组件2----{{childName}}--{{age}}
            </div>
        `,
        data() {
            return {
                childName:"二娃",
                age:12,
            }
        },
        mixins:[sanwa]
    }
    
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa,erwa
        },
    })
</script>
</html>

浏览器结果：

全局混入：

请谨慎使用全局混入，因为会使实例以及每个组件受影响

不管你要不要混入，它都给你混入了，用处不大基本上都不用。

写法：

Vue.mixin(myMixin);

最后送大家一句话：

 

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

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

相关文章

【双指针_和为 s 的两个数_C++】

【双指针_和为 s 的两个数_C++】

和为s的两个数字 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {int n nums.size();int left 0;int right n-1;while(left<right){if(nums[left]nums[right]>target) right--;else if(nums[left]nums[right]<tar…
阅读更多...
Postman接口自动化测试实例

Postman接口自动化测试实例

一.实例背景 在实际业务中&#xff0c;经常会出现让用户输入用户密码进行验证的场景。而为了安全&#xff0c;一般都会先请求后台服务器获取一个随机数做为盐值&#xff0c;然后将盐值和用户输入的密码通过前端的加密算法生成加密后串传给后台服务器&#xff0c;后台服务器接到…
阅读更多...
车载以太网物理层

车载以太网物理层

车载以太网物理层 O S I 参考模型的第 1 层&#xff08; 最底层&#xff09;。负责逻辑信号&#xff08; 比特流&#xff09;与物理信号&#xff08;电信号、光信号&#xff09;之间的互相转换&#xff0c;通过传输介质为数据链路层提供物理连接。 车载以太网与传统以太网相比…
阅读更多...
matlab使用教程(16)—图论中图的定义与修改

matlab使用教程(16)—图论中图的定义与修改

1.修改现有图的节点和边 此示例演示如何使用 addedge 、 rmedge 、 addnode 、 rmnode 、 findedge 、 findnode 及 subgraph 函数访问和修改 graph 或 digraph 对象中的节点和/或边。 1.1 添加节点 创建一个包含四个节点和四条边的图。s 和 t 中的对应元素用于指定每条…
阅读更多...
【教程】零成本将小米净化器改造为无叶风扇

【教程】零成本将小米净化器改造为无叶风扇

某宝某多上&#xff0c;就这么点破塑料&#xff0c;就要买79&#xff1f;&#xff01;&#xff01; 我这枚韭菜可不上当。咱自己做一个&#xff01; 真香~
阅读更多...
BBS项目day02、注册、登录(登录之随机验证码)、修改密码、退出登录、密码加密加盐

BBS项目day02、注册、登录(登录之随机验证码)、修改密码、退出登录、密码加密加盐

一、注册 1.注册之前端页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册页面</title><!--动态引入文件-->{% load static %}<script src"{% static js/jquery.min.js %…
阅读更多...
jquery技术学习2

jquery技术学习2

移动节点 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>移动节点</title><script type"text/javascript" src"../script/jquery-3.6.0.min.js"></script>&l…
阅读更多...
【Spring】深入理解 Spring 事务及其传播机制

【Spring】深入理解 Spring 事务及其传播机制

文章目录 一、Spring 事务是什么二、Spring 中事务的实现方法2.1 Spring 编程式事务&#xff08;手动&#xff09;2.1.1 编程式事务的使用演示2.1.2 编程式事务存在的问题 2.2 Spring 声明式事务&#xff08;自动&#xff09;2.2.1 Transactional 作用范围2.2.2 Transactional …
阅读更多...
化繁为简，使用Hibernate Validator实现参数校验

化繁为简，使用Hibernate Validator实现参数校验

前言 在之前的悦享校园的开发中使用了SSM框架&#xff0c;由于当时并没有使用参数参数校验工具&#xff0c;方法的入参判断使用了大量的if else语句&#xff0c;代码十分臃肿&#xff0c;因此最近在重构代码时&#xff0c;将框架改为SpringBoot后&#xff0c;引入了Hibernate V…
阅读更多...
HCIP MPLS实验

HCIP MPLS实验

MPLS实验 拓扑MPLS VPN配置PE与PE间建立MP-BPG邻居关系R7访问R2,R3,R4环回 拓扑 MPLS VPN配置 首先可以用OSPF协议将R2,R3,R4跑通&#xff0c;然后配置MPLS [R2]mpls lsr-id 2.2.2.2 定义MPLS的router-id&#xff0c;要为本地设备的真实ip地址&#xff0c;且邻居可达&#…
阅读更多...
机器学习算法之-逻辑回归(2)

机器学习算法之-逻辑回归(2)

为什么需要逻辑回归 拟合效果太好 特征与标签之间的线性关系极强的数据&#xff0c;比如金融领域中的 信用卡欺诈&#xff0c;评分卡制作&#xff0c;电商中的营销预测等等相关的数据&#xff0c;都是逻辑回归的强项。虽然现在有了梯度提升树GDBT&#xff0c;比逻辑回归效果更…
阅读更多...
【学习FreeRTOS】第8章——FreeRTOS列表和列表项

【学习FreeRTOS】第8章——FreeRTOS列表和列表项

1.列表和列表项的简介 列表是 FreeRTOS 中的一个数据结构&#xff0c;概念上和链表有点类似&#xff0c;列表被用来跟踪 FreeRTOS中的任务。列表项就是存放在列表中的项目。 列表相当于链表&#xff0c;列表项相当于节点&#xff0c;FreeRTOS 中的列表是一个双向环形链表列表的…
阅读更多...
【大数据之Kafka】三、Kafka生产者之消息发送流程及同步异步发送API

【大数据之Kafka】三、Kafka生产者之消息发送流程及同步异步发送API

将外部传送给过来的数据发送到kafka集群。 1 发送原理 &#xff08;1&#xff09;创建main()线程&#xff0c;创建producer对象&#xff0c;调用send方法&#xff0c;经过拦截器&#xff08;可选&#xff09;、序列化器、分区器。 &#xff08;2&#xff09;分区器将数据发送…
阅读更多...
java面试题（16）：Mysql一致性视图是啥时候建立的

java面试题（16）：Mysql一致性视图是啥时候建立的

1 演示错误案例 先给大家来一个错误演示。 我们打开两个会话窗口&#xff0c;默认情况下隔离级别是可重复读&#xff0c;我们来看下&#xff1a; 首先在 A 会话中查看当前 user 表&#xff0c;查看完成后开启事务&#xff1a; 可以看到id3的数据sex是男。 接下来在 B 会话中…
阅读更多...
场景入门12----关卡切换和流送

场景入门12----关卡切换和流送

在游戏时往往需要切换关卡&#xff0c;有两种方法&#xff0c;关卡切换和推送。关卡切换的方法是进入了一个新的地图&#xff0c;这时人物的值都复原了&#xff0c;一般都是在一个地图上推送关卡。 关卡切换 首先&#xff0c;文件新建一个新关卡&#xff0c;命名。找到之前制…
阅读更多...
地址解析协议-ARP

地址解析协议-ARP

ARP协议 无论网络层使用何种协议&#xff0c;在实际网络的链路上传输数据帧时&#xff0c;最终必须使用硬件地址 地址解析协议&#xff08;Address Resolution Protocol&#xff0c;ARP&#xff09;&#xff1a;完成IP地址到MAC地址的映射&#xff0c;每个主机都有一个ARP高速缓…
阅读更多...
C语言刷题训练DAY.4

C语言刷题训练DAY.4

1.计算体重指数 解题思路&#xff1a; 这里我们只需要按照他的要求写出公式。 注意&#xff1a;身高要换算成米&#xff0c;打印的结构是个浮点数&#xff0c;打印的格式要相对应 解题代码&#xff1a; #include<stdio.h> int main() {int weight 0;int height 0;…
阅读更多...
Python自动化小技巧18——自动化资产月报(word设置字体表格样式，查找替换文字)

Python自动化小技巧18——自动化资产月报(word设置字体表格样式，查找替换文字)

案例背景 每月都要写各种月报&#xff0c;经营管理月报&#xff0c;资产月报.....这些报告文字目标都是高度相似的&#xff0c;只是需要替换为每个月的实际数据就行&#xff0c;如下&#xff1a; (打码是怕信息泄露.....) 可以看到&#xff0c;这个报告的都是高度模板化&…
阅读更多...
浏览器 - 事件循环机制详解

浏览器 - 事件循环机制详解

目录 1&#xff0c;浏览器进程模型进程线程浏览器的进程和线程1&#xff0c;浏览器进程2&#xff0c;网络进程3&#xff0c;渲染进程 2&#xff0c;渲染主线程事件循环异步同步 JS 为什么会阻塞渲染任务优先级 3&#xff0c;常见面试题1&#xff0c;如何理解 js 的异步2&#x…
阅读更多...
时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于KNN K近邻的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 基于KNN K近邻的时间序列预测-递归预测未来(多指标评价) …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023