vue3 ts setup 组合式API 使用教程

news2024/10/5 20:20:16

vue3中新增了组合式API，本文讲解组合式API setup 的使用

关于setup 的出现和 vue3 js setup 的使用，笔者已经在2022年的文章中说明，这里不再赘述，需要的朋友可以阅读：《vue3 setup 使用教程》

官网文档：https://cn.vuejs.org/

目录

1、新建vue3 ts 项目

2、响应式变量

3、v-model 双向数据绑定

4、计算属性 computed

4.1、基本使用

4.2、可写的计算属性

5、侦听器 watch

5.1、基本使用

5.2、深层侦听

5.3、即时回调

5.4、一次性侦听

5.5、watchEffect()

6、模板引用 ref

7、类与样式绑定

7.1、绑定对象

7.2、绑定数组

7.3、三元表达式

7.4、绑定内联样式

8、生命周期钩子

9、父子组件通信

9.1、基本使用

9.2、搭配 TypeScript 使用

9.3、事件校验

10、依赖注入

1、新建vue3 ts 项目

在电脑上的空白文件目录下打开 cmd 窗口，执行下面命令

npm create vue@latest

输入y 按回车

输入项目名 vue3-ts-project

是否使用 ts 语法，选择 是

是否启用 JSX 支持，这个不影响学习，是或否都行，笔者选择 是

是否引入vue router，选择 是

是否使用 Pinia 用于状态管理，选择 是

是否引入 Vitest 用于单元测试，选择 是

是否要引入一款端到端测试工具，选择 不需要

是否引入 ESLint 用于代码质量检测，选择 是

是否引入 Prettier 用于代码格式化，选择 否

创建完成

进入项目目录，安装依赖

cd vue3-ts-project

安装依赖

npm install

依赖安装完成

依赖安装完成后，使用 VS Code 打开项目

执行下面命令运行项目

npm run dev

浏览器访问：http://localhost:5173/

出现这个页面说明项目创建成功

2、响应式变量

先将 main.css 中的样式替换为下面代码

@import './base.css';

#app {
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

再App.vue 原来的内容全部删除，替换为下面代码

<template>
 <div>
  <p>{{name}}</p>
  <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
let name = '年少相逢意气豪,千金买醉度良宵'
function change() {
    name = '调筝人去秋风冷,一院梧桐影自摇'
}
</script>

<style scoped>
</style>

运行效果

发现点击按钮，变量不能修改，这是因为默认的 name 不再像vue2 一样默认就是响应式变量，需要使用 ref 或 reactive 函数转换一下，看下面代码

使用 ref

<template>
 <div>
  <p>{{name}}</p>
  <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
let name = ref('年少相逢意气豪,千金买醉度良宵')
function change() {
    name.value = '调筝人去秋风冷,一院梧桐影自摇'
}
</script>

<style scoped>
</style>

运行效果

使用 reactive

<template>
 <div>
  <p>{{nameObj.name}}</p>
  <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
let nameObj = reactive({name:'一客若蜀士，相逢意气豪'})
function change() {
    nameObj.name = '偶谈唐夹寨，遂及楚成皋'
}
</script>

<style scoped>
</style>

运行效果

注意 ref 和 reactive  的区别

ref 一般处理基本类型；reactive 处理复杂的数据类型

3、v-model 双向数据绑定

<template>
 <div>
  <p>{{name}}</p>
  <input type="text" v-model="name" />
 </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
let name = ref('顿洗风尘恶，都忘箠辔劳')

</script>

<style scoped>
</style>

运行效果

4、计算属性 computed

使用 computed 可实现计算

4.1、基本使用

<template>
 <div>
  <p>{{numberOfOnlineUsers}}</p>
  <button @click="add">添加在线人数</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
let name = ref('顿洗风尘恶，都忘箠辔劳')
let users = ref([])
const numberOfOnlineUsers = computed(()=>{
    return users.value.length > 0 ? '当前在线人数'+ users.value.length : '无人在线'
})
const add = ()=>{
    let date = new Date()
    users.value.push(date.getTime())
}
</script>

