vue3 语法糖＜script setup＞

在 Vue 3 中，<script setup>是一种新的语法糖，它极大地简化了组件的编写方式。

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。

基本概念

  • 简洁的语法：<script setup>允许在<script>标签中直接使用组合式 API（Composition API），无需显式地返回一个对象（不需要使用return语句显示的暴露数据、方法）。
  • 自动注册：在<script setup>中定义的变量、函数和导入的组件会自动在模板中可用，无需手动注册。
  • 响应式声明：可以直接使用ref、reactive等函数来创建响应式数据，无需在setup函数中进行额外的处理。

基本语法

要启用该语法，需要在 <script> 代码块上添加 setup 属性：

<script setup>console.log('hello script setup')
</script>

里面的代码会被编译成组件 setup() 函数的内容。

  • 普通的 <script> 只在组件被首次引入的时候执行一次
  • <script setup> 中的代码会在每次组件实例被创建的时候执行。

定义在顶层的变量和函数会被暴露给模板

当使用 <script setup> 时，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用：

<template><div>{{ count }}</div><button @click="increment">点击count+1</button>
</template><script setup>
import { ref } from 'vue';const count = ref(10);
const increment = () => {count.value++;
};
</script>

在这个例子中，定义了一个响应式变量count和一个函数increment，它们可以直接在模板中使用。
不需要使用return显示的暴露。

import 导入的内容也会被暴露给模板

可以直接导入其他组件，并在模板中使用它们。导入的的组件会自动注册，不需要在components选项中进行显式注册。

<template><div><Child ref="cihldRef" /></div>
</template><script setup lang="ts">
import Child from './Child.vue';
</script>

在这个例子中，导入了一个名为Child的组件，并在模板中直接使用它。
<script setup> 范围里的值也能被直接作为自定义组件的标签名使用。
这里 Child 应当被理解为像是在引用一个变量。

可以在模板表达式中直接使用导入的 helper 函数，而不需要通过 methods 选项来暴露它：

<template><div>{{ capitalize('hello') }}</div>
</template>
<script setup>
import { capitalize } from './helpers'
</script>

使用动态组件

动态组件是指在运行时根据条件动态地切换不同的组件进行渲染。
在 Vue 中，可以使用<component>标签结合:is属性来实现动态组件。

由于组件是通过变量引用而不是基于字符串组件名注册的，在 <script setup> 中要使用动态组件的时候，应该使用动态的 :is 来绑定：

<template><component :is="Foo" /><component :is="someCondition ? Foo : Bar" />
</template>
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

可以使用响应式变量来控制动态组件的切换:

<template><component :is="currentComponent" /><button @click="toggleComponent">切换组件</button>
</template>
<script setup>
import { ref } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'const currentComponent = ref(ComponentA);
const toggleComponent = () => {currentComponent.value =currentComponent.value === Bar ? Foo : Bar;
};
</script>

可以为导入的组件添加别名：

import { Recur as RecursiveComponent } from './components'

使用递归组件

递归组件是指一个组件在其自身的模板中调用自身的组件。
在 Vue 3 中使用递归组件，在组件的模板（template）中直接调用自身，即可实现递归渲染。
例如：名为 RecursiveComponent.vue 的组件可以在其模板中用 <RecursiveComponent /> 引用它自己。

<template><div><!-- 这里是组件的当前层级内容 --><div v-for="item in data" :key="item.id">{{ item.name }}<RecursiveComponent v-if="item.children" :data="item.children" /></div></div>
</template>

在这个模板中，当 当前层级的数据存在子节点（item.children）时，就递归地调用自身（<RecursiveComponent />）来渲染子节点。

注意：name 属性的重要性

  • 唯一标识：递归组件必须要有 name 属性。
    • 因为 name 属性为组件提供了一个唯一的标识。在递归调用中，Vue 需要通过这个唯一标识来正确地识别和处理组件。
  • 错误提示和调试：
    • 如果没有 name 属性，Vue 在运行时可能会抛出错误，难以确定是哪个组件出现了问题。

在设计递归组件时，一定要确保有明确的终止条件，以避免无限递归导致栈溢出等问题。

使用命名空间组件

在大型 Vue 3 项目中，命名空间组件可以帮助更好地组织和管理组件。
可以使用<Foo.Bar>这样的带 . 的组件标签来引用嵌套在对象属性中的组件。
这里的Foo是一个包含Bar组件的对象或者模块。

