Vue 3 的组件式开发（1）

1 引言

1.1 为什么需要组件化开发

前端需要组件化开发的原因主要有以下几点：

  1. 提高开发效率：

    • 组件化开发允许开发者将复杂的页面拆分成多个独立、可复用的组件。
    • 每个组件可以独立开发、测试和维护，从而减少了代码的重复，提高了开发速度。

  2. 增强代码可维护性：

    • 组件化使得代码结构更加清晰，每个组件都有明确的职责和边界。
    • 当需要修改或更新功能时，只需关注相关的组件，降低了代码的耦合度和复杂度。

  3. 促进团队协作：

    • 组件化开发支持多人并行开发，不同的开发者可以专注于不同的组件。
    • 通过版本控制和组件库管理，团队成员可以方便地共享和更新组件，促进团队协作。

  4. 提升用户体验：

    • 组件化使得界面更加模块化，可以更容易地实现动态加载和按需渲染。
    • 这有助于提升页面的加载速度和响应性能，从而改善用户体验。

  5. 便于复用和扩展：

    • 组件化使得代码更加灵活和可扩展，新的功能可以通过添加新的组件或修改现有组件来实现。
    • 组件的复用性也降低了开发成本，因为已经开发好的组件可以在不同的项目中重复使用。

  6. 支持跨平台开发：

    • 在现代前端开发中，组件化技术（如React Native、Flutter等）也支持跨平台开发。
    • 这意味着开发者可以使用相同的组件库来构建适用于不同平台（如Web、iOS、Android）的应用程序。

  7. 便于测试和调试：

    • 组件化开发使得测试更加容易，因为每个组件都可以独立地进行单元测试。
    • 这有助于快速定位和解决问题，提高代码的健壮性和稳定性。

1.2 Vue 3 组件化开发的优势

Vue 3 组件化开发的优势主要体现在以下几个方面：

一、性能提升与优化

  1. 更快的渲染速度：Vue 3 在底层的实现上进行了优化，如使用静态标记和树摇优化等手段来减小打包体积，从而提高了页面加载速度和渲染性能。
  2. 更高效的响应式系统：Vue 3 采用了基于 ES6 的 Proxy 实现响应式系统，相比 Vue 2 中的 Object.defineProperty，Proxy 更加灵活和强大，能够捕获更多的操作，并且性能更好。这使得 Vue 3 能够更准确地追踪数据的变化，实现更高效的数据更新和渲染。

二、更好的代码组织和复用性

  1. Composition API：Vue 3 引入了 Composition API，允许开发者将逻辑按照功能或者相关性进行组织，而不是按照选项的不同部分（如 data、methods、computed 等）来分散代码。这种方式使得组件代码更加简洁、直观和可复用。
  2. 模块化开发：组件化开发将页面拆分成多个独立的模块，每个模块都是一个独立的组件，具有自己的功能和样式。这使得代码更加模块化，易于理解和维护。
  3. 高复用性：通过组件化开发，开发者可以创建可复用的组件库，从而在不同的项目中重复使用这些组件，降低了代码的重复编写，提高了开发效率。

三、更强大的工具链支持

  1. 完整的工具链：Vue 3 提供了完整的工具链支持，包括 Vue CLI、Vue Devtools、Vetur 等。这些工具使得 Vue 3 的开发、调试和发布更加便捷。
  2. TypeScript 支持：Vue 3 对 TypeScript 的支持更加完善，提供了更好的类型推断和错误检查，支持更灵活的类型定义和泛型推断。这使得开发者能够编写更加类型安全的 Vue 应用程序。

四、更灵活的状态管理

  1. setup 函数：Vue 3 引入了 setup 函数来统一组件的逻辑处理和状态管理。开发者可以在 setup 函数中使用 ref、reactive 等 API 来定义响应式数据，使用 computed 和 watch 等 API 来定义计算属性和侦听器。这使得组件的状态管理更加灵活和直观。
  2. provide/inject API：Vue 3 还提供了 provide/inject API，允许组件之间共享状态，而不需要通过 props 传递。这进一步提高了组件的复用性和可维护性。

