Vue2（组件开发）

news2024/12/28 5:49:49

目录

      • 前言
      • 一，组件的使用
      • 二，插槽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);

注意

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

最后

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

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

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

相关文章

JL701N编译后查看内存使用情况

JL701N编译后查看内存使用情况

编译之后&#xff0c;可以在 cpu/br28/tools/sdk.map 中查看实际的使用情况.
阅读更多...
MySQL 账号权限

MySQL 账号权限

mysql 在安装好后&#xff0c;默认是没有远端管理账号。 一、账号管理 1. 查看账号列表 MySQL用户账号和信息存储在名为 mysql 的数据库中。一般不需要直接访问 mysql 数据库和表&#xff0c;但有时需要直接访问。例如&#xff0c;查看数据库所有用户账号列表时。 USE mysql; …
阅读更多...
第G2周：人脸图像生成（DCGAN）

第G2周：人脸图像生成（DCGAN）

&#x1f368; 本文为[&#x1f517;365天深度学习训练营]内部限免文章&#xff08;版权归 *K同学啊* 所有&#xff09; &#x1f356; 作者&#xff1a;[K同学啊] 1. DCGAN原理 深度卷积对抗网络&#xff08;Deep Convolutional Generative Adversarial Networks, DCGAN&#…
阅读更多...
Python的十二道编程题，码住战胜一切

