2024.10月18日- Vue2组件开发（3）

Vue组件开发

一、 ref属性

如果在vue里，想要获取DOM对象，并且不想使用JS的原生语法，那么就可以使用ref属性。ref属性的用法：

1）在HTML元素的开始标记中，或者在Vue子组件中的开始标记中定义，相当于id的替代者

html元素上： <h1 ref="xxx"></h1> 
Vue组件上：  <School ref="xxx"></School>

2）获取方式： 在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象（vc）this.$refs.xxx

src/components/School.vue

<template><div class="hello"><h1>{{ schoolName }}</h1></div>
</template>
​
<script>
export default {name: 'School',data(){return {schoolName: "水利电力学院"}}
}
</script>
​

App.vue

<template><div id="app"><h1 v-text="msg" id="title"  ref="title1"></h1><button ref="btn" @click="showInfo">点我显示信息</button><School ref="sch" id="sch1"/></div>
</template>
​
<script>
import School from './components/School.vue'
export default {name: 'App',components: {School},data(){return {msg:"哈哈哈"}},methods:{showInfo(){//console.log(document.getElementById("title"))console.log(this.$refs.title1)  //真实DOM元素console.log(this.$refs.btn)  //真实DOM元素console.log(this.$refs.sch)  //School组件的实例对象(vc)console.log(document.getElementById("sch1"))}}
}
</script>

二、 scoped 样式

2.1 简介

所有组件的style，都会被汇总到一起，如果style中设置的样式名有重复的，那么可能就会后引入的组件的样式会覆盖掉先引入组件的样式。

此时，我们可以在组件的style开始标记里，使用scoped属性，来设置style样式只针对当前组件生效，即局部生效。

注意：App.vue不适合使用scoped属性。

2.2 案例演示

School.vue

<template><div class="demo"><h1>学校信息</h1><h3>学校名称: {{ name }}</h3><h3>学校地址：{{ address }}</h3></div>
</template>
<script>export default {name:"School",data(){return {name:"水利电力",address:"长春净月"}}}
</script>
<!-- scoped  是组件中的样式属性，设置后，只针对于当前组件的样式生效 -->
<style scoped>.demo{background-color:rgb(0, 174, 255);}
</style>

Student.vue

<template><div class="demo"><h1>学生信息</h1><h3>学生名称: {{ name }}</h3><h3>学生年龄：{{ age }}</h3></div>
</template>
​
<script>export default {name:"Student",data(){return {name:"张三",age:18}}}
</script>
​
<style scoped>.demo{background-color: rgb(38, 136, 123);}
</style>

App.vue

<template><div class="demo"><h1>正在学习Vue</h1><School></School><hr><Student></Student></div>
</template>
​
<script>import Student from "./components/Student.vue"import School from "./components/School.vue"export default{name:"App",components:{School,Student},}
</script>
​
<!-- App.vue中写样式，目的是为了其所包含的内容都是该样式，因此不适合使用scoped -->
<style>h1{color:red}
</style>

三、 组件通信属性

3.1 什么是组件通信

组件的数据是独立的，无法直接访问其他组件的数据；想使用其他组件的数据，就需要组件通信。组件通信，就是指组件与组件之间的数据传递。

3.2 通信解决方案

3.3 父子通信流程

  1. 父组件通过 props 将数据传递给子组件

  2. 子组件利用 $emit 通知父组件修改更新

 

3.4 父>子通信代码演示

父向子传值步骤

第一步：在父组件中，编写子组件标签时，添加属性和属性值，也就是键值对的形式设置属性和具体值。(发起通信)

<Student  name="李四" gender="女" :age="18"/>         :是v-bind的简写，表示18是表达式

第二步：子组件内部通过props配置项，来接收。(收到通信)

三种配置方式:
-1).简单声明接受信息:  props: ['name','gender','age']
-2).接受的同时限定类型:props:{name:String,gender:String,age:Number}
-3). 限定类型，必要性，默认值等props:{name:{type:String, //约束类型required:true //约束必要性},gender:{type:String,default:"女"  //约束默认值},age:{type:Number,default:100}}

第三步：子组件模板中可以直接使用props接收的值

案例演示：

父组件App.vue

<template><div id="app"><Student  name="李四" gender="女" :age="18" x="1"/><hr><Student  name="王五"/></div>
</template>
​
<script>
import Student from './components/Student.vue'
​
export default {name: 'App',components: {Student},data(){return {msg:"哈哈哈"}},
}
</script>

子组件Student.vue

<template><div><h1>{{msg}}</h1><h2>学生姓名:{{ name }}</h2><h2>学生性别:{{ gender }}</h2><!-- <h2>学生年龄:{{ age+1 }}</h2> --><h2>学生年龄:{{ myAge+1 }}</h2><button @click="add">点我年龄+1</button></div>
</template>
​
<script>
export default {name: 'Student',data(){console.log(this)return {msg:"水利电力学院的学生",// age:18,      props优先级myAge:this.age}},methods:{add(){this.myAge++}},// 简单声明接受// props:["name","gender","age"]// 接收的同时对数据进行类型限制/* props:{name:String,gender:String,age:Number} */
​props:{name:{type:String, //约束类型required:true //约束必要性},gender:{type:String,default:"女"  //约束默认值},age:{type:Number,default:100}}
​
}
</script>

注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

3.5 练习：

将父组件中的各种类型数据，传递给子组件。 只需要使用指令语法书写表达式即可。这种方式就可以自动推断数据类型了。  

 

3.6 子>父通信方式1

第一种方式： 通过父组件给子组件传递函数类型的props实现子给父传递数据。

App.vue

<template><div id="demo"><h1> 老师名字：{{teacherName}}</h1><h1> 学生名字：{{studentName}}</h1><!-- 编写子组件标签时，定义属性，传入函数名 --><Teacher :getTeacherData="getTeacherName"></Teacher><Student :getStudentData="getStudentName"/></div>
</template>
​
<script>
import Teacher from './components/Teacher.vue'
import Student from './components/Student.vue'
​
export default {name: 'App',components: {Teacher,Student},data:function(){return {teacherName:'',studentName:''}},methods:{// 定义函数getTeacherName:function(value){console.log("收到了Teacher组件传过来的名字:"+value);this.teacherName = value;},getStudentName(value){console.log("收到了Student组件传过来的名字:"+value);this.studentName = value;}
​}
}
</script>
<style scoped>#demo{background-color:blueviolet;border: 1px solid blueviolet;}
</style>

Teacher.vue

<template>
    <div>
        序号:<input type="text" :value="id"> <br>
        姓名:<input type="text" v-model="name"> <br>
        年龄:<input type="text" :value="age"> <br>
        性别:<input type="text" :value="gender"> <br>
       <!-- 绑定点击事件，设置回调函数为传过来的函数 -->
        <button @click="sendTeacherName">点我给父组件传值</button>
    </div>
</template>

<script>
export default {
    name:"Teacher",
    data(){
        return {
            id:1,
            name:"王老师",
            age:21,
            gender:'男'
        }
    },
   // 使用props来接受传入的属性-->函数
    props:['getTeacherData'],
    methods:{
        sendTeacherName(){
           //调用传过来的函数，将名字作为参数传入
            this.getTeacherData(this.name);
        }
    }
}
</script>

<style scoped>
    div{
        background-color: pink;
        margin: 20px;
    }
</style>

Student.vue

<template>
<div>序号:<input type="text" :value="id"> <br>姓名:<input type="text" :value="name"> <br>年龄:<input type="text" :value="age"> <br>性别:<input type="text" :value="gender"> <br><button @click="sendStudentName">点我给父组件传值</button></div>
</template>
​
<script>export default {name:"Student",data(){return {id:1001,name:"韩梅梅",age:21,gender:'女'}},props:['getStudentData'],methods:{sendStudentName(){//调用传过来的函数，将名字作为参数传入this.getStudentData(this.name);}}}
</script>
​
<style scoped>div{background-color: skyblue;margin:20px;}
</style>

四、 自定义事件

4.1 简介

除了js中的内置事件，Vue还允许开发者自定义事件。在Vue实例上有以下四个方法，来完成自定义事件的各种操作：

  • vm.$on: 自定义事件监听的核心方法。它允许开发者在Vue实例上注册监听器，以响应特定的事件。

    -1).监听器注册：通过vm.$on(eventName, callback)的形式，将callback函数注册为eventName事件的监听器。当事件被触发时，callback将被调用。
​
-2).执行顺序：事件触发时，所有注册的回调函数将按照它们注册的顺序依次执行。

  • vm.$emit： 自定义事件派发的核心方法。它允许开发者触发自定义事件，从而实现组件之间的通信。

    -1). 事件触发：通过vm.$emit(eventName)的形式，可以触发一个名为eventName的事件。
-2). 参数传递：使用vm.$emit(eventName, arg1, arg2, ...)触发事件时，可以传递多个参数。这些参数将按顺序传递给监听器的回调函数。

    ==vm.$emit在Vue组件系统中扮演着至关重要的角色，尤其是在子>父组件的通信中==

    -1).子组件触发：子组件通过调用vm.$emit来触发一个事件，该事件可以被父组件监听。
-2).父组件监听：父组件通过在子组件的引用上使用v-on指令来监听子组件触发的事件。

  • vm.$off ：移除自定义事件监听器的方法，它提供了一种机制来清理不再需要的事件监听，从而避免潜在的内存泄漏问题。

    -1) 移除机制：vm.$off([event, callback]),如果提供了事件名称和回调函数，则只移除特定的监听器；
-2).如果没有提供参数，则移除所有事件的所有监听器。:   vm.$off()
-3).灵活性：vm.$off的灵活性体现在可以根据实际情况选择移除单个监听器或全部监听器，以满足不同的开发需求。

    应用场景：

    -1).组件销毁：在Vue组件被销毁前，使用vm.$off移除所有注册的事件监听器，确保组件不会在销毁后继续触发事件，导致不可预期的行为。