五、更丰富的组件特性

  1. Fragment 组件：Vue 3 引入了 Fragment 组件，允许开发者在模板中返回多个根节点，而不需要包裹在一个额外的父节点中。这样可以更自然地书写模板，减少不必要的 HTML 标签。
  2. Teleport 组件：Teleport 组件允许开发者将组件的内容渲染到 DOM 结构的其他位置，而不需要改变组件的父子关系。这对于创建模态框、弹出菜单等需要在 DOM 结构中动态改变位置的组件非常有用。
  3. Suspense 组件：Suspense 组件用于处理异步操作和动态组件的加载状态。开发者可以使用 Suspense 组件来优雅地处理数据加载、代码分割等异步操作，同时提供了自定义加载状态和错误处理的能力。

综上所述，Vue 3 组件化开发在性能提升、代码组织和复用性、工具链支持、状态管理以及组件特性等方面都表现出显著的优势。这些优势使得 Vue 3 在开发过程中更加高效和灵活，也更加符合现代前端开发的需求。

2 Vue 3 组件基础

2.1 组件的基本结构

Vue 3 组件的基本结构主要由三部分组成，即模板（Template）、逻辑（Script）、样式（Styles）。以下是关于Vue 3组件基本结构的详细解释：

一、模板（Template）

模板用来定义组件的HTML结构。在Vue 3中，模板通常写在<template>标签内。模板中可以包含HTML元素、指令、插值表达式等。例如：

<template><div class="my-component"><h1>{{ title }}</h1><button @click="handleClick">点击我</button></div>
</template>

在这个例子中，模板定义了一个包含标题和按钮的组件。

二、逻辑（Script）

逻辑部分负责组件的JavaScript逻辑和数据等。在Vue 3中，逻辑通常写在<script>标签内，并且可以使用setup语法来组织代码。逻辑部分可以定义组件的数据、方法、生命周期钩子等。例如：

<script setup>
import { ref } from 'vue';// 定义数据
const title = ref('我的组件');// 定义方法
function handleClick() {alert('按钮被点击了！');
}
</script>

在这个例子中，逻辑部分定义了一个名为title的响应式数据和一个名为handleClick的方法。

三、样式（Styles）

样式部分用于定义组件的CSS样式。在Vue 3中，样式通常写在<style>标签内，并且可以使用scoped属性来确保样式只作用于当前组件。例如：

<style scoped>
.my-component {border: 1px solid #ccc;padding: 10px;
}button {background-color: #42b983;color: white;border: none;padding: 10px 20px;cursor: pointer;
}
</style>

在这个例子中，样式部分定义了组件的边框、内边距以及按钮的背景色、文字颜色等样式。

四、组件注册与使用

在Vue 3中，组件需要先注册才能使用。注册组件有两种方式：全局注册和局部注册。

  • 全局注册：通过Vue.component()方法或app.component()方法（在Vue 3的创建应用实例后）可以将组件注册为全局组件，这样在任何模板中都可以使用这个组件。
  • 局部注册：在父组件的<script>部分中，通过components选项可以将组件注册为局部组件，这样只有在这个父组件的模板中才能使用这个子组件。

五、示例

以下是一个完整的Vue 3组件示例：

<template><div class="my-component"><h1>{{ title }}</h1><button @click="handleClick">点击我</button></div>
</template><script setup>
import { ref } from 'vue';const title = ref('我的组件');function handleClick() {alert('按钮被点击了！');
}
</script><style scoped>
.my-component {border: 1px solid #ccc;padding: 10px;
}button {background-color: #42b983;color: white;border: none;padding: 10px 20px;cursor: pointer;
}
</style>

这个示例展示了如何定义一个包含模板、逻辑和样式的Vue 3组件，并展示了如何在模板中使用插值表达式和指令来绑定数据和事件。

2.2 组件的定义与注册

2.2.1 全局注册

Vue 3 组件的全局注册是 Vue 框架中一个重要的功能，它允许开发者在整个 Vue 应用程序中全局地使用某个组件，而无需在每个需要使用该组件的页面中单独引入。以下是对 Vue 3 组件全局注册的详细讲解：

一、全局注册的基本步骤

  1. 定义组件：
    首先，需要定义一个 Vue 组件。这通常包括一个模板（template）、脚本（script）和样式（style）部分。例如，定义一个名为 MyComponent 的组件：

    <!-- MyComponent.vue -->
