【VueUse】超越基本功能的高级 Vue 元素操作

在vue开发中我们经常需要操作DOM元素，从简单的添加类到动态创建元素，这些操作都是不可避免的。而在VueUse库中，Elements相关API函数为我们提供了一系列强大而灵活的工具，帮助我们更轻松地处理DOM元素。无论是优雅地处理元素、动态渲染元素还是简化复杂的DOM操作，VueUse Elements都能够成为您的得力助手。

        在本文将带您深入探索VueUse Elements，揭示其背后的神秘面纱，并展示如何利用这些强大的API函数提升您的Vue项目至新的高度。让我们一起踏上这场关于VueUse Elements的探索之旅吧！

目录

useActiveElement(跟踪焦点元素)

useDocumentVisibility(跟踪文档可见状态)

useDraggable(拖拽元素)

useDropZone(拖放区域)

useElementBounding(响应边界数据)

useElementSize(获取指定元素宽高)

useResizeObserver(监听元素内容和边框尺寸变化)

useElementVisibility(跟踪元素可见性)

useIntersectionObserver(指定元素交集变化)

useMouseInElement(跟踪鼠标指定元素状态)

useMutationObserver(监听DOM树修改)

useWindowFocus(跟踪窗口焦点)

useWindowScroll(获取窗口的滚动位置)

useWindowSize(获取窗口尺寸)

最后总结

useActiveElement(跟踪焦点元素)

响应式 document.activeElement。什么意思呢？就是跟踪文档中当前处于焦点的元素。具体来说，useActiveElement函数会返回一个Ref对象，该对象的值为当前处于焦点的元素。这意味着，当用户在页面上点击、输入或以其他方式与页面交互时，useActiveElement将提供当前活动元素的信息。如下：

<template>
  <input v-for="i in 6" :key="i" type="text" :data-id="i" :placeholder="`${i}`"><br>
  当前聚焦的元素:{{ key }}
</template>

<script setup lang="ts">
import { watch, computed } from 'vue'
import { useActiveElement } from '@vueuse/core'

const activeElement = useActiveElement()
const key = computed(() => activeElement.value?.dataset?.id || 'null')

watch(activeElement, (el) => {
  console.log(activeElement.value?.dataset)
})
</script>

最终得到的结果如下：

useDocumentVisibility(跟踪文档可见状态)

响应式跟踪 document.visibilityState。什么意思呢？就是跟踪文档的可见性状态，允许开发者监测页面是否处于可见状态，从而可以根据不同的可见性状态来执行相应的操作。例如，在开发通知系统或者数据同步功能时，可以利用useDocumentVisibility函数来检测用户是否正在浏览页面，从而决定是否发送通知或执行数据同步操作，以避免在用户不可见时造成不必要的打扰或消耗额外的资源。如下：

<template>
  <div class="use-document-visibility">
    {{ hello }}
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useDocumentVisibility } from '@vueuse/core'

const visibility = useDocumentVisibility()

const hello = ref('最小化页面或切换标签然后返回！')
watch(visibility, (current, previous) => {
  if (current === 'visible' && previous === 'hidden') {
    hello.value = '欢迎回家！'
  }
})
</script>

最终得到的结果如下：

useDraggable(拖拽元素)

使元素可拖拽。什么意思呢？就是使元素能够响应拖拽操作，允许开发者将其应用于某个元素，从而使该元素具有拖拽功能。一旦应用了该函数，用户便可以通过鼠标或触摸屏对元素进行拖拽操作，移动元素到所需位置。如下：

<template>
  <div class="use-draggable" ref="el" :style="style" style="position: fixed;">
    <div class="title">标题</div>
    我的位置：{{ x }}, {{ y }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref(null)
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 }, // 初始位置

})
</script>