-2).条件性监听：在某些情况下，事件监听可能只在特定条件下需要，一旦条件不再满足，就应该使用vm.$off移除监听器，以避免不必要的资源占用。

  • vm.$once :提供了一种机制，允许事件只被监听一次，在事件触发后自动移除监听器。

    -1).场景应用：适用于那些只需要执行一次的事件处理，例如初始化操作或一次性资源的加载。
-2).资源管理：通过确保监听器只触发一次，vm.$once有助于避免不必要的资源消耗和潜在的内存泄漏。

4.2 子>父通信方法2：v-on绑定自定义事件

绑定原理：

在编写的子组件标签上使用v-on或者@绑定自定义事件，实际上是将事件绑定到子组件实例对象的VueComponent上。当有人触发了子组件上的这个事件，就会回调绑定到该事件上的函数。

App.vue

<template><div id="demo"><h1> 老师名字：{{teacherName}}</h1><h1> 学生名字：{{studentName}}</h1><!-- 第二种方式：使用v-on|@方式自定义事件。 --><Teacher @getTeacherData="getTeacherName"/><Student @getStudentData="getStudentName"/></div>
</template>
​
<script>
import Teacher from './components/Teacher.vue'
import Student from './components/Student.vue'
​
export default {name: 'App',components: {Teacher,Student},data:function(){return {teacherName:'',studentName:''}},methods:{// 定义函数getTeacherName:function(value){console.log("收到了Teacher组件传过来的名字:"+value);this.teacherName = value;console.log(this);},getStudentName(value){console.log("收到了Student组件传过来的名字:"+value);this.studentName = value;}
​}
}
</script>
<style scoped>#demo{background: linear-gradient(to bottom right ,#2980b9,#ffffff);border: 1px solid #cefff1;}
</style>

