vue内置组件、特殊元素、组件api详解

vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88820174
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript完整版代码下载：
https://download.csdn.net/download/randy521520/88820178
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88820523
vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript完整版代码下载：
https://download.csdn.net/download/randy521520/88845681

一、简介

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的设计目标是通过简单、灵活的 API 提供高效的数据驱动视图层渲染。本文主要针对script setup讲解
以下是 Vue.js 的一些特点和优势：
1.简洁易用：Vue.js 的 API 简单易懂，容易上手，使开发者能够快速构建交互性强、动态的用户界面。
2.响应式数据绑定：Vue.js 使用双向数据绑定和虚拟 DOM 技术，能够自动追踪数据变化并更新视图，使开发者能够更容易地管理和维护应用的状态。
3.组件化开发：Vue.js 支持组件化开发，将页面拆分为多个独立的组件，每个组件负责自己的视图和逻辑，有利于代码复用和维护。
4.灵活性：Vue.js 提供了诸多灵活的特性，如指令、计算属性、过滤器等，使开发者能够根据需求选择合适的工具进行开发。
5.生态系统丰富：Vue.js 生态系统庞大丰富，拥有大量的插件、工具和第三方库，能够满足各种不同需求。
6.性能优化：Vue.js 通过虚拟 DOM 和 diff 算法优化了页面渲染性能，同时提供了一些性能优化的工具和指导，帮助开发者提升应用的性能。

二、vue内置组件之Transition

Transition 会在一个元素或组件进入和离开 DOM 时应用动画。
1.基本使用

<template><div><button @click="show = !show">Toggle</button><Transition><p v-if="show">hello</p></Transition></div>
</template>
<style lang="scss" scoped>
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}
</style>
<script setup>
import {ref} from "vue";const show = ref(false);
</script>

2.相关class

  • v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
  • v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
  • v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
  • v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
  • v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
  • v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。
    3.过渡效果命名，name可以说动态的
<template><div><button @click="show = !show">Toggle</button><Transition name="test"><p v-if="show">hello</p></Transition></div>
</template>
<style lang="scss" scoped>
.test-enter-active,
.test-leave-active {transition: opacity 0.5s ease;
}.test-enter-from,
.test-leave-to {opacity: 0;
}
</style>
<script setup>
import {ref} from "vue";const show = ref(false);
</script>

4.使用css的transition

<template><div><button @click="show = !show">Toggle</button><Transition name="slide-fade"><p v-if="show">hello</p></Transition></div>
</template>
<style lang="scss" scoped>
.slide-fade-enter-active {transition: all 0.3s ease-out;
}.slide-fade-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter-from,
.slide-fade-leave-to {transform: translateX(20px);opacity: 0;
}
</style>
<script setup>
import {ref} from "vue";const show = ref(false);
</script>

5.使用css的 animation

<template><div><button @click="show = !show">Toggle</button><Transition name="bounce"><p v-if="show" style="text-align: center;">Hello here is some bouncy text!</p></Transition></div>
</template>
<style lang="scss" scoped>
.bounce-enter-active {animation: bounce-in 0.5s;
}
.bounce-leave-active {animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);}
}
</style>
<script setup>
import {ref} from "vue";const show = ref(false);
</script>

6.自定义过渡 class

  • enter-from-class：进入动画的起始状态
  • enter-active-class：进入动画的生效状态
  • enter-to-class：进入动画的结束状态
  • leave-from-class：离开动画的起始状态
  • leave-active-class：离开动画的生效状态
  • leave-to-class：离开动画的结束状态
<Transitionname="custom-classes"enter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"
><p v-if="show">hello</p>
</Transition>

