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
*/
/**
- pinia:集中式管理状态容器,可以实现任意组件之间通信
- 核心概念:state, actions, getters
- pinia写法:选择器API,组合式API
*/ - 选择器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>
- 组合式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>
相关文章:
vue2与vue3的使用区别与组件通信
1. 脚手架创建项目的区别: vue2: vue init webpack “项目名称”vue3: vue create “项目名称” 或者vue3一般与vite结合使用: npm create vitelatest yarn create vite2. template中结构 vue2: template下只有一个元素节点 <template><div><div…...
亚信科技与中国信通院达成全方位、跨领域战略合作
9月11日,亚信科技(中国)有限公司「简称:亚信科技」与中国信息通信研究院「简称:中国信通院」在京达成战略合作,双方将在关键技术研发、产业链协同等方面展开全方位、跨领域、跨行业深度合作,共促…...
华为Linux系统开发工程师面试
在Linux系统开发工程师的面试中,你可能会遇到以下一些问题: 在同一个网站中,当客户访问的时候,会出现有的页面访问的速度快而有的慢,系统和服务完全正常、网络带宽正常,你如何诊断这个问题?你以…...
Qt利用QTime实现sleep效果分时调用串口下发报文解决串口下发给下位机后产生的粘包问题
Qt利用QTime实现sleep效果分时调用串口下发报文解决串口下发给下位机后产生的粘包问题 文章目录 Qt利用QTime实现sleep效果分时调用串口下发报文解决串口下发给下位机后产生的粘包问题现象解决方法 现象 当有多包数据需要连续下发给下位机时,比如下载数据等&#x…...
人工智能:神经细胞模型到神经网络模型
人工智能领域中的重要流派之一是:从神经细胞模型(Neural Cell Model)到神经网络模型(Neural Network Model)。 一、神经细胞模型 第一个人工神经细胞模型是“MP”模型,它是由麦卡洛克、匹茨合作࿰…...
Redisson分布式锁实战
实战来源 此问题基于电商 这周遇见这么一个问题,简略的说一下 由MQ发布了两个消息,一个是订单新增,一个是订单状态变更 由于直接付款之后,这两个消息的发布时间不分先后,可能会造成两种情况,1、订单状态变更…...
JavaScript中循环遍历数组、跳出循环和继续循环
循环遍历数组 上个文章我们简单的介绍for循环,接下来,我们使用for循环去读取数据的数据,之前我们写过这样的一个数组,如下: const ITshareArray ["张三","二愣子","2033-1997","…...
Java——》Synchronized和Lock区别
推荐链接: 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…...
JDK20 + SpringBoot 3.1.0 + JdbcTemplate 使用
JDK20 SpringBoot 3.1.0 JdbcTemplate 使用 一.测试数据库 Postgres二.SpringBoot项目1.Pom 依赖2.配置文件3.启动类4.数据源配置类5.实体对象类包装类6.测试用实体对象1.基类2.扩展类 7.测试类 通过 JdbcTemplate 直接执行 SQL 语句,结合源码动态编译即可方便实现…...
CTFhub_SSRF靶场教程
CTFhub SSRF 题目 1. Bypass 1.1 URL Bypass 请求的URL中必须包含http://notfound.ctfhub.com,来尝试利用URL的一些特殊地方绕过这个限制吧 1.利用?绕过限制urlhttps://www.baidu.com?www.xxxx.me 2.利用绕过限制urlhttps://www.baidu.comwww.xxxx.me 3.利用斜…...
【华为OD机试】单词接龙【2023 B卷|100分】
【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述: 单词接龙的规则是:可用于接龙的单词首字母必须要前一个单词的尾字母相同; 当存在多个首字母相同的单词时,取长度最长的单词,如果长度也相等, 则取字典序最小的单词;已经参与接龙…...
如何优雅的实现无侵入性参数校验之spring-boot-starter-validation
在开发过程中,参数校验是一个非常重要的环节。但是,传统的参数校验方法往往需要在代码中手动添加大量的 if-else 语句,这不仅繁琐,而且容易出错。为了解决这个问题,我们可以使用无侵入性参数校验的方式来简化代码并提高…...
企业架构LNMP学习笔记27
Keepalived的配置补充: 脑裂(裂脑):vip出现在了多台机器上。网络不通畅,禁用了数据包,主备服务器没法通讯,造成备服务器认为主服务器不可用,绑定VIP,主服务器VIP不会释放…...
品牌策划经理工作内容|工作职责|品牌策划经理做什么?
一位美国作家曾说过“品牌是一系列期望、记忆、故事和关系,他们共同构成了消费者最终原则一个产品或者服务的原因。” 所以,品牌经理这个岗位主要是创造感知价值主张,激发消费者购买这个品牌后带来的感知价值,这种回报的本质相对…...
【设计模式】三、概述分类+单例模式
文章目录 概述设计模式类型 单例模式饿汉式(静态常量)饿汉式(静态代码块)懒汉式(线程不安全)懒汉式(线程安全,同步方法)懒汉式(线程安全,同步代码块)双重检查静态内部类枚举单例模式在 JDK 应用的源码分析 …...
手把手教学 Springboot+ftp+下载图片
简单教学,复制即用的Ftp下载图片 引入配置包 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><grou…...
LaaS LLM as a service
LaaS LLM as a service 核心构成GPT 产业链如何进行商业化LLM(Large Language Model) 发展和趋势LLM(Large Language Model) 对于行业公司的分层LLM(Large Language Model) 的机遇和挑战 LaaS LLM as a service 核心构成 计算:算力模型:算法输入&…...
数据结构与算法(一)数组的相关概念和底层java实现
一、前言 从今天开始,笔者也开始从0学习数据结构和算法,但是因为这次学习比较捉急,所以记录的内容并不会过于详细,会从基础和底层代码实现以及力扣相关题目去写相关的文章,对于详细的概念并不会过多讲解 二、数组基础…...
歌曲推荐《最佳损友》
最佳损友 陈奕迅演唱歌曲 《最佳损友》是陈奕迅演唱的一首粤语歌曲,由黄伟文作词,Eric Kwok(郭伟亮)作曲。收录于专辑《Life Continues》中,发行于2006年6月15日。 2006年12月26日,该曲获得2006香港新城…...
多元共进|科技促进艺术发展,助力文化传承
科技发展助力文化和艺术的传播 融合传统与创新,碰撞独特魅力 一起来了解 2023 Google 开发者大会上 谷歌如何依托科技创新 推动艺术与文化连接 传承和弘扬传统文化 自 2011 年成立以来,谷歌艺术与文化致力于提供体验艺术和文化的新方式,从生成…...
Java集合(Collection、Iterator、Map、Collections)概述——Java第十三讲
前言 本讲我们将继续来讲解Java的其他重要知识点——Java集合。Java集合框架是Java编程语言中一个重要的部分,它提供了一套预定义的类和接口,供程序员使用数据结构来存储和操作一组对象。Java集合框架主要包括两种类型:一种是集合(Collection),存储一个元素列表,…...
topscoding主题库模板题
目录 模板题 【模板题】分因数(P1101) 【模板题】区间素数 III(P1113) 进制转换 III (任意转任意) (P2463) AB Problem(高精度加法) A-B Problem(高精度减法&…...
Linux--进程间通讯--FIFO(open打开)
1. 什么是FIFO FIFO命名管道,也叫有名管道,来区分管道pipe。管道pipe只能用于有血缘关系的进程间通信,但通过FIFO可以实现不相关的进程之间交换数据。FIFO是Linux基础文件类型中的一种,但是FIFO文件在磁盘上没有数据块,…...
哪里可以了解轻量的工作流引擎?
如果想要实现高效率的办公,可以使用轻量的工作流引擎低代码技术平台。随着工作量日益繁重起来,传统的办公制作方式已经无法满足现实需要的,采用轻量级的表格制作工具,就能在无形中缓解办公压力,创造更高效、灵活、优质…...
lvs负载均衡、LVS集群部署
四:LVS集群部署 lvs给nginx做负载均衡项目 218lvs(DR 负载均衡器) yum -y install ipvsadm(安装这个工具来管理lvs) 设置VIP192.168.142.120 创建ipvsadm的文件用来存放lvs的规则 定义策略 ipvsadm -C //清空现有…...
如何应对核心员工提离职?
最近一年互联网行情不好,很多大厂都在裁员,但裁员并不是不要人做事了。原来你这个岗位10个人做,企业有钱赚养得起,现在企业不怎么赚钱了,只能养4个人了。那么会有六个被裁掉。这时候对企业价值最大的4个人会被留下。也…...
建站系列(八)--- 本地开发环境搭建(WNMP)
目录 相关系列文章前言一、准备工作二、Nginx安装三、MySQL安装四、PHP安装及Nginx配置五、总结 相关系列文章 建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— …...
21天学会C++:Day8----范围for与nullptr
目录 编辑 1. 范围for 2. nullptr 1. 范围for 我们在写C语言循环遍历代码的时候,无论是用 for循环,while循环都需要考虑循环的起始条件,循环变量的递增逻辑,循环的结束条件。麻烦不说还可能会出错。 int main() {int arr[]…...
Linux——环境变量
✅<1>主页::我的代码爱吃辣 📃<2>知识讲解:Linux——环境变量 ☂️<3>开发环境:Centos7 💬<4>前言:环境变量(environment variables)一般是指在操作系统中用来指定操作…...
Screen的详细全面安装教程及Screen的用法
Screen可以大大提高终端使用效率,是Linux系统管理和运维的必备技能。当我们开启Screen后,只要Screen进程没有终止,其内部运行的会话都可以恢复。即使网络连接中断,用户也可以重新进入已开启的Screen中,对中断的会话进行…...
网站建设公司 电话销售没什么效果/seo关键词工具
如果现在想要通过程序实现内容的输出,核心的本质一定要依靠OutputStream完成,但是OutputStream类的数据输出功能有限,所有的数据一定要转为字节数组后才可以输出,假设说项目里面输出的是long或者doubl或者Date,在这样的…...
wordpress 发布网站/百度知道电脑版网页入口
【后台功能】 系统设置:设置关于我们、联系我们、加入我们、法律声明 广告管理:设置小程序首页轮播图广告和链接 留言列表:所有用户留言信息列表,支持删除 会员列表:查看所有注册会员信息,支持删除 资讯分类…...
网站有二级域名做竞价/手游推广渠道和推广方式
MRT(MODIS Reprojection Tool)简介:MODIS的全称为中分辨率成像光谱仪(Moderate-Resolution Imaging Spectroradiometer),是搭载在Terra和Aqua卫星上的一个重要的传感器。MRT是一种针对MODIS数据的处理工具。它可以帮助用户把MODIS影像重新投影到更为标准…...
做网站所需技术/电商培训心得
1513: Kick the ball! 时间限制: 1 Sec 内存限制: 128 MB Special Judge提交: 166 解决: 102[提交][状态][讨论版]题目描述 "A penalty shoot-out (officially kicks from the penalty mark) is a method of determining the winner of an association football (socce…...
美女做暖暖免费网站/专业网站推广软件
学习目标 目标知道总体、样本、样本大小、样本数量知道样本统计量和总体统计量知道总体分布、样本分布和抽样分布知道常用的抽样方法 某糖果公司研发了一种超长效口香糖,为了得到口味持续时间的数据,公司聘请了试吃者帮忙完成检验,结果却让人…...
网站后台修改不了/网站分为哪几种类型
作者:ShownSun 公众号:时沿科技 文章目录驱动程序动态加载与测试文件编译准备驱动程序测试程序动态加载过程驱动程序动态加载与测试 文件编译准备 说明:文中涉及到的目录应改为自己电脑的目录; 需要编译的文件分为两个部分&…...