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

【Vue #3】指令补充样式绑定

news 来源：原创 2025/9/12 7:10:08

一、指令修饰符

Vue 的指令修饰符（Directive Modifiers）是 Vue 模板语法中的重要特性，它们以半角句号 . 开头，用于对指令的绑定行为进行特殊处理

修饰符作用如下：

简化事件处理（如阻止默认行为、停止冒泡）
精准控制输入（如自动格式化表单值）
优化性能（如延迟数据同步）
增强交互（如精确控制按键触发）

类型	常用修饰符
事件	`.stop` `.prevent` `.capture` `.self` `.once` `.passive`
键盘	`.enter` `.tab` `.esc` `.space` `.up` `.down` `.left` `.right` `.ctrl` `.alt` `.shift` `.meta`
鼠标	`.left` `.right` `.middle`
表单	`.lazy` `.number` `.trim`
系统修饰键	`.exact`

1. 事件修饰符（Event Modifiers）

用于 v-on 指令（简写为 @），处理 DOM 事件：

.stop：阻止事件冒泡
.prevent：阻止默认行为（比如：点击表单提交，表单不会刷新页面）
.capture：使用捕获模式（父级先触发）
.self：仅当事件源是当前元素时触发（子元素点击就不会触发）
.once：事件只触发一次
.passive：提升滚动性能（常用于移动端）

注意：修饰符可串联：

<a @click.stop.prevent="doSomething">同时阻止冒泡和默认行为</a>

代码示例如下：

<script setup>
import { ref } from 'vue'
const onPClick = () => {console.log('onPClick')
}
const onDivClick = () => {console.log('onDivClick')
}
</script>
<template><div @click="onDivClick"><a href="https://www.baidu.com/">百度一下</a><p></p><!-- .prevent: 阻止默认行为 --><a href="https://www.baidu.com/" @click.prevent>百度一下</a><!-- .stop: 阻止冒泡, 同名事件不会向上传递 --><p @click.stop="onPClick">I miss You</p><!-- 修饰符的链式调用: 表名两个同时阻止 --><a href="https://www.baidu.com/" @click.stop.prevent>百度一下</a></div>
</template>

2. 按键修饰符（Key Modifiers）

用于 v-on:keyup 或 v-on:keydown，监听特定按键：

① 按键别名

<input @keyup.enter="submit"> 回车键触发
<input @keyup.esc="close"> ESC 键触发
<input @keyup.delete="deleteItem"> 删除键触发

② 系统修饰键

<input @keyup.ctrl.enter="ctrlEnter"> Ctrl + Enter
<div @click.ctrl.exact="ctrlOnlyClick">仅按 Ctrl 时点击触发</div>

3. 鼠标修饰符（Mouse Modifiers）

控制鼠标按钮触发事件：

.left：左键点击
.right：右键点击
.middle：中键点击

<button @click.right="showContextMenu">右键触发菜单</button>

4. 表单修饰符（Key Modifiers）

用于 v-model 指令，优化表单处理：

.lazy：失去焦点时同步数据，而不是输入时同步数据。将 input 事件改为 change 事件后同步
.number：自动将输入转为数字类型（parseFloat() 转数字）
trim：自动去除首尾空格

<script setup>
import { reactive } from 'vue'
const goods = reactive({name: '', price: ''
})
</script>
<template><!-- .lazy -->名称: <input type="text" v-model.lazy="goods.name" /> <br /> <br /><!-- .trim -->名称: <input type="text" v-model.trim="goods.name" /> <br /> <br /><!-- .number -->价格: <input type="text" v-model.number="goods.price" /> <br /> <br /></template>

5. 自定义修饰符

在自定义指令中定义自己的修饰符：