7.相关事件

  • before-enter：在元素被插入到 DOM 之前被调用，用这个来设置元素的 “enter-from” 状态
  • enter：在元素被插入到 DOM 之后的下一帧被调用，用这个来开始进入动画
  • after-enter：当进入过渡完成时调用。
  • enter-cancelled：当进入过渡在完成之前被取消时调用
  • before-leave：在 leave 钩子之前调用，大多数时候，应该只会用到 leave 钩子
  • leave：在离开过渡开始时调用，用这个来开始离开动画
  • after-leave：在离开过渡完成，且元素已从 DOM 中移除时调用
  • leave-cancelled：仅在 v-show 过渡中可用
    8.Transition 组件属性，除了上述提到的属性还包括以下属性
  • appear: 是否在初始渲染时使用过渡。
  • css: 是否使用CSS过渡类。
  • type: 过渡模式，可以是"transition"或"animation"。
  • mode: 控制元素在过渡过程中的行为。in-out新元素先进行过渡，完成后移除旧元素；out-in旧元素先进行过渡，完成后移除新元素。
  • duration: 过渡持续时间，可以是一个数字或一个包含enter和leave属性的对象。
三、vue内置组件之TransitionGroup

TransitionGroup是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。TransitionGroup支持和 Transition>基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：

  • 默认情况下，它不会渲染一个容器元素。但可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
  • 过渡模式在这里不可用，因为不再是在互斥的元素之间进行切换。
  • 列表中的每个元素都必须有一个独一无二的 key attribute。
  • CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。
<template><div><button @click="insert">添加</button><button @click="remove">删除</button><button @click="shuffle">重新排序</button><TransitionGroup tag="ul" name="fade"><li v-for="item in items" :key="item">{{ item }}</li></TransitionGroup></div>
</template>
<style lang="scss" scoped>/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {opacity: 0;transform: scaleY(0.01) translate(30px, 0);
}/* 3. 确保离开的项目被移除出了布局流以便正确地计算移动时的动画效果。 */
.fade-leave-active {position: absolute;
}
</style>
<script setup>
import {ref} from 'vue'const getInitialItems = () => [1, 2, 3, 4, 5]
const items = ref(getInitialItems())
let id = items.value.length + 1function insert() {const i = Math.round(Math.random() * items.value.length)items.value.splice(i, 0, id++)
}function shuffle() {items.value = items.value.sort((a, b) => a - b);
}function remove(item) {const i = items.value.indexOf(item)if (i > -1) {items.value.splice(i, 1)}
}
</script>
四、vue特殊元素之component

component​用于渲染动态组件或元素的“元组件”。
1.绑定普通标签

<template><div><component :is="href ? 'a' : 'span'" :href="href">{{ href ? 'Click me' : 'Not a link' }}</component></div>
</template>
<script setup>
const href = 'https://www.baidu.com';
</script>

2.绑定组件

<template><component :is="Math.random() > 0.5 ? Foo : Bar"/>
</template>
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
五、vue内置组件之KeepAlive

KeepAlive 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。KeepAlive包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们

<KeepAlive include="a,b" exclude="c,d" max="10"><component :is="view"></component>
</KeepAlive>

1.include: 如果指定，则只有与 include 名称匹配的组件才会被缓存，可以使用正则
2.exclude: 任何名称与 exclude匹配的组件都不会被缓存，可以使用正则
3.max: 最多可以缓存多少组件实例

六、vue内置组件之Suspense

Suspense是一个内置组件，用来在组件树中协调对异步依赖的处理。可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态，Suspense是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化，而且Suspense组件自身目前还不提供错误处理，不过你可以使用 onErrorCaptured() 钩子，在使用到Suspense的父组件中捕获和处理异步错误。
1.子组件

