当前位置: 首页 > news >正文

vue3框架基本使用(基础指令)

一、响应式数据

1.ref

ref可以定义 基本类型的响应式数据, 也可以定义对象类型响应式数据

<template><h1>{{ name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { ref } from 'vue'let name = ref('zhansan')function test(){name.value = "张三"
}</script>

注意:
1.响应式数据必须使用ref进行修饰
2.在template引入响应式数据时,直接引入变量名即可
3.修改ref修饰的响应数据的值时,必须使用 "变量.value"才能修改

2.reactive

reactive是定义对象类型的响应式数据

<template><h1>{{ obj.name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { reactive } from 'vue'let obj = reactive({name: "zhangsan"})function test(){obj.name = "张三"
}</script>

注意:reactive 如果重新进行赋值,那么原来的对象就会失去响应式
reactive修改值的内容不需要使用 .value

3.选择原则

如果数据式对象类型,层级不深,两个都可以。如果层级深,推荐使用reactive

4.toRefs

先看实例,此时发现name的值变化了,但是模板中的值没有改变。
这是因为obj在解构后,name就不是响应式的数据了。

<template><h1>{{ name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { reactive, toRef } from 'vue'let obj = reactive({name:"zhangsan"})
let { name } = objfunction test(){name = "张三"alert(name)
}</script>

修改后,成功了,包括obj的数据也变化了

<template><h1>{{ name }}</h1><h1>{{ obj.name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { reactive, toRefs } from 'vue'let obj = reactive({name:"zhangsan"})
let { name } = toRefs(obj)function test(){name.value = "张三"
}</script>

二、基础指令

v-xxx的指令有很多,这里只介绍一些常用的指令

1.v-if

v-if是条件渲染指令,它根据表达式的true和false来删除和插入元素,它的基本语法如下:v-if=“表达式”

<template><h1 v-if="data1">1</h1>
<h1 v-if="data2">2</h1>
<h1 v-if="data3 > 18">成年人</h1></template><script setup lang="ts">let data1 = true
let data2 = false
let data3 = 20</script>

2.v-show

v-show也是条件渲染指令,和v-if指令不同的是,v-show不会删除html元素,而是将它得属性设置为style=“display: none;”

<template>
<h1 v-show="data1">1</h1>
<h1 v-show="data2">2</h1>
<h1 v-show="data3 > 18">成年人</h1></template><script setup lang="ts">let data1 = true
let data2 = false
let data3 = 20</script>

3.v-else

v-else就是v-if得继续。
注意:v-else元素必须立即跟在v-if元素的后面——否则它不能被识别。

<template>
<h1 v-if="data1">data1:true</h1>
<h1 v-else>data1:false</h1><h1 v-if="data2">data2: true</h1>
<h1 v-else>data2: false</h1></template><script setup lang="ts">let data1 = true
let data2 = false</script>

4.v-for

4.1 遍历数组

注意: :key=“index” 尽量带上。主要目的是为了识别每个节点得唯一标识.有了标识就能够更高效,准确得更新虚拟DOM

<template><h3 v-for="(item,index) in arr" :key="index">{{ item }},{{ index }}</h3>
</template><script setup lang="ts">let arr = ["zhangsan","lisi","wangwu"]</script>

4.2 遍历对象

<template><ul><li  v-for="(value,key,index) in object" :key="index">{{ value }},{{key}}{{index}}</li></ul>
</template><script setup lang="ts">let object = {name: "zhangsan",age:20,gender: "boy"}</script>

4.3 遍历对象数组

<template><ul><li  v-for="(value,index) in object" :key="index">{{ value.name }}{{index}}</li></ul>
</template><script setup lang="ts">let object = [{name: "zhangsan",age:20,gender: "boy"},{name: "lisi",age:21,gender: "boy"},{name: "wangwu",age:22,gender: "boy"},]</script>

5.v-bind

1.v-bind得简写是 “冒号”
2.v-bind 其实就是让标签得属性 绑定一个 变量 而不是 字符串
先看一个实例,a标签绑定得herf属性被识别成了字符串,而不是一个变量

<template><a href="baidu">百度一下</a>
</template><script setup lang="ts">const baidu = "http://www.baidu.com"</script>

此时就需要使用v-bind进行变量绑定。

<template><a :href="baidu">百度一下</a>
</template><script setup lang="ts">const baidu = "http://www.baidu.com"</script>

6.v-on

v-on指令用于监听事件,简写为 @

6.1 鼠标点击事件

<template><el-button type="success" v-on:click="send">完整写法</el-button><el-button type="success" @click="send">简写</el-button></template><script setup lang="ts">
import { ElMessage } from 'element-plus';function send(){ElMessage({type: "success",message: "hello"})    
}</script>

6.2 传值得点击事件

<template><h1>{{ sum }}</h1><el-button type="success" @click="sum1">+1</el-button><el-button type="success" @click="sum10(10)">+10</el-button></template><script setup lang="ts">
import { ref } from 'vue'let sum = ref(0)function sum1() {sum.value++console.log(sum.value)
}function sum10(num:number) {sum.value+=numconsole.log(sum.value)
}</script>

7.v-model

数据双向绑定,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
v-model只收集表单的数据,别的标签不起作用。
完整写法:v-model:value=“text”
简写: v-model=text
这里可以看出v-model是针对input 的value属性进行处理

<template><h1>{{ text }}</h1><input type="text" v-model="text" style="position: absolute;top:100px;"></template><script setup lang="ts">
import {ref} from 'vue'let text = ref()</script>

三、计算属性computed

computed的好处就是,被计算的数据发生变化,结果也会发生变化

<template>
<h1>{{ x }}</h1>
<button @click="x++">1</button><h1>{{ y }}</h1>
<button @click="y++">1</button><h1>{{ sum }}</h1></template><script setup lang="ts">
import {computed, ref,toRef} from 'vue'let x = ref(1)
let y = ref(2)#  这里使用computed 方法进行数据的计算
let sum = computed(() => {return x.value + y.value
})</script>

四、watch

1.作用

监视数据的变化

2.特点

vue3中的watch只监控以下四种数据

1 ref定义的数据
2.reactive定义的数据
3.函数返回一个值
4.一个包含上述内容的数组

3.watch-ref数据

注意点:
1.监视的数据(sum)不用写.value
2.回调函数有两个参数,第一个是变化的新值,第二个是变化之前的旧值
3.在回调函数中,可以直接调用watch的返回值来停止watch的监视

<template>
<h1>sum的和是: {{ sum }}</h1>
<button @click="changeSum">sum加1</button></template><script setup lang="ts">
import { ref,watch } from 'vue'let sum = ref(0)function changeSum(){sum.value += 1
}let stopWatch = watch(sum,(newVlue,oldValue) => {console.log(newVlue)if (newVlue > 10) {stopWatch()}
})</script>

4.watch-reactive数据

注意:
1.修改了对象的人一一个值,都可以触发watch
2.newValue,oldValue值是一样的,都是显示修改后的值。

<template>
<h1>姓名: {{ obj.name }}</h1>
<button @click="changename">点我修改姓名</button><h1>年龄:{{ obj.age }}</h1>
<button @click="changeage">点我修改年龄</button></template><script setup lang="ts">
import {  reactive,watch } from 'vue'let obj = reactive({name: "zhangsan",age: 20})function changename(){obj.name = "张三"
}function changeage(){obj.age++
}watch(obj,(newValue,oldValue)=>{console.log('变化了')console.log(newValue,oldValue)})</script>

所以监视器可以简写为:回调函数的形参只写一个就可以了

let stop = watch(obj,(newValue)=>{if (newValue.age == 30){stop()console.log('停止监视')}
})

5.监视对象某个属性

在4中,监视的是整个对象,如果对象中属性特别多,需要只监控某一个属性。
方法如下:将监控对象的参数 以函数的形式编写。
实例如下:

5.1 监控普通属性

<template>
<h1>姓名:{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button><h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button></template><script setup lang="ts">
import { reactive, watch } from 'vue'let persion = reactive({name: "zhangsan",car:{c1: "长城",c2: "大众"}
})function changeName(){persion.name += "~"
}function changeC1(){persion.car.c1 = '奔驰'}
function changeC2(){persion.car.c2 = '奥迪'}
function changeAll(){persion.car = {c1:"宝马",c2:"丰田"}
}// 监视普通类型属性
watch(()=> { return persion.name },(newValue,oldValue)=>{console.log(newValue,oldValue)
})</script>

5.2 监视对象属性

<template>
<h1>姓名:{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button><h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button></template><script setup lang="ts">
import { reactive, watch } from 'vue'let persion = reactive({name: "zhangsan",car:{c1: "长城",c2: "大众"}
})function changeName(){persion.name += "~"
}function changeC1(){persion.car.c1 = '奔驰'}
function changeC2(){persion.car.c2 = '奥迪'}
function changeAll(){persion.car = {c1:"宝马",c2:"丰田"}
}// 监视对象类型属性,并且开启深度监视。深度监视的含义就是监视car对象中的每个属性。
// 如果不开启深度监视,只能是car整个对象变化的的时候才能监视到
watch(()=>{return persion.car},(newValue,oldValue)=>{console.log(newValue,oldValue)},{deep:true}
)
</script>

6.监听多个属性

监听多个属性,要写成箭头函数数组的形式

<template>
<h1>姓名:{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button><h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button></template><script setup lang="ts">
import { reactive, watch } from 'vue'let persion = reactive({name: "zhangsan",car:{c1: "长城",c2: "大众"}
})function changeName(){persion.name += "~"
}function changeC1(){persion.car.c1 = '奔驰'}
function changeC2(){persion.car.c2 = '奥迪'}
function changeAll(){persion.car = {c1:"宝马",c2:"丰田"}
}watch(// 监听多个属性,要写成箭头函数数组的形式[ ()=> persion.name,()=>persion.car.c1 ],(newValue,oldValue)=>{console.log(newValue,oldValue)},{deep:true}
)
</script>

五、watchEffect

watcheffect的好处就是,不用指定监视对象,直接编写处理逻辑就可以了,非常的方便

<template>
<h1>sum的和: {{sum}}</h1>
<button @click="sum++">sum加1</button></template><script setup lang="ts">
import { ref,watchEffect } from 'vue'let sum = ref(0)watchEffect(()=>{if(sum.value > 10 ){console.log("sum是一个大于10的数字") }
})</script>

六、标签的ref属性

ref属性是能够定位html元素的属性,相当于id或者class定位的作用

<template>
<h1>张三</h1>
<h1 ref="t1">李四</h1><button @click="show">查看</button></template><script setup lang="ts">
import {ref} from 'vue'let t1 = ref()function show(){console.log(t1.value)
}
</script>

七、组件生命周期

vue3和vue2生命周期略有不同

生命周期函数作用
onBeforeMount()组件挂载到节点上之前执行
onMounted()组件挂载完成后执行
onBeforeUpdate()组件更新之前执行
onUpdated()组件更新完成后执行
onBeforeUnmount()组件卸载之前执行
onUnmounted()组件卸载完成后执行

1.创建test子组件

这里测试onBeforeMount函数

<template><h1>我是test组件</h1>
</template><script setup>
import { onBeforeMount,onMounted } from 'vue'onBeforeMount(()=>{console.log("挂载前")// 这是开启debug模式,程序到这里就不会在继续运行了debugger
})</script>

2.引入test子组件

在app.vue中引入组件

<template><h1>我是app.vue</h1>// 引入test子组件<test></test>
</template><script setup>
import test from './components/test.vue'</script>

3.验证结果

发现子组件的的结果没有在app.vue中显示,但是onBeforeMount函数中的输出已经控制台输出了

八、Pinia集中式状态管理库

1.安装

pnpm install pinia

2.引入pinia

在main.ts中引入pinia

import { createPinia } from 'pinia'const store = createPinia()
app.use(store)

3.创建数据仓库

在src下创建store/“数据文件.ts”。这里用于测试的文件是userInfo.ts

3.1 定义数据

在userinfo.ts文件中定义数据。
definStore,有两个参数,第一个参数式一个key,尽量和文件名保持一致。第二个参数就定义的数据

import { defineStore } from 'pinia'export const userInfoStore = defineStore('userInfo',{state(){return {sum: 0}}
})

3.2 引用数据

在app.vue中引用sum

<template>// 应用sum<h1> {{ use_userInfoStore.sum }} </h1></template><script setup>
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()</script>

4.修改数据

4.1 方法1

如果只修改一个值。可以使用这个办法。比较简单

<template><h1> {{ use_userInfoStore.sum }} </h1><button @click="changSum">1</button></template><script setup>
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()function changSum(){use_userInfoStore.sum++
}</script>

4.2 方法2:$patch

如果数据有多个,可以使用以下$patch 方法

<template><h1> {{ use_userInfoStore.sum }} {{ use_userInfoStore.name }} {{ use_userInfoStore.age }}</h1><button @click="changSum">1</button></template><script setup>
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()function changSum(){use_userInfoStore.$patch({sum:20,age: 30,name: "张三",})}</script>

当然使用上边的方法也可以,如下

function changSum(){use_userInfoStore.sum++use_userInfoStore.age = 30use_userInfoStore.name = "张三"}

5.组合式写法

以上都是选项式写法,组合式写法,在语法上相对来说比较简洁

5.1 定义数据

这里和选项式定义就有了区别,
1.没有了stat和action关键字,直接写逻辑。
2.在函数中不用使用this了


import { defineStore } from 'pinia'
import {ref} from 'vue'export const userInfoStore = defineStore('userInfo',()=>{const sum = ref(0)function changeSum(value){if (value > 10){alert('数字太大了')}else{sum.value += value}}return {sum,changeSum}
})

5.2 修改数据

<template>
<h1>sum = {{ use_userInfoStore.sum  }}</h1>
<button @click="add1">方式1</button>
<button @click="add2">方式2</button></template><script setup lang="ts">
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()// 方式1:直接修改
function add1(){use_userInfoStore.sum += 1
}// 方式2: 调用pinia中的函数进行修改,对于传入的数据可以进行限制
function add2(){use_userInfoStore.changeSum(5)
}</script>

九、组件通信

1.props

props可以实现 父组件传数据给子组件,也可以子组件给父组件传数据

1.1 父传子

定义子组件
注意: 接收的key 一定要和 父组件传递的key一致。否则接收不到

<template><h1>我是test.vue</h1><!-- 使用接收的数据 --><h1>{{ username }}</h1>
</template><script lang="ts">export default {name:"test"}
</script><script setup lang="ts">
import { defineProps } from 'vue'// 这里定义prop_res 是为了打印,如果不接收 打印不了 接收的数据
const prop_res = defineProps(['username'])// 打印接收的数据
console.log(prop_res.username)</script>

定义父组件app.vue
注意点:
:username 是一个自定义的key值,并不是一个属性。v-bind决定了传递过去的是一个变量
“username” 是传递过去的变量

<template>
<h1>我是app.vue</h1>// z这里是给test组件传值。将username变量传给test组件
<test :username="username"></test>
</template><script setup lang="ts">
import {ref} from 'vue'
import test   from './components/test.vue'let username = ref("admin")</script>

1.2 子传父

子传父的原理 其实还是 在父组件中定义一个函数,然后传递给子组件,子组件调用这个函数 将数据通过这个函数传递给父组件

定义子组件:

<template>
<h1>我是app.vue</h1>
<h1>字组数据为: {{ Fdata }}</h1><!-- 将定义好的函数发送给子组件 -->
<test :send_data="send_data"></test></template><script setup lang="ts">
import test from './components/test.vue'
import {ref} from 'vue'let Fdata = ref()// 定义好一个函数,让子组件使用,然后利用这个函数将数据发送给父组件
function send_data(value:string){Fdata.value = value}</script>

定义子组件

<template><h1>我是test.vue</h1><!-- 使用按钮将子组件的数据发送给父组件 --><button @click="send_data(data)">发送数据给父组件</button></template><script lang="ts">export default {name:"test"}
</script><script setup lang="ts">
import { ref,defineProps } from 'vue'const data = ref('测试数据122211')// 接收父组件传过来的函数,用于发送数据
defineProps(['send_data'])</script>

2.provide和inject

这两个是一个组合,专门实现父组件向下 给1一级后多级子组件传递数据

设置父组件

<template>
<h1>我是app.vue</h1>
<hr>
<test></test></template><script setup lang="ts">
import {ref,provide} from 'vue'
import test from './components/test.vue'let Fdata = ref(100)// 将Fdata变量 设置一个自定义key 提供给所有的后代组件使用
provide('d1',Fdata)</script>

设置子组件

<template><h1>我是test.vue</h1><h1>父组件的数据为:{{ x }}</h1></template><script lang="ts">export default {name:"test"}
</script><script setup lang="ts">
import { inject } from 'vue'// 引入父组件提供的变量。然后在模板中使用
let x = inject('d1')</script>

相关文章:

vue3框架基本使用(基础指令)

一、响应式数据 1.ref ref可以定义 基本类型的响应式数据&#xff0c; 也可以定义对象类型响应式数据 <template><h1>{{ name }}</h1><button click"test">修改姓名</button> </template><script setup lang"ts"…...

ubuntu20.04设置共享文件夹

ubuntu20.04设置共享文件夹 一&#xff0c;简介二&#xff0c;操作步骤1&#xff0c;设置Windows下的共享目录2&#xff0c;挂载共享文件夹3&#xff0c;测试是否挂载成功 一&#xff0c;简介 在公司电脑上&#xff0c;使用samba设置共享文件夹&#xff0c;IT安全部门权限不通…...

三十五、 欧盟是如何对法律政策环境进行评估的?

我国对于如何评估数据接收方所在法律政策环境尚无明确详细的指引&#xff0c;故在实践中&#xff0c;为了进一步提升合规水平&#xff0c;企业也可同步参考在数据隐私保护法治方面领先的欧盟标准。 在欧盟法院于 2020 年 7 月作出 Schrems II案件的判决后&#xff0c;为保证境外…...

项目实战--文档搜索引擎

在我们的学习过程中&#xff0c;会阅读很多的文档&#xff0c;例如jdk的API文档&#xff0c;但是在这样的大型文档中&#xff0c;如果没有搜索功能&#xff0c;我们是很难找到我们想查阅的内容的&#xff0c;于是我们可以实现一个搜索引擎来帮助我们阅读文档。 1. 实现思路 1…...

计算机视觉基础课程知识点总结

图像滤波 相关: 核与图像同向应用&#xff0c;不翻转。 卷积: 核在应用前翻转&#xff0c;广泛用于信号处理和深度学习&#xff08;现在常说的二维卷积就是相关&#xff09;。 内积: 向量化的点积操作&#xff0c;是相关和卷积的一部分。 模板匹配&#xff1a;通过在图像中…...

编译原理:语法分析

目录 引言上下文无关文法 CFG: Context-Free Grammar定义推导方法最左推导和最右推导 分析树分析树->抽象语法树常见的上下文无关文法文法设计二义性文法扩展巴科斯范式&#xff1a;EBNF extended Backus Normal Form 文法和语言分类相关术语直接推导推导*推导句型、句子、语…...

React 中的 Lanes

React 中有一个 Lane 的概念&#xff0c;Lane 就像高速路上的不同车道&#xff0c;具有不同优先级&#xff0c;在 React Lane 通过一个 32 位的二进制数来表示。越小优先级别越高&#xff0c;SyncLane 级别最高。用二进制存储的方式&#xff0c;可以通过逻辑操作快速判断 Lane …...

【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】线性分类模型损失函数对比

本节均以二分类问题为例进行展开&#xff0c;统一定义类别标签 y ∈ { 1 , − 1 } y\in\{1,-1\} y∈{1,−1}&#xff0c;则分类正确时 y f ( x ; w ) > 0 yf(x;w)>0 yf(x;w)>0&#xff0c;且值越大越正确&#xff1b;错误时 y f ( x ; w ) < 0 yf(x;w)<0 yf(x;…...

数组(C语言)(详细过程!!!)

目录 数组的概念 一维数组 sizeof计算数组元素个数 二维数组 C99中的变⻓数组 数组的概念 数组是⼀组相同类型元素的集合。 数组分为⼀维数组和多维数组&#xff0c;多维数组⼀般比较多见的是二维数组。 从这个概念中我们就可以发现2个有价值的信息&#xff1a;(1)数…...

视频生成模型 Dream Machine 开放试用;微软将停止 Copilot GPTs丨 RTE 开发者日报 Vol.224

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…...

Vue30-自定义指令:对象式

一、需求&#xff1a;创建fbind指定 要用js代码实现自动获取焦点的功能&#xff01; 二、实现 2-1、步骤一&#xff1a;绑定元素 2-2、步骤二&#xff1a;input元素获取焦点 此时&#xff0c;页面初始化的时候&#xff0c;input元素并没有获取焦点&#xff0c;点击按钮&…...

2024/06/13--代码随想录算法(贪心)3/6|134.加油站、135.分发糖果、860.柠檬水找零、406.根据身高重建队列

134.加油站 力扣链接 class Solution:def canCompleteCircuit(self, gas: List[int], cost: List[int]) -> int:curSum 0 # 当前累计的剩余油量totalSum 0 # 总剩余油量start 0 # 起始位置for i in range(len(gas)):curSum gas[i] - cost[i]totalSum gas[i] - co…...

机器学习的分类

机器学习分类 ​ 机器学习是人工智能的一个分支&#xff0c;它使计算机系统能够从数据中学习并做出决策或预测。机器学习&#xff08;Machine Learning&#xff09;是一种基于数据驱动的方法&#xff0c;旨在通过自动化的统计模型和算法从数据中学习和提取模式&#xff0c;以进…...

【Linux】进程控制3——进程程序替换

一&#xff0c;前言 创建子进程的目的之一就是为了代劳父进程执行父进程的部分代码&#xff0c;也就是说本质上来说父子进程都是执行的同一个代码段的数据&#xff0c;在子进程修改数据的时候进行写时拷贝修改数据段的部分数据。 但是还有一个目的——将子进程在运行时指向一个…...

PFC旁路二极管、继电器驱动电路以及PFC主功率

R001和R002以及R003三个电阻作用是限放X电容上的电 整流桥串联两个BJ1和BJ2 电容C3:给整流桥储能&#xff0c;给后续llc供电 PFC工作是正弦波上叠加高频电流 PFC功率部分 2个PFC电感&#xff08;选择两个磁芯骨架小&#xff0c;有利于散热&#xff09;、2个续流二极管&…...

CrossOver 2024软件下载-CrossOver 2024详细安装教程

Crossover软件是一款可以在Mac、Linux和Chromebook上运行Windows程序的软件。 它是一款商业软件&#xff0c;由CodeWeavers公司开发&#xff0c;Crossover不是一个虚拟机或模拟器&#xff0c;它使用Wine技术来将Windows程序直接转换成可以在其他操作系统上运行的程序&#xff0…...

Spark MLlib机器学习

前言 随着大数据时代的到来&#xff0c;数据处理和分析的需求急剧增加&#xff0c;传统的数据处理工具已经难以满足海量数据的分析需求。Apache Spark作为一种快速、通用的集群计算系统&#xff0c;迅速成为了大数据处理的首选工具。而在Spark中&#xff0c;MLlib&#xff08;…...

React Native将 ipad 端软件设置为横屏显示后关闭 Modal 弹窗报错

问题&#xff1a; 将 ipad 端软件设置为横屏显示后&#xff0c;关闭 Modal 弹窗报错。 Modal was presented with 0x2 orientations mask but the application only supports 0x18.Add more interface orientations to your apps Info.plist to fix this.NOTE: This will cras…...

JavaEE大作业之班级通讯录系统(前端HTML+后端JavaEE实现)PS:也可选网络留言板、图书借阅系统、寝室管理系统

背景&#xff1a; 题目要求&#xff1a; 题目一&#xff1a;班级通讯录【我们选这个】 实现一个B/S结构的电子通讯录&#xff0c;其中的每条记录至少包含学号、姓名、性别、班级、手机号、QQ号、微信号&#xff0c;需要实现如下功能&#xff1a; &#xff08;1&#xff09;…...

代码随想录算法训练营第37天|● 56.合并区间● 738.单调递增的数字

合并区间 56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 按照左边界从小到大排序之后&#xff0c;如果 intervals[i][0] < intervals[i - 1][1] 即intervals[i]的左边界 < intervals[i - 1]的右边界&#xff0c;则一定有重叠。&#xff08;本题相邻区间也算重贴…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...