<template><div><h1>Hello, MyComponent!</h1></div>
</template><script>
export default {name: 'MyComponent',// 组件的其他选项...
}
</script><style scoped>
/* 组件的样式... */
</style>

  2. 引入组件：
    在 Vue 应用的主入口文件（通常是 main.js 或 main.ts）中，引入刚刚定义的组件。

    import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

  3. 全局注册组件：
    使用 createApp 方法创建 Vue 应用实例后，通过调用实例的 component 方法来全局注册组件。

    const app = createApp(App);
app.component('MyComponent', MyComponent);

    这里，'MyComponent' 是全局注册的组件名（可以是自定义的），MyComponent 是组件的实例。

  4. 挂载应用：
    最后，调用应用实例的 mount 方法，将应用挂载到 DOM 元素上。

    app.mount('#app');

  5. 使用全局组件：
    现在，在任何 Vue 组件或页面的模板中，我们都可以直接通过 标签来使用这个按钮组件，而无需再次引入和注册：

    <!-- SomeOtherComponent.vue -->  <template>  <div>  <h1>Welcome to SomeOtherComponent</h1>  <MyComponent />  </div>  </template>  <script>  // 注意：这里我们不需要再次引入和注册 MyComponent 组件  export default {  name: 'SomeOtherComponent'  }  </script>

二、全局注册的优势

  1. 简化代码：全局注册后，在任何需要使用该组件的页面中，都可以直接通过标签名来使用，而无需再次引入和注册。
  2. 提高复用性：全局注册的组件可以在整个 Vue 应用中复用，避免了代码的重复编写。
  3. 便于管理：对于大型项目，可以通过创建专门的文件（如 components/index.js）来集中管理全局注册的组件，使得代码更加清晰和易于维护。

三、批量全局注册组件

对于包含多个全局组件的大型应用，可以创建一个函数来批量注册这些组件。例如：

  1. 创建 components/index.js 文件：

    import MyComponent from './MyComponent.vue';
import AnotherComponent from './AnotherComponent.vue';const components = {MyComponent,AnotherComponent// 其他组件...
};export function registerGlobalComponents(app) {Object.keys(components).forEach(key => {app.component(key, components[key]);});
}

  2. 在 main.js 中调用该函数：

    import { createApp } from 'vue';
import App from './App.vue';
import { registerGlobalComponents } from './components/index';const app = createApp(App);
registerGlobalComponents(app);
app.mount('#app');

四、注意事项

  1. 命名冲突：全局注册的组件名应该唯一，以避免命名冲突。
  2. 性能考虑：虽然全局注册组件很方便，但如果注册了太多不必要的全局组件，可能会增加应用的体积和加载时间。因此，应该根据实际需求来选择是否全局注册某个组件。
  3. 类型安全：在 TypeScript 项目中，全局注册的组件可以通过明确的类型进行注册，以增强代码的可维护性和类型安全。

2.2.2 局部注册

Vue 3 组件的局部注册是一种将组件限制在特定作用域内使用的方法。与全局注册不同，局部注册的组件只能在注册它的父组件及其子组件中使用，无法在其他组件中直接使用。这种方式有助于减少全局作用域中的组件数量，降低应用的整体体积，并提高代码的模块化和可维护性。以下是对 Vue 3 组件局部注册的详细讲解：

一、局部注册的基本步骤

  1. 定义组件：
    首先，需要定义一个 Vue 组件。这通常包括一个模板（template）、脚本（script）和样式（style）部分。例如，定义一个名为 LocalComponent 的组件：

    <!-- LocalComponent.vue -->
<template><div><h2>This is a local component.</h2></div>
</template><script>
export default {name: 'LocalComponent',// 组件的其他选项...
}
</script><style scoped>
/* 组件的样式... */
</style>

  2. 引入组件：
    在需要使用该组件的父组件中，通过 import 语句引入该组件。

    <script>
import LocalComponent from './components/LocalComponent.vue';export default {// 父组件的其他选项...
}
</script>

  3. 局部注册组件：
    在父组件的 components 选项中注册该组件。注册后，该组件就可以在父组件的模板中通过标签名来使用了。

    <script>
