组件通信 Vue3

1.props

1.child

<template><div class="child"><h3>子组件</h3><h4>玩具：{{ toy }}</h4><h4>父给的车：{{ car }}</h4><button @click="sendToy(toy)">把玩具给父亲</button></div>
</template><script setup lang="ts" name="Child">import {ref} from 'vue'// 数据let toy = ref('奥特曼')// 声明接收propsdefineProps(['car','sendToy'])
</script><style scoped>.child{background-color: skyblue;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

2.father

<template><div class="father"><h3>父组件</h3><h4>汽车：{{ car }}</h4><h4 v-show="toy">子给的玩具：{{ toy }}</h4><Child :car="car" :sendToy="getToy"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref} from 'vue'// 数据let car = ref('奔驰')let toy = ref('')// 方法function getToy(value:string){toy.value = value}
</script><style scoped>.father{background-color:rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

2.自定义事件

1.child

<template><div class="child"><h3>子组件</h3><h4>玩具：{{ toy }}</h4><button @click="emit('send-toy',toy)">测试</button></div>
</template><script setup lang="ts" name="Child">import { ref } from "vue";// 数据let toy = ref('奥特曼')// 声明事件const emit =  defineEmits(['send-toy'])// emit('send-toy',toy)
</script><style scoped>.child{margin-top: 10px;background-color: rgb(76, 209, 76);padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

2.father

<template><div class="father"><h3>父组件</h3><h4 v-show="toy">子给的玩具：{{ toy }}</h4><!-- 给子组件Child绑定事件 --><Child @send-toy="saveToy"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";// 数据let toy = ref('')// 用于保存传递过来的玩具function saveToy(value:string){console.log('saveToy',value)toy.value = value}
</script><style scoped>.father{background-color:rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.father button{margin-right: 5px;}
</style>

3.mitt

1.安装mitt

npm i mitt
//引入mitt
import mitt from "mitt";
//调用mitt得到emitter  emiiter能：绑事件，触发事件
const emmiter =  mitt();// //绑定事件
// emmiter.on('test1',()=>{
//     console.log('test1被调用');// })
// emmiter.on('test2',()=>{
//     console.log('test2被调用');// })// console.log('a');// setInterval(()=>{
//     console.log('2秒后触发事件');//     emmiter.emit('test1');
//     emmiter.emit('test2');
// },1000)// setTimeout(()=>{
//     console.log('2秒后触发事件');//     // emmiter.off('test1');// emmiter.all.clear()
//     // emmiter.emit('test2');
// },3000)//暴露emmiter
export default emmiter;

2.father

<template><div class="father"><h3>父组件</h3><Child1/><Child2/></div>
</template><script setup lang="ts" name="Father">import Child1 from './Child1.vue'import Child2 from './Child2.vue'
</script><style scoped>.father{background-color:rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.father button{margin-left: 5px;}
</style>

3.child1

<template><div class="child1"><h3>子组件1</h3><h4>玩具：{{ toy }}</h4><button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button></div>
</template><script setup lang="ts" name="Child1">import {ref} from 'vue'import emitter from '@/utils/emmitter';// 数据let toy = ref('奥特曼')
</script><style scoped>.child1{margin-top: 50px;background-color: skyblue;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}.child1 button{margin-right: 10px;}
</style>

4.child2

<template><div class="child2"><h3>子组件2</h3><h4>电脑：{{ computer }}</h4><h4>哥哥给的玩具：{{ toy }}</h4></div>
</template><script setup lang="ts" name="Child2">import {ref,onUnmounted} from 'vue'import emitter from '@/utils/emmitter';// 数据let computer = ref('联想')let toy = ref('')// 给emitter绑定send-toy事件emitter.on('send-toy',(value:any)=>{toy.value = value})// 在组件卸载时解绑send-toy事件onUnmounted(()=>{emitter.off('send-toy')})
</script><style scoped>.child2{margin-top: 50px;background-color: orange;padding: 10px;box-shadow: 0 0 10px black;border-radius: 10px;}
</style>

4.v-model

1.child

<template><div><!-- <el-inputv-model="input"style="width: 240px"placeholder="Please input"clearable/> --><input type="text" :value="modelValue" @input="emit('update:modelValue',(<HTMLInputElement> $event.target).value)"></div>
</template><script setup lang="ts" name="AtguiguInput">
import { ref } from "vue";defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);</script><style lang="css" scoped>
input {border: 2px solid black;background-image: linear-gradient(45deg, red, yellow, green);height: 30;font-size: 20px;color: white;
}
</style>

 2.father

<template><div class="father"><h3>父组件</h3><!-- <input type="text" v-model="username"> --><!-- 双向绑定原理 --><!-- <input type="text" :value="username" @input="username = (<HTMLInputElement> $event.target).value" > --><!-- v-model用在组件标签上 --><AtguiguInput v-model="username" /><!-- 上面那行代码等价下面代码 本质 就是 往下传一个属性 ，一个事件， input改变的同时，触发事件，导致属性更新，有重新渲染模板 -->
<!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event" /> --></div>
</template><script setup lang="ts" name="Father">import { ref } from "vue";
import AtguiguInput from './AtguiguInput.vue'// 数据let username = ref('zhansgan')let password = ref('123456')
</script><style scoped>
.father {padding: 20px;background-color: rgb(165, 164, 164);border-radius: 10px;
}
</style>

可以写多个 

<template><div class="father"><h3>父组件</h3><h4>{{ username }}</h4><!-- <input type="text" v-model="username"> --><!-- 双向绑定原理 --><!-- <input type="text" :value="username" @input="username = (<HTMLInputElement> $event.target).value" > --><!-- v-model用在组件标签上 --><!-- <AtguiguInput v-model="username" /> --><!-- 上面那行代码等价下面代码 本质 就是 往下传一个属性 ，一个事件， input改变的同时，触发事件，导致属性更新，有重新渲染模板 -->
<!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event" /> --><!-- 修改modelvalue -->
<AtguiguInput v-model:name="username" v-model:pwd ="password"/></div>
</template><script setup lang="ts" name="Father">import { ref } from "vue";
import AtguiguInput from './AtguiguInput.vue'// 数据let username = ref('zhansgan')let password = ref('123456')
</script><style scoped>
.father {padding: 20px;background-color: rgb(165, 164, 164);border-radius: 10px;
}
</style>

5.$attrs

1.father

<template><div class="father"><h3>父组件</h3><h4>a：{{a}}</h4><h4>b：{{b}}</h4><h4>c：{{c}}</h4><h4>d：{{d}}</h4><Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref} from 'vue'let a = ref(1)let b = ref(2)let c = ref(3)let d = ref(4)function updateA(value:number){a.value += value}
</script><style scoped>.father{background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

2.child

<template><div class="child"><h3>子组件</h3><GrandChild v-bind="$attrs"/></div>
</template><script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script><style scoped>.child{margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

3.grandchild

<template><div class="grand-child"><h3>孙组件</h3><h4>a：{{ a }}</h4><h4>b：{{ b }}</h4><h4>c：{{ c }}</h4><h4>d：{{ d }}</h4><h4>x：{{ x }}</h4><h4>y：{{ y }}</h4><button @click="updateA(6)">点我将爷爷那的a更新</button></div>
</template><script setup lang="ts" name="GrandChild">defineProps(['a','b','c','d','x','y','updateA'])
</script><style scoped>.grand-child{margin-top: 20px;background-color: orange;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

6.$refs $parent

1.father

<template><div class="father"><h3>父组件</h3><h4>房产：{{ house }}</h4><button @click="changeToy">修改Child1的玩具</button><button @click="changeComputer">修改Child2的电脑</button><button @click="getAllChild($refs)">让所有孩子的书变多</button><Child1 ref="c1"/><Child2 ref="c2"/></div>
</template><script setup lang="ts" name="Father">import Child1 from './Child1.vue'import Child2 from './Child2.vue'import { ref,reactive } from "vue";let c1 = ref()let c2 = ref()// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的/* let obj = reactive({a:1,b:2,c:ref(3)})let x = ref(4)console.log(obj.a)console.log(obj.b)console.log(obj.c)console.log(x) */// 数据let house = ref(4)// 方法function changeToy(){c1.value.toy = '小猪佩奇'}function changeComputer(){c2.value.computer = '华为'}function getAllChild(refs:{[key:string]:any}){console.log(refs)for (let key in refs){refs[key].book += 3}}// 向外部提供数据defineExpose({house})
</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.father button {margin-bottom: 10px;margin-left: 10px;}
</style>

2.child1

<template><div class="child1"><h3>子组件1</h3><h4>玩具：{{ toy }}</h4><h4>书籍：{{ book }} 本</h4><button @click="minusHouse($parent)">干掉父亲的一套房产</button></div>
</template><script setup lang="ts" name="Child1">import { ref } from "vue";// 数据let toy = ref('奥特曼')let book = ref(3)// 方法function minusHouse(parent:any){parent.house -= 1}// 把数据交给外部defineExpose({toy,book})</script><style scoped>.child1{margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

3.child2

<template><div class="child2"><h3>子组件2</h3><h4>电脑：{{ computer }}</h4><h4>书籍：{{ book }} 本</h4></div>
</template><script setup lang="ts" name="Child2">import { ref } from "vue";// 数据let computer = ref('联想')let book = ref(6)// 把数据交给外部defineExpose({computer,book})
</script><style scoped>.child2{margin-top: 20px;background-color: orange;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

7.$provide $inject

1.father

<template><div class="father"><h3>父组件</h3><h4>银子：{{ money }}万元</h4><h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4><Child/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref,reactive,provide} from 'vue'let money = ref(100)let car = reactive({brand:'奔驰',price:100})function updateMoney(value:number){money.value -= value}// 向后代提供数据provide('moneyContext',{money,updateMoney})provide('car',car)</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

2.child

<template><div class="child"><h3>我是子组件</h3><GrandChild/></div>
</template><script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'
</script><style scoped>.child {margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

3.grandchild

<template><div class="father"><h3>父组件</h3><h4>银子：{{ money }}万元</h4><h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4><Child/></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref,reactive,provide} from 'vue'let money = ref(100)let car = reactive({brand:'奔驰',price:100})function updateMoney(value:number){money.value -= value}// 向后代提供数据provide('moneyContext',{money,updateMoney})provide('car',car)</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

8.插槽slot

1.默认插槽

1.child

<template><div class="category"><h2>{{title}}</h2><slot>默认内容</slot></div>
</template><script setup lang="ts" name="Category">defineProps(['title'])
</script><style scoped>.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}
</style>

2.father

<template><div class="father"><h3>父组件</h3><div class="content"><Category title="热门游戏列表"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category><Category title="今日美食城市"><img :src="imgUrl" alt=""></Category><Category title="今日影视推荐"><video :src="videoUrl" controls></video></Category></div></div>
</template><script setup lang="ts" name="Father">import Category from './Category.vue'import { ref,reactive } from "vue";let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;justify-content: space-evenly;}img,video {width: 100%;}
</style>

2.具名插槽

1.child

<template><div class="category"><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot></div>
</template><script setup lang="ts" name="Category"></script><style scoped>.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;}
</style>

2.father

<template><div class="father"><h3>父组件</h3><div class="content"><Category><template v-slot:s2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><template v-slot:s1><h2>热门游戏列表</h2></template></Category><Category><template v-slot:s2><img :src="imgUrl" alt=""></template><template v-slot:s1><h2>今日美食城市</h2></template></Category><!-- 语法糖。 简便写法 --><Category><template #s2><video video :src="videoUrl" controls></video></template><template #s1><h2>今日影视推荐</h2></template></Category></div></div>
</template><script setup lang="ts" name="Father">import Category from './Category.vue'import { ref,reactive } from "vue";let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;justify-content: space-evenly;}img,video {width: 100%;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}
</style>

3.作用域插槽

1.child

<template><div class="game"><h2>游戏列表</h2><slot :youxi="games" x="哈哈" y="你好"></slot></div>
</template><script setup lang="ts" name="Game">import {reactive} from 'vue'let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])
</script><style scoped>.game {width: 200px;height: 300px;background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}
</style>