<style scoped>
</style>

运行效果

4.2、可写的计算属性

计算属性默认是只读的，可以通过同时提供 getter 和 setter 来创建

<template>
 <div>
  <p>{{bookInfo}}</p>
  <button @click="add">修改书籍信息</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
const bookName = ref('三国演义')
const authorName = ref('罗贯中')

const bookInfo = computed({
  // getter
  get() {
    return bookName.value + ' ' + authorName.value
  },
  // setter
  set(newValue) {
    let tmp = newValue.split(' ')
    bookName.value = tmp[0]
    authorName.value = tmp[1]
  }
})
const add = ()=>{
    bookInfo.value = '红楼梦 曹雪芹'
}
</script>

<style scoped>
</style>

运行效果

5、侦听器 watch

5.1、基本使用

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let name = ref('三国演义')
watch(name, (newValue, oldValue)=>{
    console.log(oldValue);
    console.log(newValue);
})

</script>

<style scoped>
</style>

运行效果

5.2、深层侦听

深层侦听器需要添加 deep: true 属性。默认直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发，相比之下，一个返回响应式对象的函数，只有在返回不同的对象时，才会触发回调

看下面代码

<template>
 <div>
    <p>{{book.name}}</p>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let book = reactive({name:'西游记', author: '施耐庵'})
watch(()=>book, (newValue)=>{
    console.log(newValue);
}
)

const change = ()=> {
    book.name = '道德经'
}
</script>

<style scoped>
</style>

运行效果

可以看到没有触发侦听

添加 深层侦听 后看下面代码

<template>
 <div>
    <p>{{book.name}}</p>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let book = reactive({name:'西游记', author: '施耐庵'})
watch(()=>book, (newValue)=>{
    console.log(newValue);
},
{ deep: true }
)

const change = ()=> {
    book.name = '道德经'
}
</script>

<style scoped>
</style>

运行效果

5.3、即时回调

watch 默认是懒执行的，只有当数据源变化时，才会执行回调 。如果想在创建侦听器时，立即执行一遍回调，可以通过传入 immediate: true 选项来强制侦听器的回调立即执行

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let name = ref('三国演义')
watch(name, (newValue, oldValue)=>{
    console.log(oldValue);
    console.log(newValue);
},
{ immediate: true }
)

</script>

<style scoped>
</style>

运行效果

5.4、一次性侦听

默认侦听器是每当被侦听源发生变化时，侦听器的回调就会执行。如果想让回调只在源变化时触发一次，可以使用 once: true 选项

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let name = ref('三国演义')
watch(name, (newValue, oldValue)=>{
    console.log(oldValue);
    console.log(newValue);
},
{ once: true }
)

</script>

<style scoped>
</style>

运行效果

5.5、watchEffect()

当侦听器的回调使用与源完全相同的响应式状态时，可以使用 watchEffect 简化代码

先看 watch 的代码

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch, watchEffect } from 'vue'
let name = ref('三国演义')
watch(name, ()=>{
    httpGetRequest(name.value)
},
{ immediate: true }
)
//模拟发送请求
function httpGetRequest(username:string) {
    console.log('发送请求：' + username);
}
</script>

<style scoped>
</style>

运行效果

使用 watchEffect 简化上面 watch 代码

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch, watchEffect } from 'vue'
let name = ref('水浒传')
// watch(name, ()=>{
//     httpGetRequest(name.value)
// },
// { immediate: true }
// )
watchEffect(()=>{
    httpGetRequest(name.value)
})
//模拟发送请求
function httpGetRequest(username:string) {
    console.log('发送请求：' + username);
}
</script>

<style scoped>
</style>

运行效果

6、模板引用 ref

ref 是一个特殊的 attribute，它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用

<template>
 <div>
    <input ref="inputRef" type="text">
    <button @click="get">获取</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
