Vue2（组件开发）

目录

      • 前言
      • 一，组件的使用
      • 二，插槽slot
      • 三，refs和parent
      • 四，父子组件间的通信
        • 4.1，父传子 ：父传子的时候，通过属性传递
        • 4.2，父组件监听自定义事件
      • 五，非父子组件的通信
      • 六，混入（mixin）
      • 最后

前言

上一章博客我们讲解了Vue生命周期,列表过滤,计算属性和监听器
这一章我们来讲Vue组件开发

一，组件的使用

创建组件两种方式

var Header = { 
    template:'模板' , 
    data是一个函数,
    methods:功能,
    components:子组件们 
}//局部声明

Vue.component('组件名',组件对象);//全局注册 等于注册加声明了

组件的分类

  • 通用组件（例如表单、弹窗、布局类等) (多个项目都可以复用)
  • 业务组件（抽奖、机器分类）（本项目中复用）
  • 页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）

组件开发三部曲：声明、注册、使用

注意：子组件的命名，如果有驼峰命名，在使用子组件标签时用“-”隔开

<!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}}
        <hello></hello>
        <saybyebye></saybyebye>
    </div>


    <template id="myhello">
        <div>hello,{{name}}</div>
    </template>
</body>
<script src="../js/vue2.7.js"></script>
<script>

    // 注册了一个全局组件，名字叫hello
    Vue.component('hello',{
        template:`#myhello`,
        data(){
            return{
                name:'我是hello'
            }
        }
    })

    // 定义一个局部组件
    var saybyebye={
        template:`<div>你好</div>`
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                name:"张三",
            }
        },
        // 注册局部组件
        components:{
            saybyebye
        }
    })

</script>
</html>

在这里插入图片描述

二，插槽slot

slot就是在声明子组件时给DOM留下的坑位，以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。

​ 并且，坑位是可以命名的，也就是说，子组件在声明的时候命名坑位，方便父组件在指定的坑位中插入内容

​ slot是动态的DOM

  • 插槽的使用：
    • 步骤有两步：a.子组件上留坑。b.父组件使用子组件的时候，给坑里赋值.
    • 要有父子组件作为前提。
    • 目的是让子组件成为动态的组件。

匿名插槽
- 匿名插槽就是在声明的时候没有声明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}}
        <hello></hello>
        <saybyebye>
            <div>我是插槽的内容</div>
        </saybyebye>
    </div>


    <template id="myhello">
        <div>hello,{{name}}</div>
    </template>
</body>
<script src="../js/vue2.7.js"></script>
<script>

    // 注册了一个全局组件，名字叫hello
    Vue.component('hello',{
        template:`#myhello`,
        data(){
            return{
                name:'我是hello'
            }
        }
    })

    // 定义一个局部组件
    var saybyebye={
        template:`
        <div>
            <div>你好</div>
            // 插槽内容
            <slot></slot>    
        </div>
        `
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                name:"张三",
            }
        },
        // 注册局部组件
        components:{
            saybyebye
        }
    })

</script>
</html>

在这里插入图片描述
具名插槽

  • 具名插槽会在声明时，指定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}}
        <hello></hello>
        <saybyebye>
            <div slot="niu1">我是插槽的内容</div>
            <template #niu2>
                <div>你好niu2</div>
            </template>
            <template v-slot:niu3>
                <div>你好niu3</div>
            </template>
        </saybyebye>
    </div>


    <template id="myhello">
        <div>hello,{{name}}</div>
    </template>
</body>
<script src="../js/vue2.7.js"></script>
<script>

    // 注册了一个全局组件，名字叫hello
    Vue.component('hello',{
        template:`#myhello`,
        data(){
            return{
                name:'我是hello'
            }
        }
    })

    // 定义一个局部组件
    var saybyebye={
        template:`
        <div>
            <slot name="niu1"></slot>   
            <div>你好niu1</div>
            // 插槽内容
            <slot name="niu2"></slot>    
            <slot name="niu3"></slot>    
        </div>
        `
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                name:"张三",
            }
        },
        // 注册局部组件
        components:{
            saybyebye
        }
    })