<style scoped lang="scss">
.use-draggable {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
  color: #333;
  padding: 10px 20px;
  .title {
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>

最终得到的结果如下：

useDropZone(拖放区域)

创建一个可以放置文件的区域。什么意思呢？就是让一个元素成为“拖放区域”，从而可以接收用户拖放的文件或其他数据。这个区域可以接收用户从文件系统或其他来源拖放过来的内容。通过这个函数，你可以监听各种拖放相关的事件，比如当用户开始拖拽、拖拽进入区域、拖拽在区域内移动以及拖放操作完成等。场景应用于文件上传组件、拖放式接口、图片管理工具等。如下：

<template>
  <div ref="dropZoneRef" class="drop-zone" :class="{ 'over': isOverDropZone }">
    拖拽文件到这个地方 {{ isOverDropZone }}
  </div>
  <ul v-if="state.name">
    <li>{{ state.name }}</li>
    <li>{{ state.size }}</li>
    <li>{{ state.type }}</li>
  </ul>
  <img src="./assets/1.jpg" alt="" style="width: 100px; height: 100px;">
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useDropZone } from '@vueuse/core'

const dropZoneRef = ref<HTMLDivElement>()
let state = reactive({}) as any

function onDrop(files: any) {
  state = files[0]
  console.log(state)
}
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>

<style>
  .drop-zone {
    width: 500px;
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
  }
  .drop-zone.over {
    background-color: #f0f0f0;
  }
</style>

最终得到的结果如下：

useElementBounding(响应边界数据)

让HTML元素的bounding box 响应式。什么意思呢？就是可以获取指定元素的位置、宽度、高度等边界信息。这对于实现响应式布局或者对元素进行定位、动画等操作非常有用。当元素的边界发生变化时（例如窗口大小变化导致元素位置或尺寸变化），相关的响应式数据也会自动更新，从而保持界面的同步性。这里我们搭配上文讲解到的拖拽元素的API一起使用，如下：

<template>
  <div ref="el" class="use-element-bounding" :style="style" style="position: fixed;">
    位置信息：<br />
    x: {{ x }}<br />
    y: {{ y }}<br />
    top: {{ top }}<br />
    left: {{ left }}<br />
    right: {{ right }} <br />
    bottom: {{ bottom }}<br />
    width: {{ width }}<br/>
    height: {{ height }}<br/>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useElementBounding, useDraggable } from '@vueuse/core'

const el = ref(null)

const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 }, // 初始位置
})

const { top, right, bottom, left, width, height } = useElementBounding(el, {
  reset: true, // 组件卸载时重置边界信息
  windowResize: true, // 监听窗口大小调整事件
  windowScroll: true, // 监听窗口滚动事件
  immediate: true, // 组件挂载时立即调用
})
</script>

<style scoped>
.use-element-bounding {
  background: #e5e5e5;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  width: 200px;
  height: 200px;
  color: #333;
  user-select: none;
}
</style>

最终得到的结果如下：

useElementSize(获取指定元素宽高)

元素尺寸大小响应式。什么意思呢？就是获取指定元素的宽度和高度，这对于布局和样式计算非常有用。基于元素的尺寸信息，你可以根据需要动态地调整布局和样式。例如，可以根据元素的宽度和高度选择合适的样式或者调整其他元素的位置和大小。如下：

<template>
    <div>
      width: {{ width }}<br>
      height: {{ height }}
    </div>
  <textarea ref="el" class="use-element-size">
  </textarea>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'

const el = ref(null)
const { width, height } = useElementSize(el)
</script>

<style scoped>
.use-element-size {
  background: #e5e5e5;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  width: 200px;
  height: 200px;
  color: #333;
}
</style>

最终得到的结果如下：

useResizeObserver(监听元素内容和边框尺寸变化)

监听元素内容和边框尺寸的变化。什么意思呢？就是用于观察指定元素的大小变化，并在大小变化时执行相应的回调函数。如下：

<template>
  <div>{{ text }}</div>
  <textarea class="use-resize-observer" ref="el"></textarea>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useResizeObserver } from '@vueuse/core'

const el = ref(null)
const text = ref('')

useResizeObserver(el, (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  text.value = `width: ${width}, height: ${height}`
})
</script>

<style>
.use-resize-observer {
  width: 200px;
  height: 200px;
  background: #ccc;
}
</style>

最终得到的结果如下： 

useResizeObserver 和 useElementSize 都是 VueUse 中用于监测元素大小变化的函数，但它们之间有一些区别：

实现原理：

1）useElementSize 则是通过监听 window 的 resize 事件以及元素的 scroll 事件，并结合获取元素的 clientWidth 和 clientHeight 属性来计算元素的大小变化。

2）useResizeObserver 使用的是 Resize Observer API，它能够在元素大小变化时立即触发回调函数。
浏览器支持：

1）useElementSize 的实现方式则更依赖于浏览器的 resize 和 scroll 事件，可能存在一些兼容性问题。
2）Resize Observer API 的支持程度较高，大多数现代浏览器都支持。