Teacher.vue

<template><div>姓名:<input type="text" v-model="name"> <br>年龄:<input type="text" :value="age"> <br><button @click="sendTeacherName">点我给父组件传值</button></div>
</template>
​
<script>
export default {name:"Teacher",data(){return {name:"王老师",age:21,}},methods:{sendTeacherName(){//当有人点击了子组件上的按钮时，会执行sendTeacherName函数，我们在这个函数的逻辑体中，//使用$emit方法来触发该组件实例对象VueComponent上绑定的事件，并且可以传入其他参数//将参数传入回调函数中。this.$emit('getTeacherData',this.name)}}
}
</script>
​
<style scoped>div{background-color: #a6acec;margin: 20px;}
</style>

Student.vue

<template>
<div>
   姓名:<input type="text" :value="name"> <br>
   年龄:<input type="text" :value="age"> <br>
   <button @click="sendStudentName">点我给父组件传值</button>
   </div>
</template>

<script>
   export default {
      name:"Student",
      data(){
         return {
            name:"韩梅梅",
            age:21,
         }
      },
      methods:{
         sendStudentName(){
            //当有人点击了子组件上的按钮时，会执行sendTeacherName函数，我们在这个函数的逻辑体中，
            //使用$emit方法来触发该组件实例对象VueComponent上绑定的事件，并且可以传入其他参数
            //将参数传入回调函数中。
            this.$emit('getStudentData',this.name)
         }
      }
   }
</script>
<style scoped>
   div{
      background-color:#ace7ef;
      margin:20px;
   }
</style>

4.3 子>父通信方法3：$on绑定自定义事件

App.vue

<template><div id="demo"><h1> 老师名字：{{teacherName}}</h1><h1> 学生名字：{{studentName}}</h1><!-- 第三种方式：使用ref和$on方式来自定义事件，更加灵活。 --><Teacher ref="teacher"/><Student ref="student"/></div>
</template>
​
<script>
import Teacher from './components/Teacher.vue'
import Student from './components/Student.vue'
​
export default {name: 'App',components: {Teacher,Student},data:function(){return {teacherName:'',studentName:''}},methods:{// 定义函数getTeacherName:function(value){console.log("收到了Teacher组件传过来的名字:"+value);this.teacherName = value;console.log(this);},getStudentName(value){console.log("收到了Student组件传过来的名字:"+value);this.studentName = value;}},mounted(){// 通过$refs属性获取组件实例对象，然后使用$on来绑定事件，这样的方式更加灵活this.$refs.teacher.$on('getTeacherData',this.getTeacherName)this.$refs.student.$on('getStudentData',this.getStudentName)}
}
</script>
<style scoped>#demo{background: linear-gradient(to bottom right ,#2980b9,#ffffff);border: 1px solid #cefff1;}
</style>

4.4 总结：组件的自定义事件

1）一种组件间通信的方式，适用于：子组件 ====> 父组件通信

2）使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调函数在A中）

3）绑定自定义事件：

  • 第一种方式，在父组件中：<Demo @pClick="test"/> 或 <Demo v-on:pClick="test"/>

  • 第二种方式，在父组件中： 使用ref和$on

<Demo ref="demo"/>
mounted(){
    this.$refs.demo.$on('pClick',data)
} 

4）若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

5）触发自定义事件：this.$emit('pClick',数据)

6）解绑自定义事件：this.$off('pClick')

7）组件上也可以绑定原生DOM事件，需要使用native修饰符

 <Demo @click.native=“f1()”>

注意：通过this.$refs.xxx.$on('pClick',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

4.5 全局事件总线：任意组件之间通信

全局事件总线（GlobalEventBus）是一种可以在任意组件间通信的方式，本质上就是一个对象。它必须满足以下条件：

1. 所有的组件对象都必须能看见他  
2. 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件

步骤1）安装全局事件总线：

new Vue({...beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},...
})

步骤2）使用事件总线：

  • 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

export default {methods(){demo(data){...}}...mounted() {this.$bus.$on('xxx',this.demo)}
}

  • 提供数据：B组件想要提供数据，则在B组件中触发$bus身上的自定义事件

this.$bus.$emit('xxx',data)

建议：最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
     //定义一个全局总线，也就是所有组件都可以访问到的对象
    Vue.prototype.$bus = this
  },
}).$mount('#app')

Student.vue

<template><div>姓名:<input type="text" v-model="name"> <br>年龄:<input type="text" :value="age"> <br><button @click="sendToTeacher" >点我给Teacher组件传值</button></div>
</template>
​
<script>
export default {name:"Teacher",data(){return {name:"韩梅梅",age:21,}},methods:{sendToTeacher(){console.log("给teacher组件发送信息")this.$bus.$emit('getStudentSendData',this.name);},getTeacherSendData(value){console.log("获取Teacher发送过来的信息");this.name = value;}},mounted() {this.$bus.$on('getTeacherSendData',this.getTeacherSendData)},beforeDestroy(){this.$bus.$off('getTeacherSendData')}
}
</script>
​
<style scoped>div{background-color: pink;margin: 20px;}
</style>

Teacher.vue

<template>
    <div>
        姓名:<input type="text" v-model="name"> <br>
        年龄:<input type="text" :value="age"> <br>
        <button @click="sendToStudent" >点我给Student组件传值</button>
    </div>
</template>

<script>
export default {
    name:"Teacher",
    data(){
        return {
            name:"王老师",
            age:21
        }
    },
    methods:{
        sendToStudent(){
            console.log("给Student发送信息");
            this.$bus.$emit('getTeacherSendData',this.name)
        },
        getStudentSendData(value){
            console.log("获取Student发送过来的信息");
            this.name = value;
        }
    },
    mounted() {
        this.$bus.$on('getStudentSendData',this.getStudentSendData)
    },
    beforeDestroy(){
        this.$bus.$off('getStudentSendData')
    }
}
</script>

<style scoped>
    div{
        background-color: skyblue;
        margin: 20px;
    }
</style>

 

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

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

相关文章

第 5 章：vuex

第 5 章：vuex

1. 理解 vuex vuex 是什么&#xff1a; 概念&#xff1a;专门在 Vue 中实现集中式状态&#xff08;数据&#xff09;管理的一个 Vue 插件&#xff0c;对 vue 应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&am…
阅读更多...
ant design vue TimePicker时间选择器不点击确认也可以设置值

ant design vue TimePicker时间选择器不点击确认也可以设置值

文章目录 前言一、背景二、操作步骤1.复现前的准备工作&#xff08;1&#xff09;vue版本和ant design vue 版本&#xff08;2&#xff09;任意ant design vue TimePicker的demo 2.解决问题&#xff08;1&#xff09;使用change时间&#xff08;无效&#xff09;&#xff08;2&…
阅读更多...
DEV C++自动补全文件头的设置操作

DEV C++自动补全文件头的设置操作

第一步&#xff1a;打开DEV C 第二步&#xff1a;打开“工具” 第三步&#xff1a;点击“编辑器属性” 第四步&#xff1a;点击“代码” 第五步&#xff1a;点击“缺省源” 第六步&#xff1a;输入常用的文件头代码&#xff1a; 例如&#xff1a; #include<bits/stdc.h&g…
阅读更多...
数据结构（JAVA）包装类泛型

数据结构（JAVA）包装类泛型

文章目录 包装类基本数据类型和对应的包装类装箱和拆箱面试题 泛型什么是泛型泛型的语法泛型类的使用泛型的使用裸类型(Raw Type) &#xff08;仅需了解&#xff09;擦除机制泛型的上界泛型方法 包装类 基本数据类型和对应的包装类 注意&#xff0c;除了int基本数据类型的包装…
阅读更多...
OracleT5-2 Solaris11安装

OracleT5-2 Solaris11安装

1、Solaris11安装 在光驱中插入Solaris11的光盘后，在ok提示中boot cdrom {0} ok boot cdrom NOTICE: Entering OpenBoot. NOTICE: Fetching Guest MD from HV. NOTICE: Starting additional cpus. NOTICE: Initializing LDC services. NOTICE: Probing PCI devices. N…
阅读更多...
玄机平台-应急响应-webshell查杀

玄机平台-应急响应-webshell查杀

首先xshell连接 然后进入/var/www/html目录中&#xff0c;将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务&#xff0c;将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…
阅读更多...
初识MySQL · 数据库

初识MySQL · 数据库

目录 前言&#xff1a; 数据库 简单使用 存储引擎 前言&#xff1a; 本文也是MySQL的第一篇文章了&#xff0c;新的知识点已经出现&#xff0c;怎么能够停止不前&#xff0c;穿越时空……(迪迦奥特曼乱入哈哈哈)。 言归正传&#xff0c;我们在本文的目标有&#xff1a; …
阅读更多...
Flink CDC同步mysql数据到doris

Flink CDC同步mysql数据到doris

前置参考 flink快速安装&#xff1a;Flink入门-CSDN博客 doris快速安装&#xff1a;Apache Doris快速安装-CSDN博客 Flink CDC简介 Flink CDC 是一个基于流的数据集成工具&#xff0c;旨在为用户提供一套功能更加全面的编程接口&#xff08;API&#xff09;。 该工具使得用户能…
阅读更多...
洞察云上风险，主机安全尽在掌握

洞察云上风险，主机安全尽在掌握

在实战攻防演练中&#xff0c;主机一直是攻击方的最终目标。作为网络架构中的重要组成部分&#xff0c;主机包含了大量的敏感数据、关键服务和系统资源。同时主机拥有网络资源的访问权限&#xff0c;攻击者通过入侵主机获得权限&#xff0c;进而控制整个网络或系统。因此做好主…
阅读更多...
vue2 Canvas 多边形区域绘制组件封装

vue2 Canvas 多边形区域绘制组件封装

效果预览&#xff1a; CanvasBox组件 <!-- 区域设置canvas --> <template><div class"all" ref"divideBox"><!-- <div><button click"test">清空</button></div> --><img id"img"…
阅读更多...
Ubuntu中MySQL远程登录设置

Ubuntu中MySQL远程登录设置

mysql单独放在一台Ubuntu服务器上&#xff0c;我远程连接不上。可能是安装的时候忘记设置远程登录了。事后补救措施如下&#xff1a; MySQL 绑定地址配置问题 MySQL 可能只绑定了 localhost&#xff0c;无法接受来自外部主机的连接。你需要检查 MySQL 的配置文件 /etc/mysql/…
阅读更多...
使用Vscode配置ftp连接远程服务器（上传本地文件）

使用Vscode配置ftp连接远程服务器（上传本地文件）

1.安装插件 扩展商店搜sftp，点击进行安装。 2.配置json文件 crtl+shift+p 输入ftp配置命令 sftp:config {"name": "My Server", //设置名字"host": "localhost"</
阅读更多...
腐蚀膨胀预处理

腐蚀膨胀预处理

腐蚀&#xff1a;通过减少前景对象&#xff08;例如白色字符&#xff09;的边缘&#xff0c;腐蚀可以用来减小或消除细小的干扰线。如果干扰线较细&#xff0c;腐蚀可以有效地“消除”这些线条&#xff0c;同时保留较粗的字符。 膨胀&#xff1a;在腐蚀之后&#xff0c;膨胀可…
阅读更多...
TCP——Socket

TCP——Socket

应用进程只借助Socket API发和收但是不关心他是怎么进行传和收的 数据结构 图示Socket连接 捆绑属于隐式捆绑
阅读更多...
数据驱动时代：五款免费报表工具深度解析

数据驱动时代：五款免费报表工具深度解析

在当今数据驱动的时代&#xff0c;报表工具已经成为各类企业进行决策和管理的重要工具。无论是大中型企业还是小微企业&#xff0c;能够快速、高效地生成可视化报表&#xff0c;洞察业务运营情况&#xff0c;已经成为提升竞争力的关键。今天为大家挑选了5款非常优秀的报表软件&…
阅读更多...
Autosar软件组件概述

Autosar软件组件概述

AUTOSAR中的应用软件设计为独立的软件单元&#xff0c;即软件组件类型&#xff08;SwComponentTypes&#xff09;&#xff0c;封装了相关功能和行为的实现&#xff0c;并通过端口原型&#xff08;PortPrototypes&#xff09;&#xff0c;向外部暴露自己。 AUTOSAR 标准应用了设…
阅读更多...
std::setw中文不能对齐的问题

std::setw中文不能对齐的问题

从别的博主那 copy过来 记录下 #include <codecvt> #include <locale>class chs_codecvt : public std::codecvt_byname<wchar_t, char, std::mbstate_t> {public:chs_codecvt() : codecvt_byname("zh_CN.GBK") {} };int encoding_diff(string …
阅读更多...
xtu oj 原根

xtu oj 原根

文章目录 回顾杂思路c 语言代码 回顾 AB III问题 H: 三角数问题 G: 3个数等式 数组下标查询&#xff0c;降低时间复杂度1405 问题 E: 世界杯xtu 数码串xtu oj 神经网络xtu oj 1167 逆序数&#xff08;大数据&#xff09; 杂 有一些题可能是往年的程设的题&#xff0c;现在搬到…
阅读更多...
Higress 重磅更新：AI 能力全面开源，云原生能力再升级

Higress 重磅更新：AI 能力全面开源，云原生能力再升级

作者&#xff1a;澄潭、钰诚 新版本简介 Higress 最新的 1.4 版本基于为通义千问&#xff0c;以及多家云上 AGI 厂商客户提供 AI 网关的积累沉淀&#xff0c;开源了大量 AI 原生的网关能力。同时也在 Ingress、可观测、流控等云原生能力上做了全方位升级&#xff1a; AI 能力…
阅读更多...
VS code部署Vue项目Demo

VS code部署Vue项目Demo

在之前已经在IDEA中部署过vue项目demo。本次在上次基础上进行。 IDEA中Vue的安装和使用【window10】_idea安装vue-CSDN博客 步骤一、安装VSCode 双击安装即可 步骤二&#xff1a;检查npm是否安装 步骤三&#xff1a;检查vue是否安装 &#xff08;vue create 项目名 只要在v…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023