2.father

<template><div class="father"><h3>父组件</h3><div class="content"><Game><template v-slot="params"><ul><li v-for="y in params.youxi" :key="y.id">{{ y.name }}</li></ul></template></Game><Game><template v-slot="params"><ol><li v-for="item in params.youxi" :key="item.id">{{ item.name }}</li></ol></template></Game><Game><template #default="{youxi}"><h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3></template></Game></div></div>
</template><script setup lang="ts" name="Father">import Game from './Game.vue'
</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;justify-content: space-evenly;}img,video {width: 100%;}
</style>

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

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

相关文章

通过visual studio进行dump文件调试和分析

通过visual studio进行dump文件调试和分析

0、前言 很多时候程序crash之后需要分析原因。对于C/C程序&#xff0c;一般最常见的场景和方法就是根据dump文件进行分析。 1、分析的前提条件 进行dump文件分析&#xff0c;需要以下文件&#xff1a; 进程crash时产生的dump文件程序源码进程对应的程序exe文件编译exe文件时产…
阅读更多...
【赵渝强老师】MongoDB的存储引擎

【赵渝强老师】MongoDB的存储引擎

存储引擎&#xff08;Storage Engine&#xff09;是MongoDB的核心组件&#xff0c;它负责管理数据如何存储在硬盘&#xff08;Disk&#xff09;和内存&#xff08;Memory&#xff09;上。从MongoDB 3.2 版本开始&#xff0c;MongoDB支持多种类型的数据存储引擎。 视频讲解如下&…
阅读更多...
使用twilio向手机发短信做监控报警