精确度：

由于 Resize Observer API 是专门用于监测元素大小变化的 API，因此在性能和精确度上可能会优于通过 resize 和 scroll 事件计算大小的方法。

使用场景：

1）如果你的项目需要考虑到一些老版本浏览器的兼容性，并且对性能要求不是特别高，可以考虑使用 useElementSize。

2）如果你需要在元素大小变化时立即触发回调函数，并且希望在现代浏览器中使用，则可以选择 useResizeObserver。

综上所述：

useResizeObserver 更适合现代化的项目，并且提供了更好的性能和精确度，而 useElementSize 则更适合需要考虑兼容性和性能要求不那么严格的项目。

useElementVisibility(跟踪元素可见性)

跟踪元素在视口中的可见性。什么意思呢？就是用于检测元素的可见性，可以帮助你监听指定元素的可见状态，即当元素进入或离开视窗时，相关的可见性状态会被更新。通过检测元素的可见性，你可以延迟加载页面中的图片、视频或其他资源，从而提高页面的加载性能和用户体验。当元素进入视窗时，再开始加载相应的内容。

举个经典的例子，当你电脑浏览b站视频的时候，你想刷一下评论区，当你鼠标滚动，原本的视频离开可视窗口的那一瞬间，右下角会给你打开一个小窗口，当你回到原本的视频窗口后，小窗口就会消失，就是这个道理！

案例代码如下：

<template>
  <div class="use-element-visiblity">
    <div ref="target" class="target">向下滚动到可视区域</div>
    <div class="tips-zone">
      提示内容{{ targetIsVisible }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'

const target = ref(null)
const targetIsVisible = useElementVisibility(target)
</script>

<style scoped lang="scss">
.use-element-visiblity {
  height: 100%;
  height: 200vh;
  background-color: #eee;
  .target {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .tips-zone {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9;
    border: 2px dashed #ccc;
    padding: 20px;
  }
}
</style>

最终得到的结果如下：

useIntersectionObserver(指定元素交集变化)

响应式监听目标元素的可见性。什么意思呢？就是监听指定元素与其祖先元素或视窗的交集变化。当元素进入或离开视窗，或者与祖先元素的交集变化时，相关的回调函数会被触发。如下：

<template>
  <div class="use-intersection-observer">
    <div class="box">
      <div class="p1">向下滚动</div>
      <div class="p2" ref="target">
        监听可视区域内容
      </div>
      <div class="p3">最底部</div>
    </div>
    <div class="tip">元素在窗口内 {{ targetIsVisible }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

const target = ref(null)
const targetIsVisible = ref(false)
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
  }
)
</script>

<style scoped lang="scss">
.use-intersection-observer {
  width: 500px;
  .box {
    border: 2px dashed #ccc;
    height: 100px;
    overflow-y: auto;
    padding: 20px;
    .p1, .p3 {
      padding: 30px;
    }
    .p2 {
      margin-top: 100px;
    }
  }
}
</style>

最终得到的结果如下：

useMouseInElement(跟踪鼠标指定元素状态)

响应式获取鼠标相对于元素的位置。什么意思呢？就是用于跟踪鼠标在指定元素内的位置和状态，实时获取鼠标相对于指定元素的位置信息，包括水平和垂直方向的坐标，通过实时追踪鼠标在元素内的位置和状态，可以为用户提供更加灵活、智能的交互体验，从而增强用户对网页或应用的满意度。如下：

<template>
  <div ref="el" class="use-mouse-in-element">
    <div ref="target" class="content">相对内容</div>
      位置信息：<br />
      x: {{ x }}<br />
      y: {{ y }}<br />
      sourceType: {{ sourceType }}<br />
      elementX: {{ elementX }}<br />
      elementY: {{  elementY }}<br />
      elementPositionX: {{ elementPositionX }}<br />
      elementPositionY: {{ elementPositionY }}<br />
      elementHeight: {{ elementHeight }}<br />
      elementWidth: {{  elementWidth }}<br />
      isOutside: {{  isOutside }}<br />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'

const target = ref(null)
const { 
  x, y, sourceType, elementX, elementY, elementPositionX, 
  elementPositionY, elementHeight, elementWidth, isOutside 
} = useMouseInElement(target)
</script>

<style scoped lang="scss">
.use-mouse-in-element {
  background: #e5e5e5;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  width: 400px;
  color: #333;
  .content {
    color: #fff;
    background: #ddd;
    padding: 40px;
  }
}
</style>

最终得到的结果如下：

useMutationObserver(监听DOM树修改)

监听DOM树修改。什么意思呢？就是用于观察指定元素及其子元素的 DOM 变化，并在发生变化时执行相应的回调函数。如下：

<template>
  <div>
    <h2>DOM元素监视器</h2>
    <div ref="targetElement">
      监视的元素
    </div>
    <button @click="changeElement">改变元素</button>
    {{ messages }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMutationObserver } from '@vueuse/core'

const targetElement = ref()
const messages = ref<any[]>([])

useMutationObserver(targetElement, (mutations) => {
  console.log('DOM元素发生变化:', mutations)
  if (mutations[0])  messages.value.push(mutations[0].attributeName) 
}, 
{ attributes: true });

// 改变DOM元素的内容
const changeElement = () => targetElement.value.style.color = 'red'
</script>

最终得到的结果如下： 

useWindowFocus(跟踪窗口焦点)

使用 window.onfocus 和 window.onblur 事件响应式跟踪窗口焦点。什么意思呢？就是实时监测浏览器窗口的焦点状态，即浏览器窗口是处于激活状态（获得焦点）还是非激活状态（失去焦点）。如下：

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useWindowFocus } from '@vueuse/core'