</script>
</html>

在这里插入图片描述

三，refs和parent

这两个属性的作用是获取到子组件实例数组和父组件实例。
有了实例，就可以很方便的操作组件的属性和方法。

  • refs
<!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}}
        <button @click="ouda">打一顿</button>
        <Myheader ref="dawa"></Myheader>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.prototype.$middleBus = new Vue();
    var Myheader = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
            </div>
        `,
        
        data(){
            return{
                xingming:'林宇豪',
                Hp:100,
            }
        },
    }


    var app = new Vue({
        el:'#app',
        data(){
            return{
                name:'小豪',
            }
        },

        methods:{
            ouda(){
                console.log("孽子，打一顿");
                this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
            },
        },
        components:{
            Myheader
        }

    })

    
</script>
</html>

在这里插入图片描述

  • parent

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

<!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}}
        <Myheader ref="dawa"></Myheader>
        <Myheadererwa ref="erwa" ></Myheadererwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.prototype.$middleBus = new Vue();
    var Myheader = {
        template:`
            <div>
                   
            </div>
        `,
        
    }

    var Myheadererwa = {
        template:`
            <div>
                <button @click="jiao">叫爷爷</button>  
            </div>
        `,
        data(){
            return{ 
            }
        },
        methods:{
            jiao(){
                this.$parent.name="爷爷"
            },  
        },
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                name:'小豪',
            }
        },
        components:{
            Myheader,
            Myheadererwa

        }

    })

    
</script>
</html>

在这里插入图片描述

四，父子组件间的通信

4.1，父传子 ：父传子的时候，通过属性传递

  • 在子组件标签中，自定义属性和值
<Myheader ref="header" age="18" :sex="sex"></Myheader>
  • 在子组件内部，通过props属性，获取所有的值
<!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}}
        <button @click="ouda">打一顿</button>
        <button @click="anwei">安慰</button>
        <button @click="xiaodao">看看导哥在干嘛</button>
        <Myheader ref="dawa"></Myheader>
        <Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
        <div id="mydiv"></div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.prototype.$middleBus = new Vue();
    var Myheader = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
            </div>
        `,
        
        data(){
            return{
                xingming:'林宇豪',
                Hp:100,
            }
        },
    }

    var Myheadererwa = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
                <button @click="jiao">叫爷爷</button>  
                二娃 = {{age}} -- {{nengli}}
            </div>
        `,
        data(){
            return{ 
                xingming:'王导',
                Hp:0,
            }
        },
        methods:{
            see(){
                console.log("再看岛国动作片");
            },
            jiao(){
                this.$parent.name="爷爷"
            },
            
        },
        mounted(){
            this.$middleBus.$on('jieshou',val=>{
                // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
                console.log(val);
            });
        },
        props:['age','nengli'],
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                name:'小豪',
                nengli2:"千里眼,顺风耳"
            }
        },

        methods:{
            ouda(){
                console.log("孽子，打一顿");
                this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
                // if(this.$refs.dawa.Hp<=0){
                //     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
                // }
            },
            anwei(){
                console.log("抽了一巴掌，安慰了一下");
                this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
            },
            xiaodao(){
                this.$refs.erwa.see()            
            },
            
        },
        components:{
            Myheader,
            Myheadererwa

        }

    })

    
</script>
</html>

在这里插入图片描述

4.2，父组件监听自定义事件

      <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>

<!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">
        大家好{{changname}}
        <button @click="ouda">打一顿</button>
        <button @click="anwei">安慰</button>
        <button @click="xiaodao">看看导哥在干嘛</button>
        <Myheader ref="dawa"></Myheader>
        <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
        <div id="mydiv"></div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.prototype.$middleBus = new Vue();
    var Myheader = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
                <button @click="chuanzhi">发送一条信息</button>    
            </div>
        `,
        
        data(){
            return{
                xingming:'林宇豪',
                Hp:100,
            }
        },
        methods:{
            chuanzhi(){
                this.$middleBus.$emit('jieshou','你好child01,我是child02');
            }
        }
    }

    var Myheadererwa = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
                <button @click="jiao">叫爷爷</button>  
                <button @click="happyNewYear">给爷爷拜年</button>  
                二娃 = {{age}} -- {{nengli}}
            </div>
        `,
        data(){
            return{ 
                xingming:'王导',
                Hp:0,
            }
        },
        methods:{
            see(){
                console.log("再看岛国动作片");
            },
            jiao(){
                this.$parent.name="爷爷"
            },
            happyNewYear(){
                // 触发自定义事件
                this.$emit('to-parent-event',this.xingming)
            }
            
        },
        mounted(){
            this.$middleBus.$on('jieshou',val=>{
                // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
                console.log(val);
            });
        },
        props:['age','nengli'],
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                changname:'小豪',
                nengli2:"千里眼,顺风耳"
            }
        },

        methods:{
            ouda(){
                console.log("孽子，打一顿");
                this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
                // if(this.$refs.dawa.Hp<=0){
                //     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
                // }
            },
            anwei(){
                console.log("抽了一巴掌，安慰了一下");
                this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
            },
            xiaodao(){
                this.$refs.erwa.see()            
            },
            bainian(xingming){
                console.log(xingming+"给您拜年了 ");
            }
            
        },
        components:{
            Myheader,
            Myheadererwa

        }

    })

    
</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">
        大家好{{changname}}
        <button @click="ouda">打一顿</button>
        <button @click="anwei">安慰</button>
        <button @click="xiaodao">看看导哥在干嘛</button>
        <Myheader ref="dawa"></Myheader>
        <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
        <div id="mydiv"></div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.prototype.$middleBus = new Vue();
    var Myheader = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
                <button @click="chuanzhi">发送一条信息</button>    
            </div>
        `,
        
        data(){
            return{
                xingming:'林宇豪',
                Hp:100,
            }
        },
        methods:{
            chuanzhi(){
                this.$middleBus.$emit('jieshou','你好child01,我是child02');
            }
        }
    }

    var Myheadererwa = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
                <button @click="jiao">叫爷爷</button>  
                <button @click="happyNewYear">给爷爷拜年</button>  
                二娃 = {{age}} -- {{nengli}}
            </div>
        `,
        data(){
            return{ 
                xingming:'王导',
                Hp:0,
            }
        },
        methods:{
            see(){
                console.log("再看岛国动作片");
            },
            jiao(){
                this.$parent.name="爷爷"
            },
            happyNewYear(){
                // 触发自定义事件
                this.$emit('to-parent-event',this.xingming)
            }
            
        },
        mounted(){
            this.$middleBus.$on('jieshou',val=>{
                // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
                console.log(val);
            });
        },
        props:['age','nengli'],
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                changname:'小豪',
                nengli2:"千里眼,顺风耳"
            }
        },

        methods:{
            ouda(){
                console.log("孽子，打一顿");
                this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
                // if(this.$refs.dawa.Hp<=0){
                //     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
                // }
            },
            anwei(){
                console.log("抽了一巴掌，安慰了一下");
                this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
            },
            xiaodao(){
                this.$refs.erwa.see()            
            },
            bainian(xingming){
                console.log(xingming+"给您拜年了 ");
            }
            
        },
        components:{
            Myheader,
            Myheadererwa

        }

    })

    
</script>
</html>

在这里插入图片描述

  • 创建一个公共组件
Vue.prototype.$middleBus = new Vue();
  • 发送方，在公共组件上，触发一个事件
this.$middleBus.$emit('sendMsg','你好child01,我是child02');
  • 接收方，监听公共组件上的这个事件，并接受数据
this.$middleBus.$on('sendMsg',val=>{
     // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
     this.msg = val;
});

六，混入（mixin）

  • 定义

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

  • 写法

    • 局部
      • 定义个混入对象

var myMixin = {
  data() {
    return {
      mixinname: '混入姓名',
    };
  },
  mounted() {
    console.log('我是混入的组件');
  },
};
  • 项目
mixins: [myMixin],

<!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">
        大家好{{changname}}
        <button @click="ouda">打一顿</button>
        <button @click="anwei">安慰</button>
        <button @click="xiaodao">看看导哥在干嘛</button>
        <Myheader ref="dawa"></Myheader>
        <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
        <div id="mydiv"></div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.prototype.$middleBus = new Vue();

    var commonMixin = {
        data(){
            return{
                mixinName:'葫芦'
            }
        },
        mounted(){
            console.log( "混入对象" +this.mixinName);
        }
    }

    var Myheader = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}---{{mixinName}}
                <button @click="chuanzhi">发送一条信息</button>    
            </div>
        `,
        
        data(){
            return{
                xingming:'林宇豪',
                Hp:100,
            }
        },
        methods:{
            chuanzhi(){
                this.$middleBus.$emit('jieshou','你好child01,我是child02');
            }
        },
        mixins:[commonMixin]
    }

    var Myheadererwa = {
        template:`
            <div>
                子组件
                {{xingming}}--{{Hp}}
                <button @click="jiao">叫爷爷</button>  
                <button @click="happyNewYear">给爷爷拜年</button>  
                二娃 = {{age}} -- {{nengli}}
            </div>
        `,
        data(){
            return{ 
                xingming:'王导',
                Hp:0,
            }
        },
        methods:{
            see(){
                console.log("再看岛国动作片");
            },
            jiao(){
                this.$parent.name="爷爷"
            },
            happyNewYear(){
                // 触发自定义事件
                this.$emit('to-parent-event',this.xingming)
            }
            
        },
        mounted(){
            this.$middleBus.$on('jieshou',val=>{
                // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
                console.log(val);
            });
        },
        props:['age','nengli'],
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                changname:'小豪',
                nengli2:"千里眼,顺风耳"
            }
        },

        methods:{
            ouda(){
                console.log("孽子，打一顿");
                this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
                // if(this.$refs.dawa.Hp<=0){
                //     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
                // }
            },
            anwei(){
                console.log("抽了一巴掌，安慰了一下");
                this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
            },
            xiaodao(){
                this.$refs.erwa.see()            
            },
            bainian(xingming){
                console.log(xingming+"给您拜年了 ");
            }
            
        },
        components:{
            Myheader,
            Myheadererwa

        }

    })

    