import LocalComponent from './components/LocalComponent.vue';export default {components: {'local-component': LocalComponent},// 父组件的其他选项...
}
</script>

    注意，在 components 选项中，属性名（如 'local-component'）是自定义元素名，用于在模板中引用该组件；属性值（如 LocalComponent）是组件的实例或配置对象。

  4. 使用组件：
    在父组件的模板中，通过标签名来使用局部注册的组件。

    <template><div><h1>Parent Component</h1><local-component /></div>
</template>

二、局部注册的优势

  1. 减少全局作用域污染：局部注册的组件不会污染全局作用域，避免了全局组件名冲突的问题。
  2. 降低应用体积：由于局部注册的组件只会在需要使用它们的组件中加载，因此可以降低应用的整体体积。
  3. 提高代码可维护性：局部注册的组件与父组件之间的依赖关系更加明确，有助于代码的模块化和可维护性。

三、注意事项

  1. 命名规范：建议遵循 Vue 的命名规范，使用 kebab-case（小写字母加连字符）来命名组件。虽然 PascalCase（大写驼峰命名）在某些情况下也可以使用，但在 DOM 模板中，kebab-case 是唯一有效的命名方式。
  2. 局部注册范围：局部注册的组件只能在注册它的父组件及其子组件中使用。如果尝试在其他组件中使用该组件，Vue 会报错并提示该组件未注册。
  3. 组合式 API：在 Vue 3 中，还可以使用组合式 API（Composition API）来注册和使用组件。这种方式提供了更灵活的方式来组织组件逻辑和状态管理。

四、例子

以下是一个完整的例子，展示了如何在 Vue 3 中进行组件的局部注册和使用：

<!-- ParentComponent.vue -->
<template><div><h1>Parent Component</h1><local-component /></div>
</template><script>
import LocalComponent from './components/LocalComponent.vue';export default {components: {'local-component': LocalComponent},// 父组件的其他选项...
}
</script>

<!-- LocalComponent.vue -->
<template><div><h2>This is a local component.</h2></div>
</template><script>
export default {name: 'LocalComponent',// 组件的其他选项...
}
</script>

在这个例子中，LocalComponent 是一个局部注册的组件，它只能在 ParentComponent 及其子组件中使用。通过在 ParentComponent 的 components 选项中注册 LocalComponent，我们可以在 ParentComponent 的模板中通过 <local-component /> 标签来使用它。

2.3 父子组件通信

Vue 3中父子组件的通信是组件间交互的核心部分，它允许数据和方法在父子组件之间传递和调用。以下是对Vue 3父子组件通信的详细讲解：

2.3.1 父组件向子组件传参

  1. 父组件传递参数：

父组件通过属性绑定的方式（使用:或v-bind:前缀）将参数传递给子组件。
例如，在父组件的模板中，可以这样传递参数给子组件<ChildComponent :param="parentParam"/>，其中param是子组件中定义的属性名，parentParam是父组件中定义的参数。

  1. 子组件接收参数：

子组件通过defineProps方法接收父组件传递过来的参数。defineProps方法接收一个对象，对象的键是子组件中定义的属性名，值是对应的类型或默认值等配置。
例如，在子组件中可以这样接收参数const props = defineProps({ param: { type: String, default: '' } });。

具体示例如下：

父组件 (ParentComponent.vue)

<template><div><h1>我是父组件</h1><!-- 通过属性绑定将message传递给子组件 --><ChildComponent :message="parentMessage" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; // 引入子组件// 定义父组件的数据
const parentMessage = ref('Hello from Parent!');
</script><style scoped>
/* 父组件的样式 */
</style>

子组件 (ChildComponent.vue)