const startMessage = '💡单击文档之外的某个位置以取消聚焦。'
const message = ref(startMessage)
const focused = useWindowFocus()

watch(focused, (isFocused) => {
  if (isFocused)
    message.value = startMessage
  else
    message.value = 'ℹ 选项卡未聚焦'
})
</script>

最终得到的结果如下： 

useWindowScroll(获取窗口的滚动位置)

响应式获取窗口的滚动位置。什么意思呢？就是实时监测浏览器窗口的滚动位置，包括水平和垂直方向上的滚动距离，通过监听窗口的滚动事件，你可以实现一些响应式的效果，例如根据用户滚动位置展示或隐藏导航栏、懒加载页面内容、实现无限滚动加载等。如下：

<template>
  <div class="showTip">
    滚动值：<br>
    X轴{{ x }} - y轴{{ y }}
  </div>
  <div class="windowScroll"></div>
</template>

<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'
const { x, y } = useWindowScroll()
</script>

<style scoped lang="scss">
.showTip {
  width: 120px;
  height: 50px;
  background: #008c8c;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.windowScroll {
  width: 10000px;
  height: 200vh;
  background: #eee;
}
</style>

最终得到的结果如下： 

useWindowSize(获取窗口尺寸)

响应式获取窗口尺寸。什么意思呢？就是用于获取浏览器窗口的尺寸信息，通过监听窗口大小变化事件，你可以实现一些响应式的布局或样式，确保页面在不同设备或窗口尺寸下都能够正确展示。如下：

<template>
  <div class="use-window-size">
    width: {{ width }}, height: {{ height }}
  </div>
</template>

<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()
</script>

最终得到的结果如下： 

最后总结

useActiveElement：监测和响应用户与页面的交互，自动聚焦输入框或执行验证操作。

useDocumentVisibility：管理页面的可见性状态，优化用户体验和应用程序性能。

useDraggable：实现元素的拖拽功能，从而增强了应用程序的交互性和可用性。

useDropZone：在 Vue 应用中实现拖放区域，从而提升应用的交互性和用户体验。

useElementBounding：获取和管理元素的边界信息，处理元素相关的操作和交互。

useElementSize：响应式的方式获取和管理元素的尺寸信息，处理元素相关的操作和交互。

useResizeObserver：监测元素大小的变化，并实时响应变化。

useElementVisibility：监测和响应元素的可见性变化，实现与可见性相关的功能和优化。

useIntersectionObserver：实现在元素可见状态变化时自动更新相关的界面内容或状态。

useMouseInElement：追踪和监测鼠标在指定元素内的位置和状态。

useMutationObserver：监测 DOM 变化，并实时响应变化。

useWindowFocus：监测浏览器窗口的焦点状态，实现一些交互效果改善用户体验。

useWindowScroll：实时监听浏览器窗口的滚动事件，实现一些响应式效果。

useWindowSize：实时获取和响应浏览器窗口的尺寸信息，实现响应式布局。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[XYCTF新生赛]-PWN:fmt解析（scanf格式化字符串漏洞，任意地址写）