</script>
</html>

在这里插入图片描述

全局混入

  • 定义个混入对象
  • 引入使用
Vue.mixin(myMixin);

注意

  • 当组件和混入对象含有同名选项时，这些选项将进行“合并”
  • 在选项发生冲突时以组件数据优先
  • 请谨慎使用全局混入，因为会使实例以及每个组件受影响

最后

祝大家： 愿每个人都能遵循自己的时钟，做不后悔的选择。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【算法题】螺旋矩阵II (求解n阶Z形矩阵)

【算法题】螺旋矩阵II (求解n阶Z形矩阵)

一、问题的提出 n阶Z形矩阵的特点是按照之(Z)字形的方式排列元素。n阶Z形矩阵是指矩阵的大小为nn&#xff0c;其中n为正整数。 题目描述 一个 n 行 n 列的螺旋(Z形)矩阵如图1所示&#xff0c;观察并找出填数规律。 图1 7行7列和8行8列的螺旋(Z形)矩阵 现在给出矩阵大小 n&…
阅读更多...
基于MIV的神经网络变量筛选

基于MIV的神经网络变量筛选

1.案例背景 一般神经网络中所包含的网络输人数据是研究者根据专业知识和经验预先选择好的,然而在许多实际应用中,由于没有清晰的理论依据,神经网络所包含的自变量即网络输入特征难以预先确定,如果将一些不重要的自变量也引入神经网络,会降低模型的精度,因此选择有意义的自变量特…
阅读更多...
驱动 - 20230816