使用twilio向手机发短信做监控报警

最近遇到个需求&#xff0c;就是夜班HW希望有个监控系统指标&#xff0c;如果异常就向监控人手机打电话的需求。在考察以后&#xff0c;发现目前由于国内防电信诈骗的原因&#xff0c;所以想要使用云通讯功能必须由企业去申请&#xff0c;但作为一个个人的监控项目来说太大了。…
阅读更多...
Python | Leetcode Python题解之第384题打乱数组

Python | Leetcode Python题解之第384题打乱数组

题目&#xff1a; 题解&#xff1a; class Solution:def __init__(self, nums: List[int]):self.nums numsself.original nums.copy()def reset(self) -> List[int]:self.nums self.original.copy()return self.numsdef shuffle(self) -> List[int]:for i in range(l…
阅读更多...
极光推送（JPush）赋能登虹科技，打造智慧视觉云平台新体验

极光推送（JPush）赋能登虹科技，打造智慧视觉云平台新体验

近日&#xff0c;中国领先的客户互动和营销科技服务商极光&#xff08;Aurora Mobile&#xff0c;纳斯达克股票代码&#xff1a;JG&#xff09;与杭州登虹科技有限公司&#xff08;以下简称“登虹科技&#xff08;Closeli&#xff09;”&#xff09;达成合作&#xff0c;借助极…
阅读更多...
数分基础（03-3）客户特征分析--Tableau

