vue2与vue3的使用区别与组件通信

1. 脚手架创建项目的区别:

  • vue2: vue init webpack “项目名称”
  • vue3: vue create “项目名称” 或者vue3一般与vite结合使用:
npm create vite@latest
yarn create vite

2. template中结构

  • vue2: template下只有一个元素节点
<template><div><div></div><div></div></div>
</template>
  • vue3:template下可以有多个元素节点
<template><div></div><div></div><div></div>
</template>

3. main.js入口文件挂载App.vue文件

  • vue2:
new Vue({app: '#app',router,...
})
  • vue3:使用createApp
import App from './App.vue'
import router from '../src/router/index.js'createApp(App).use(router).mount('#app')
// const app = createApp(App)
// app.use(router) // 挂载路由
// app.mount('#app')

4. router的区别

  • vue2:
在这里插入代码片
  • vue3: 使用createRouter,使用createRouter必须要写history
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),// history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: () => import('@/App.vue'),},{path: '/props_pre',component: () => import('@/components/props_test/PropsTest.vue'),},]
})export default router

5. setup的使用

  • vue2: 引入子组件需要使用compontents{}挂载
import xx from '..子组件...'
<script>export default {components: { xx }}
</script>
  • vue3:
    引入子组件:
<template><xx />
</template><script setup>import xx from '..子组件...';  // 引入子组件不需要再compontents{}挂载,在template中直接使用即可// 使用setup就不能使用export default{}导出了
</script>如果需要使用export default则:
<script>export default {setup() {...},}
</script>        

6. props的使用

  • vue2