驱动 - 20230816

练习 1.编写LED灯的驱动&#xff0c;可以控制三个灯&#xff0c;应用程序中编写控制灯的逻辑&#xff0c;要使用自动创建设备节点机制 驱动头文件 ledHead.h #ifndef __HEAD_H__ #define __HEAD_H__#define PHY_GPIOE_MODER 0X50006000 #define PHY_GPIOE_ODR 0X50006014 #d…
阅读更多...
leetcode228. 汇总区间

leetcode228. 汇总区间

题目 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范围 [a,b]…
阅读更多...
MySQL入门学习教程(三)

MySQL入门学习教程(三)

上一章给大家说的是数据库的视图&#xff0c;存储过程等等操作&#xff0c;这章主要讲索引&#xff0c;以及索引注意事项&#xff0c;如果想看前面的文章&#xff0c;url如下&#xff1a; MYSQL入门全套(第一部)MYSQL入门全套(第二部) 索引简介 索引是对数据库表中一个或多个…
阅读更多...
自动化安装系统（一）

自动化安装系统（一）

系统安装过程 加载boot loader加载启动安装菜单加载内核和initrd文件加载根系统运行anaconda的安装向导 安装光盘中与安装相关的文件 安装autofs启动后会自动出现/misc目录。 在虚拟机设置中添加CD/DVD&#xff0c;使用系统ISO文件&#xff0c;登录系统后mount /dev/cdrom …
阅读更多...
【Linux】进程的基本属性|父子进程关系

