当前位置: 首页 > news >正文

Vue 自定义指令

首先,我们知道vue中有很多自带指令,v-bind、v-on、v-model等。但在业务开发中,我们常见一些自定义指令如:v-copy、v-longpress等。那么如何定义自己所需的指令呢?
接下来我们分别从指令注册、指令的钩子函数、指令的参数以及常见指令的封装进行介绍。
在这里插入图片描述

为什么要自定义指令

在使用vue的时候 我们某些场景下仍然需要对普通 DOM 元素进行底层操作,
在vue中、组件渲染需要时间,获取DOM常需要搭配setTimeout、$nextTick使用
而自定义指令在使用时,更便捷。

指令注册

指令的注册命令:Vue.directive(key, directives[key])
使用:Vue.use()

全局注册

在我们常见的项目结构中、directives文件夹下,定义的index.js文件中,我们会对指令进行全局注册。

import MyDirective from './directive/myDirective' 
const directives = { MyDirective 
}
export default { install(app) {// 遍历、注册Object.keys(directives).forEach((key) => {    app.directive(key, directives[key])  })}
}

局部注册

在你自己组件或页面中,使用directives选项自定义指令

export default {directives: {myDirective: {inserted: function (el) {//}}}
}

使用

<input v-myDirective>

添加参数
v-myDirective="data" 传递数值给指令,这里的data可以是组件中的data数据,也可以是methods方法。

<div v-myDirective="{ color: 'white', text: 'hello!' }"></div>app.directive('myDirective', (el, binding) => {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"
})

v-myDirective:click="clickHandle",传递参数click,这里可以通过[xx]的格式动态传递参数。
v-myDirective:click.top.bar="clickHandle" 传递修饰符top和bar。

注意:不推荐在组件上使用自定义指令、它会应用于组件的根结点、和透传 attributes 类似。

指令的钩子和参数

const myDirective = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode) {}
}
  • bind: 只调用一次,指令第一次绑定到HTML元素时调用,可以定义一个在绑定时执行一次的初始化动作,此时获取父节点为null。
    bind: function (el, {value:{fn,time}}) {}
    el:指令绑定的元素、用来操作DOM
    value:指令的绑定值
  • inserted: 被绑定元素插入父节点时调用,此时可以获取到父节点。
  • update: 所在组件的VNode更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind: 只调用一次, 指令与元素解绑时调用。

常见指令的封装

v-copy

内容复制到剪切板中

const copy = {bind(el, { value }) {el.$value = valueel.handler = () => {if (!el.$value) {// 值为空的时候,给出提示。可根据项目UI仔细设计console.log('无复制内容')return}// 动态创建 textarea 标签const textarea = document.createElement('textarea')// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域textarea.readOnly = 'readonly'textarea.style.position = 'absolute'textarea.style.left = '-9999px'// 将要 copy 的值赋给 textarea 标签的 value 属性textarea.value = el.$value// 将 textarea 插入到 body 中document.body.appendChild(textarea)// 选中值并复制textarea.select()const result = document.execCommand('Copy')if (result) {console.log('复制成功') }document.body.removeChild(textarea)}// 绑定点击事件el.addEventListener('click', el.handler)},// 当传进来的值更新的时候触发componentUpdated(el, { value }) {el.$value = value},// 指令与元素解绑的时候,移除事件绑定unbind(el) {el.removeEventListener('click', el.handler)},
}export default copy

v-longpress

实现一个用户长按鼠标左键或移动端单指长按,触发的事件

const longpress = {bind(el, binding) {if (typeof binding.value!== 'function') {throw new Error('Callback must be a function');}let pressTimer = null;// 鼠标(左键)按下、移动端按下 且 按下持续时间超过 1s 时,触发const start = (e) => {if ((e.type === 'mousedown' && e.button!== 0) ||(e.type === 'touchstart' && e.touches.length > 1)) {return;}pressTimer = setTimeout(() => {binding.value(e);}, 1000);};// 鼠标(左键)抬起、移动端抬起 或 按下时间小于 1s 时,移除定时器const cancel = () => {if (pressTimer!== null) {clearTimeout(pressTimer);pressTimer = null;}};// 事件监听el.addEventListener('mousedown', start);el.addEventListener('touchstart', start);el.addEventListener('click', cancel);el.addEventListener('mouseout', cancel);el.addEventListener('touchend', cancel);el.addEventListener('touchcancel', cancel);},// 指令与元素解绑的时候,移除事件绑定unbind(el) {el.removeEventListener('mousedown', start);el.removeEventListener('touchstart', start);el.removeEventListener('click', cancel);el.removeEventListener('mouseout', cancel);el.removeEventListener('touchend', cancel);el.removeEventListener('touchcancel', cancel);},
};export default longpress

v-waterMarker

页面增加水印

function addWaterMarker(str, parentNode, font, textColor) {// 水印文字,父元素,字体,文字颜色var can = document.createElement('canvas')parentNode.appendChild(can)can.width = 200can.height = 150can.style.display = 'none'var cans = can.getContext('2d')cans.rotate((-20 * Math.PI) / 180)cans.font = font || '16px Microsoft JhengHei'cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 10, can.height / 2)parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}const waterMarker = {bind: function (el, binding) {addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)},
}export default waterMarker

相关文章:

Vue 自定义指令

首先&#xff0c;我们知道vue中有很多自带指令&#xff0c;v-bind、v-on、v-model等。但在业务开发中&#xff0c;我们常见一些自定义指令如&#xff1a;v-copy、v-longpress等。那么如何定义自己所需的指令呢&#xff1f; 接下来我们分别从指令注册、指令的钩子函数、指令的参…...

JAVA-制作小游戏期末实训

源码 import game.frame.Frame;public class App {public static void main(String[] args) {System.out.println("starting......");new Frame();} } package game.controller;import game.model.Enemy;public class EnemyController implements Runnable{private…...

【Vue教程】使用Vite快速搭建前端工程化项目 | Vue3 | Vite | Node.js

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f6a9;今天毛毛张分享的是关于如何快速&#x1f3c3;‍♂️搭建一个前端工程化的项目的环境搭建以及流程&#x1f320; 文章目录 1.前端工程化环境搭建&#…...

4.CSS文本属性

4.1文本颜色 div { color:red; } 属性值预定义的颜色值red、green、blue、pink十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%) 4.2对齐文本 text-align 属性用于设置元素内文本内容的水平对齐方式。 div{ text-align:center; } 属性值解释left左对齐ri…...

【工具整理】WIN换MAC机器使用工具整理

最近公司电脑升级&#xff0c;研发同学统一更换了 Mac Book Pro 笔记版电脑&#xff0c;整理一下安装了那些软件以及出处&#xff0c;分享记录下&#xff5e; 知识库工具 1、语雀 网址&#xff1a;语雀&#xff0c;为每一个人提供优秀的文档和知识库工具 语雀 个人花园&…...

Elasticsearch向量检索需要的数据集以及768维向量生成

Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一&#xff1a;使用fromsize实现分页 快速掌握Elasticsearch检索之二&#xff1a;滚动查询(scrool)获取全量数据(golang) Elasticsearch检索之三&#xff1a;官方推荐方案search_after…...

《小型支付商城系统》项目(一)DDD架构入门

目录 1.DDD架构 1.1充血模型 1.2领域模型 1.2.1实体 1.2.2值对象 1.2.3聚合 1.2.4领域服务 1.2.5工厂 1.2.6仓储&#xff08;Repository&#xff09; 2.DDD建模 3.DDD工程模型 项目介绍&#xff1a;知识星球 | 深度连接铁杆粉丝&#xff0c;运营高品质社群&#xff…...

web课程设计--酷鲨商城-springboot和vue

文章目录 页面截图技术分析数据库代码地址 页面截图 登陆页面: 分类列表 添加分类 轮播图列表 添加轮播图 商品列表 添加商品信息 技术分析 前端使用 html页面的 vue.js&#xff08;vue2&#xff09;和element-ui绘制前端界面 后台使用Springbootmybatis来实现crud。还有一…...

解决virtualbox克隆ubuntu虚拟机之后IP重复的问题

找遍了国内论坛&#xff0c;没一个能解决该问题的&#xff0c;所以我自己写个文章吧&#xff0c;真讨厌那些只会搬运的&#xff0c;污染国内论坛环境&#xff0c;搜一个问题&#xff0c;千篇一律。 问题 操作系统版本为"Ubuntu 24.04 LTS" lennytest1:~$ cat /etc…...

活动预告 |【Part1】Microsoft Azure 在线技术公开课:使用 Azure DevOps 和 GitHub 加速开发

课程介绍 通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课&#xff0c;掌握创造新机遇所需的技能&#xff0c;加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure DevOps 和 GitHub 加速开发”活动&#xff0c;了解迁移到 DevOps 所需的合适工具和…...

SpiderFlow平台v0.5.0之数据库连接

一、寻找lib目录安装方式 在 SpiderFlow 平台中&#xff0c;连接数据库时需要指定数据库的 DriverClassName&#xff0c;并确保正确配置数据库驱动。通常&#xff0c;驱动文件&#xff08;JAR 文件&#xff09;需要放置在指定的文件夹中&#xff0c;以便 SpiderFlow 可以找到并…...

springboot集成阿里云短信服务

springboot集成阿里云短信服务 一.阿里云账号准备 流程:注册阿里云账号>短信服务>新增资质>新建签名>新建模版>申请秘钥>用代码测试 1.注册阿里云账号 2、登录成功后&#xff0c; ① 在首页搜索短信服务 ② 打开第一个搜索结果 ③ 免费开通 ④ 可以根据…...

Redis 实战篇 ——《黑马点评》(上)

《引言》 在进行了前面关于 Redis 基础篇及其客户端的学习之后&#xff0c;开始着手进行实战篇的学习。因内容很多&#xff0c;所以将会分为【 上 中 下 】三篇记录学习的内容与在学习的过程中解决问题的方法。Redis 实战篇的内容我写的很详细&#xff0c;为了能写的更好也付出…...

Redis的生态系统和社区支持

Redis的生态系统和社区支持 1. Redis 生态系统 1.1 Redis核心 Redis 是一个高性能的内存存储系统,支持丰富的数据结构(如字符串、列表、集合、哈希和有序集合)。它的核心提供了: 高性能数据存储:单线程模型支持每秒数百万级别的操作。多种数据结构:适用于多样化场景,如…...

基于C语言从0开始手撸MQTT协议代码连接标准的MQTT服务器,完成数据上传和命令下发响应(华为云IOT服务器)

文章目录 一、前言二、搭建开发环境三、网络编程基础概念科普3.1 什么是网络编程3.2 TCP 和 UDP协议介绍3.3 TCP通信的实现过程 四、Windows下的网络编程相关API介绍4.1 常用的函数介绍4.2 函数参数介绍4.3 编写代码体验网络编程 五、访问华为云IOT服务器创建一个产品和设备5.2…...

什么是 GPT?Transformer 工作原理的动画展示

大家读完觉得有意义记得关注和点赞&#xff01;&#xff01;&#xff01; 目录 1 图解 “Generative Pre-trained Transformer”&#xff08;GPT&#xff09; 1.1 Generative&#xff1a;生成式 1.1.1 可视化 1.1.2 生成式 vs. 判别式&#xff08;译注&#xff09; 1.2 Pr…...

IDEA 编辑器自动识别 Dockerfile 类型高亮和语法提示

在 IDEA 中&#xff0c;如果项目里面的只有一个 Dockerfile文件时&#xff0c;那么此时使用打开这个文件都是 ok 的&#xff0c;支持语法高亮和关键词提示。 如果我们有多个 Dockerfile 时&#xff0c; 比如 A_Dockerfile , B_Dockerfile , C_Dockerfile, 这个时候你会发现 IDE…...

AI知识库与用户行为分析:优化用户体验的深度洞察

在当今数字化时代&#xff0c;用户体验&#xff08;UX&#xff09;已成为衡量产品成功与否的关键指标之一。AI知识库作为智能客服系统的重要组成部分&#xff0c;不仅为用户提供快速、准确的信息检索服务&#xff0c;还通过用户行为分析&#xff0c;为产品优化提供了深度洞察。…...

什么是Redis哨兵机制?

大家好&#xff0c;我是锋哥。今天分享关于【什么是Redis哨兵机制&#xff1f;】面试题。希望对大家有帮助&#xff1b; 什么是Redis哨兵机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 哨兵&#xff08;Sentinel&#xff09;机制是 Redis 提…...

JavaScript中如何创建对象

在JavaScript中&#xff0c;创建对象有多种方法。以下是几种常见的方式&#xff1a; 1. 对象字面量 这是最直接和常用的创建对象的方法。使用花括号 {} 包围一组键值对来定义一个对象。 let person {name: "John",age: 30,greet: function() {console.log("…...

2025:OpenAI的“七十二变”?

朋友们&#xff0c;准备好迎接AI的狂欢了吗&#xff1f;&#x1f680; 是不是跟我一样&#xff0c;每天醒来的第一件事就是看看AI领域又有什么新动向&#xff1f; 尤其是那个名字如雷贯耳的 OpenAI&#xff0c;简直就是AI界的弄潮儿&#xff0c;一举一动都牵动着我们这些“AI发…...

Mysql(MGR)和ProxySQL搭建部署-Kubernetes版本

一、Mysql(MGR) 1.1 statefulSet.yaml apiVersion: apps/v1 kind: StatefulSet metadata:labels:app: mysqlname: mysqlnamespace: yihuazt spec:replicas: 3serviceName: mysql-headlessselector:matchLabels:app: mysqltemplate:metadata:labels:app: mysqlspec:affinity:p…...

uni-app 多平台分享实现指南

uni-app 多平台分享实现指南 在移动应用开发中&#xff0c;分享功能是一个非常常见的需求&#xff0c;尤其是在社交媒体、营销活动等场景中。使用 uni-app 进行多平台开发时&#xff0c;可以通过一套代码实现跨平台的分享功能&#xff0c;涵盖微信小程序、H5、App 等多个平台。…...

Windows系统下载、部署Node.js与npm环境的方法

本文介绍在Windows电脑中&#xff0c;下载、安装并配置Node.js环境与npm包管理工具的方法。 Node.js是一个基于Chrome V8引擎的JavaScript运行时环境&#xff0c;其允许开发者使用JavaScript编写命令行工具和服务器端脚本。而npm&#xff08;Node Package Manager&#xff09;则…...

Typora 最新版本下载安装教程(附详细图文)

文章简介 在当今快节奏的信息化时代&#xff0c;简洁高效的写作工具成为了每位内容创作者的必需品。而Typora&#xff0c;这款备受推崇的 Markdown 编辑器&#xff0c;正是为此而生。它采用无缝设计&#xff0c;去除了模式切换、预览窗口等干扰&#xff0c;带来真正的实时预览…...

将一个变量声明为全局变量比如:flag1=false;然后通过jQuery使用js一个方法,将它设置为不可修改

方法 1&#xff1a;使用 Object.defineProperty 通过 Object.defineProperty 将全局变量设置为只读属性。 // 声明全局变量 var flag1 false;// 使用 Object.defineProperty 将其设置为不可修改 Object.defineProperty(window, flag1, {configurable: false, // 不允许删除属…...

找不到qt5core.dll无法运用软件的解决办法

在运行某些软件或游戏时&#xff0c;部分用户会遇到电脑显示由于找不到qt5core.dll&#xff0c;无法继续执行代码的问题&#xff0c;下面就给大家分享几种简单的解决方法&#xff0c;轻松恢复软件正常运行。 导致qt5core.dll缺失的原因 qt5core.dll是 Qt 应用程序框架的一部分…...

集线器,交换机,路由器,mac地址和ip地址知识记录总结

一篇很不错的视频简介 基本功能 从使用方面来说&#xff0c;都是为了网络传输的标识&#xff0c;和机器确定访问对象 集线器、交换机和路由器 常听到路由器和集线器&#xff0c;下面是区别&#xff1a; 集线器 集线器&#xff1a;一个简单的物理扩展接口数量的物理硬件。…...

Javascript算法——回溯算法(组合问题)

相关资料来自《代码随想录》&#xff0c;版权归原作者所有&#xff0c;只是学习记录 回溯 回溯模板 void backtracking(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本层集合中元素&#xff08;树中节点孩子的数量就是集合的大小&#xff09;) {处理节点…...

【人工智能机器学习基础篇】——深入详解无监督学习之聚类,理解K-Means、层次聚类、数据分组和分类

深入详解无监督学习之聚类&#xff1a;如K-Means、层次聚类&#xff0c;理解数据分组和分类 无监督学习是机器学习中的一个重要分支&#xff0c;旨在从未标注的数据中发现潜在的结构和模式。聚类&#xff08;Clustering&#xff09;作为无监督学习的核心任务之一&#xff0c;广…...

从0到机器视觉工程师(二):封装调用静态库和动态库

目录 静态库 编写静态库 使用静态库 方案一 方案二 动态库 编写动态库 使用动态库 方案一 方案二 方案三 总结 静态库 静态库是在编译时将库的代码合并到最终可执行程序中的库。静态库的优势是在编译时将所有代码包含在程序中&#xff0c;可以使程序独立运行&…...

Mybatis的set标签,动态SQL

set标签常用于update语句中&#xff0c;搭配if标签使用 set标签的作用 1、会动态加上前置set关键字 2、可以删除无关的逗号 示例代码&#xff1a; <update id"update">update employee<set><if test"name ! null">name #{name},<…...

机器学习-感知机-神经网络-激活函数-正反向传播-梯度消失-dropout

文章目录 感知机工作流程 神经网络区别各种各样的神经网络 激活函数激活函数类型Sigmoid 函数ReLU函数Leaky ReLU 函数Tanh 函数 正向传播反向传播梯度消失(gradient vanish)如何解决 Dropout使用 PyTorch实战神经网络算法(手写MNIST数字识别)viewsoftmax和log-softmaxcross-en…...

HTML5 时间选择器详解

HTML5 的时间选择器&#xff08;Time Picker&#xff09;允许用户通过图形界面选择时间。它通过设置 <input> 元素的 type 属性为 time 来实现。以下是关于 HTML5 时间选择器的详细讲解。 HTML5 时间选择器详解 1. 基本用法 要创建一个时间选择器&#xff0c;只需使用…...

SSM-Spring-AOP

目录 1 AOP实现步骤&#xff08;以前打印当前系统的时间为例&#xff09; 2 AOP工作流程 3 AOP核心概念 4 AOP配置管理 4-1 AOP切入点表达式 4-1-1 语法格式 4-1-2 通配符 4-2 AOP通知类型 五种通知类型 AOP通知获取数据 获取参数 获取返回值 获取异常 总结 5 …...

小红书笔记详情API分析及读取深度探讨

一、引言 随着社交电商的蓬勃发展&#xff0c;小红书凭借其独特的社区氛围和强大的内容生产能力&#xff0c;吸引了大量用户和开发者。对于开发者而言&#xff0c;小红书提供的API接口是获取其丰富内容的重要途径。本文将对小红书笔记详情API进行深入分析&#xff0c;并详细阐…...

【Yarn】通过JMX采集yarn相关指标的Flink任务核心逻辑

通过JMX采集yarn相关指标的Flink任务核心逻辑 文章目录 通过JMX采集yarn相关指标的Flink任务核心逻辑通过jmx接口查询Yarn队列指标请求JMX配置项核心处理流程输出到kafka格式通过jmx接口查询ResourceManager核心指标请求JMX读取配置yaml配置文件核心处理逻辑输出Kafka格式彩蛋 …...

【网络安全】PostMessage:分析JS实现XSS

前言 PostMessage是一个用于在网页间安全地发送消息的浏览器 API。它允许不同的窗口&#xff08;例如&#xff0c;来自同一域名下的不同页面或者不同域名下的跨域页面&#xff09;进行通信&#xff0c;而无需通过服务器。通常情况下&#xff0c;它用于实现跨文档消息传递&…...

基于springboot的码头船只货柜管理系统 P10078

项目说明 本号所发布的项目均由我部署运行验证&#xff0c;可保证项目系统正常运行&#xff0c;以及提供完整源码。 如需要远程部署/定制/讲解系统&#xff0c;可以联系我。定制项目未经同意不会上传&#xff01; 项目源码获取方式放在文章末尾处 注&#xff1a;项目仅供学…...

SpringMVC(二)原理

目录 一、配置Maven&#xff08;为了提升速度&#xff09; 二、流程&&原理 SpringMVC中心控制器 完整流程&#xff1a; 一、配置Maven&#xff08;为了提升速度&#xff09; 在SpringMVC&#xff08;一&#xff09;配置-CSDN博客的配置中&#xff0c;导入Maven会非…...

计算机网络:网络层知识点及习题(一)

网课资源&#xff1a; 湖科大教书匠 1、概述 网络层实现主机到主机的传输&#xff0c;主要有分组转发和路由选择两大功能 路由选择处理机得出路由表&#xff0c;路由表再生成转发表&#xff0c;从而实现分组从不同的端口转发 网络层向上层提供的两种服务&#xff1a;面向连接…...

题解:A. Noldbach Problem

问题描述 Nick 对素数非常感兴趣。他阅读了有关 Goldbach Problem 的内容&#xff0c;了解到每个大于 2 的偶数都可以表示为两个素数的和。于是他决定创造一个新问题&#xff0c;称为 Noldbach Problem。 Noldbach 问题的定义如下&#xff1a; 如果一个素数 $p$ 满足&#x…...

ESP32S3 + IDF 5.2.2 扫描WiFi

ESP32S3 IDF 5.2.2 扫描WiFi 目录 1 资料 2 通过Wi-Fi库扫描附近的网络 2.1 通过idf命令创建工程 2.2 编写测试用例 2.3 优化测试用例 3 小结 1 资料 在ESP平台基于IDF开发WiFi相关功能&#xff0c;主要就是基于IDF的Wi-Fi库进行二次开发。可供参考的官方资料&#xff…...

鸿蒙开发汇总

写在前面 汇总贴&#xff0c;整理在开发过程中遇到的有趣的、不太好解决的问题&#xff0c;记录一下思考的过程及自己的解决方案。 只做为技术分享&#xff0c;转载请标明出处。 ArkTs-this指向问题 ArkTs-Text组件长度计算不对的问题...

PDF阅读和编辑工具——xodo

本文给大家推荐一款好用的PDF阅读和编辑工具——xodo,一款免费的跨平台PDF阅读、编辑、批注工具。 注意xodo PDF Reader是免费的&#xff0c;xodo PDF Studio是收费的&#xff0c;但是xodo PDF Studio功能多很多。...

QT-------------自定义插件和库

以下是一个使用 Qt 实现图表交互操作的示例&#xff0c;涵盖了自定义图表视图类、不同类型的柱状图和饼图等内容。 实现思路 自定义图表视图类&#xff1a;创建一个从 QChartView 派生的自定义类&#xff0c;用于处理图表的交互操作。主窗口设计初始化&#xff1a;在主窗口中…...

《云原生安全攻防》-- K8s安全配置:CIS安全基准与kube-bench工具

在本节课程中&#xff0c;我们来了解一下K8s集群的安全配置&#xff0c;通过对CIS安全基准和kube-bench工具的介绍&#xff0c;可以快速发现K8s集群中不符合最佳实践的配置项&#xff0c;及时进行修复&#xff0c;从而来提高集群的安全性。 在这个课程中&#xff0c;我们将学习…...

PCA降维算法详细推导

关于一个小小的PCA的推导 文章目录 关于一个小小的PCA的推导1 谱分解 (spectral decomposition)2 奇异矩阵(singular matrix)3 酉相似(unitary similarity)4 酉矩阵5 共轭变换6 酉等价7 矩阵的迹的计算以及PCA算法推导8 幂等矩阵(idempotent matrix)9 Von Neumanns 迹不等式 [w…...

C++ 基础思维导图(一)

目录 1、C基础 IO流 namespace 引用、const inline、函数参数 重载 2、类和对象 类举例 3、 内存管理 new/delete 对象内存分布 内存泄漏 4、继承 继承权限 继承中的构造与析构 菱形继承 1、C基础 IO流 #include <iostream> #include <iomanip> //…...

Excel文件恢复教程:快速找回丢失数据!

Excel文件恢复位置在哪里&#xff1f; Excel是微软开发的电子表格软件&#xff0c;它为处理数据和组织工作提供了便捷。虽然数据丢失的问题在数字时代已经司空见惯&#xff0c;但对于某些用户来说&#xff0c;恢复未保存/删除/丢失的Excel文件可能会很困难&#xff0c;更不用说…...