const inputRef = ref(null)

const get = ()=> {
    console.log(inputRef.value);
    inputRef.value.focus()
}
</script>

<style scoped>
</style>

运行效果

7、类与样式绑定

7.1、绑定对象

<template>
 <div>
    <div :class="{ active: isActive }">
        <p>忽匆匆，三月桃花随水转。</p>
        <p>飘零零，二月风筝线儿断。</p>
        <p>噫，郎呀郎，</p>
        <p>巴不得下一世，你为女来我做男。</p>
    </div>
    <br>
    <div :class="classObject">
        一朝别后，二地相悬。
    </div>
    <button @click="change">改变</button>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let isActive = ref(true)
const classObject = reactive({
  active: true,
  'text-primary': true
})
const change = ()=> {
    isActive.value = false
    classObject.active = false
    classObject['text-primary'] = false
}
</script>

<style scoped>
.active {
    background: #f56c6c;
}
.text-primary {
    color: #ffff;
}
</style>

运行效果

7.2、绑定数组

<template>
 <div>
    <div :class="[activeClass, primaryClass]">
        万语千言说不完，百无聊赖，十依栏杆。
    </div>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const activeClass = ref('active')
const primaryClass = ref('text-primary')
</script>

<style scoped>
.active {
    background: #f56c6c;
}
.text-primary {
    color: #ffff;
}
</style>

运行效果

7.3、三元表达式

<template>
 <div>
    <!-- 三目表达式单独使用 -->
    <div :class="[isActive ? activeClass : primaryClass]">
        <p>六月三伏天，人人摇扇我心寒。</p>
        <p>五月石榴红似火，偏遇阵阵冷雨浇花端。</p>
    </div>
    
    <br>
    
    <!-- 三目表达式和其他样式一起使用 -->
    <div :class="[isActive ? successBackgroundClass : primaryBackgroundClass, textClass]">
        <p>六月三伏天，人人摇扇我心寒。</p>
        <p>五月石榴红似火，偏遇阵阵冷雨浇花端。</p>
    </div>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let isActive = ref(true)
const activeClass = ref('active')
const primaryClass = ref('text-primary')

const textClass = ref('text-class')
const successBackgroundClass = ref('success-background')
const primaryBackgroundClass = ref('primary-background')
const change = ()=> {
    isActive.value = false
}
</script>

<style scoped>
.active {
    color: #67c23a;
}
.text-primary {
    color: #409eff;
}
.text-class {
    color: #ffff;
}
.success-background {
    background: #67c23a;
}
.primary-background {
    background: #409eff;
}
</style>

运行效果

7.4、绑定内联样式

<template>
 <div>
    <!-- 绑定对象 -->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
        十里长亭望眼欲穿。百思想，千系念，万般无奈把郎怨。
    </div>
    <br>
    <div :style="styleObject">
        七弦琴无心弹，八行书无可传。
    </div>
    <br>
    <!-- 绑定数组 -->
    <div :style="[styleObject, backStyles]">
        四月枇杷未黄，我欲对镜心意乱。
    </div>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const activeColor = ref('#67c23a')
const fontSize = ref(30)
const styleObject = reactive({
  color: '#409eff',
  fontSize: '18px'
})
const backStyles = reactive({
    background: 'black'
})
</script>

<style scoped>
</style>

运行效果

8、生命周期钩子

官网 实例生命周期的图表

在setup 中引入生命周期函数使用

<template>
 <div>
    <p>{{name}}</p>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref, onMounted,onUpdated  } from 'vue'
let name = ref('阅尽天涯离别苦，不道归来，零落花如许。')
const change = ()=> {
    name.value = '花底相看无一语，绿窗春与天俱莫。'
}

onMounted(() => {
    console.log('挂载完成')
})

onUpdated(()=>{
    console.log('更新完成');
})
</script>

<style scoped>
</style>

运行效果

更多生命周期函数可以看官网文档：https://cn.vuejs.org/api/composition-api-lifecycle.html