【Linux】进程的基本属性|父子进程关系

个人主页&#xff1a;&#x1f35d;在肯德基吃麻辣烫 我的gitee&#xff1a;Linux仓库 个人专栏&#xff1a;Linux专栏 分享一句喜欢的话&#xff1a;热烈的火焰&#xff0c;冰封在最沉默的火山深处 文章目录 前言进程属性1.进程PID和PPID2.fork函数创建子进程1&#xff09;为什…
阅读更多...
【深入了解PyTorch】PyTorch模型解释性和可解释性：探索决策过程与预测结果的奥秘

【深入了解PyTorch】PyTorch模型解释性和可解释性：探索决策过程与预测结果的奥秘

【深入了解PyTorch】PyTorch模型解释性和可解释性：探索决策过程与预测结果的奥秘 PyTorch模型解释性和可解释性：探索决策过程与预测结果的奥秘1. 引言2. 梯度可视化3. 特征重要性分析4. 结论PyTorch模型解释性和可解释性：探索决策过程与预测结果的奥秘 在机器学习和深度学习…
阅读更多...
【Docker】Docker使用之容器技术发展史

【Docker】Docker使用之容器技术发展史

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0…
阅读更多...
嵌入式学习之字符串

嵌入式学习之字符串

通过今天的学习&#xff0c;我主要提高了对sizeof 和 strlen、puts()、gets()、strcmp 、strncmp、strstr、strtok的理解。重点对sizeof的使用有了更加深刻的理解
阅读更多...
山东布谷科技直播软件开发WebRTC技术：建立实时通信优质平台

山东布谷科技直播软件开发WebRTC技术：建立实时通信优质平台

在数字化的时代&#xff0c;实时通信成为了人们远程交流的主要方式&#xff0c;目前市场上也出现了很多带有实时通信交流的软件&#xff0c;实时通信符合人们现在的需求&#xff0c;所以在直播软件开发过程中&#xff0c;开发者也运用了实时通信技术为直播软件加入了实时通信的…
阅读更多...
整理分享Springboot项目中java实现将数据库表中指定表中的的数据按条件导出生成Excel表格的功能实现（学习笔记）