[XYCTF新生赛]-PWN:fmt解析（scanf格式化字符串漏洞，任意地址写）

查看保护 查看ida 这里没什么好说的 完整exp&#xff1a; from pwn import* context(log_leveldebug) #pprocess(./fmt) premote(gz.imxbt.cn,20975) backdoor0x4012BEp.recvuntil(bgift: ) printf_addrint(p.recv(14),16) print(hex(printf_addr)) libcELF(./libc-2.31.so) …
阅读更多...
HTML5实用大全(Part.2)

HTML5实用大全(Part.2)

引言&#xff1a; 哈喽&#xff0c;各位小伙伴们大家好呀&#xff0c;学习了上一篇关于HTML5的文章后&#xff0c;你是否对于入门HTML5有了一定的基础了呢&#xff0c;本篇博客我们将继续学习HTML5的不同标签&#xff0c;跟上队伍&#xff0c;准备出发咯&#xff01; 1.标签之…
阅读更多...
js APIS part2

js APIS part2

什么是事件&#xff1f; 事件是在编程时系统内发生的 动作 或者发生的事情。比如用户在网页上 单击 一个按钮 什么是事件监听&#xff1f; 就是让程序检测是否有事件产生&#xff0c;一旦有事件触发&#xff0c;就立即调用一个函数做出响应&#xff0c;也称为 绑定事件或者注册…
阅读更多...
2024年钉钉群直播回放如何永久保存

2024年钉钉群直播回放如何永久保存

工具我已经打包好了&#xff0c;有需要的自己取一下 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 1.首先解压好我给大家准备好的压缩包 2.再把逍遥一仙下载器压缩包也解压一下 3.打开逍遥一仙下载器文件夹里面的M3U8…
阅读更多...
python实验一 简单的递归应用

python实验一 简单的递归应用

实验一 实验题目 1、兔子繁殖问题(Fibonacci’s Rabbits)。一对兔子从出生后第三个月开始&#xff0c;每月生一对小兔子。小兔子到第三个月又开始生下一代小兔子。假若兔子只生不死&#xff0c;一月份抱来一对刚出生的小兔子&#xff0c;问一年中每个月各有多少只兔子。 &…
阅读更多...
软件工程全过程性文档（软件全套文档整理）

软件工程全过程性文档（软件全套文档整理）

软件项目相关全套精华资料包获取方式①&#xff1a;进主页。 获取方式②&#xff1a;本文末个人名片直接获取。 在软件开发的全过程中&#xff0c;文档是记录项目进展、决策、设计和测试结果的重要工具。以下是一个简要的软件全过程性文档梳理清单&#xff1a; 需求分析阶段…
阅读更多...
基于 AI 的数据库助手-Chat2DB

基于 AI 的数据库助手-Chat2DB

序言 现在已经开始步入 AI 时代&#xff0c;AI 产品也已经络绎不绝。今天&#xff0c;给大家介绍一款数据库的 AI 产品 —— Chat2DB。 一、什么是 Chat2DB Chat2DB 由阿里提供的一个数据库管理、数据开发、数据分析的工具&#xff0c;它是一个 AI 原生的数据库管理工具&…
阅读更多...
Spring 当中的Bean 作用域

Spring 当中的Bean 作用域

Spring 当中的Bean 作用域 文章目录 Spring 当中的Bean 作用域每博一文案1. Spring6 当中的 Bean的作用域1.2 singleton 默认1.3 prototype1.4 Spring 中的 bean 标签当中scope 属性其他的值说明1.5 自定义作用域&#xff0c;一个线程一个 Bean 2. 总结:3. 最后&#xff1a; 每…
阅读更多...
JavaScript基础(三)

JavaScript基础(三)

JS的数据类型 数据类型&#xff0b;解释 undefined 如var num;变量num没有初始值将被赋予undefined[基本数据类型]。 null 表示一个空值&#xff0c;与undefined值相等[对象]。 number 例:var num10; //整数&#xff0c;var num10.5; //浮点型。 boolean 布尔型&…
阅读更多...
【linuxC语言】fcntl和ioctl函数

【linuxC语言】fcntl和ioctl函数

文章目录 前言一、功能介绍二、具体使用2.1 fcntl函数2.2 ioctl函数 三、拓展&#xff1a;填写arg总结 前言 在Linux系统编程中&#xff0c;经常会涉及到对文件描述符、套接字以及设备的控制操作。fcntl和ioctl函数就是用来进行这些控制操作的两个重要的系统调用。它们提供了对…
阅读更多...
专业渗透测试 Phpsploit-Framework（PSF）框架软件小白入门教程（一）