9、父子组件通信

9.1、基本使用

在 components 目录下定义子组件 Book.vue

代码如下

<template>
    <div>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
    <button @click="buy">下单</button>
    <button @click="cart">加入购物车</button>
</template>
<script setup lang="ts">
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
//定义子传父事件
const emit = defineEmits(['buyEmit', 'cartEmit'])
const buy = ()=> {
    emit('buyEmit', props.bookName)
}
const cart = ()=> {
    emit('cartEmit')
}
</script>

在 App.vue 中引入 Book.vue

<template>
 <div>
    <Book :bookName="name" :author="author" :price="price" @buyEmit="buy" @cartEmit="cart" />
 </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Book from '@/components/Book.vue'
let name = ref('稼轩长短句')
let author = ref('辛弃疾')
let price = ref(50)

const buy = (bookName)=> {
    alert(bookName)
}
const cart = ()=> {
    alert('点击购物车')
}
</script>

<style scoped>
</style>

运行效果

9.2、搭配 TypeScript 使用

<template>
    <div>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
    <button @click="buy">下单</button>
    <button @click="cart">加入购物车</button>
</template>
<script setup lang="ts">
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
//定义子传父事件
const emit = defineEmits<{
    (e: 'buyEmit', bookName:String):void
    (e: 'cartEmit'):void
}>()
const buy = ()=> {
    emit('buyEmit', props.bookName)
}
const cart = ()=> {
    emit('cartEmit')
}
</script>

9.3、事件校验

<template>
    <div>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
    <button @click="buy">下单</button>
    <button @click="cart">加入购物车</button>
</template>
<script setup lang="ts">
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
//定义子传父事件
const emit = defineEmits({
    //校验 buyEmit 事件
    buyEmit:(bookName:String) => {
        if(bookName.length > 1) {
            console.log('buyEmit error');
            
            return false 
        } else {
            return true
        }
    },
    //没有校验
    cartEmit: null
})


const buy = ()=> {
    emit('buyEmit', props.bookName)
}
const cart = ()=> {
    emit('cartEmit')
}
</script>

运行效果

10、依赖注入

在 App.vue 中提供使用 provide

<template>
 <div>
    <Book :bookName="name" :author="author" :price="price" />
 </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import Book from '@/components/Book.vue'
let name = ref('史记')
let author = ref('司马迁')
let price = ref(399)

provide(/* 注入名 */ 'bookShop', /* 值 */ '开心图书商店')
</script>

<style scoped>
</style>

在子组件 Book.vue 中注入使用 inject

<template>
    <div>
        <h1>{{bookShop}}</h1>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
   
</template>
<script setup lang="ts">
import { inject } from 'vue'
const bookShop = inject('bookShop')
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
</script>

运行效果

依赖注入更详细讲解请阅读笔者文章《vue 依赖注入使用教程》

至此完

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

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

相关文章

MobaXterm无法上传整个文件夹，只能上传的单个文件

MobaXterm无法上传整个文件夹，只能上传的单个文件

问题描述&#xff1a; 本来想使用MobaXterm上传.vscode文件夹上传到服务器&#xff0c;但是选择文件夹打开后只能选择文件夹下面的子文件无法上传整个文件。 解决方案&#xff1a; 1、简单暴力 2、压缩后解压
阅读更多...
8个优秀的CSS实践，开发web应用

8个优秀的CSS实践，开发web应用

HTML面试题部分 1.H5的新特性有哪些 2.Label的作用是什么&#xff1f;是怎么用的&#xff1f; 3.HTML5的form如何关闭自动完成功能 4.dom如何实现浏览器内多个标签页之间的通信? 5.实现不使用 border 画出1px高的线&#xff0c;在不同浏览器的标准模式与怪异模式下都 能保持一…
阅读更多...
STM32FreeRTOS-事件组1（STM32Cube高效开发教程）