整理分享Springboot项目中java实现将数据库表中指定表中的的数据按条件导出生成Excel表格的功能实现（学习笔记）

在Spring Boot中&#xff0c;我们可以使用Apache POI库来实现将数据库表中的数据导出为Excel表格。可以根据条件从数据库中查询数据并将其导出为Excel&#xff1a;如下 准备工作&#xff1a;首先&#xff0c;确保在你的项目中引入Apache POI依赖。在pom.xml文件中添加以下依赖项…
阅读更多...
系统架构设计专业技能 · 网络规划与设计（三）【系统架构设计师】

系统架构设计专业技能 · 网络规划与设计（三）【系统架构设计师】

系列文章目录 系统架构设计专业技能 网络规划与设计&#xff08;三&#xff09;【系统架构设计师】 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师…
阅读更多...
MAVEN利器：一文带你了解MAVEN以及如何配置

MAVEN利器：一文带你了解MAVEN以及如何配置

前言&#xff1a; 强大的构建工具——Maven。作为Java生态系统中的重要组成部分&#xff0c;Maven为开发人员提供了一种简单而高效的方式来构建、管理和发布Java项目。无论是小型项目还是大型企业级应用&#xff0c;Maven都能帮助开发人员轻松处理依赖管理、编译、测试和部署等…
阅读更多...
Centos8安装docker并配置Kali Linux图形化界面

Centos8安装docker并配置Kali Linux图形化界面

鉴于目前网上没有完整的好用的docker安装kali桌面连接的教程&#xff0c;所以我想做一个。 准备工作 麻了&#xff0c;这服务器供应商提供的镜像是真的纯净&#xff0c;纯净到啥都没有。 问题一&#xff1a;Centos8源有问题 Error: Failed to download metadata for repo ap…
阅读更多...
【实战】十一、看板页面及任务组页面开发（一） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十三）

【实战】十一、看板页面及任务组页面开发（一） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十三）

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…
阅读更多...
shell编程

shell编程

1.特殊变量 $n &#xff1a;n为数字&#xff0c;$0代表该脚本名称&#xff0c;$1-$9代表第一到第九个参数&#xff0c;十以上的参数&#xff0c;十以上的参数需要用大括号包含&#xff0c;如${10} $# &#xff1a;获取所有输入参数个数 $#&#xff1a;命令行中所有的参数&…
阅读更多...
卡巴斯基为基于Linux的嵌入式设备推出专用解决方案

卡巴斯基为基于Linux的嵌入式设备推出专用解决方案

导读卡巴斯基在其卡巴斯基嵌入式系统安全产品中引入了对 Linux 的支持。这种适应性强的多层解决方案现在为基于Linux的嵌入式系统、设备和场景提供优化的安全&#xff0c;合通常适用于这些系统的严格监管标准。 卡巴斯基在其卡巴斯基嵌入式系统安全产品中引入了对 Linux 的支持…
阅读更多...
非谓语动词1（背）

非谓语动词1（背）

非谓语动词的概述 for:对某人来说做某事是怎么怎么样的 of&#xff1a;人的内在品质,你真的太怎么怎么样了 非谓语动词作主语 非谓语动词作宾语 非谓语动词作表语 现在分词作表语时时常时形容事物的 过去分词作表语一般是形容人的 非谓语动词作补语 注&#xff1a;无论是使役…
阅读更多...
星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

#AIGC技术内容创作征文&#xff5c;全网寻找AI创作者&#xff0c;快来释放你的创作潜能吧&#xff01;# 文章目录 1 前言2 测试详情2.1 文案写作2.2 知识写作2.3 阅读理解2.4 语意测试&#xff08;重点关注&#xff09;2.5 常识性测试&#xff08;重点关注&#xff09;2.6 代码…
阅读更多...
最新文章

Copyright @ 2022~2023