数分基础（03-3）客户特征分析--Tableau

文章目录 客户特征分析 - Tableau1. 说明2. 思路与步骤3. 数据准备和导入3.1 用EXCEL初步检查和处理数据3.1.1 打开3.1.2 初步检查&#xff08;1&#xff09;缺失值检查缺失值处理 &#xff08;2&#xff09;格式化日期字段&#xff08;3&#xff09;其他字段数据类型 &#xf…
阅读更多...
【vscode】vscode+cmake+llvm+ninja开发环境的搭建(draft)

【vscode】vscode+cmake+llvm+ninja开发环境的搭建(draft)

文章目录 前言1 软件、工具和插件安装1.1 vscode安装1.2 cmake安装1.3 安装LLVM1.4 安装Ninja1.5 vscode插件安装 2 工具链和CMakeLists2.1 工具链&#xff08;toolchain.cmake&#xff09;2.2 CMakeLists.txt2.3 基本语法注释 前言 本文是一个使用vscode的小白扫盲贴。 所谓工…
阅读更多...
科讯档案管理系统存在SQL注入漏洞(0day)

科讯档案管理系统存在SQL注入漏洞(0day)

漏洞描述 安徽科迅教育装备20年来来始终坚持智慧校园集成方案产品的开发和部署应用&#xff0c;我们有完善的智慧校园和数字校园建设方案&#xff0c;根据不同的学校不同的实际情况量身定做系统集成方案。产品主要是为了实现校园的智慧网络、智慧OA、智慧教学、智慧学习、数字医…
阅读更多...
.NET Razor类库-热加载 就是运行时编译

.NET Razor类库-热加载 就是运行时编译

1.新建3个项目 1.1 一个.NET Standard2.1项目 IX.Sdk.SvnCICD4NuGet 1.2 一个.NET Razor类库项目 IX.Sdk.SvnCICD4NuGet.RazorWeb 1.3 一个.NET6 Web项目 IX.Sdk.SvnCICD4NuGet.Web 这3个项目的引用关系 Web引用 Razor类库 和 .NET Standard2.1 Razor类库引用.NET Standard2.1…
阅读更多...
数据同步大冒险：PostgreSQL到MySQL的奇妙之旅