<template><div><h1>{{ data.message }}</h1></div>
</template><script setup>
let fn = ()=>{return new Promise( (resolve,reject)=>{setTimeout(async() => {// reject({'message':'数据获取成功'})resolve({'message':'数据获取成功'})}, 2000);})
}
let data =  await fn();</script>

2.父组件

<template><Suspense @resolve="onResolve"@pending="onPending"@fallback="onFallback"><Demo/><template #fallback>Loading...</template></Suspense>
</template>
<script setup>
import Demo from "@components/Demo.vue";const onResolve = ()=>{console.log('异步组件加载成功')
}
const onPending = ()=>{console.log('异步组件加载中')
}const onFallback = ()=>{console.log('异步组件加载回调')
}
</script>
七、vue内置组件之Teleport

Teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去
1.基本使用，该模态框会被渲染到body中

<template><button @click="open = true">Open Modal</button><Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport>
</template>
<style lang="scss" scoped>
.modal {position: fixed;z-index: 999;top: 20%;left: 50%;width: 300px;margin-left: -150px;
}
</style>
<script setup>
import {ref} from "vue";const open = ref(false);
</script>

2.使用组件，Teleport>只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系

  • 子组件

<template><div class="modal">{{message.text}}</div>
</template><style lang="scss" scoped>
.modal {position: fixed;z-index: 999;top: 20%;left: 50%;width: 300px;margin-left: -150px;
}
</style><script setup>
import {inject} from "vue";const message = inject('message')
</script>

3.父组件

<template><button @click="open = true">Open Modal</button><Teleport to="body"><Demo v-if="open"/></Teleport>
</template>
<script setup>
import {provide, ref} from "vue";
import Demo from "@components/Demo.vue";const open = ref(false);provide('message',{'text':'依赖注入'})
</script>

4.组件属性

  • to: 指定目标容器，可以是选择器或实际元素
  • disabled: 当值为 true 时，内容将保留在其原始位置
八、vue特殊元素之slot

slot>元素可以使用 name attribute 来指定插槽名。当没有指定 name 时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。
1.子组件

<template><slot name="demo"></slot><slot></slot>
</template>

2.父组件

<template><Demo><template v-slot>默认</template><template v-slot:demo>demo</template></Demo>
</template>
<script setup>
import Demo from "@components/Demo.vue";
</script>

3.使用钩子访问插槽和插槽属性，useSlots() 和 useAttrs()

<template><slot name="demo"></slot><slot></slot>
</template>
<script setup>
import {useAttrs, useSlots} from "vue";console.log(useSlots().default())
console.log(useSlots().demo())
console.log(useAttrs())
</script>
九、vue特殊元素之template。

当想要使用内置指令而不在 DOM 中渲染元素时，template 标签可以作为占位符使用，可以在使用的指令：v-if、v-else-if、v-else、v-for、v-slot。如果这些指令都不存在，那么它将被渲染成一个原生的 template 元素。带有 v-for 的 template 也可以有一个 key 属性。所有其他的属性和指令都将被丢弃，因为没有相应的元素，它们就没有意义

<template><Demo><template v-slot>默认</template><template v-slot:demo>demo</template></Demo>
</template>
<script setup>
import Demo from "@components/Demo.vue";
</script>
十、自定义组件相关之定义组件props：defineProps()

1.子组件

<template><div>{{ props.message }}</div>
</template><script setup>const props = defineProps({message: {type: String,default: 'default'},
})</script>

2.父组件

<template><Demo message="parent"/>
</template>
<script setup>
import Demo from "@components/Demo.vue";
</script>

3.defineProps相关属性配置

  • type：指定 props 的类型，可以是一个构造函数或一个包含多个可能类型的数组。
  • required：指定该 prop 是否是必需的，如果设置为 true，则必须传入该 prop。
  • default：设置 props 的默认值，当 prop 未被传入时，使用默认值。
  • validator：自定义验证函数，用于验证传入的 prop 是否符合特定要求。
十一、自定义组件相关之事件绑定、双向数据绑定：defineEmits()

1.绑定事件

  • 子组件
<template><div @click="onClick">Demo组件</div>
</template><script setup>
const emit = defineEmits(['onClick']);
const onClick = () => {emit('onClick', '子组件defineEmits')
};</script>
  • 父组件
<template><Demo @on-click="onDemoClick"/>
</template>
<script setup>
import Demo from "@components/Demo.vue";const onDemoClick = (value)=>{console.log(value)
}
</script>

2.双向数据绑定

  • 子组件
<template><input :value="props.modelValue" @input="onModelValueChange"/><input :value="props.customModel" @input="onCustomModelChange"/>
</template><script setup>
const props = defineProps({modelValue: [String, Number],customModel: String
})
const emit = defineEmits(['update:modelValue','update:customModel']);
const onModelValueChange = (events)=>{emit('update:modelValue',events.target.value)
}const onCustomModelChange = (events)=>{emit('update:customModel',events.target.value)
}</script>
  • 父组件
<template><Demo v-model="modelValue" v-model:custom-model="customModelValue"/><div>默认双向数据绑定: {{ modelValue }}</div><div>自定义数据双向绑定: {{ customModelValue }}</div>
</template>
<script setup>
import Demo from "@components/Demo.vue";
import {ref} from "vue";const modelValue = ref('默认双向数据绑定');
const customModelValue =  ref('自定义数据双向绑定');</script>
十二、自定义组件相关之双向数据绑定props：defineModel() ，defineModel会自动触发update事件

1.子组件

<template><input v-model="modelValue"/><input v-model="customModel"/>
</template><script setup>
const modelValue = defineModel();
const customModel= defineModel("customModel", { type: Number, default: 0 })</script>

2.父组件

<template><Demo v-model="modelValue" v-model:custom-model="customModelValue"/><div>默认双向数据绑定: {{ modelValue }}</div><div>自定义数据双向绑定: {{ customModelValue }}</div>
</template>
<script setup>
import Demo from "@components/Demo.vue";
import {ref} from "vue";const modelValue = ref('默认双向数据绑定');
const customModelValue =  ref('自定义数据双向绑定');</script>

3.defineModel(name,options)相关属性配置

  • type：指定 props 的类型，可以是一个构造函数或一个包含多个可能类型的数组。
  • required：指定该 prop 是否是必需的，如果设置为 true，则必须传入该 prop。
  • default：设置 props 的默认值，当 prop 未被传入时，使用默认值。
  • validator：自定义验证函数，用于验证传入的 prop 是否符合特定要求。
十三、自定义组件相关之暴漏组件属性：defineExpose()

1.子组件

<template>demo组件
</template><script setup>
import {ref} from "vue";const count = ref(0);defineExpose({count: count,countChange:()=>{count.value++}
})</script>

2.父组件

<template><Demo ref="demoRef"/><button @click="demoRef?.countChange">点击改变count</button><div>DemCount：{{ demoRef?.count}}</div>
</template>
<script setup>
import Demo from "@components/Demo.vue";
import {ref} from "vue";const demoRef= ref();</script>
十四、组件其他API

1.defineComponent()：用于定义一个基本的 Vue 组件。

const MyComponent = defineComponent({name: 'MyComponent', // 组件名称props: {msg: String},data() {return {count: 0};},methods: {increment() {this.count++;}},template: `<div><h1>{{ msg }}</h1><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>`
});
app.component('my-component', MyComponent);

2.defineAsyncComponent(options)：定义异步组件，即在需要时才加载组件。

  • loader：异步组件加载器函数，用于加载异步组件的内容。
  • loadingComponent：加载组件时显示的组件。
  • errorComponent：在异步组件加载过程中发生错误时显示的组件。
  • delay：延迟加载组件的时间（毫秒）。
  • timeout：加载组件的超时时间（毫秒）。
  • suspensible：是否支持暂停挂起异步组件加载。
  • onError：处理异步组件加载错误的回调函数，接受错误对象、重试函数、失败函数和尝试次数作为参数。
<template><Demo/>
</template>
<script setup>
import {defineAsyncComponent} from "vue";const Demo = defineAsyncComponent(()=>import('@components/Demo.vue'));
</script>

3.defineOptions()：定义组件配置项

<template><Demo/>
</template>
<script setup>
import Demo from "@components/Demo.vue";defineOptions({name: 'home',mounted() {console.log('组件已挂载')}
})
</script>

4.defineSlots()：提供插槽名称和 props 类型检查的类型提示

<script setup lang="ts">
const slots = defineSlots<{default(props: { msg: string }): any
}>()
</script>

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

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

相关文章

java中的多态以及对象的类型转换

java中的多态以及对象的类型转换

多态 多态指的就是同一事物在不同情况下表现出来的不同状态或者行为。在java中&#xff0c;当调用同一个方法时&#xff0c;由于对象存在差异&#xff0c;不同的对象之间可能存在不同的行为&#xff0c;当父类引用指向了子类对象&#xff0c;用这个父类引用调用子类中重写的方法…
阅读更多...
深度学习十大算法之Diffusion扩散模型

深度学习十大算法之Diffusion扩散模型

1. 引言 扩散模型在近年来成为了热门话题&#xff0c;其火速蹿红主要归功于在图像生成领域的突破应用。尤其是一些从文本到图像的生成技术&#xff0c;它们成功地运用了扩散模型来创建令人惊叹的逼真图像。如果你听说过某个应用能够迅速且高质量地生成图像&#xff0c;那么很可…
阅读更多...
【效率提升】Xinstall免填邀请码，让App注册更便捷

【效率提升】Xinstall免填邀请码，让App注册更便捷

在移动互联网时代&#xff0c;App已经成为我们生活中不可或缺的一部分。然而&#xff0c;每当我们要尝试一个新的App时&#xff0c;繁琐的注册流程总是让人感到头疼。其中&#xff0c;填写邀请码这一环节更是让许多人望而却步。幸运的是&#xff0c;Xinstall作为国内专业的App全…
阅读更多...
每日OJ题_栈⑤_力扣946. 验证栈序列

每日OJ题_栈⑤_力扣946. 验证栈序列

目录 力扣946. 验证栈序列 解析代码 力扣946. 验证栈序列 946. 验证栈序列 难度 中等 给定 pushed 和 popped 两个序列&#xff0c;每个序列中的 值都不重复&#xff0c;只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时&#xff0c;返回 true&a…
阅读更多...
数据链路层之信道：数字通信的桥梁与守护者

数据链路层之信道：数字通信的桥梁与守护者

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码

C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码

C#/BS手麻系统源码 手术麻醉管理系统源码 商业项目源码 手麻系统从麻醉医生实际工作环境和流程需求方面设计&#xff0c;与HIS&#xff0c;LIS&#xff0c;PACS&#xff0c;EMR无缝连接&#xff0c;方便查看患者的信息;实现术前、术中、术后手术麻醉信息全记录;减少麻醉医师在…
阅读更多...
.NET Core教程：深入实践与实例解析

.NET Core教程：深入实践与实例解析

.NET Core教程&#xff1a;深入实践与实例解析 随着技术的发展&#xff0c;.NET Core作为微软推出的一个开源、跨平台的.NET实现&#xff0c;已经越来越受到开发者的青睐。本文将详细讲解.NET Core的基础知识&#xff0c;并通过实例来解析其关键特性和使用方法。 一、.NET Co…
阅读更多...
AI程序员Devin的开源替代Devika

AI程序员Devin的开源替代Devika

前天介绍了 AI软件工程师 微软AI 程序员AutoDev&#xff0c;自主执行工程任务生成代码-CSDN博客 今天介绍下另一款Devin替代品&#xff0c;开源的Devika (另外还有一个开源的 OpenDevin : https://github.com/OpenDevin/OpenDevin) Devika https://github.com/stitionai/dev…
阅读更多...
Redis在多节点上如何实现分布式锁？

Redis在多节点上如何实现分布式锁？

在多个 Redis 节点上实现分布式锁可以通过以下步骤来完成&#xff1a; 选择分布式锁的实现方式&#xff1a;有多种实现分布式锁的方式&#xff0c;如使用 Redis 的普通锁、RedLock 等。RedLock 是一种基于多个 Redis 节点的分布式锁实现&#xff0c;它通过在多个节点上获取锁来…
阅读更多...
awesome-cheatsheets：超级速查表 - 编程语言、框架和开发工具的速查表

awesome-cheatsheets：超级速查表 - 编程语言、框架和开发工具的速查表

awesome-cheatsheets&#xff1a;超级速查表 - 编程语言、框架和开发工具的速查表&#xff0c;单个文件包含一切你需要知道的东西 官网&#xff1a;GitHub - skywind3000/awesome-cheatsheets: 超级速查表 - 编程语言、框架和开发工具的速查表&#xff0c;单个文件包含一切你需…
阅读更多...
Python：魔法函数

Python：魔法函数

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; Python 的魔法函数&#xff0c;又称为特殊方法&#xff0c;是 Python 类中定义的一组特殊的方法&#xff0c;具有一些独特的特性和用途。这些方法…
阅读更多...
今日总结2024/3/30

今日总结2024/3/30

今日学习了基本数论内容,LCM,GCD以及筛素数 GCD-最大公约数 int gcd(int a,int b){//迭代法 while(b){//要保证a大于b int ta%b; ab; bt; } return a }//辗转相除法int gcd(int a,int b){//递归法return b?gcd(b,a%b):a;//一定要保证a大于b } LCM-最小公倍数 可以套公式LC…
阅读更多...
解决WordPress文章的段落首行自动空两格的问题

解决WordPress文章的段落首行自动空两格的问题

写文章时&#xff0c;段落首行都会空两格&#xff0c;可是WordPress自带的编辑器却没有考虑到这一点&#xff0c;导致发布的文章首行都是顶格的&#xff0c;看起来很不习惯。 我们通常的解决方法都是在发布文章时把编辑器切换到“文本”模式&#xff0c;然后再在首行手动键入两…
阅读更多...
鸿蒙之路由跳转router

鸿蒙之路由跳转router

router的使用都是基于Entry修饰的组件。 都是基于resources/base/profile/main-page.json中的路由配置来跳转的 router提供下列的几个方法 1.pushUrl -压栈一层盖一层(在鸿蒙中页面栈支持最大数值是32) 2.replaceUrl会替换当前页面&#xff0c;不管是不是同一个页面&#xf…
阅读更多...
超声波雷达探测车位及信号处理方法

超声波雷达探测车位及信号处理方法

在APA泊车中用到了超声波雷达，第一次接触，总结研究之。 目录 1. 基于USS的泊车位识别及推荐1.1 基于AVM的泊车位识别1.2 障碍物识别2. 超声波雷达及车位探测信号处理1. 基于USS的泊车位识别及推荐 参考： F-APA车位搜索及障碍物识别控制原理 1.1 基于AVM的泊车位识别 (1)a…
阅读更多...
P6学习：解析P6 WBS-工作分解结构的原则

P6学习：解析P6 WBS-工作分解结构的原则

前言 WBS&#xff0c;及Work Breakdown Structure&#xff0c;中文工作分解结构&#xff0c;是总结工作阶段的项目的层次结构分解。 WBS 就像项目的大纲——它将项目分解为特定的可交付成果或阶段。 然后将活动添加到这些层中以创建项目计划的时间表。 WBS 使用流程会有所不…
阅读更多...
linux命令之tput

linux命令之tput

1.tput介绍 linux命令tput是可以在终端中进行文本和颜色的控制和格式化&#xff0c;其是一个非常有用的命令 2.tput用法 命令&#xff1a; man tput 3.样例 3.1.清除屏幕 命令&#xff1a; tput clear [rootelasticsearch ~]# tput clear [rootelasticsearch ~]# 3.2.…
阅读更多...
love 2d Lua 俄罗斯方块超详细教程

love 2d Lua 俄罗斯方块超详细教程

源码已经更新在CSDN的码库里&#xff1a; git clone https://gitcode.com/funsion/love2d-game.git 一直在找Lua 能快速便捷实现图形界面的软件&#xff0c;找了一堆&#xff0c;终于发现love2d是小而美的原生lua图形界面实现的方式。 并参考相关教程做了一个更详细的&#x…
阅读更多...
Https【Linux网络编程】

Https【Linux网络编程】

目录 一、为什么需要https 二、常见加密方法 1、对称加密 2、非对称加密 3、数据指纹 三、选择什么加密方案&#xff1f; 方案一&#xff1a;对称加密&#xff08;&#xff09; 方案二&#xff1a;双方使用非对称加密&#xff08;效率低&#xff09; 方案三&#xff1a…
阅读更多...
通过cplusplus网站学习函数用法演示

通过cplusplus网站学习函数用法演示

在我们学习c语言或者c时&#xff0c;总会遇到一些我们熟悉的库函数&#xff0c;这时候就需要我们通过cplusplus网站搜索学习&#xff0c;下面就由我为大家演示一下如何通过这个网站的页面学习函数的使用方法吧&#xff01; atoi - C Reference (cplusplus.com) 我们今天要学习…
阅读更多...
最新文章

Copyright @ 2022~2023