子组件中:export default{props: {xx: {type: String/Number/Object/Array,default: ''/0/()=>{}/()=()=>{}}},// props:['xx1', 'xx2']}
  • vue3: 如果报错 ‘defineProps’ is not defined则在package.json文件eslintConfig{env: {‘vue/setup-compiler-macros’: true }}中添加’vue/setup-compiler-macros’: true
defineProps(['xx1', 'xx2'])不需要引入直接使用,返回一个对象,数组或者对象写法都可子组件中使用   let  props = defineProps(['xx1', 'xx2']), // 在template中props可以省略{{props.xx1}} => {{xx1}},props名字可以随便取<template><span>{{props.name}}</span> // 可以省略props,直接使用name <span>{{name}}</span>
</template>
<script setup>let props = defineProps(['name', 'age']);
</script>

7. ref的使用

  • vue2:
<template><Child ref="child1" />
</template>
// 使用
<script>export default {mouted() {console.log(this.$refs.child1); // 获取child1的ref有关数据}}
</script>
  • vue3: 需要先从vue中引入 ref, vue3中不可使用this
<template><Child :money = money /> // 子组件也是用defineProps(['money'])接收
</template><script setup>import { ref } from 'vue'let money = ref(10000)
</script>

8. 自定义事件

下面这个Event1组件上的@click:

  • 在vue2框架当中,这种写法是自定义事件,可以通过.native修饰符变为原生DOM事件
  • 在vue3框架当中,这种写法就是原生DOM事件,绑定自定义事件为<Event1 @xxx=“handlexxx” />
<template><Event1 @click="" />
</template>

自定义事件父子组件传值:
<Event2 @updateList=“handlexxx” />

  • vue2中子组件用this.$emit(‘updateList’, 参数1, 参数2)调用
  • vue3使用setup组合式APIZ没有实例不能用this.$emit,vue3中使用defineEmits方法返回函数触发自定义事件
<script setup>// 利用defineEmits方法返回函数触发自定义事件// defineEmits方法不需要引入直接使用let $emit = defineEmits(['updateList']);const handleUpdateList = () => {$emit('updateList', 参数1, 参数2);}
</script>

注意:

<template><Event2 @updateList="handle1" @click="handle2" />
</template><script setup>const handle1 = (参数1, 参数2) => {...}// click原生dom事件,点击就会执行const handle2 = (参数1, 参数2) => { // 子组件调用了父组件的click类型的方法,需要接收参数, 没调用传参时不用接收参数// alert(123) // 这是之前DOM事件时,点击就会执行...}
</script>

Event2子组件中

<template><button @click="$emit('click', 参数1, 参数2)">子组件调用父组件click自定义事件</button>
<template><script setup>let $emit = defineEmits(['updateList']); // 此时在父组件点击子组件会执行alert(123)let $emit = defineEmits(['updateList', 'click']); // 此时在父组件点击子组件不会执行alert(123),这里把click类型的DOM事件变成了自定义事件...$emit('updateList', 参数1, 参数2)
<script>

9. 组件通信方式之全局事件总线

  • vue2:兄弟组件通信 b u s ( bus( bus(on, $emit)
  • vue3:没有实例,没有this,所以不能使用$bus,使用插件mitt
1.安装mitt
npm i --save mitt
2.新建bus/index.js文件
mitt是一个方法(),方法执行会返回bus对象
import mitt from 'mitt'; // 引入mitt插件
const $bus = mitt(); // 名字随意取
export default $bus;
3.使用
在父组件中使用两个子组件
eventBus.vue中
<template><div class="box"><h1>全局事件总线$bus</h1><div class="dis-flex"><ChildBus1 /><ChildBus2 /></div></div>
</template><script setup>
import ChildBus1 from "./ChildBus1.vue";
import ChildBus2 from "./ChildBus2.vue";
</script>在ChildBus1子组件中监听接收
<template><div class="child1"><h3>我是子组件1: 曹植</h3></div>
</template><script setup>
import $bus from '../../bus/index.ts';
// 组合式API函数
import { onMounted } from "vue";
// 当组件挂载完毕时,当前组件绑定一个事件,接收将来兄弟组件传递的数据
onMounted(() => {// 第一个参数:即为事件类型,第二个参数:即为事件回调$bus.on('car', (car) => {console.log(car, '在回调函数内可以做这个组件相应的操作');})
})
</script>在ChildBus2子组件中发送
<template><div class="child2"><h2>我是子组件2:曹丕</h2><button @click="handleClick">点击我给我的兄弟送火箭</button></div>
</template><script setup>// 引入$bus对象import $bus from '../../bus/index.ts'; // 点击按钮回调const handleClick = () => {$bus.emit('car', {car: '火箭'});}
</script>

10. 组件通信方式之v-model

  • vue2:
  • vue3: 使用v-model, v-model不仅可以用来收集表单数据,实现数据双向绑定还可以用来父子组件之间通信
<template><input type="text" v-model="name" />
</template><script setup>
// v-model指令:收集表单数据,数据双向绑定
// v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
import { ref } from 'vue';
let name = ref('');
</script>在vue的3.3版本中新加了defineModel,但是跟ref一样需要引入
import { defineModel } from 'vue';
let xx = defineModel();

v-model组件身上使用

<Child :modelValue="money" @update:moneyModel="handleMoney" /> 等价与
/**v-model组件身上使用第一:相当于给子组件传递props['modelValue'], 名字一定要叫modelValue第二:相当于给子组件绑定自定义事件update:modelValue
*/
<Child v-model="money" />
// 如果是v-model:money="money"这样的话,子组件传递props['money'], 名字不一定要叫modelValue了
<Child v-model:money="money" /> // 跟多个v-model一样的,然后这样的不用再绑定自定义事件,$emit那边就能更改

父组件

<template><!-- <ChildModel1 :modelValue="money" @update:modelValue="handleUpdate" /> --><ChildModel1 v-model="money" /> // 这句就相当于上面那行代码,用了这行代码可能会有报错,handleUpdate声明了却没使用,页面上叉掉报错是能正常增加的
</template><script setup>import ChildModel1 from './ChildModel1.vue';
let money = ref(100);const handleUpdate = (num) => {money.value = num;
}
</script>

子组件

<template><div>父组件的钱:{{modelValue}}</div><button @click="handleClick">点击更改父组件钱</button>
</template><script setup>
const props = defineProps(['modelValue']);
const $emit = defineEmits(['update:modelValue']);
const handleClick = () => {$emit('update:modelValue', props.modelValue + 1);
}
</script>

设置多个v-model

<template><Child v-model:pageNo="pageNo" v-model:pageSize="pageSize" />
</template><script setup>import { ref } from 'vue';let pageNo = ref(1);let pageSize = ref(10);
</script>

11. 组件通信方式之useAttrs方法

vue3框架提供一个方法useAttrs方法,它可以获取组件身上的属性与事件

  • 父组件中调用子组件并传参:
<template><HintButton type="primy" :size="small" :icon="edit" />
</template><script setup>import HintButton from './HintButton.vue';
</script>
  • 在HintButton子组件中:
<template>// 使用$attrs<el-button :type="$attrs.type"></el-button>// 还可以使用语法<el-button :="$attrs"></el-button> // 这种写法相当于<h1 v-bind="{a: 1,b: 2}" /> => 可以简写为<h1 :="{a: 1,b: 2}" />
</template><script setup>// 1.这样可以获取子组件上的参数let props = defineProps(['type', 'size', 'icon']);// 2.引入useAttrs方法:获取组件标签身上的属性与事件,  此方法执行会返回一个对象import { useAttrs } from 'vue';let $attrs = useAttrs();
</script>

注意:使用defineProps接收过的参数,useAttrs()就接收不到了,defineProps(['xxx'])的优先级更高,useAttrs方法不仅能接收到父组件传过来的参数,还能接收事件(DOM原生click事件和自定义事件),比如<HintButton type="primy" :size="small" :icon="edit" @click="handle1" @handleUpdate="handle2" />

12. 组件通信方式之ref与$parent

ref: 可以获取真实的DOM节点,可以获取到子组件实例VC
$parent:可以在子组件内部获取到父组件的实例
获取子组件的实例,ref需要与组件名称同名: 比如

<Son ref="son" /> // ref的名称需要与ref获取的名字一样 比如<Son ref="account" /> 下面获取时需要名字相同 let account = ref();import { ref } from 'vue';
import Son from "./refSon.vue";
let son = ref();
console.log(son.value);

这样能拿到子组件实例,但拿不到子组件内部的数据,因为:
组件内部数据对外关闭的,别人不能访问,如果想让外部访问需要通过defineExpose方法对外暴露,这个方法不仅能暴露属性还能暴露方法
$parent,子组件必须使用这个名称可以拿到父组件的实例,父组件的属性也需要暴露出去

  • 父组件代码
<template><div class="box">父组件的钱:{{money}}<button @click="handler">父组件加10</button><Son ref="son" /><Daughter /></div>
</template><script setup>
import Son from "./refSon.vue";
import Daughter from "./refDaughter.vue";
import { ref } from "vue";
let money = ref(10000);
let son = ref();
const handler = () => {money.value += 10;// 儿子减10son.value.money -= 10;son.value.flyFun();
}
defineExpose({money // 暴露出去给daughter.vue组件使用
})
</script>
  • son组件代码:
<template><div class="son">儿子组件钱:{{money}}</div>
</template><script setup>
import { ref } from "vue";
let money = ref(666);// 组件内部数据对外关闭的,别人不能访问
// 如果想让外部访问需要通过defineExpose方法对外暴露,这个方法不仅能暴露属性还能暴露方法
const flyFun = () => {console.log('想飞咯');
}
defineExpose({money,flyFun
})
</script>
  • daughter组件代码
<template><div>女孩的钱:{{money}}<button @click="handler($parent)">点击+100</button> // 把父组件$parent实例作为参数传入函数中</div>
</template><script setup>
import { ref } from "vue";
let money = ref(999);
const handler = ($parent) => {money.value += 100;$parent.money -= 100;
}
</script>

13.组件通信方式之Provide与Inject

vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据
在爷爷组件使用provide(传递),在孙子组件inject(获取);

  • 爷爷组件:
<template><div class="box">provide: {{car}}<ChildPage /></div>
</template><script setup>
import ChildPage from "./childPage.vue";
import { ref, provide } from "vue";
let car = ref('豪车');
// vue3提供provide(提供)与infect(注入),可以实现隔辈组件传递数据
// 祖先组件给后代组件提供数据
// 两个参数:第一个参数就是提供的数据key
// 第二个参数:祖先组件提供数据
provide('TOKEN', car)
</script><style scoped>
.box {height: 500px;background: skyblue;
}
</style>
  • 父亲组件ChildPage.vue:中间组件:只需要导入孙子组件就行了
<template><div class="child">子组件<GrandChildPage /></div>
</template><script setup>
import GrandChildPage from "./grandChildPage.vue";
</script><style scoped>
.child {height: 300px;background: pink;
}
</style>
  • 孙子组件GrandChildPage.vue中使用inject()来获取,如果需要更改爷爷组件传递过来的属性值,直接修改 xx.value = ‘’即可。
<template><div class="box">孙子组件:{{car}}<button @click="updateCar">更新数据</button></div>
</template><script setup>
import { inject } from "vue";
// 注入祖先组件提供数据
// 需要参数:即为祖先提供数据的key
let car = inject('TOKEN');
console.log(car);const updateCar = () => {car.value = '自行车'; // 更改爷爷组件的car属性值
}
</script><style scoped>
.box {height: 100px;background: salmon;
}
</style>

13.组件通信之pinia组合式API

使用pinia需要先安装piaia: npm i pinia -D;
在src目录下新建store目录,创建index.js文件作为大仓库,需要在main.js入口文件中引入index.js文件并用使用use挂载

/**

  • vuex:集中式管理状态容器,可以实现任意组件之间的通信
  • 核心概念:state, mutations, actions, getters, modules
    */

/**

  1. pinia:集中式管理状态容器,可以实现任意组件之间通信
  2. 核心概念:state, actions, getters
  3. pinia写法:选择器API,组合式API
    */
  4. 选择器API
main.js入口文件...........
import { createApp } from 'vue'
import App from './App.vue'
import router from '../src/router/index.js'
import store from "./store/index.ts";
createApp(App).use(router).use(store).mount('#app')

在store目录下创建modules目录用来装小仓库:
src
----store文件夹
-------modules文件夹用来存放小仓库
---------------info.js小仓库使用defineStore:import { defineStore } from “pinia”;
-------index.js文件用来存放大仓库, 大仓库使用createPinia:import { createPinia } from “pinia”;

修改store数据:

  • 直接修改
import useInfoStore from '../store/modules/info.js'; 
let info = useInfoStore();
info.count ++ ; // 会改变store.count的值
  • 使用$patch修改
infoStore.$patch({count: 1111})
  • 直接调用仓库内的方法来修改值,可以传参
infoStore.updateNum();
infoStore.updateNum(66);
  • 在info小仓库内:
// 创建小仓库
import { defineStore } from "pinia";// 第一个参数: 小仓库名字, 第二个参数:小仓库配置对象
// defineStore方法会返回一个函数,函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore('info', {// 存储数据: statestate: () => {return {count: 99,arr: [1,2,3,4,5,6,7,8,9]}},actions: {// 注意:函数没有context上下文对象,但是有this,this指向的是这个小仓库updateNum() {this.count++;}},getters: {total() { // 有点像computer,需要return返回值let result = this.arr.reduce((pre, next) => {return pre + next;}, 0)return result;}}
});// 对外暴露方法
export default useInfoStore;
  • 在组件中使用info小仓库
<template><div class="child1">子组件1: {{infoStore.count}}------{{infoStore.total}}<button @click="updateCount">点击我,修改store数据</button></div>
</template><script setup>
import useInfoStore from "../../store/modules/info.ts";
// 获取小仓库对象
let infoStore = useInfoStore();
const updateCount = () => {// infoStore.count ++; // 这样是可以修改的// infoStore.$patch({//     count: 1111// }) // 这个方法也是可以修改的// 仓库调用自身的方法去修改仓库数据infoStore.updateNum();
}
</script>
  1. 组合式API
    todo.js代码
// 定义组合式API仓库
import { defineStore } from "pinia";
import { ref, computed } from "vue";// 创建小仓库
let useTodoStore = defineStore('todo', () => {let todos = ref([{id: 1,title: '吃饭'},{id: 2,title: '睡觉'}]);// let arr = [1,2, 3, 4, 5];let arr = ref([1, 2, 3, 4, 5]);const total = computed(() => {return arr.value.reduce((pre, next) => pre + next, 0);})// 务必要返回一个对象:属性与方法可以提供给组件使用return {todos,arr,total,updateTodo(){todos.value.push({id: 3,title: '打豆豆'})}}
});export default useTodoStore;

在组件中使用:

<template>
<p @click="updateTodo">{{todoStore.todos}}------{{todoStore.total}}</p>
</template><script setup>
import useTodoStore from "../../store/modules/todo.js";
let todoStore = useTodoStore();
// 点击p段落去修改仓库的数据
const updateTodo = () => {todoStore.updateTodo();
}
</script>

14. 组件通信方式之插槽

默认插槽,具名插槽,作用域插槽

  • 默认插槽:传递组件
    内容
    ,接收组件
父组件内:
<template>
<Child><div><pre>想要在子组件slot插槽展现的内容</pre></div>
</Child>
</template><script setup>
import Child from './Child.vue';
</script>
子组件内:
<template><slot></slot>
</template>
  • 具名插槽:传递组件使用或者<template #xxx>#号可以代替v-slot指令,简写。接收方使用
父组件内:
<template>
<Child><template v-slot:context><div>具名插槽内容</div></template>// v-slot指令可以简写为#<template #context><div>具名插槽内容</div></template>
</Child>
</template><script setup>
import Child from './Child.vue';
</script>
子组件内:
<template><slot name="context"></slot>
</template>
  • 作用域插槽:就是可以传递数据的插槽,子组件可以将数据回传给父组件,父组件可以决定这些回传的数据是以何种结构或者外观在子组件内部去展示
父组件:
<template><div><TestPage1 :todos="todos"><template v-slot="{$row, $index}"><span :style="{color: $row.done ? 'green' : 'red'}">{{$row.title}}---{{$index}}</span></template></TestPage1></div>
</template><script setup>
import TestPage1 from "./testPage1.vue";
/*** 插槽:默认插槽,具名插槽,作用域插槽*/
import { ref } from "vue";
// todos数据
let todos = ref([{id: 1, title: '吃饭', done: true},{id: 2, title: '睡觉', done: false},
])
</script>
<template><div><h1>作用域插槽</h1><ul><li v-for="(item, index) in todos" :key="item.id"><!-- 作用域插槽:可以将数据回传给父组件 --><slot :$row="item" :$index="index"></slot></li></ul></div>
</template><script setup>
// 通过props接收父组件传递数据
defineProps(['todos'])
</script>

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

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

相关文章

微信怎么定时发圈?

定时发圈的妙用 在合适的时间点发布新的产品、促销活动&#xff0c;不仅能够及时提醒用户品牌的存在&#xff0c;还可以引发用户的兴趣&#xff0c;增加品牌的曝光率。 选择最佳的发朋友圈时间段&#xff0c;以确保推广内容得到最大的曝光和关注&#xff0c;提高广告投放的效果…

录音怎么转换成mp3格式?支持二十多种格式

录音怎么转换成mp3格式&#xff1f;在我们的日常生活和工作中&#xff0c;录音是一项非常有用的工具&#xff0c;随着手机以及录音设备越来越普及化&#xff0c;让录音这件事情变得非常的简单&#xff0c;录音可以帮助我们解决非常多的事情。例如通过录音&#xff0c;我们可以记…

Redis十大数据类型

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

无涯教程-JavaScript - CUMIPMT函数

描述 CUMIPMT函数返回start_period和end_period之间的贷款累计利息。 语法 CUMIPMT (rate, nper, pv, start_period, end_period, type)争论 Argument描述Required/OptionalRateThe interest rate.RequiredNperThe total number of payment periods.RequiredPvThe present …

SpringBoot原理-自动配置-概述

自动配置 SpringBoot的自动配置就是当Spring容器启动后&#xff0c;一些配置类、bean对象就会自动存入IOC容器中&#xff0c;不需要我们手动去声明&#xff0c;从而简化了开发&#xff0c;省去了繁琐的配置操作。启动一个SpringBoot项目后&#xff0c;观察如下

Springboot后端导入导出excel表

一、依赖添加 操作手册&#xff1a;Hutool — &#x1f36c;A set of tools that keep Java sweet. <!--hutool工具包--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.20</versi…

【C++杂货铺】优先级队列的使用指南与模拟实现

文章目录 一、priority_queue的介绍二、priority_queue的使用2.1 数组中的第k个最大元素 三、priority_queue模拟实现3.1 仿函数3.2 成员变量3.3 成员函数3.3.1 构造函数3.3.2 AdjustDown3.3.3 push3.3.4 AdjustUp3.3.5 pop3.3.6 empty3.3.7 size 四、结语 一、priority_queue的…

PBR纹理的10种贴图

PBR 是基于物理的渲染的首字母缩写。它试图通过模拟材料如何吸收和反射光&#xff0c;以模仿现实世界中的光流的方式产生视觉效果。最近的游戏引擎由于其逼真的效果而越来越多地使用 PBR 纹理。对于实时渲染&#xff0c;它们被认为是真实世界场景的最佳近似值。 推荐&#xff…

windows命令行查看和终止进程

文章目录 指令和参数筛选器远程指令tasklist参数 windows批处理系列&#xff1a;初步&#x1fa9f;命令行设置 指令和参数 tasklist可以获取当前运行的程序列表。当不加参数时&#xff0c;其返回值包括5列&#xff0c;分别是映像名称&#xff0c;PID&#xff0c;会话名&#…

JAVA 从入门到起飞 day8 面向对象01

1.面向对象的介绍 老师的讲解&#xff1a; 面向&#xff1a;就相当于拿找 对象&#xff1a;能干活的东西 面向对象编程&#xff1a;拿东西过来做对应的事 我的理解: 让我们通过一个比喻来了解 JAVA 中的面向对象思想。 想象一下你正在建一座房子&#xff1a; 1. **类&#…

Jmeter系列进阶-获取图片验证码(4)

安装工具 通过ocrserver工具识别图片验证码&#xff0c;解压后 .exe双击启动即可。 jmeter中使用 &#xff08;1&#xff09;HTTP请求获取验证码 &#xff08;2&#xff09;在获取验证码图片的接口下面添加监听器》保存响应到文件&#xff1b;如下图&#xff1a; &#x…

Qt/C++音视频开发51-推流到各种流媒体服务程序

一、前言 最近将推流程序完善了很多功能,尤其是增加了对多种流媒体服务程序的支持,目前支持mediamtx、LiveQing、EasyDarwin、nginx-rtmp、ZLMediaKit、srs、ABLMediaServer等,其中经过大量的对比测试,个人比较建议使用mediamtx和ZLMediaKit,因为这两者支持的格式众多,不…

【Linux环境】编译器 gcc/g++的使用

​&#x1f47b;内容专栏&#xff1a; Linux操作系统基础 &#x1f428;本文概括&#xff1a; 预处理、编译、汇编、链接、动静态库、gcc选项等。 &#x1f43c;本文作者&#xff1a; 阿四啊 &#x1f438;发布时间&#xff1a;2023.9.13 背景知识 预处理&#xff08;进行宏替换…

Mobpush与A/B测试:覆盖多应用场景下的精细化运营神器

在信息爆炸的移动应用领域&#xff0c;实现长效稳定的用户增长的关键在于能够和用户建立互信、持久的联系。而优质的推送内容不仅可以提高用户参与度和留存率&#xff0c;还有助于增加收入、改善用户体验&#xff0c;以及建立强大的用户社区。但千人一面的推送很难同时满足不同…

算法|Day51 单调栈2

LeetCode 503- 下一个更大元素 II 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述&#xff1a;给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 num…

java运行以jar包的形式运行和tomcat运行的区别和联系?

Java 运行以 JAR 包形式和 Tomcat 运行之间存在一些区别和联系&#xff1a; 区别&#xff1a; 部署方式&#xff1a;JAR 包形式的 Java 应用可以作为独立的进程运行&#xff0c;通过命令行或脚本启动。而 Tomcat 是一个 Web 服务器和 Servlet 容器&#xff0c;需要将应用程序打…

Jmx协议远程连接java服务器

注意&#xff1a;本例里&#xff0c;我用的是jdk17 通常用jdk自带的jconsole&#xff0c;或者想要功能强大点的使用visualVM 需要java服务器在启动的时候加上以下参数 -Dcom.sun.management.jmxremote 启用jxm远程连接-Djava.rmi.server.hostname10.1.3.99 指定jxm监听地址&…

第一百四十天学习记录:工作相关:Qt5.14.2的安装

最近一段时间被新项目搞得心力憔悴。 加上需要调用一个同事的OpenCV库一直报错&#xff0c;后面发现是Qt版本不兼容的问题。 在尝试了在线安装Qt无果后&#xff0c;重新安装Qt&#xff0c;顺便回顾一下Qt的安装过程。 毕竟上一次安装Qt还是在2019年……之后的这4年工作电脑和家…

记录我在cmd里使用pip命令下载Python的包时碰见的两个错误

1、pip时报错&#xff1a;Defaulting to user installation because normal site-packages is not writeable 解决方法&#xff1a;在 pip install 后面加上 --user 即可&#xff0c;这个是权限不足引发的问题。如果还是不行则用镜像源&#xff0c;然后别忘了在镜像源的“inst…

欧科云链与HashKey Exchange达成合作,助力香港虚拟资产合规化

继8月10日 欧科云链 与 华为云 达成合作之后&#xff0c; 今天&#xff0c;欧科云链 又与 Hashkey Exchange 共同宣布正式达成合作&#xff01; 这次与Hashkey达成合作&#xff0c;双方又将在Web3行业中谱写怎样的故事&#xff1f; 9月6日&#xff0c;欧科云链控股有限公司&…