<script setup>
const vColor = {mounted(el, binding) {// 1. 处理参数（用于背景色）if (binding.arg) {el.style.backgroundColor = binding.arg}// 2. 处理修饰符（可扩展多个样式）if (binding.modifiers.bold) {el.style.fontWeight = 'bold'}if (binding.modifiers.italic) {el.style.fontStyle = 'italic'}if (binding.modifiers.underline) {el.style.textDecoration = 'underline'}// 3. 处理值（用于文字颜色）if (binding.value) {el.style.color = binding.value}// 4. 添加默认内边距提升显示效果el.style.padding = '0.5rem'el.style.borderRadius = '4px'}
}// 注册局部指令
const directives = { vColor }
</script><template><!-- 改进后的使用示例 --><p v-color:skyblue.bold.italic="'#333'">天蓝背景、加粗斜体、深灰文字</p><p v-color:#ffd700.underline="'#2c3e50'">金色背景、下划线、深蓝文字</p>
</template>

代码解析：

参数处理 (:skyblue)
- 通过 binding.arg 获取指令参数
- 直接作为背景颜色使用（支持颜色名称、十六进制、RGB等格式）
- 示例中 :skyblue 会设置 background-color: skyblue
修饰符处理 (.bold.italic)
- 通过 binding.modifiers 对象检查修饰符
- 支持多个修饰符组合使用：
  - .bold → font-weight: bold
  - .italic → font-style: italic
  - .underline → text-decoration: underline
值处理 (="'#333'")
- 通过 binding.value 获取指令值
- 用于设置文字颜色
- 注意在模板中需要使用引号包裹字符串值

修饰符机制说明：

Vue 会自动解析指令后的点号标识符为修饰符
例如 v-color.bold.italic 会生成：

binding.modifiers = { bold: true,italic: true 
}

6. 修饰符最佳实践

① 链式顺序影响结果

<!-- 先阻止冒泡，再阻止默认行为 -->
<a @click.stop.prevent></a><!-- 先阻止默认行为，再判断是否自身触发 -->
<a @click.prevent.self></a>

② 合理使用系统修饰键：
用 .exact 精确控制组合按键：

<input @keyup.ctrl.exact="onlyCtrl"> 仅按 Ctrl 时触发

③ 版本兼容性

Vue 3 默认启用 passive 提升滚动性能
Vue 3 废弃了 Vue 2 的按键码（如 .13）

二、v-model 用在其他表单元素

常见的表单元素都可以用 v-model绑定关联,作用是可以快速 获取或设置 表单元素的值

它会根据 控件类型 自动选取 正确的属性 来更新元素

输入框 input:text ——> value
文本域 textarea ——> value
下拉菜单 select ——> value
- v-model 写在select上，关联是选中option的 value
单选框 input:radio ——> value
- 给单选框添加value属性，v-model 收集选中单选框的value
复选框 input:checkbox ——> checked / value
- 一个复选框：v-model 绑定布尔值，关联 checked 属性
- 一组复选框：v-model 绑定数组，关联 value 属性，给复选框手动添加 value

<script setup>
import { ref } from 'vue'
const intro = ref('') // 介绍
const city = ref('SH') // 城市
const blood = ref('ab') // 血型
const isAgree = ref(false) // 同意协议
const hobby = ref(['ZQ', 'PB']) // 爱好
</script>
<template><!-- 1. 文本域 --><textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea> <br /><br /><!-- 2. 下拉菜单 --><select v-model="city"><option value="BJ">北京</option><option value="CS">长沙</option><option value="SH">上海</option></select><br /> <br /><!-- 3. 单选框: 多个当中只能选一个 --><input type="radio" value="a" v-model="blood" />A<input type="radio" value="b" v-model="blood" />B<input type="radio" value="ab" v-model="blood" />AB<br /><br /><!-- 4. 复选框  --><input type="checkbox" v-model="isAgree" />是否同意用户协议<br /><br /><input v-model="hobby" type="checkbox" value="LQ" />篮球<input v-model="hobby" type="checkbox" value="ZQ" />足球<input v-model="hobby" type="checkbox" value="PB" />跑步
</template>

三、样式绑定

🐇 为了方便开发者进行样式控制,Vue 扩展了 v-bind 的语法，可以针对 class 类名和 style 行内样式两个属性进行控制,进而通过数据控制元素的样式

1. Class 类名绑定

用于动态添加或移除 CSS 类名，支持多种语法格式。

:class = "三元表达式/对象"

1.1 对象语法

通过对象动态切换类名（键为类名，值为布尔值）

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就添加这个类，否则删除这个类

<p class="box":class="{ 类名1:布尔值1，类名2:布尔值2 }"></p>

1.2 数组语法

应用多个类名（可混合静态和动态类）：

<div :class="[类名1, 类名2, {条件}]"></div>

1.3 三元表达式

语法如下：

<p :class="条件 ? '类名1' : '类名2'"></p>

1.4 与静态 class 共存

静态class与动态class共存可以共存，二者会合并

<p class="item" :class="条件 ?'类名1':'类名2'"></p〉

代码示例如下：

<script setup>
import { ref } from 'vue'const isActive = ref(true)
const errorClass = ref('text-danger')  // 新增数组绑定用的类名
const fontSize = ref(20)              // 内联样式用字体大小
</script><template><!-- 1. 对象绑定 --><p :class="{ active: isActive }">Active1</p><!-- 2. 数组绑定 --><p :class="['base-class', errorClass, { active: isActive }]">Active3</p><!-- 3. 三元绑定 --><p :class="isActive ? 'active' : ''">Active2</p><!-- 4. 动静态 class --><p class="base-class" :class="{ active: isActive }">Active4</p><style>
.active {color: red;
}
.text-danger {text-decoration: line-through;
}
.base-class {font-size: 20px;
}
</style>

2. 内联样式绑定

通过 :style 动态设置行内样式，支持对象或数组语法

基本语法如下：

:style="{属性名1: 表达式1, 属性名2: 表达式2, ...}"

2.1 对象语法

直接绑定样式对象（推荐驼峰式写法）：

<div style="color: red; font-size: 20px;"></div>

2.2 数组语法

合并多个样式对象

<template><div :style="[baseStyles, overridingStyles]">1234</div>
</template><script>
// 可选：在 script 中定义样式对象
export default {data() {return {baseStyles: { color: 'blue' },overridingStyles: { fontSize: '30px' }}}
}
</script>

2.3 自动前缀

Vue 会自动为需要浏览器前缀的 CSS 属性添加前缀（如 transform）

代码示例如下：

<script setup>
import { ref, reactive } from 'vue'const isActive = ref(true)
const errorClass = ref('text-danger')  // 新增数组绑定用的类名
const fontSize = ref(20)              // 内联样式用字体大小// 字体颜色
const colorStr = ref('red')// 响应式样式对象
const styleObj = reactive({color: 'green',background: 'yellow'
})
</script><template><!-- 1. 内联样式绑定 --><div :style="{color: isActive ? 'red' : 'gray',fontSize: fontSize + 'px','font-weight': 'bold'}">内联样式示例</div><div><p :style="{ color: colorStr }">Style1</p><p :style="styleObj">Style2</p></div><!-- 3. 样式对象绑定（另一种写法） --><div :style="styleObject">样式对象</div>
</template><script>
// 可选：在 script 中定义样式对象
export default {data() {return {styleObject: {backgroundColor: 'yellow',padding: '10px'}}}
}
</script>

3. 最佳实践

1. 使用计算属性优化

当样式逻辑复杂时，用计算属性返回样式对象

2. 绑定组件子元素的样式

在组件上使用 :class 时，类名会添加到组件的根元素（需组件设计支持）

3. CSS Modules 集成

在单文件组件中，通过 $style 使用模块化 CSS

<template><div :class="$style.myClass">模块化样式</div>
</template><style module>
.myClass { color: red; }
</style>

4. 常见应用场景

状态反馈：表单验证错误时高亮输入框
主题切换：动态切换暗黑模式/明亮模式
动画控制：通过类名触发 CSS 动画
响应式布局：根据屏幕尺寸调整样式

5. 注意事项

CSS 优先级：:style 的样式优先级高于外部 CSS
性能优化：避免频繁修改大量样式（建议用 CSS 类替代）
兼容性：某些 CSS 属性需注意浏览器兼容性（如 position: sticky）

在这里插入图片描述

【Vue #3】指令补充样式绑定

一、指令修饰符 Vue 的指令修饰符（Directive Modifiers）是 Vue 模板语法中的重要特性，它们以半角句号 . 开头，用于对指令的绑定行为进行特殊处理修饰符作用如下： 简化事件处理（如阻止默认行为、停止冒泡…...

编程日记 2025/9/12 7:10:08

Vue.js组件安全工程化演进：从防御体系构建到安全性能融合

——百万级流量场景下的安全组件架构与源码级解决方案文章目录总起：安全工程化的组件革命分论： 一、现存组件架构的七宗罪与安全改造路径　 1.1 组件生态安全赤字现状　 1.2 架构级安全缺陷深度剖析　 1.3 性能与安全的死亡螺旋二、百万级…...

编程日记 2025/9/12 7:08:03

LINUX基础 [二] - Linux常见指令

目录 💻前言 💻指令 🎮ls指令 🎮pwd指令 🎮whoami指令 🎮cd指令 🎮clear指令 🎮touch指令 🎮mkdir指令 🎮rmdir指令 🎮rm指令 &#…...

编程日记 2025/9/12 7:06:30

Linux进阶命令

目录一、touch 1. 基本语法 2. 常用选项二、which 1. 基本语法 2. 主要功能 3. 常用选项三、find 1. 基本语法 2. 常用选项和表达式四、more 1. 基本语法 2. 常用操作 3. 对比 more 和 less 五、grep 1. 基本语法 2. 常用选项六、wc 1. 基本语法 2. 常…...

编程日记 2025/9/7 15:45:20

【Spring Boot 过滤器】

文章目录前言一、什么是过滤器 Filter？二、Spring Boot 中使用 Filter 的方式1. 使用 Component 注解2. 使用 FilterRegistrationBean 显式注册三、自定义过滤器示例1. 引入必要依赖2. 创建一个自定义 Filter3. 使用 FilterRegistrationBean 显式注册四、多个 Fi…...

编程日记 2025/9/3 14:11:05

SPI通讯的软硬件NSS SSM SSI

学习自记： 1. NSS（Slave Select，从设备选择） 功能： NSS是SPI通信中用于选择从设备的信号线。主设备通过拉低NSS信号选中某个从设备，使其参与通信。通信结束后，主设备释放NSS&#…...

编程日记 2025/9/12 0:58:00

Java基础：集合List、Map、Set(超详细版)

集合体系概述 Collection常用方法补充：addAll() Collection的遍历方式迭代器增强for（空集合可以，null不可以） lambda 集合对象存储对象原理遍历方式的区别 List集合特点、特有方法遍历方式 （同上&#xff09…...

编程日记 2025/9/5 3:20:12

leaflet 区域划分_遮罩层 geojson在线生成器网址:(https://datav.aliyun.com/portal/school/atlas/area_selector) 点击前往阿里云geojson生成器效果图: 实现下面效果,只需要把addSateLayer函数的调用取消掉就好了. //添加遮罩层代码function addMask() {var latlngs;var fe…...

编程日记 2025/9/10 4:22:54

聊一聊原子操作和弱内存序

1、原子操作概念在并发编程中，原子操作（Atomic Operation）是实现线程安全的基础机制之一。从宏观上看，原子操作是“不可中断”的单元，但若深入微观层面，其本质是由底层处理器提供的一组特殊指令来保证其原…...

编程日记 2025/9/9 3:15:58

免费送源码：Java+ssm+MySQL 校园二手书销售平台设计与实现计算机毕业设计原创定制

摘要信息化社会内需要与之针对性的信息获取途径，但是途径的扩展基本上为人们所努力的方向，由于站在的角度存在偏差，人们经常能够获得不同类型信息，这也是技术最为难以攻克的课题。针对校园二手书销售平台等问题，对校…...

编程日记 2025/9/11 7:52:34

DAPP实战篇：使用ethersjs连接智能合约并输入地址查询该地址余额

本系列目录专栏：区块链入门到放弃查看目录-CSDN博客文章浏览阅读400次。为了方便查看将本专栏的所有内容列出目录，按照顺序查看即可。后续也会在此规划一下后续内容，因此如果遇到不能点击的，代表还没有更新。声明：文中所出观点大多数源于笔者多年开发经验所总结，如果你…...

编程日记 2025/8/26 15:49:51

14.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--微服务基础工具与技术--CAP

CAP 是一款专为 .NET 生态设计的开源框架，其核心目标是解决微服务中跨服务数据一致性问题。在分布式系统中，传统事务无法跨服务保证数据一致性，CAP 通过本地事务与消息记录绑定，再利用消息中间件（如 RabbitMQ、Kafka 等…...

编程日记 2025/9/11 14:56:46

智能资源管理机制-重传机制

一、发送端资源管理的核心机制 1. 滑动窗口（Sliding Window） 这是TCP协议的核心优化设计： 窗口动态滑动：发送端不需要保留所有已发送的分组，只需维护一个"发送窗口"窗口大小：由接收方通告的接…...

编程日记 2025/9/8 20:19:39

【Linux网络与网络编程】08.传输层协议 UDP

传输层协议负责将数据从发送端传输到接收端。一、再谈端口号端口号标识了一个主机上进行通信的不同的应用程序。在 TCP/IP 协议中，用 "源IP"，"源端口号"，"目的 IP"，"目的端口号"&…...

编程日记 2025/9/7 1:04:29

局域网下ESP32-S3 LED灯的UDP控制

在局域网下通过IP地址控制ESP32-S3上的LED，可以使用UDP或TCP协议。以下是一个基于UDP协议的完整示例，包括ESP32-S3的服务器代码和一个简单的Python客户端代码。 ESP32-S3 服务器代码 import socket import time import network import machineled Non…...

编程日记 2025/9/6 12:07:00

call、bind、apply

call、bind、apply它们三个都是函数的方法，都可以用于改变this的指向问题。 var person "liangxiao" let obj {name:"张三",say:function() {console.log(this.name);} }obj.say(); setTimeout(function() {obj.say(); },1000) obj.say()打…...

编程日记 2025/9/11 19:52:47

Redis 哨兵模式搭建

1 . 哨兵模式拓扑与简介本文介绍如何搭建单主双从多哨兵模式的搭建哨兵有12个作用。通过发送命令，让Redis服务器返回监控其运行状态，包括主服务器和从服务器。当哨兵监测到master宕机，会自动将slave切换成master，然后通过…...

编程日记 2025/9/12 3:40:53

客户端负载均衡与服务器端负载均衡详解

客户端负载均衡与服务器端负载均衡详解 1. 客户端负载均衡（Client-Side Load Balancing） 核心概念定义：负载均衡逻辑在客户端实现，客户端主动选择目标服务实例。典型场景：微服务内部调用（如Spring Cloud…...

编程日记 2025/8/29 0:39:05

Ningx负载均衡

Ningx负载均衡 upstream(上游)配置负载均衡1、weight（加权轮询）2、ip_hash（负载均衡）3、url hash负载均衡4、least_conn（最小连接负载均衡） upstream(上游)配置负载均衡 Nginx负载均衡参考: nginx从安装…...

编程日记 2025/9/10 21:27:09

头歌软件工程导论UML画图题(基于starUML)

一.结构化分析方法-数据流图本关卡需要画图的一共有5关，直接将此图画好每关提交一次即可，以下的所有图均以此方法提交二.面向对象分析之用例图三.面向对象分析之类图注意此处创建Class之后，双击Class出现以下选项点击相应的选项创建属性…...

编程日记 2025/9/10 19:28:48

智能车摄像头开源—9 动态权、模糊PID、速度决策、路径优化

目录一、前言二、动态权 1.概述 2.偏差值加动态权三、模糊PID 四、速度决策 1.曲率计算 2.速度拟合 3.速度控制五、路径六、国赛视频一、前言在前中期通过识别直道、弯道等元素可进行加减速操作实现速度的控制，可进一步缩减一圈的运行速度&#xff…...

编程日记 2025/9/9 3:36:43

java基础 this和super的介绍

this和super this关键字的用法super关键字的用法this与super的区别和注意事项 this关键字的用法 this是自身的一个对象，代表对象本身，可以理解为：指向对象本身的一个指针 class Person{private String name;private int age;public String …...

编程日记 2025/9/8 4:39:16

《Python星球日记》第25天：Pandas 数据分析

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 订阅专栏：《Python星球日记》目录一、引言二、数据分组与聚合1. 分组操…...

编程日记 2025/9/7 15:21:59

C++在Linux上生成动态库并调用接口测试

加减乘除demo代码项目结构 CPP/ ├── calculator.cpp ├── calculator.h ├── main.cpp 头文件 #ifndef CALCULATOR_H #define CALCULATOR_H#ifdef __cplusplus extern "C" {#endifdouble add(double a, double b);double subtract(double a, double b…...

编程日记 2025/9/11 22:04:16

Cesium.js（6）：Cesium相机系统

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。帮助文档：Camera - Cesium Documentation 1 setView setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置，并通过 orien…...

编程日记 2025/9/9 1:30:50

机器学习中的数学(PartⅡ)——线性代数：概述

首先引入代数和线性代数的概念： 在将一些直观的、基于经验或直觉的概念转化为严格的数学或逻辑定义时，一种常用方法是构建一组对象和一组操作这些对象的规则，这就是代数。线性代数是研究向量和某些操作向量的规则。其次从更广泛的意义上定…...

编程日记 2025/9/11 8:16:12

基于双闭环PID控制器的永磁同步电机控制系统匝间故障Simulink仿真

欢迎微♥关注“电击小子程高兴的MATLAB小屋”获取巨额优惠 1.模型简介本仿真模型基于MATLAB/Simulink（版本MATLAB 2013Rb）软件。建议采用matlab2013 Rb及以上版本打开。（若需要其他版本可联系代为转换，高于该版本的matlab均可正…...

编程日记 2025/8/31 3:38:14

在51单片机上实现平滑呼吸灯：50us定时器PWM实战指南

在51单片机上实现平滑呼吸灯：50us定时器PWM实战指南引言本文将详细介绍如何在51单片机平台上，通过精确的50us定时器中断实现无闪烁的呼吸灯效果。相比常见的125us实现方案，50us定时器能提供更高的PWM频率和更细腻的亮度控制。硬件设计基本电路配置主控芯片：SC92F8…...

编程日记 2025/9/10 4:20:16

asm汇编源代码之CPU型号检测

提供1个子程序: 1. CPU型号检测 CPUTYPE 无输入参数，返回值AX指示CPU类型(报歉,当时最新CPU型号只有80486) 函数的返回值详细描述如下 CPUTYPE PROC　　FAR ;OUT: AX01, 8086; AX02, 80286; AX03, 80386; AX04, 80486 UP; ; more source code at http://www.ahj…...

编程日记 2025/9/8 12:19:52

提高课：数据结构之树状数组

1，楼兰图腾 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm>using namespace std;typedef long long LL;const int N 200010;int n; int a[N]; int tr[N]; int Greater[N], lower[N];int lowbit(int x) {ret…...

编程日记 2025/9/10 22:13:44

python可变对象与不可变对象

文章目录 Python 中的可变对象与不可变对象不可变对象(Immutable Objects)可变对象(Mutable Objects)重要区别 Python 中的可变对象与不可变对象在 Python 中，对象可以分为可变对象(mutable)和不可变对象(immutable)，这是 Python 中非常重要的概念&…...

编程日记 2025/9/8 13:28:32

C++学习之金融类安全传输平台项目git

目录 1.知识点概述 2.版本控制工具作用 3.git和SVN 4.git介绍 5.git安装 6.工作区暂存区版本库概念 7.本地文件添加到暂存区和提交到版本库 8.文件的修改和还原 9.查看提交的历史版本信息 10.版本差异比较 11.删除文件 12.本地版本管理设置忽略目录 13.远程git仓…...

编程日记 2025/9/8 21:52:53

果篮问题 Python

# 给你两个长度为 n 的整数数组，fruits 和 baskets，其中 fruits[i] 表示第 i 种水果的数量，baskets[j] 表示第 j 个篮子的容量。 # 你需要对 fruits 数组从左到右按照以下规则放置水果： # 每种水果必须放入第一个容量大于等于 …...

编程日记 2025/9/11 0:16:43

Spring 是如何解决循环依赖的？

在使用 Spring 框架进行开发时，循环依赖是一个常见而棘手的问题。循环依赖指的是两个或多个 bean 之间的相互依赖，导致 Spring 容器无法正常创建这些 bean。下面将深入探讨 Spring 如何解决循环依赖问题，并提供一些最佳实践。什么是循环依赖…...

编程日记 2025/9/9 10:16:10

部署NFS版StorageClass(存储类)

部署NFS版StorageClass存储类 NFS版PV动态供给StorageClass(存储类)基于NFS实现动态供应下载NFS存储类资源清单部署NFS服务器为StorageClass(存储类)创建所需的RBAC部署nfs-client-provisioner的deployment创建StorageClass使用存储类创建PVC NFS版PV动态供给StorageClass(存储…...

编程日记 2025/9/9 17:41:23

深入理解 PyTorch 的 nn.Embedding：词向量映射及变量 weight 的更新机制

文章目录前言一、直接使用 nn.Embedding 获得变量1、典型场景2、示例代码：3、特点二、使用 iou_token nn.Embedding(1, transformer_dim) 并访问 iou_token.weight1、典型场景2、示例代码：3、特点三、第一种方法在模型更新中会更新其值吗&#xff1f…...

编程日记 2025/9/11 21:04:47

go语言内存泄漏的常见形式

go语言内存泄漏子字符串导致的内存泄漏使用自动垃圾回收的语言进行编程时，通常我们无需担心内存泄漏的问题，因为运行时会定期回收未使用的内存。但是如果你以为这样就完事大吉了，哪里就大错特措了。因为，虽然go中并未对字符串…...

编程日记 2025/9/9 6:52:34

操作系统

操作系统操作系统（OperatingSystem，OS）是指控制和管理整个计算机系统的硬件和软件资源，并合理地组织调度计算机的工作和资源的分配；以提供给用户和其他软件方便的接口和环境；它是计算机系统中最基本的系统…...

编程日记 2025/9/7 13:53:00

《JVM考古现场（十八）：造化玉碟·用字节码重写因果律的九种方法》

"鸿蒙初判！当前因果链突破十一维屏障——全体码农修士注意，《JVM考古现场（十八）》即将渡劫飞升！" 目录上卷阴阳交缠第一章：混沌初开——JVM因果律的量子纠缠第二章：诛仙剑阵改—…...

编程日记 2025/9/10 20:10:45

【2】k8s集群管理系列--包应用管理器之helm（Chart语法深入应用）

一、Chart模板：函数与管道常用函数： • quote：将值转换为字符串，即加双引号 • default：设置默认值，如果获取的值为空则为默认值 • indent和nindent：缩进字符串 • toYaml：引用一…...

编程日记 2025/9/6 17:24:07

汇编获取二进制

mov_.S mov %r8d,0 nop执行命令： gcc -c mov_.S 会输出 mov_.o 文件：objdump -D mov_.o : mov_.o： 文件格式 elf64-x86-64Disassembly of section .text:0000000000000000 <.text>:0: 44 89 04 25 00 00 00 mov %r8d,0x0…...

编程日记 2025/9/10 12:46:13

《嵌套调用与链式访问：C语言中的函数调用技巧》

🚀个人主页：BabyZZの秘密日记 📖收入专栏：C语言 🌍文章目入一、嵌套调用（一）定义（二）实现方式（三）优点（四）缺点二、链式…...

编程日记 2025/9/8 21:06:18

txt、Csv、Excel、JSON、SQL文件读取（Python）

txt、Csv、Excel、JSON、SQL文件读取（Python） txt文件读写创建一个txt文件 fopen(rtext.txt,r,encodingutf-8) sf.read() f.close() print(s)open( )是打开文件的方法 text.txt’文件名在同一个文件夹下所以可以省略路径如果不在同一个文件夹下 ‘…...

编程日记 2025/9/4 2:23:02

前端工程化之新晋打包工具

新晋打包工具新晋打包工具前端模块工具的发展历程分类初版构建工具grunt使用场景 gulp采用管道机制任务化配置与api简洁现代打包构建工具基石--webpack基于webpack改进的构建工具rollup 推荐举例说明package.jsonrollup.config.mjsmy-extract-css-rollup-plugin.mjssrc/index…...

编程日记 2025/9/8 17:26:48

Python语言介绍

Python 是一种高级、通用、解释型的编程语言，由 Guido van Rossum 于 1991 年首次发布。其设计哲学强调代码的可读性和简洁性。 Python通过简洁的语法和强大的生态系统，成为当今最受欢迎的编程语言之一。一、核心特点 Python 是一种解释型、面向对象、…...

编程日记 2025/9/9 0:45:54

关于 Spring Boot 部署到 Docker 容器的详细说明，涵盖核心概念、配置步骤及关键命令，并附上表格总结

以下是关于 Spring Boot 部署到 Docker 容器的详细说明，涵盖核心概念、配置步骤及关键命令，并附上表格总结： 1. Docker 核心概念概念描述关系镜像（Image）预定义的只读模板，包含运行环境和配置&#xff08…...

编程日记 2025/9/7 1:24:23

Tomcat 服务频繁崩溃的排查方法

# Tomcat 服务频繁崩溃排查方法当Tomcat服务频繁崩溃时，可以按照以下步骤进行系统化排查： ## 1. 检查日志文件 **关键日志位置**： - catalina.out (标准输出和错误) - catalina.log (主日志) - localhost.log (应用相关日志) - host-mana…...

编程日记 2025/9/7 9:25:07