例如，有一个名为MyNamespace的对象，其中包含一个名为NestedComponent的组件，可以在模板中这样引用：<MyNamespace.NestedComponent />。

// MyNamespace.js
import NestedComponent from './NestedComponent.vue';export default {NestedComponent,
};

在组件中使用：

<template><div><MyNamespace.NestedComponent /></div>
</template><script setup>
import MyNamespace from './MyNamespace';
</script>

对于具有相似功能但来自不同模块的组件，可以通过命名空间进行区分，避免名称冲突。

使用自定义指令

自定义指令是一种在 Vue 中扩展 HTML 元素行为的方式。可以通过自定义指令来实现对 DOM 元素的操作，例如添加事件监听器、修改样式等。
全局注册的自定义指令将正常工作。
本地的自定义指令在 <script setup> 中不需要显式注册，但必须遵循 vNameOfDirective 这样的命名规范：

<template><h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>
const vMyDirective = {beforeMount: (el) => {// 在元素上做些操作el.style.backgroundColor = 'lightblue';}
}
</script>

在这个例子中：

  • 在 <script setup> 中，定义了一个名为 vMyDirective 的常量，它实际上是一个对象，代表自定义指令的定义。
  • 对象vMyDirective包含一个 beforeMount 钩子函数，该函数会在指令所绑定的元素挂载到 DOM 之前被调用。
  • 在 beforeMount 函数中，可以接收一个参数 el，它代表被绑定指令的 DOM 元素。在这里可以对这个元素进行各种操作，比如添加事件监听器、修改样式、设置属性等。

defineProps() 和 defineEmits()

在 Vue 3 的 <script setup> 中，defineProps() 和 defineEmits() 是用于定义组件的 props 和 emits 的函数。

  • defineProps() 用于定义组件接收的外部传入的属性（props）。
    • defineProps() 允许开发者明确地指定组件可以接收哪些属性，以及这些属性的类型和默认值。
    • defineProps() 的返回值是一个包含传入的 props 的对象。
    • 在组件的模板和逻辑处理中，可以直接使用定义的 props。
  • defineEmits() 用于定义组件可以触发的自定义事件（emits）。它允许组件向父组件传递数据或通知父组件发生了某些事件。

示例：

<template><div>{{ message }}</div><button @click="emitEvent">触发事件</button>
</template><script setup>
// 调用 `defineProps()`，并传入一个对象来定义 `props` 的类型和默认值
// 如果父组件提供属性message，就会使用默认值。
const props = defineProps({message: {type: String,default: 'Hello, Vue 3!',},
});// 调用 `defineEmits()`，并传入一个数组来定义可以触发的事件名称
const emit = defineEmits(['customEvent']);const emitEvent = () => {emit('customEvent', 'Some data');
};
</script>

在这个例子中：

  • 定义了一个名为 message 的 prop，类型为字符串，默认值为 'Hello, Vue 3!'。在模板中可以直接使用 message 变量来显示传入的 prop 值。
  • 定义了一个名为 customEvent 的自定义事件。当按钮被点击时，调用 emitEvent 方法，触发 customEvent 事件并传递一些数据。

注意

  • defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。它们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

    • 在 Vue 3 的 <script setup> 中，defineProps 和 defineEmits 被称为编译器宏。它们是一种在编译阶段由编译器处理的特殊语法结构，用于特定的目的，在这个场景下，分别用于定义组件的 props 和 emits。

  • defineProps 接收与 props 选项相同的值。

    • 可以使用对象的形式来定义 props 的类型、默认值等属性，就像在传统的组件选项中一样。
    • 例如：defineProps({ propName: String, propWithDefault: { type: Number, default: 0 } })。

  • defineEmits 接收与 emits 选项相同的值。

    • defineEmits 接收与传统的 emits 选项相同的值，通常是一个数组，列出组件可以触发的自定义事件名称。
    • 例如：defineEmits(['eventName1', 'eventName2'])。

  • defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。

    • 例如，如果定义了一个 propName 的 prop 为字符串类型，在使用这个 prop 时，编辑器可以自动识别其类型为字符串，并提供相应的类型提示。

  • 传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

<script setup>
const localVar = 'some value';
defineProps({ propName: localVar }); // 这会导致编译错误，因为 localVar 是 setup 作用域的局部变量import { importedValue } from './someModule';
defineProps({ propName: importedValue }); // 这是合法的，因为 importedValue 在模块作用域内
</script>

针对类型的 props/emit 声明

props 和 emit 也可以通过给 defineProps 和 defineEmits 传递纯类型参数的方式来声明：

const props = defineProps<{foo: stringbar?: number
}>()const emit = defineEmits<{(e: 'change', id: number): void(e: 'update', value: string): void
}>()// 3.3+：另一种更简洁的语法
const emit = defineEmits<{change: [id: number] // 具名元组语法update: [value: string]
}>()

  • defineProps 或 defineEmits 要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错。

  • 使用类型声明的时候，静态分析会自动生成等效的运行时声明，从而在避免双重声明的前提下确保正确的运行时行为。

    • 在开发模式下，编译器会试着从类型来推导对应的运行时验证。例如这里从 foo: string 类型中推断出 foo: String。如果类型是对导入类型的引用，这里的推导结果会是 foo: null (与 any 类型相等)，因为编译器没有外部文件的信息。

    • 在生产模式下，编译器会生成数组格式的声明来减少打包体积 (这里的 props 会被编译成 ['foo', 'bar'])。

  • 在 3.2 及以下版本中，defineProps() 的泛型类型参数只能使用类型字面量或者本地接口的引用。

  • 这个限制已经在 3.3 版本中解决。最新版本的 Vue 支持在类型参数的位置引用导入的和有限的复杂类型。

使用类型声明时的默认 props 值

在使用针对类型的 defineProps 声明时，它没有可以给 props 提供默认值的方式。
当需要为 props 提供一些初始值或者在没有外部传入值时使用特定的默认值时，使用withDefaults 编译器宏。
withDefaults 编译器宏允许在使用类型声明的同时为 props 设置默认值。

<script setup>
import { withDefaults } from 'vue';const props = withDefaults(defineProps({message: String,count: Number,
}), {message: 'Hello, Vue 3!',count: 0,
});
</script>

也可以换一种写法：

export interface Props {msg?: stringlabels?: string[]
}const props = withDefaults(defineProps<Props>(), {msg: 'hello',labels: () => ['one', 'two']
})

上面代码会被编译为等价的运行时 props 的 default 选项。此外，withDefaults 辅助函数提供了对默认值的类型检查，并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。

更多关于Props的使用，请看vue3 Props的用法(父传子)

defineModel()

这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用。

defineModel 允许在组件中轻松创建双向绑定的变量。这意味着当父组件传递一个值给子组件，并且子组件可以修改这个值时，父组件也会自动更新这个值。

在子组件的 <script setup> 中，可以使用 defineModel 来定义一个双向绑定的变量。

<template><input v-model="modelValue" />
</template><script setup>
import { defineModel } from 'vue';const modelValue = defineModel();
</script>

modelValue 是一个双向绑定的变量，可以在输入框中使用 v-model 指令进行绑定。

在父组件中，可以将一个值传递给子组件，并使用 v-model 指令来实现双向绑定。

<template><div><Child ref="cihldRef" v-model="parentValue" /></div>
</template><script setup lang="ts" name="Person">
import { ref } from "vue";
import Child from './Child.vue';
const parentValue = ref('Initial value')
</script>

parentValue 是一个响应式变量，通过 v-model 指令传递给子组件 ChildComponent。当子组件中的输入框的值发生变化时，parentValue 也会自动更新。
在这里插入图片描述
使用 defineModel 可以使双向绑定的实现更加简洁和直观，无需手动处理 input 事件和 update:propName 事件。

如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。
在子组件中：

<script setup lang="ts">
import { defineModel } from 'vue';
const modelValue = defineModel({default: 'value'}); // 设置一个默认值
</script>

在父组件中：

<script setup lang="ts" name="Person">
import { ref } from "vue";
import Child from './Child.vue';
const parentValue = ref()   // parentValue 是undefined
</script>

初始化后，parentValue 与 modelValue 不同步：
在这里插入图片描述
在这里插入图片描述
当子组件中的输入框的值发生变化时，parentValue 也会自动更新。
在这里插入图片描述

解构defineModel()返回值

defineModel()函数在 Vue 3 的 <script setup>中用于处理v-model双向绑定。它返回一个包含两个元素的数组：

  • 第一个元素是双向绑定的值，通常用于在组件内部进行操作和展示。
  • 第二个元素是一个对象，包含了使用v-model指令时可能设置的修饰符。

通过解构赋值的方式，可以方便地将这两个返回值分别提取到独立的变量中。
例如：const [modelValue, modelModifiers] = defineModel()。
这样，modelValue就代表了双向绑定的值，而modelModifiers则是包含修饰符的对象。

在代码中，可以通过检查modelModifiers对象的属性来确定是否存在特定的修饰符。
例如，if (modelModifiers.trim) { //... }这段代码就是在检测是否存在trim修饰符。如果存在，就可以执行相应的逻辑。

const [modelValue, modelModifiers] = defineModel()// 对应 v-model.trim
if (modelModifiers.trim) {// ...
}

当存在修饰符时，需要在读取或将其同步回父组件时对其值进行转换。可以通过使用 get 和 set 转换器选项来实现：

const [modelValue, modelModifiers] = defineModel({get() {// 在这里可以对读取的值进行转换或处理return modelValue + ' (processed on get)';},set(value) {// 对设置的值进行处理，如果有修饰符可以在这里应用// 如果使用了 .trim 修饰符，则返回裁剪过后的值if (modelModifiers.trim) {return value.trim()}if (modelModifiers.uppercase) {return value.toUpperCase();}// 否则，原样返回return value}
})

在这个例子中:

  • get 方法在读取 modelValue 时被调用。get 方法可以用于在读取双向绑定的值时进行特定的处理或转换。
  • set 方法用于在设置双向绑定的值时进行特定的处理或转换。
    • set 方法接收一个参数 value，代表要设置的值。根据不同的修饰符情况对这个值进行处理。
    • 如果存在 trim 修饰符，就对值进行去空格处理。
    • 如果存在 uppercase 修饰符，就将值转换为大写字母。
    • 如果没有任何修饰符，直接返回传入的值。

在 TypeScript 环境下，defineModel可以接收一个类型参数来明确指定双向绑定的值的类型。

// 表示双向绑定的值为字符串类型。
// modelValue 被推断为 Ref<string | undefined>,响应式应用，可能包含字符串值或者为undefined。
const modelValue = defineModel<string>()// 如果不想modelValue 为undefined，设置required: true
// modelValue 被推断为 Ref<string>
const modelValue = defineModel<string>({ required: true })// 可以同时指定第二个类型参数来明确修饰符的类型
// modelValue 被推断为 Ref<string | undefined>
// 修饰符被指定为只能是"trim"或者"uppercase"这两种字符串字面量类型之一。
// modifiers 被推断为 Record<'trim' | 'uppercase', true | undefined>
// 表示modifiers是一个对象，键为指定的修饰符类型，值为true或undefined，表示该修饰符是否被应用。
const [modelValue, modifiers] = defineModel<string, "trim" | "uppercase">()

defineExpose()

在 Vue 3 的 <script setup> 中，defineExpose 是一个用于明确指定组件实例对外暴露哪些属性和方法的函数。
使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
defineExpose 允许开发者精确地控制哪些属性和方法可以被父组件通过模板引用访问到。

在子组件的 <script setup> 中，可以调用 defineExpose 并传入一个对象，该对象包含要暴露的属性和方法。

<template><div><div>count: {{ count }}</div><button @click="addCount">点击 count+1</button></div>
</template>
<script setup lang="ts">
import { ref } from 'vue';let count = ref(0);const addCount = () => {count.value++;
};// 把属性count、方法addCount暴露给父组件
defineExpose({count,addCount
});
</script>

在这个例子中，子组件定义了一个内部的响应式数据 count和一个方法 addCount，然后通过 defineExpose 将它们暴露出去。

在父组件中，可以通过模板引用获取子组件的实例，并访问通过 defineExpose 暴露出来的属性和方法。

<template><ChildComponent ref="childRef" /><button @click="accessChildComponent">Access child component</button>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const childRef = ref(null);const accessChildComponent = () => {if (childRef.value) {console.log(childRef.value.count);childRef.value.addCount();}
};
</script>

在这个例子中，父组件通过模板引用 childRef 获取子组件的实例，并在按钮的点击事件中访问子组件暴露出来的 count 和调用 addCount。

defineOptions()

defineOptions 是一个用于定义组件选项的函数。
这个宏可以用来直接在 <script setup> 中声明组件选项，而不必使用单独的 <script> 块：

<script setup>
defineOptions({inheritAttrs: false,customOptions: {/* ... */}
})
</script>

这是一个宏定义，选项将会被提升到模块作用域中，无法访问 <script setup> 中不是字面常数的局部变量。

可以用来直接在 <script setup> 中声明组件选项，比如 name、inheritAttrs 等。

使用 defineOptions 来明确指定组件的名称：

<script setup>
import { defineOptions } from 'vue';defineOptions({name: 'MyComponent',
});
</script>

在这个例子中，明确指定了组件的名称为 MyComponent。

inheritAttrs 选项决定了组件是否继承未被识别的属性并将其应用到根元素上。默认情况下，组件会继承这些属性。
使用 defineOptions 设置 inheritAttrs: false 时，组件不会继承未被识别的属性：

<script setup>
import { defineOptions } from 'vue';defineOptions({inheritAttrs: false,
});
</script>

在这个例子中，设置 inheritAttrs 为 false，表示组件不继承未被识别的属性。

使用defineOptions 设置emits属性（替代defineEmits），定义组件可以触发的自定义事件：

<script setup>
import { defineOptions } from 'vue';defineOptions({emits: ['customEvent1', 'customEvent2'],
});
</script>

使用defineOptions 设置props属性（替代defineEmits），定义组件接收的外部传入的属性：

<script setup>
import { defineOptions } from 'vue';defineOptions({props: {propName1: String,propName2: {type: Number,default: 0,},},
});
</script>

可以用来对组件的 setup 函数进行一些额外的配置：

<script setup>
import { defineOptions } from 'vue';defineOptions({setup() {// 一些特殊的 setup 配置逻辑return {// 返回一些特定的值或对象};},
});
</script>

虽然可以使用 defineOptions 来配置这些属性，但在很多情况下，使用专门的函数如 defineProps、defineEmits 等可能会更加简洁和直观。

defineSlots()

  • defineSlots 是一个用于定义组件插槽的函数。
  • defineSlots 允许开发者在 <script setup> 语法中明确地定义组件的插槽。
  • defineSlots() 只接受类型参数，没有运行时参数。
    • 类型参数应该是一个类型字面量，其中属性键是插槽名称，值类型是插槽函数。
    • 函数的第一个参数是插槽期望接收的 props，其类型将用于模板中的插槽 props。返回类型目前被忽略，可以是 any。
  • 返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。
<script setup lang="ts">
const slots = defineSlots<{default(props: { msg: string }): any
}>()
</script>

可以使用 defineSlots 来定义一个名为 default 的插槽：

<script setup>
import { defineSlots } from 'vue';const slots = defineSlots({default: () => null,
});
</script>

在这个例子中，定义了一个默认插槽，其函数返回值为 null，表示插槽的默认内容为空。
在模板中，可以使用 <slot> 标签来渲染插槽内容：

<template><div><slot /></div>
</template>

useSlots() 和 useAttrs()

在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

  • useSlots 函数用于访问组件的插槽内容。它返回一个对象，其中包含了组件所定义的各个插槽的内容。
    • 通过 useSlots，可以在组件的逻辑部分动态地处理插槽内容，根据不同的条件渲染不同的插槽内容，或者对插槽内容进行进一步的加工和处理。
<script setup>
import { useSlots } from 'vue';const slots = useSlots();
console.log(slots.default());
</script>

在这个例子中，useSlots 返回的对象被赋值给 slots。然后，可以通过 slots.default() 来访问默认插槽的内容。如果组件有多个插槽，可以通过相应的属性名来访问，比如 slots.slotName。

  • useAttrs 函数用于访问组件上未被识别的属性（即没有被组件的 props 定义的属性）。它返回一个包含这些属性的对象。
<script setup>
import { useAttrs } from 'vue';const attrs = useAttrs();
console.log(attrs.class);
</script>

在这个例子中，useAttrs 返回的对象被赋值给 attrs。可以通过 attrs 对象访问组件上的属性，比如 attrs.class 访问 class 属性。

与普通的 <script> 一起使用

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：

  • 声明无法在 <script setup> 中声明的选项，例如 inheritAttrs 或插件的自定义选项 (在 3.3+ 中可以通过 defineOptions 替代)。
  • 声明模块的具名导出 (named exports)。
  • 运行只需要在模块作用域执行一次的副作用，或是创建单例对象。
<script>
// 普通 <script>，在模块作用域下执行 (仅一次)
runSideEffectOnce()// 声明额外的选项
export default {inheritAttrs: false,customOptions: {}
}
</script><script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

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

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

相关文章

国产GD32单片机开发入门(二)GD32单片机详解

国产GD32单片机开发入门(二)GD32单片机详解

文章目录 一.概要二.单片机型号命名规则三.GD32F103系统架构四.GD32F103C8T6单片机启动流程五.GD32F103C8T6单片机主要外设资源六.单片机开发过程中查看芯片数据手册的必要性1.单片机外设资源情况2.GD32单片机内部框图3.GD32单片机管脚图4.GD32单片机每个管脚功能5.单片机功耗数…
阅读更多...
解决前端访问IIS服务器发生跨域请求报错的方法

解决前端访问IIS服务器发生跨域请求报错的方法

现在WEB开发都是前后端分离的模式了&#xff0c;当前端代码访问后端WEB服务器时&#xff0c;经常会发生跨域请求报错的问题。 　　如果是IIS服务器&#xff0c;可以通过下面的方式轻松解决。 　　由于出现跨域问题是因为服务器返回的页面在返回头中没有设置“Access-Control-Al…
阅读更多...
SQL Server数据库 创建表，和表的增删改查

SQL Server数据库 创建表，和表的增删改查

打开SQL Server工具,连接服务器 右击数据库&#xff0c;创建新的数据库 新建表 填写列&#xff0c;我添加了Id,Name,Sex,Age,和class列 右键表刷新一下就有了 我又同时创建了一个Class表 点击新建查询&#xff0c;现在写代码添加数据&#xff0c;也可以操作表来对数据进行添加 …
阅读更多...
[CLIP-VIT-L + Qwen] 多模态大模型源码阅读 - DataSet篇

[CLIP-VIT-L + Qwen] 多模态大模型源码阅读 - DataSet篇

[CLIP-VIT-L Qwen] 多模态大模型源码阅读 - DataSet篇 前情提要源码解读完整代码逐行解读导包readjson函数data_collate函数ImageCaptionDataset类&#xff08;init函数&#xff09;ImageCaptionDataset类&#xff08;readImage函数&#xff09; 参考repo:WatchTower-Liu/VLM-…
阅读更多...
趋动科技 OrionX on VMware 打造 AI 就绪平台

趋动科技 OrionX on VMware 打造 AI 就绪平台

着科技进步和产业变革的加速演进&#xff0c;人工智能&#xff08;AI&#xff09;已经成为兵家必争之地。今年以来伴随着ChatGPT带来的鲶鱼效应&#xff0c;人工智能成为科技产业创新的焦点&#xff0c;其应用范围越来越广泛&#xff0c;并将持续发展。科技产业龙头正加大在人工…
阅读更多...
Redis入门指南

Redis入门指南

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的高性能键值对存储系统&#xff0c;它支持多种数据结构&#xff0c;如字符串、哈希、列表、集合、有序集合等。Redis因其快速的读写能力、丰富的数据类型和灵活的操作而广泛应用于缓存、消息队列、实时分析等…
阅读更多...
链接 -- 动静态链接 --特点、区别、静态库安装下载

链接 -- 动静态链接 --特点、区别、静态库安装下载

1.链接是什么&#xff1f; 我们的程序&#xff0c;和 库&#xff08;语言一定会有自己的标准库&#xff09; 结合的过程就叫做链接。 2.为什么有链接&#xff1f; 让开发站在巨人的肩膀&#xff0c;提高开发效率。 c语言库&#xff1a; ls /user/include/ 动静态库的特点与区别…
阅读更多...
力扣面试经典算法150题：O(1) 时间插入、删除和获取随机元素

力扣面试经典算法150题：O(1) 时间插入、删除和获取随机元素

O(1) 时间插入、删除和获取随机元素 今天的题目是力扣面试经典150题中的数组的中等难度题&#xff1a; O(1) 时间插入、删除和获取随机元素。 题目链接&#xff1a;https://leetcode.cn/problems/insert-delete-getrandom-o1/description/?envTypestudy-plan-v2&envIdtop…
阅读更多...
Oracle问题笔记

Oracle问题笔记

ORA-28040 没有匹配的验证协议 问题出现场景oracle数据库为12c,应用使用的jdbc或客户端工具是11g版本一下&#xff0c;连接12c数据库时会报ora-28040错误。解决办法在Oracle服务端的$ORACLE_HOME/network/admin/sqlnet.ora文件中添加&#xff1a; SQLNET.ALLOWED_LOGON_VERSI…
阅读更多...
第4章 汇编语言和汇编软件

第4章 汇编语言和汇编软件

第4章 汇编语言和汇编软件 该章主要介绍了汇编语言和汇编语言编译器的安装和使用。 汇编语言程序 该小节主要介绍了为什么要有汇编语言和汇编语言程序的一些基础写法。 书中有提到CPU有不同的架构&#xff0c;汇编语言有不同的风格&#xff0c;那么不同的CPU架构和不同的汇…
阅读更多...
日常维护交换机，看看这些老网工怎么说

日常维护交换机，看看这些老网工怎么说

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 晚上好&#xff0c;我的网工朋友。 交换机作为连接各个节点的核心设备&#xff0c;其稳定性和可靠性直接关系到整个网络系统的健康运行。 路由器…
阅读更多...
vue开发区分开发环境和生产环境，以及预发布环境

vue开发区分开发环境和生产环境，以及预发布环境

vue开发区分开发环境和生产环境&#xff0c;以及预发布环境 在根目录创建 .env[mode] 文件&#xff0c;在项目执行 npm run dev 的时候vite会自动去读取.env.development文件里面的配置&#xff0c;执行npm runbuild进行打包之后也会自动将.env.production的内容打包进去&…
阅读更多...
Kafka日志及常见问题

Kafka日志及常见问题

目录 1.Topic下的消息是如何存储的 1.1log文件追加记录所有消息 1.2index和timeindex加速读取日志信息 2.文件清理机制 2.1如何判断哪些日志文件过期了 2.2日志清理策略 3.Kafka的文件高效读写机制 3.1Kafka的文件结构 3.2顺序写磁盘 3.3零拷贝 3.3.1传统IO 3.3.2m…
阅读更多...
【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2–GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作 文章目录 【硬件操作入门】2--GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作一、GPIO与门电路1.1、GPIO的应用1.2、GPIO引脚操作1.2.1 设置引脚为GPIO功能…
阅读更多...
加速网络体验，Squid缓存代理：让浏览如飞，畅享无限网络速度！

加速网络体验，Squid缓存代理：让浏览如飞，畅享无限网络速度！

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言: squ…
阅读更多...
[数据集][目标检测]建筑工地楼层空洞检测数据集VOC+YOLO格式2588张1类别

[数据集][目标检测]建筑工地楼层空洞检测数据集VOC+YOLO格式2588张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2588 标注数量(xml文件个数)&#xff1a;2588 标注数量(txt文件个数)&#xff1a;2588 标注…
阅读更多...
springboot项目读取 resources 目录下的文件的9种方式

springboot项目读取 resources 目录下的文件的9种方式

1. 使用 ClassLoader.getResourceAsStream() 方法 InputStream inputStream getClass().getClassLoader().getResourceAsStream("file.txt"); 2. 使用 Class.getResourceAsStream() 方法 InputStream inputStream getClass().getResourceAsStream("/file.txt&…
阅读更多...
JAVA-封装

JAVA-封装

目录 一、封装的概念 二、封装扩展之包 1. 包的概念 2.导入包中的类 3.自定义包 4.常见的包 三、访问限定符 在同一包中&#xff1a; 在不同包中&#xff1a;​编辑 一、封装的概念 面向对象程序三大特性&#xff1a;封装、继承、多态。而类和对象阶段&#xff0c;主…
阅读更多...
网络安全——基础知识记忆梳理

网络安全——基础知识记忆梳理

1. SQL注入攻击 SQL注入攻击是一种常见的网络安全威胁&#xff0c;它利用Web应用程序中对用户输入的数据的不正确处理&#xff0c;攻击者可以在SQL查询中注入恶意代码&#xff0c;从而执行非授权的数据库操作。这种攻击方式可以导致数据泄漏、数据篡改、绕过认证等多种安全问题…
阅读更多...
什么样的条件才会造就这样疯狂的末日期权？

什么样的条件才会造就这样疯狂的末日期权？

今天带你了解什么样的条件才会造就这样疯狂的末日期权&#xff1f;末日期权一般是指期权合约快到期的一周或者最后三天&#xff0c;当然最后一天就是末日期权的疯狂。 末日期权是指那些接近到期日的期权。 由于剩余时间较短&#xff0c;这些期权的时间价值通常非常低&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发