数据同步大冒险：PostgreSQL到MySQL的奇妙之旅

引言&#xff1a;一场跨数据库的浪漫邂逅 &#x1f491; 在数据的世界里&#xff0c;不同数据库系统就像是来自不同星球的恋人&#xff0c;它们各自拥有独特的魅力&#xff0c;但偶尔也会渴望一场跨越界限的亲密接触。今天&#xff0c;我们就来见证一场PostgreSQL与MySQL之间的…
阅读更多...
基于RK3588+MCU智能清洁车应用解决方案

基于RK3588+MCU智能清洁车应用解决方案

智能清洁车应用解决方案 在智慧城市建设发展的过程中&#xff0c;智慧环卫是打造智慧城市的重要组成部分&#xff0c;智能清洁车作为实现环卫智能化、提升作业效率和服务质量的关键工具&#xff0c;发挥着不可或缺的作用。 智能清洁车集成了激光雷达、双目视觉、多重传感器以及…
阅读更多...
无线通信频率分配

无线通信频率分配

首先看看无线电信号的频谱如何划分&#xff1a; 一、5G NR 3GPP已指定5G NR 支持的频段列表&#xff0c;5G NR频谱范围可达100GHz&#xff0c;指定了两大频率范围&#xff1a; ① Frequency range 1 &#xff08;FR1&#xff09;&#xff1a;就是我们通常讲的6GHz以下频段 频率…
阅读更多...
uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺

uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺

做底部弹框的时候&#xff0c;可能出现以下场景需要处理。 一、出现底部留白不是白色&#xff0c;需要修改颜色的时候&#xff1a; 1、如果弹框不需要圆角效果&#xff0c;则在uni-popup加上背景色就行&#xff0c;弹框是个直角样式&#xff1a; 2、如果需要圆角效果&#xff0…
阅读更多...
CSS3页面布局-三栏-中栏流动布局

CSS3页面布局-三栏-中栏流动布局

三栏-中栏流动布局 用负外边距实现 实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位&#xff0c; 并在中栏内容区大小改变时控制右栏与布局的关系。 控制两个外包装容器的外边距&#xff0c;一个包围三栏&#xff0c;一个包围左栏和中栏。 <!DOCTYPE html&…
阅读更多...
【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用

【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用

文章目录 前言使用 electron-vue 创建项目1. 安装 vue-cli&#xff08;如果未安装&#xff09;2. 使用 electron-vue 模板创建项目3. 安装和配置 electron-builder4. 运行Electron项目5. 打包应用 可能遇到的问题解决Electron vue首次启动巨慢无法加载执行npm run electron:bui…
阅读更多...
grid布局实现移动端H5响应式排列正方形格子布局

grid布局实现移动端H5响应式排列正方形格子布局

grid布局实现移动端H5响应式排列正方形区域 grid布局&#xff1a;CSS Grid 网格布局教程在 CSS 中&#xff0c;padding-top 的百分比值是相对于元素自身的宽度&#xff0c;而不是高度。这是 CSS 规范中的一个特性&#xff0c;所有的 padding 和 margin 的百分比值都是相对于元…
阅读更多...
客服系统简易版

客服系统简易版

整体架构解读 客服端和商城端都通过websocket连接到客服系统, 并定期维持心跳当客户接入客服系统时, 先根据策略选择在线客服, 然后再发送消息给客服 websocket实现 用netty实现websocket协议, 增加心跳处理的handler, 详见chat-server模块 客服路由规则 暂时仅支持轮询的…
阅读更多...
上新！Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型

上新！Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型&#xff1b; 2.多图输出、多指标输出(MAE、RMSE、MSE、R2)&#xff0c;多输入单输出&#xff0c;含不同置信区间图、概率…
阅读更多...
出现Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错

出现Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错

目录&#xff1a; bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错解决方法 bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty 报错 在一个springboot demo启动的时候出现以下错误 &#xff0c;…
阅读更多...
中国城市经济韧性数据集（2007-2022年）

中国城市经济韧性数据集（2007-2022年）

数据来源&#xff1a;数据来自历年《中国城市统计NJ》、各省市《统计NJ》及《中国区域经济统计NJ》 时间范围&#xff1a;2007-2022年 数据范围&#xff1a;中国地级市样例数据&#xff1a; 包含内容&#xff1a; 全部内容下载链接&#xff08;原始数据计算代码最终数据&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023