STM32FreeRTOS-事件组1（STM32Cube高效开发教程）

文章目录 一、事件组的原理和功能1、事件组与队列信号量特点2、事件组存储结构3、事件组运行原理 二、事件组部分函数1、xEventGroupCreate()创建事件组函数2、xEventGroupSetBits&#xff08;&#xff09;事件组置位函数3、xEventGroupSetBitsFromISR&#xff08;&#xff09;…
阅读更多...
PCM会重塑汽车OTA格局吗(2)

PCM会重塑汽车OTA格局吗(2)

目录 1.概述 2. PCM技术视角下的OTA 3.小结 1.概述 上一篇文章&#xff0c;我们着重讲解了OTA的概述内容&#xff0c;和意法半导体推出的跨域融合MCU的四大特征&#xff0c;其中就包含了OTA技术。 他们针对OTA做了比较创新的设计&#xff0c;在总的可用memory容量不变情况…
阅读更多...
【go语言开发】yaml文件配置和解析

【go语言开发】yaml文件配置和解析

本文主要介绍使用第三方库来对yaml文件配置和解析。首先安装yaml依赖库&#xff1b;然后yaml文件中配置各项值&#xff0c;并给出demo参考&#xff1b;最后解析yaml文件&#xff0c;由于yaml文件的配置在全局中可能需要&#xff0c;可定义全局变量Config&#xff0c;便于调用 文…
阅读更多...
【基于HTML5的网页设计及应用】——float实现页面布局

【基于HTML5的网页设计及应用】——float实现页面布局

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…
阅读更多...
Nodejs 第五十章（lua的基本使用）

Nodejs 第五十章（lua的基本使用）

lua基本使用 全局变量局部变量 全局变量是在全局作用域中定义的变量&#xff0c;可以在脚本的任何地方访问。全局变量在定义时不需要使用关键字&#xff0c;直接赋值即可。 xiaoman xmzsprint(xiaoman)局部变量是在特定作用域内定义的变量&#xff0c;只能在其所属的作用域…
阅读更多...
MySQL从入门到实战

MySQL从入门到实战

MySQL从入门到实战 1.连接数据库 在操作数据库之前&#xff0c;需要连接它&#xff0c;输入命令&#xff1a;mysql -u用户名 -p密码。 2.创建数据库 创建完数据库之后我们可以通过show databases;命令查看MySQL中已存在的数据库。[请注意&#xff1a;数据库名区分大小写。] 3…
阅读更多...
什么是聚簇索引与非聚集索引和区别?

什么是聚簇索引与非聚集索引和区别?

什么是聚簇索引与非聚集索引和区别? 按物理存储分类:InnoDB的存储方式是聚集索引&#xff0c;MVISAM的存储方式是非聚集索引 test innodb.frm 测试 innodb.ibd Frame表结构 数据表索引数据 test myisam.frm ---->Frame表结构test myisam.MYD_---数据表数据test_myisam.MYl-…
阅读更多...
vue-路由跳转和路由传参！！！

vue-路由跳转和路由传参！！！

需求&#xff1a;在修改商品时&#xff0c;会进行页面跳转&#xff0c;通过点击修改按钮进行页面跳转。这时我们需要将商品的id携带过去 一、首先我们在查询页面实现路由跳转并携带参数。 1.1、修改按钮 <el-button type"primary" size"small" click&qu…
阅读更多...
【排序】详解归并排序

【排序】详解归并排序

一、思想 归并排序的核心思想是分治法&#xff0c;即将大问题分解成小问题来解决&#xff0c;然后再将解决后的小问题的结果合并以解决原来的大问题。具体包括以下几个步骤&#xff1a; 分解&#xff08;Divide&#xff09;&#xff1a;将原始数组不断地二分成更小的子数组&a…
阅读更多...
黑马点评-优惠券秒杀业务

黑马点评-优惠券秒杀业务