专业渗透测试 Phpsploit-Framework（PSF）框架软件小白入门教程（一）

本系列课程&#xff0c;将重点讲解Phpsploit-Framework框架软件的基础使用&#xff01; 本文章仅提供学习&#xff0c;切勿将其用于不法手段&#xff01; Phpsploit-Framework&#xff08;简称 PSF&#xff09;框架软件&#xff0c;是一款什么样的软件呢&#xff1f; Phpspl…
阅读更多...
软件需求管理规程

软件需求管理规程

阅读更多...
[数据结构]———归并排序

[数据结构]———归并排序

具体代码&#xff1a;在gitee仓库&#xff1a;登录 - Gitee.com 目录 ​编辑 1.基本思想&#xff1a; 2. 代码解析 1.分析 2.逻辑图 3.运行结果 1.基本思想&#xff1a; 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分…
阅读更多...
Redis__三大日志

Redis__三大日志

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a;Redis__三大日志 ⏱️ 创作时间&#xff1a;2024年04月30日 ———————————————— 对于MySQL来说, 有…
阅读更多...
C# WinForm —— 08 Form初始化、布局、注册事件

C# WinForm —— 08 Form初始化、布局、注册事件

Form 初始化 Form初始化的时候会调用 Designer.cs 里的 InitializeComponent(); 函数&#xff0c;在InitializeComponent(); 函数里面有Load Form语句时会调用 FrmLogin_Load()函数 Form布局 两种方式&#xff1a; 拖控件到窗体&#xff0c;设置属性在Load事件中写代码添加…
阅读更多...
Python梯度提升决策树库之lightgbm使用详解

Python梯度提升决策树库之lightgbm使用详解

概要 LightGBM是一个快速、分布式、高性能的梯度提升决策树（Gradient Boosting Decision Tree）库，它在机器学习和数据挖掘领域被广泛应用。本文将介绍LightGBM库的安装方法、主要特性、基本功能、高级功能、以及在实际应用中的场景和总结。 安装 首先，需要安装LightGBM库…
阅读更多...
一文读懂：到底什么是SCDN？

一文读懂：到底什么是SCDN？

最近大家一定经常听到CDN这个词&#xff0c;对于之前没接触过这个行业的人&#xff0c;可能会听的云里雾里&#xff0c;不明所以。 那到底什么是SCDN呢&#xff1f; 简单理解&#xff1a;SCDN数据快递前置仓&#xff1f; SCDN&#xff0c;全称 Secure Content Delivery Networ…
阅读更多...
自测痉挛性斜颈的迹象：通过六个动作进行判断【北京仁爱堂】

自测痉挛性斜颈的迹象：通过六个动作进行判断【北京仁爱堂】

痉挛性斜颈是一种肌张力障碍性疾病&#xff0c;其主要特征是颈部肌肉群的病理性收缩&#xff0c;导致头颈部姿势异常。为了更好地了解自身的颈部健康状况&#xff0c;我们可以通过以下六个动作进行自测&#xff0c;以判断是否存在痉挛性斜颈的迹象。 一、头颈阵挛性旋转首先&am…
阅读更多...
2024网络安全面试问题宝典(4万字)

2024网络安全面试问题宝典(4万字)

2024网络安全厂商面试问题宝典(4万字) 目录 评分标准网络基础问题 TCP建立连接要进行3次握手&#xff08;syn-syn&#xff0c;ack-ack&#xff09;&#xff0c;而断开连接要进行4次&#xff08;fin-ack-fin-ack&#xff09;TCP&#xff0c;UDP区别&#xff1a;安全常用的协议…
阅读更多...
Jenkins(超详细的Docker安装Jenkins教程！！！)

Jenkins(超详细的Docker安装Jenkins教程！！！)

Jenkins Jenkins&#xff0c;原名 Hudson&#xff0c;2011 年改为现在的名字。它是一个开源的实现持续集成的软件工具。 官方网站&#xff1a;https://www.jenkins.io/ 中文文档&#xff1a;https://www.jenkins.io/zh/ 为什么需要Jenkins&#xff1f; 我们以前写完代码&a…
阅读更多...
最新文章

Copyright @ 2022~2023