<template><div><h2>我是子组件</h2><!-- 使用插值表达式显示从父组件传递过来的message --><p>{{ message }}</p></div>
</template><script setup>
import { defineProps } from 'vue';// 定义子组件接收的props
const props = defineProps({message: {type: String, // 指定类型为Stringrequired: true, // 标记为必传},
});
</script><style scoped>
/* 子组件的样式 */
</style>

在这个样例中，父组件ParentComponent.vue定义了一个名为parentMessage的响应式数据，并通过属性绑定的方式（使用:前缀）将其传递给子组件ChildComponent.vue。子组件通过defineProps方法接收这个名为message的prop，并在模板中使用插值表达式{{ message }}来显示这个值。

当运行这个Vue 3应用程序时，就可以在页面上看到父组件和子组件的标题，以及子组件中显示的从父组件传递过来的消息“Hello from Parent!”。

2.3.2 子组件向父组件传参（事件触发）

  1. 子组件发射事件：
    子组件通过defineEmits方法定义可以发射的事件。
    defineEmits方法接收一个数组，数组中的元素是事件名（可以使用字符串或字符串数组的形式）。
    子组件通过emit方法发射事件，并可以传递参数给父组件。
    例如，在子组件中可以这样定义和发射事件const emit = defineEmits(['update']); emit('update', newValue);。

  2. 父组件监听事件：
    父组件在模板中通过@或v-on:前缀监听子组件发射的事件。
    当子组件发射事件时，父组件中对应的事件处理函数会被调用，并接收到子组件传递过来的参数。
    例如，在父组件的模板中可以这样监听事件<ChildComponent @update="handleUpdate"/>，并在父组件的脚本部分定义handleUpdate方法。

具体示例如下：

子组件 (ChildComponent.vue)

<template><div><h2>我是子组件</h2><!-- 一个按钮，点击时触发向父组件发送事件 --><button @click="sendUpdate">发送更新到父组件</button></div>
</template><script setup>
import { defineEmits } from 'vue';// 定义子组件可以发射的事件
const emit = defineEmits(['update']);// 定义一个方法，当按钮被点击时调用
function sendUpdate() {const newValue = 'New Value from Child';// 发射'update'事件，并传递newValue作为参数emit('update', newValue);
}
</script><style scoped>
/* 子组件的样式 */
</style>

父组件 (ParentComponent.vue)

<template><div><h1>我是父组件</h1><!-- 监听子组件的'update'事件 --><ChildComponent @update="handleUpdate" /><!-- 显示从子组件接收到的数据 --><p>从子组件接收到的数据: {{ receivedData }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; // 引入子组件// 定义父组件的数据
const receivedData = ref('');// 定义处理子组件'update'事件的方法
function handleUpdate(newValue) {// 更新父组件的数据receivedData.value = newValue;
}
</script><style scoped>
/* 父组件的样式 */
</style>

在这个样例中，子组件ChildComponent.vue定义了一个按钮，当按钮被点击时，会调用sendUpdate方法。这个方法通过emit函数发射一个名为update的事件，并传递一个字符串newValue作为参数。

父组件ParentComponent.vue在模板中使用了子组件，并通过@update="handleUpdate"语法监听了子组件的update事件。当子组件发射update事件时，父组件的handleUpdate方法会被调用，并接收到子组件传递过来的newValue参数。然后，父组件将接收到的数据存储在receivedData响应式变量中，并在模板中显示出来。

运行这个Vue 3应用程序时，点击子组件中的按钮，就可以在父组件中看到从子组件传递过来的新数据。

2.3.3 父组件调用子组件的方法

  1. 父组件获取子组件实例：
    父组件通过ref属性获取子组件的实例。
    在父组件的模板中，给子组件添加ref属性，并指定一个引用名。
    例如，<ChildComponent ref="childRef"/>。

  2. 父组件调用子组件方法：
    子组件通过defineExpose方法暴露其内部的方法或属性。
    父组件通过ref属性获取的子组件实例，可以调用defineExpose中暴露的方法或访问属性。
    例如，在子组件中定义和暴露方法defineExpose({ someMethod() { /* ... */ } });，在父组件中可以这样调用this.$refs.childRef.someMethod();（注意在<script setup>中需要使用ref的值来访问，即this.$refs.childRef.value.someMethod();，但在组合式API的setup函数中通常不会使用this，而是直接使用ref变量）。

具体示例如下：

在Vue 3中，父组件调用子组件的方法通常涉及到使用ref来获取子组件的实例，并在子组件中使用defineExpose（或直接在setup函数中返回对象）来暴露方法。以下是一个详细的样例：

子组件 (ChildComponent.vue)

<template><div><h2>我是子组件</h2><!-- 子组件的内容 --></div>
</template><script setup>
import { ref } from 'vue';// 子组件的内部数据或方法
function internalMethod() {console.log('子组件的内部方法被调用');// 这里可以执行一些操作
}// 暴露给父组件的方法
defineExpose({someMethod() {internalMethod();// 这里可以执行一些额外的操作或返回数据return 'Hello from Child';}
});// 注意：在setup中通常不直接定义和调用方法，而是通过defineExpose或返回对象来暴露它们。
// 但为了演示内部方法，我在这里定义了internalMethod并在someMethod中调用它。
</script>

父组件 (ParentComponent.vue)

<template><div><h1>我是父组件</h1><!-- 使用ref属性获取子组件实例 --><ChildComponent ref="childRef" /><button @click="callChildMethod">调用子组件方法</button><!-- 显示子组件方法返回的结果 --><p>子组件方法返回的结果: {{ childMethodResult }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';// 引用子组件实例
const childRef = ref(null);// 存储子组件方法返回的结果
const childMethodResult = ref('');// 定义调用子组件方法的方法
function callChildMethod() {// 在onMounted或某个事件处理器中调用子组件的方法// 确保子组件已经挂载并且ref已经解析if (childRef.value) {// 调用子组件暴露的方法childMethodResult.value = childRef.value.someMethod();}
}// 注意：在<script setup>中，我们不会使用this关键字。
// 相反，我们直接访问ref变量的.value属性来获取或设置值。
// 在这个例子中，我们使用了childRef.value来访问子组件实例。
</script>

在这个样例中，子组件ChildComponent.vue定义了一个内部方法internalMethod和一个暴露给父组件的方法someMethod。someMethod调用了internalMethod并返回了一个字符串。

父组件ParentComponent.vue在模板中使用了子组件，并通过ref属性childRef获取了子组件的实例。然后，父组件定义了一个方法callChildMethod，该方法在按钮点击时被调用。在callChildMethod中，父组件通过childRef.value.someMethod()调用了子组件的someMethod方法，并将返回的结果存储在childMethodResult中。

请注意，在<script setup>中，我们不会使用this关键字来访问组件实例或refs。相反，我们直接访问通过ref定义的变量，并使用.value属性来获取或设置值。此外，确保在调用子组件方法之前，子组件已经挂载并且ref已经解析（例如，在onMounted钩子或某个事件处理器中调用）。

2.4 注意事项

  1. 单向数据流：

    • Vue 3遵循单向数据流的原则，即父组件传递给子组件的数据应该是不可变的，子组件不应该直接修改父组件传递的数据。
    • 如果子组件需要修改数据，应该通过事件将新的数据传递给父组件，由父组件来更新数据。

  2. 类型检查：

    • 在使用defineProps和defineEmits时，可以利用TypeScript的类型系统来进行类型检查，以提高代码的可读性和健壮性。

  3. 避免过度使用$refs：

    • 虽然$refs提供了父组件调用子组件方法和访问属性的能力，但过度使用可能会导致代码难以维护和理解。
    • 在可能的情况下，优先考虑通过事件和属性绑定来实现父子组件之间的通信。

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

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

相关文章

QT界面开发--我的第一个windows窗体【菜单栏、工具栏、状态栏、铆接部件、文本编辑器、按钮、主界面】

QT界面开发--我的第一个windows窗体【菜单栏、工具栏、状态栏、铆接部件、文本编辑器、按钮、主界面】

经过前面的铺垫&#xff0c;今天我们就开始我们图形化界面之旅了&#xff0c;我们的第一个窗体主要包括&#xff1a;菜单栏、状态栏、工具栏、铆接部件、还有Qt提供的一些主窗体的API。 第一部分&#xff1a;主界面(QMainWindow) 当创建好项目后&#xff0c;我们直接运行&…
阅读更多...
logdata-anomaly-miner：一款安全日志解析与异常检测工具

logdata-anomaly-miner：一款安全日志解析与异常检测工具

关于logdata-anomaly-miner logdata-anomaly-miner是一款安全日志解析与异常检测工具&#xff0c;该工具旨在以有限的资源和尽可能低的权限运行分析&#xff0c;以使其适合生产服务器使用。 为了确保 logdata-anomaly-miner的正常运行&#xff0c;推荐安装了python > 3.6的…
阅读更多...
Qt 文本文件读写与保存

Qt 文本文件读写与保存

Qt 文本文件读写与保存 开发工具&#xff1a;VS2013 QT5.8 设计UI界面&#xff0c;如下图所示 sample7_1QFile.h 头文件&#xff1a; #pragma once#include <QtWidgets/QMainWindow> #include "ui_sample7_1QFile.h"class sample7_1QFile : public QMainWin…
阅读更多...
中国人寿财险青岛市分公司：保障民生，传递关爱

中国人寿财险青岛市分公司：保障民生，传递关爱

中国人寿财险青岛市分公司以保障民生为使命&#xff0c;传递关爱与温暖。 在健康险领域&#xff0c;公司为市民提供全面的医疗保障。从重大疾病保险到普通医疗保险&#xff0c;满足不同客户的需求。通过与医疗机构合作&#xff0c;为客户提供便捷的就医服务和理赔服务&#xf…
阅读更多...
Linux下的文件IO操作

Linux下的文件IO操作

目录 1.前导 1.1文件知识 1.2对比一下文件操作和重定向 1.2.1输入重定向 1.2.2追加重定向 1.3当前路径 1.4stdin stdout stderr 2.文件操作的系统调用接口 2.1.open()打开文件 2.1.2.flags参数 2.1.3.mode参数 2.1.3 umask()函数 2.2.write()向文件写入 ​编辑 2…
阅读更多...
【Kaggle | Pandas】练习1：创造、阅读和写作

【Kaggle | Pandas】练习1：创造、阅读和写作

文章目录 1. 创建DataFrame2. 创建数据表3. 创建可变Series表4. 读取csv 数据集5. 保存csv 文件 1. 创建DataFrame 在下面的单元格中&#xff0c;创建一个 DataFrame fruits &#xff0c;如下所示&#xff1a; import pandas as pd # Your code goes here. Create a datafr…
阅读更多...
Javaee---多线程(一）

Javaee---多线程(一）

文章目录 1.线程的概念2.休眠里面的异常处理3.实现runnable接口4.匿名内部类子类创建线程5.匿名内部类接口创建线程6.基于lambda表达式进行线程创建7.关于Thread的其他的使用方法7.1线程的名字7.2设置为前台线程7.3判断线程是否存活 8.创建线程方法总结9.start方法10.终止&…
阅读更多...
Spring《声明式事务》

Spring《声明式事务》

知识点&#xff1a; Spring 声明式事务 1.基于注解和配置类的Spring-jdbc环境搭建 1. 准备项目&#xff0c;pom.xml <dependencies> <!--spring context依赖--> <!--当你引入Spring Context依赖之后&#xff0c;表示将Spring的基础依赖引入了--> …
阅读更多...
七款主流图纸加密软件强力推荐｜2024年CAD图纸加密保护指南

七款主流图纸加密软件强力推荐｜2024年CAD图纸加密保护指南

在当今信息化的设计行业&#xff0c;保护CAD图纸的知识产权和数据安全变得尤为重要。随着越来越多的企业采用数字化设计和共享文件&#xff0c;如何防止CAD图纸被未经授权的访问和窃取成为了许多设计师和企业关注的焦点。为此&#xff0c;选用合适的图纸加密软件是保护CAD文件安…
阅读更多...
《数据结构》学习系列——树（下）

《数据结构》学习系列——树（下）

系列文章目录 目录 树和森林的遍历树的遍历森林的遍历基本算法递归先根遍历树迭代先根遍历树树和森林的层次遍历 压缩与哈夫曼树文件编码扩充二叉树哈夫曼树和哈夫曼编码哈夫曼树的基本思路哈夫曼编码 树和森林的遍历 树的遍历 先根遍历&#xff1a;先访问树的根结点&#x…
阅读更多...
想作弊❓用这个发起考试，根本没法作弊

想作弊❓用这个发起考试，根本没法作弊

&#x1f389; 推荐一款超实用的在线考试神器 —— 土著刷题✨ 如果你正在寻找一个既方便又高效的在线考试平台&#xff0c;那么“土著刷题”小&#x1f34a;序绝对值得一试&#xff01;它不仅完全免费&#xff0c;而且操作简单&#xff0c;非常适合用来组织线上测试。 &#x…
阅读更多...
使用Angular构建动态Web应用

使用Angular构建动态Web应用

&#x1f496; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4bb; Gitee主页&#xff1a;瑕疵的gitee主页 &#x1f680; 文章专栏&#xff1a;《热点资讯》 使用Angular构建动态Web应用 1 引言 2 Angular简介 3 安装Angular 4 创建Angular项目 5 设计应用结构 6 创建组件 7 …
阅读更多...
「Java SPI机制应用快速入门」: 一种JDK内置的服务提供发现机制

「Java SPI机制应用快速入门」: 一种JDK内置的服务提供发现机制

文章目录 什么是SPISPI机制的应用使用方法使用规范 入门案例 什么是SPI SPI首先是一种机制&#xff0c;这个机制叫&#xff1a;服务提供发现机制。那是谁来负责发现呢&#xff1f;当然是JDK内置的服务帮助我们发现啦。发现了帮助我们去调用&#xff0c;我们要做的就是在中间去…
阅读更多...
2024护理类科技核心期刊汇总（最新版）

2024护理类科技核心期刊汇总（最新版）

2024年9月中国科技核心期刊目录&#xff08;2024年版&#xff09;正式公布&#xff0c;13本护理类期刊入选。常笑医学整理了这13本护理类科技核心期刊的详细参数&#xff0c;以及投稿经验&#xff0c;供大家在论文投稿时参考&#xff0c;有需要的赶紧收藏&#xff01; 1.《中华…
阅读更多...
SwiftUI（四）- 布局（VStack、HStack、ZStack）

SwiftUI（四）- 布局（VStack、HStack、ZStack）

引言 页面的搭建和布局在应用开发中几乎占据了一半的代码量。定于iOS开发而言&#xff0c;相较于其它平台&#xff0c;UIKit的布局方式显得相对局限&#xff0c;通常只有绝对布局和相对布局两种方案。而在Flutter或者Android开发中&#xff0c;布局选项更为丰富&#xff0c;比…
阅读更多...
【mod分享】极品飞车9冬日mod，支持光追，想体验一把冬天的Rockport市吗

【mod分享】极品飞车9冬日mod，支持光追，想体验一把冬天的Rockport市吗

各位好&#xff0c;今天小编给大家带来一款新的高清重置魔改MOD&#xff0c;本次高清重置的游戏叫《极品飞车9最高通缉》。 《极品飞车&#xff1a;最高通缉》作为一款2005年的游戏&#xff0c;《极品飞车&#xff1a;最高通缉》的画面效果还是可以的&#xff0c;效果全开之后…
阅读更多...
【状态机DP】力扣1186. 删除一次得到子数组最大和

【状态机DP】力扣1186. 删除一次得到子数组最大和

给你一个整数数组&#xff0c;返回它的某个 非空 子数组&#xff08;连续元素&#xff09;在执行一次可选的删除操作后&#xff0c;所能得到的最大元素总和。换句话说&#xff0c;你可以从原数组中选出一个子数组&#xff0c;并可以决定要不要从中删除一个元素&#xff08;只能…
阅读更多...
手机拍证件照，换正装有领衣服及底色的方法

手机拍证件照，换正装有领衣服及底色的方法

证件照在我们的职业生涯的关键节点是经常会用到的&#xff0c;比如毕业入职、人事档案建立、升迁履历、执业资格考试和领证等&#xff0c;这些重要的证件照往往要求使用正装照&#xff0c;有时候手头没有合适的衣服&#xff0c;或者原先的证件照背景色不符合要求&#xff0c;就…
阅读更多...
numpy——数学运算

numpy——数学运算

一、标量——矢量 import numpy as npa 3.14 b np.array([[9, 5], [2, 7]])print(a) print(b)# ---------- 四则运算 ---------- print(a b) # np.add print(a - b) # np.subtract print(a * b) # np.multiply print(a / b) # np.divide 二、矢量——矢量 import nump…
阅读更多...
优选算法精品课--双指针算法（2）

优选算法精品课--双指针算法（2）

双指针算法&#xff08;2&#xff09; 1、有效三角形的个数1.1 题目解析1.2 思路解析1.3 代码实现 2、和为s的两个数2.1 题目解析2.2 思路解析2.3 代码实现 3、三数之和3.1 题目解析3.2 思路解析3.3 代码实现 4、四数之和4.1 题目解析4.2 思路解析4.3 代码实现 5 总结 1、有效三…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023