全局唯一ID 每个店铺都可以发布同类优惠券&#xff0c;当用户抢购时&#xff0c;就会生成订单并保存到tb_voucher_order这张表中&#xff0c;而订单表如果使用数据库自增ID就存在一些问题&#xff1a; 如果我们的id具有太明显的规则&#xff0c;用户或者说商业对手很容易猜测…
阅读更多...
【教3妹学编程-算法题】超过阈值的最少操作数 II

【教3妹学编程-算法题】超过阈值的最少操作数 II

2哥 : 叮铃铃&#xff0c;3妹&#xff0c;准备复工了啊&#xff0c;过年干嘛呢&#xff0c;是不是逛吃逛吃&#xff0c;有没有长胖呢。 3妹&#xff1a;切&#xff0c;不想上班&#xff0c;假期能不能重来一遍啊&#xff0c;虽然在家我妈张罗着要给我相亲呢。可是在家还是很好的…
阅读更多...
基于springboot+vue的精简博客系统

基于springboot+vue的精简博客系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
数据结构中红黑树的概念以及代码

数据结构中红黑树的概念以及代码

红黑树&#xff08;Red-Black Tree&#xff09;是一种自平衡的二叉搜索树&#xff0c;它在插入和删除节点时通过一系列的旋转和重新着色操作来保持平衡。红黑树的平衡性质使得它的查找、插入和删除操作的时间复杂度都能保持在 O(log n) 红黑树的定义如下&#xff1a; 每个节点要…
阅读更多...
帝国CMS仿某猫办公PPT模板商城整站素材资源下载网站源码带手机端优化版

帝国CMS仿某猫办公PPT模板商城整站素材资源下载网站源码带手机端优化版

适合做创意设计模板下载的网站&#xff0c;涵盖行业优质精品PPT模板、视频素材、Word模板、Excel模板、音效及配乐素材等&#xff0c;集办公设计模板于一体&#xff0c;下载办公创意设计模板就选择这块源码&#xff01; 源码下载地址&#xff1a;帝国CMS仿某猫办公PPT模板商城…
阅读更多...
基于laspy的点云数据存取及基于Open3D的点云数据可视化

基于laspy的点云数据存取及基于Open3D的点云数据可视化

一、基于laspy的点云数据存取 &#xff08;一&#xff09;激光雷达点云数据的LAS存储格式[1] LAS&#xff08;LASer&#xff09;格式是一种为激光雷达点云数据的交换和存档而设计的文件格式&#xff0c;是一种被American Society for Photogrammetry and Remote Sensing&#…
阅读更多...
Claude 3正式发布，超越GPT-4，一口气读15万单词，OpenAI最强的大对手！

Claude 3正式发布，超越GPT-4，一口气读15万单词，OpenAI最强的大对手！

目录 多模态AI大模型Claude 3&#xff08;https://www.anthropic.com/news/claude-3-family&#xff09;Claude 3 的三个版本新增功能&#xff0c;chatgpt没有的使用成本总结 多模态AI大模型Claude 3&#xff08;https://www.anthropic.com/news/claude-3-family&#xff09; …
阅读更多...
C# 中 TryParse 将字符串转换为特定类型的方法

C# 中 TryParse 将字符串转换为特定类型的方法

在 C# 中&#xff0c;TryParse 是一个用于将字符串转换为特定类型的方法。它用于尝试解析字符串并将其转换为指定类型的值&#xff0c;而不会引发异常。如果解析成功&#xff0c;它将返回 true 并将解析结果存储在输出参数中&#xff1b;如果解析失败&#xff0c;它将返回 fals…
阅读更多...
分析开源机器学习框架TensorFlow

分析开源机器学习框架TensorFlow

TensorFlow是一个开源的机器学习框架&#xff0c;由Google开发和维护。它提供了一个灵活的编程环境&#xff0c;可用于构建和训练各种机器学习模型。TensorFlow的基本概念和使用场景如下&#xff1a; 张量&#xff08;Tensor&#xff09;&#xff1a;在TensorFlow中&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023