Python的十二道编程题，码住战胜一切

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 一、计算文件大小 import os def get_size(path):size 0l [path]while l:path l.pop()lst os.listdir(path)for name in lst:son_path os.path.join(path,name)if os.path.isfile(son_path):size os.path.getsize(son_…
阅读更多...
个人博客系统测试报告

个人博客系统测试报告

文章目录 一、功能测试1.编写测试用例2.总结测试后发现的BUG 二、UI自动化测试0.搭建测试环境1. 创建公共类2.注册页面UI自动化测试用例编写3.登录页面UI自动化测试用例编写4.用户博客列表页面自动化测试5. 修改个信息页面6. 文章编辑页面7. 设置密保问题发现bug 8. 所有用户文…
阅读更多...
QTreeView显示多级多列目录

QTreeView显示多级多列目录

效果图&#xff1a; 头文件&#xff1a; QStandardItemModel *m_treeMode;源文件 m_treeMode new QStandardItemModel(0,1,this);ui->treeView->setModel(m_treeMode);//控制第一列节点个数int mainLevel 3;for (int i 0; i < mainLevel; i) {QList<QStandar…
阅读更多...
【设计模式】非GOF的常见设计模型

【设计模式】非GOF的常见设计模型

结构型模式 系列综述&#xff1a; 来源&#xff1a;该系列是主要参考《大话设计模式》和《设计模式(可复用面向对象软件的基础)》&#xff0c;其他详细知识点拷验来自于各大平台大佬的博客。 总结&#xff1a;设计模式汇总篇 如果对你有用&#xff0c;希望关注点赞收藏一波。 文…
阅读更多...
无需停服！PostgreSQL数据迁移工具-NineData

无需停服！PostgreSQL数据迁移工具-NineData

PostgreSQL 是一种备受开发者和企业青睐的关系型数据库&#xff0c;其丰富的数据类型、地理空间负载和强大的扩展能力等特性使其备受欢迎。然而&#xff0c;在企业使用 PostgreSQL 承载应用的过程中&#xff0c;由于业务需要上云、跨云、下云、跨机房迁移、跨地域迁移、数据库版…
阅读更多...
C语言学习笔记---操作符详解

C语言学习笔记---操作符详解

C语言程序设计笔记---012 C语言操作符1、算数操作符1.1、算术操作符例程 2、移位操作符2.1、移位操作符例程12.2、移位操作符例程22.3、移位操作符例程3 3、位操作符3.1、位操作符例程13.2、位操作符例程23.3、位操作符例程3 --按位与&1扩展3.4、位操作符例程4 --按位异或^…
阅读更多...
使用SpringAop切面编程通过Spel表达式实现Controller权限控制

使用SpringAop切面编程通过Spel表达式实现Controller权限控制

目录 参考一、概念SpEL表达式 二、开发引入包定义注解定义切面定义用户上下文 三、测试新建Service在方法上注解新建Service在类上注解运行 参考 SpringBoot&#xff1a;SpEL让复杂权限控制变得很简单 一、概念 对于在Springboot中&#xff0c;利用自定义注解切面来实现接口…
阅读更多...
LVGL学习笔记 30 - List（列表）

LVGL学习笔记 30 - List（列表）

目录 1. 添加文本 2. 添加按钮 3. 事件 4. 修改样式 4.1 背景色 4.2 改变项的颜色 列表是一个垂直布局的矩形&#xff0c;可以向其中添加按钮和文本。 lv_obj_t* list1 lv_list_create(lv_scr_act());lv_obj_set_size(list1, 180, 220);lv_obj_center(list1); 部件包含&…
阅读更多...
Linux命令200例：adduser用于创建新用户

Linux命令200例：adduser用于创建新用户

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…
阅读更多...
求Win11系统virtualbox+vagrant安装MacOS虚拟机

求Win11系统virtualbox+vagrant安装MacOS虚拟机

文章目录 一、背景二、素材2.1、virtualboxvagrant 三、问题3.1、安装失败3.2、第二个失败3.3、网络说 四、求助 一、背景 题主&#xff0c;主要是穷&#xff0c;没钱买mac笔记本或相关系统的苹果产品&#xff0c;哈哈&#xff0c;偶尔也有用过MacOS系统&#xff0c;只是还没有…
阅读更多...
app专项测试：app弱网测试

app专项测试：app弱网测试

目录 弱网测试背景 网络测试要点 弱网测试关注指标 弱网测试工具 fiddler模拟网络延时场景 网络设置参考 Network Emulator Toolkit模拟网络丢包场景&#xff08;windows网络&#xff09; APP弱网测试 弱网使用工具&#xff1a; app弱网测试要点 APP网络测试要点 网络…
阅读更多...
OpenCV图像处理——模版匹配和霍夫变换

OpenCV图像处理——模版匹配和霍夫变换

目录 模版匹配原理实现 霍夫变换霍夫线检测 模版匹配 原理 实现 rescv.matchTemplate(img,template,method)import numpy as np import cv2 as cv import matplotlib.pyplot as pltimgcv.imread(./汪学长的随堂资料/6/模板匹配/lena.jpg) templatecv.imread(./汪学长的随堂资…
阅读更多...
一文搞懂Jenkins持续集成解决的是什么问题

一文搞懂Jenkins持续集成解决的是什么问题

1、持续集成的定义 大师 Martin Fowler 是这样定义持续集成的: 持续集成是一种软件开发实战, 即团队开发成员经常集成他们的工作. 通常, 每个成员每天至少集成一次, 也就意味着每天可能发生多次集成. 持续集成并不能消除Bug, 而是让它们非常容易发现和改正. 根据对项目实战的…
阅读更多...
uniapp开发小程序-有分类和列表时，进入页面默认选中第一个分类

uniapp开发小程序-有分类和列表时，进入页面默认选中第一个分类

一、效果&#xff1a; 如下图所示&#xff0c;进入该页面后&#xff0c;默认选中第一个分类&#xff0c;以及第一个分类下的列表数据。 二、代码实现&#xff1a; 关键代码&#xff1a; 进入页面时&#xff0c;默认调用分类的接口&#xff0c;在分类接口里做判断&#xff…
阅读更多...
Android 网络编程-网络请求

Android 网络编程-网络请求

Android 网络编程-网络请求 文章目录 Android 网络编程-网络请求一、主要内容二、开发网络请求前的基本准备1、查看需要请求的网址是否有效&#xff08;1&#xff09;通过网页在线验证&#xff08;2&#xff09;使用专用window网咯请求工具&#xff08;3&#xff09;编写app代码…
阅读更多...
less学习语法

less学习语法

1.CSS函数的补充 1.rgb/rgba/translate/rotate/scale 2.非常好用的css函数&#xff1a; var:使用css定义的变量calc:计算css值&#xff0c;通常用于计算元素的大小或位置blur:毛玻璃&#xff08;高斯模糊&#xff09;效果gradient:颜色渐变函数 var:定义变量 css中可以自定…
阅读更多...
关于青少年学习演讲与口才对未来的领导力的塑造的探析

关于青少年学习演讲与口才对未来的领导力的塑造的探析

标题&#xff1a;青少年学习演讲与口才对未来领导力的塑造&#xff1a;一项探析 摘要&#xff1a; 本论文旨在探讨青少年学习演讲与口才对未来领导力的塑造的重要性和影响。通过分析演讲和口才对青少年的益处&#xff0c;以及如何培养这些技能来促进领导力的发展&#xff0c;我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023