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

Vue3 模板语法

news 来源：原创 2025/7/5 19:14:38

一、插值语法 {{ }}

二、核心指令

三、动态属性绑定

四、事件修饰符

五、条件渲染 vs 列表渲染总结

六、最佳实践

示例 1：插值语法 & 基础绑定

示例 2：条件渲染

示例 3：列表渲染

示例 4：事件处理

示例 5：动态绑定

示例 6：双向绑定

示例 7：综合实践

一、插值语法 `{{ }}`

作用：将数据绑定到 DOM 文本内容。
特性：
- 支持 JavaScript 表达式（如 {{ count + 1 }}），但不支持语句（如 if）。
- 自动响应数据变化（数据驱动视图）。

示例：

<p>{{ message }}</p>
<p>{{ user.name }}</p>

二、核心指令

条件渲染：v-if vs v-show
- v-if：
  - 根据条件销毁或创建元素。
  - 适用于切换频率低的场景（如初始化渲染）。
  - 支持 v-else 和 v-else-if。
- v-show：
  - 通过 CSS display 控制显示/隐藏。
  - 适用于频繁切换的场景（如选项卡）。
- 示例：
```
<div v-if="isVisible">v-if 内容</div>
<div v-show="isActive">v-show 内容</div>
```
列表渲染：v-for
- 作用：遍历数组或对象生成列表。
- key 的作用：
  - 唯一标识：帮助 Vue 跟踪节点身份，优化复用逻辑。
  - 避免问题：防止列表更新时出现错乱（如状态保留问题）。
- 最佳实践：
  - 使用唯一 ID（如 :key="item.id"）。
  - 避免用 index 作为 key（除非列表静态且无排序）。
- 示例：
```
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
```
属性绑定：v-bind（简写 :）
- 动态属性：将数据绑定到 HTML 属性（如 id、class）。
- 示例：
```
<img :src="imageUrl" />
<div :class="{ active: isActive }"></div>
```
事件绑定：v-on（简写 @）
- 监听事件：如点击、输入等。
- 示例：
```
<button @click="handleClick">点击</button>
```
双向绑定：v-model
- 作用：表单输入与数据的双向同步（语法糖 = :value + @input）。
- 示例：
```
<input v-model="message" />
```

三、动态属性绑定

动态 Class（:class）

对象语法：按条件添加类名。

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

数组语法：绑定多个类名。

<div :class="[activeClass, errorClass]"></div>

动态 Style（:style）

对象语法：绑定样式对象。

<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

数组语法：组合多个样式对象。

<div :style="[baseStyles, overrideStyles]"></div>

四、事件修饰符

常用修饰符：
- .stop：阻止事件冒泡（等价于 event.stopPropagation()）。
- .prevent：阻止默认行为（等价于 event.preventDefault()）。
- .once：事件只触发一次。
- .self：仅当事件从元素自身触发时生效。

示例：

<button @click.stop="handleClick">阻止冒泡</button>
<form @submit.prevent="handleSubmit">阻止默认提交</form>

按键修饰符：

按键别名：

Vue 为一些常用的按键提供了别名：

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

系统按键修饰符：

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

.ctrl
.alt
.shift
.meta

<!-- 仅在 key 为 Enter 时调用 submit -->
<input @keyup.enter="submit" /><!-- Alt + Enter --> 
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 --> 
<div @click.ctrl="doSomething">Do something</div>

五、条件渲染 vs 列表渲染总结

特性	`v-if`	`v-show`	`v-for`（需 `key`）
渲染方式	条件为假时销毁元素	始终渲染，切换 CSS	动态生成列表项
性能	初始渲染开销低	切换开销低	列表变化时依赖 `key` 优化
适用场景	不频繁切换的条件	频繁显示/隐藏	动态列表数据

六、最佳实践

v-for 的 key：
- 始终使用唯一标识（如数据库 ID）。
- 避免 index，除非列表简单且无状态。
v-if 与 v-for 优先级：
- 避免在同一个元素上同时使用（Vue3 中 v-if 优先级更高）。
- 使用 <template> 包裹解决：
```
<template v-for="item in items" :key="item.id"><div v-if="item.isVisible">{{ item.name }}</div>
</template>
```
事件处理：
- 复杂逻辑应封装到方法中，避免内联表达式。

示例 1：插值语法 & 基础绑定

<template><!-- 文本插值 --><p>{{ message }}</p><!-- JavaScript 表达式 --><p>{{ count + 1 }}</p><!-- 属性绑定 --><a :href="'https://vuejs.org'">官网链接</a>
</template><script setup>
import { ref } from 'vue'const message = ref('Hello Vue3!')
const count = ref(0)
</script>

示例 2：条件渲染

<template><!-- v-if 链式判断 --><div><p v-if="score >= 90">优秀</p><p v-else-if="score >= 60">合格</p><p v-else>不合格</p></div><!-- v-show 切换 --><button @click="showA = !showA">切换显示</button><div v-show="showA">显示/隐藏内容</div>
</template><script setup>
import { ref } from 'vue'const showA = ref(true)
const score = ref(85)
</script>

示例 3：列表渲染

<template><!-- 带 key 的列表渲染 --><ul><li v-for="(item, index) in books" :key="item.id">{{ index + 1 }}. {{ item.title }}</li></ul><!-- 动态添加项 --><input v-model="newBook"><button @click="books.push({ id: Date.now(), title: newBook })">添加书籍</button>
</template><script setup>
import { ref } from 'vue'const books = ref([{ id: 'b1', title: 'Vue3 入门' },{ id: 'b2', title: 'TypeScript 进阶' }
])const newBook = ref('')
</script>

示例 4：事件处理

<template><!-- 内联事件处理 --><button @click="handleClick('按钮点击')">点击事件</button><!-- 事件修饰符 --><div @click.self="console.log('父元素点击')"><button @click.stop="console.log('子元素点击')">阻止冒泡</button></div><!-- 按键修饰符 --><input @keyup.enter="console.log('回车按下')" @keyup.esc="console.log('ESC 按下')">
</template><script setup>
function handleClick(msg) {alert(msg)
}function handleKeyup(e) {console.log('按键码:', e.keyCode)
}
</script>

示例 5：动态绑定

<template><!-- 动态 class (对象语法) --><div :class="{ active: isActive, 'text-danger': false }">动态类名</div><!-- 动态 style (数组语法) --><div :style="[{ color: errorColor }, styleObject]">动态样式</div>
</template><script setup>
import { ref } from 'vue'const isActive = ref(true)
const errorColor = ref('red')
const styleObject = ref({fontSize: '20px',fontWeight: 'bold'
})
</script>

示例 6：双向绑定

<template><!-- 文本输入 --><input v-model="text" placeholder="输入内容"><!-- 复选框 --><input type="checkbox" v-model="checked"><!-- 单选按钮 --><select v-model="selectedOption"><option value="A">选项A</option><option value="B">选项B</option></select>
</template><script setup>
import { ref } from 'vue'const text = ref('')
const checked = ref(false)
const selectedOption = ref('A')
</script>

示例 7：综合实践

<template><!-- 条件渲染 + 列表渲染 --><div v-if="activeTodos.length > 0"><h3>待办事项 ({{ activeTodos.length }})</h3><ul><li v-for="todo in activeTodos" :key="todo.id":class="{ completed: todo.done }">{{ todo.text }}<button @click="todo.done = true">完成</button></li></ul></div><p v-else>全部任务已完成！🎉</p><!-- 双向绑定 + 事件修饰符 --><form @submit.prevent="addTodo"><input v-model.trim="newTodo" @keyup.enter="addTodo"><button type="submit">添加</button></form>
</template><script setup>
import { ref, computed } from 'vue'const todos = ref([{ id: 1, text: '学习 Vue3', done: true },{ id: 2, text: '掌握组合式API', done: false }
])const newTodo = ref('')const activeTodos = computed(() => todos.value.filter(t => !t.done)
)function addTodo() {if (newTodo.value.trim()) {todos.value.push({id: Date.now(),text: newTodo.value,done: false})newTodo.value = ''}
}
</script>

Vue3 模板语法

目录一、插值语法 {{ }} 二、核心指令三、动态属性绑定四、事件修饰符五、条件渲染 vs 列表渲染总结六、最佳实践示例 1：插值语法 & 基础绑定示例 2：条件渲染示例 3：列表渲染示例 4：事件处理示例 5&…...

编程日记 2025/7/5 19:14:38

第1节：Backtrader到底是个啥？能干嘛？

——“框架在手，天下我有；不是吹，Backtrader真香警告！” 🐣 一句话简介 Backtrader 是一个专门为量化交易打造的 Python 回测框架，说白了，它就是一个量化策略“模拟器控制台评审团”&#xff…...

编程日记 2025/6/29 9:23:53

Java基础第21天-正则表达式

正则表达式是对字符串执行模式匹配的技术如果想灵活的运用正则表达式，必须了解其中各种元字符的功能，元字符从功能上大致分为： 限定符选择匹配符分组组合和反向引用符特殊字符字符匹配符定位符转义号\\:在我们使用正则表达式去检索某些特…...

编程日记 2025/6/29 9:23:54

【Pandas】pandas DataFrame mod

Pandas2.2 DataFrame Binary operator functions 方法描述DataFrame.add(other)用于执行 DataFrame 与另一个对象（如 DataFrame、Series 或标量）的逐元素加法操作DataFrame.add(other[, axis, level, fill_value])用于执行 DataFrame 与另一个对象&…...

编程日记 2025/7/5 19:09:01

【哈希表】1399. 统计最大组的数目

1399. 统计最大组的数目 - 力扣（LeetCode） 给你一个整数 n 。请你先求出从 1 到 n 的每个整数 10 进制表示下的数位和（每一位上的数字相加），然后把数位和相等的数字放到同一个组中。请你统计每个组中的数字数目&…...

编程日记 2025/6/29 9:23:57

57、Spring Boot 最佳实践

Spring Boot 最佳实践一. 开发规范与代码风格编写高质量的代码不仅需要功能的实现，还需要遵循一定的规范和代码风格，以提高代码的可读性、可维护性和协作效率。以下是 Spring Boot 开发中的一些关键规范和代码风格建议。 1. 代码命名规范在编写代码时，命名是非常重要的…...

编程日记 2025/6/29 9:23:56

Java高级：数据库访问优化

系列文章目录 Java高级部分 JDBC编程文章目录系列文章目录前言一、编写属性文件：二、编写DBUtil工具类：三、使用DBUtil工具类：总结前言通过我之前发的数据库连接，数据库连接https://blog.csdn.net/2301_81776550/article/det…...

编程日记 2025/7/5 19:12:48

升级xcode16之后react-native-zip-archive不兼容，unsupported option ‘-G‘

问题升级xcode到16之后，xcode build报错：unsupported option -G for target x86_64-apple-ios13.4-simulator (in target RNZipArchive from project Pods) 出现原因在 React Native 项目中，当你将 Xcode 升级到 16 后，可能会遇到 RNZipArchive 相关的编译错误，特别是…...

编程日记 2025/7/2 4:26:07

基于MTF的1D-2D-CNN-LSTM-Attention时序图像多模态融合的故障识别，适合研究学习（Matlab完整源码和数据），附模型研究报告

基于MTF的1D-2D-CNN-LSTM-Attention时序图像多模态融合的故障识别，适合研究学习（Matlab完整源码和数据），附模型研究报告目录基于MTF的1D-2D-CNN-LSTM-Attention时序图像多模态融合的故障识别，适合研究学习&#xff0…...

编程日记 2025/7/5 19:06:37

逻辑漏洞安全

逻辑漏洞是指由于程序逻辑不严导致一些逻辑分支处理错误造成的漏洞。在实际开发中，因为开发者水平不一没有安全意识，而且业务发展迅速内部测试没有及时到位，所以常常会出现类似的漏洞。由于开发者/设计者在开发过程中，由于代码…...

编程日记 2025/7/2 17:21:41

基于PaddleOCR对图片中的excel进行识别并转换成word优化（二）

0、原图一、优化地方计算行的时候，采用概率分布去统计差值概率比较大的即为所要的值。 def find_common_difference(array):"""判断数组中每个元素的差值是否相等，并返回该差值:param array: 二维数组，其中每个元素是一个…...

编程日记 2025/7/5 6:51:22

5.2.3 WPF 中 XAML 文件 Converter 使用介绍

Converter（转换器）在 WPF 数据绑定中扮演着重要角色，用于在源数据和目标属性之间进行值转换举例来说：我想用一个bool量来控制一个背景，为true时，显示红色；为false时背景用默认颜色。因此 Backg…...

编程日记 2025/7/2 17:22:07

基于STM32_HAL库的HC-08蓝牙插座项目

基于STM32_HAL库的HC-08蓝牙插座文章目录基于STM32_HAL库的HC-08蓝牙插座一、项目需求二、硬件连接三、项目实现3.1 CubeMX配置3.2 以阻塞的方式实现3.3 以中断的方式实现一、项目需求通过手机可以控制开发板上的LED或者继电器二、硬件连接首先将HC-08蓝牙模块连接到我们…...

编程日记 2025/7/4 16:41:09

SwiftUI 3.Button介绍和使用

SwiftUI 的 Button 是用于触发用户操作的核心交互组件。以下是 Button 的详细介绍和使用示例： 一、基础用法 1. 创建简单按钮 Button("点击我") {print("按钮被点击了") }2. 自定义按钮内容 Button {// 点击动作 } label: {Text("保存&…...

编程日记 2025/7/5 19:09:44

Linux 管道理解

一、什么是管道 1.1 unix中最古老的进程间通信 1.2 一个进程链接到另一个进程的数据流称为“管道”： 图解： 二、管道通信的原理 2.1当我们创建一个进程然后打开一个文件的时候会经过以下步骤： ①首先要描述这个进程，为这个…...

编程日记 2025/6/29 10:54:55

从并发问题衍生出的Spring的七种事务传播行为

最近在处理一个BPM流程时，遇到了并发问题，原因是事务粒度太大了，导致等待lock超时。今天刚好借此机会分享下Spring框架中提供的7种事务传播行为。在 Spring中，Transactional 注解支持配置事务的传播行为，用于指定当一…...

编程日记 2025/7/3 9:30:52

第十五届蓝桥杯 2024 C/C++组艺术与篮球

目录题目： 题目描述： 题目链接： 思路： 思路详解： 代码： 代码详解： 题目： 题目描述： 题目链接： P10385 [蓝桥杯 2024 省 A] 艺术与篮球 - 洛谷艺术…...

编程日记 2025/6/29 10:32:21

Python内置函数---bin()

用于将整数转换为二进制字符串 1. 基本语法与参数 bin(x) 参数： x 必须为整数（ int 类型），或实现了 __index__() 方法的自定义对象（该方法需返回整数） 。返回值：以 0b 开头的二进制字符串。…...

编程日记 2025/7/3 5:45:53

网络socks 代理

在系统/终端中设了这样的环境变量，而没有在代码中覆盖，HTTPX 就会启用该 socks 代理。 env | grep proxy https_proxyhttps://proxyhk.zte.com.cn:80 http_proxyhttp://proxyhk.zte.com.cn:80 no_proxylocalhost,127.0.0.0/8,::1,zte.com.cn,zte.intra,…...

编程日记 2025/6/29 11:51:12

【正则表达式】核心知识点全景解析

目录一、基础语法架构二、核心元字符详解三、高级匹配技巧1. 字符集合2. 分组与引用3. 断言机制四、Python re模块核心方法五、性能优化策略1. 编译重用2. 避免回溯陷阱3. 选择高效量词六、典型应用场景1. 数据验证2. 数据提取3. 文本清洗七、调试技巧宝典1. 可视化调试工具…...

编程日记 2025/7/3 12:00:08

深度学习--ResNet残差神经网络解析

文章目录前言一、什么是ResNet网络二、传统卷积神经网络存在的问题1、梯度消失和梯度爆炸2、退化问题三、如何解决问题四、残差结构五、18层残差网络1、解释2、隔层相加优点3、隔层相加数值增大问题六、18层残差网络以外的表格示例七、BN层（Batch Normalization&…...

编程日记 2025/7/2 10:49:52

数据结构线性表的顺序存储结构

线性表是由零个或多个数据元素组成的有序序列。特点： 数据元素间是有顺序的； 数据元素的个数是有限的； 一般来说，数据元素的类型是相同的（强类型语言）。c/c是强类型语言，必须指定数据类型。…...

编程日记 2025/7/4 18:34:42

深入解析C++ STL Queue：先进先出的数据结构

一、引言在计算机科学中，队列（Queue）作为一种遵循先进先出（FIFO）原则的数据结构，是算法设计和系统开发的基础组件。C STL中的queue容器适配器以简洁的接口封装了底层容器的操作，为开发者提供…...

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

永磁同步电机控制算法-反馈线性化控制

一、原理介绍基于非线性系统的精确线性化控制方法，采用精确反馈线性化原理对永磁同步电机进行输入-输出线性化，该方法通过坐标变换和状态反馈将系统的数学模型转变为两个线性子系统，在实现线性化的同时也对系统中电流和转速存在的耦合现象进…...

编程日记 2025/6/29 9:24:12

开源 RAG 引擎：文档理解精准、检索高效、可视化干预灵活，一站式搞定

引言： RAGFlow 是一款基于深度文档理解的开源 RAG 引擎，与 LLM 结合后可实现精准引用问答。它支持 20 多种文档格式解析，配备智能分块策略及混合检索方案，还有可视化干预界面，且支持 Docker 快速部署，堪称…...

编程日记 2025/7/3 12:00:09

URP-UGUI相关知识

一、UGUI的基本组成部分 Canvas （画布）所有UI都需要放在Canvas画布下面，不然无法显示EventSystem 所有的事件响应系统都需要依赖于EventSystem,若删除该组件，交互效果就不会显示 1.Canvas(画…...

编程日记 2025/7/4 5:18:04

COMSOL多孔结构传热模拟

多孔结构传热模拟涉及对多孔介质内部复杂的热量传递过程进行建模和分析，这类模拟对于优化材料设计、提高能源效率以及解决环境问题等方面具有重要意义。本案例介绍在COMSOL内建立全连通多孔结构几何模型，并将孔隙及基体划分两相材料，进行多孔…...

编程日记 2025/6/29 10:04:55

【CSS】层叠，优先级与继承（四）：层叠，优先级与继承的关系

层叠，优先级与继承的关系前文概括【CSS】层叠，优先级与继承（一）：超详细层叠知识点【CSS】层叠、优先级与继承（二）：超详细优先级知识点【CSS】层叠，优先级与继承&am…...

编程日记 2025/7/2 20:51:11

CDN加速http请求

一、CDN加速定义 CDN（Content Delivery Network，内容分发网络）是通过全球分布式节点服务器缓存网站内容，使用户就近获取数据的技术。其核心目标是缩短用户与内容之间的物理距离，解决网络拥塞、带宽不足等问题&#xff…...

编程日记 2025/6/29 10:49:32

python实战项目63：获取腾讯招聘信息内容并进行统计分析

python实战项目63：获取腾讯招聘信息内容并进行统计分析一、需求分析二、流程分析1、获取指定招聘工作类型的目标地址url。2、采集详情页信息。3、保存数据4、完整爬虫代码三、统计分析一、需求分析本项目的需求是爬取腾讯社会招聘信息网中社会招聘的不同工作类别岗位数据，…...

编程日记 2025/7/4 21:05:45

FlinkUDF用户自定义函数深度剖析

Flink 作为一款强大的流批一体数据处理引擎，其灵活性和扩展性在很大程度上依赖于用户自定义函数（User-Defined Functions, UDF）。UDF 允许开发者根据业务需求扩展 Flink 的核心功能，实现复杂的数据转换、聚合或分析。本文将系统性…...

编程日记 2025/7/2 19:36:52

Python图形界面编程（一）

目录一、相关的库 1、tkinter库 2、PyQt库二、图形界面编程要点三、tkinter控件 1、tkinter控件表 2、tkinter的常用控件 3、tkinter的扩展控件四、tkinter布局 1、简单示例 2、默认情况下的grid规则 3、调整窗口和网格 （1）调整窗口 &…...

编程日记 2025/7/4 2:02:55

HarmonyOS Grid 网格列表可长按 item 拖动移动位置

方案一 @Component struct WorkCircleCreatePage {// 存储车控列表的数组@State VehicleDoorArr: IVehicleDoor[] = []// 当前移动的Item索引@State CurrentIndex: number = -1// 拖动时显示的数据@State MoveItem: IVehicleDoor = { title: , icon: }// 拖动时放大倍数@State…...

编程日记 2025/6/29 11:56:32

出现 ORA-00904: “TENANT_ID“: 标识符无效解决方法

目录前言1. 问题所示2. 原理分析3. 解决方法前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器，无代码爬取，就来：bright.cn 1. 问题所示执行代码的时候，出现如下所示： org.springframework.jdbc.BadSqlGrammarException:</...

编程日记 2025/7/4 5:33:28

榜单持久化

榜单持久化的基本流程是这样的： 创建表持久化Redis数据到数据库清理Redis数据现在，创建表的动作已经完成，接下来就轮到Redis数据的持久化了。持久化的步骤如下： 读取Redis数据判断数据是否存在不存在，直接结束…...

编程日记 2025/7/3 17:58:54

璞华ChatBI闪耀2025数博会：对话式数据分析引领数智化转型新范式

4月17日至19日，2025中国（武汉）数字经济产业博览会在武汉盛大举办，璞华集团携自主研发的“ChatBI自然语言问答式数据分析平台”惊艳亮相。以 "通过对话让数据说话" 为主题，璞华集团在 A3-T8 展位构建了沉浸式…...

编程日记 2025/6/29 9:24:26

力扣DAY63-67 | 热100 | 二分：搜索插入位置、搜索二维矩阵、排序数组查找元素、搜索旋转排序数组、搜索最小值

前言简单、中等 √ 二分法思路很简单，但是判断边界太麻烦了！难道真的要去背模板吗搜索插入位置我的题解循环条件左不超过右，目标大于中间值（向下取整）时，左中1，小于，右中-1&…...

编程日记 2025/6/29 12:08:55

leetcode-哈希表

哈希表 127. 单词接龙题目字典 wordList 中从单词 beginWord 到 endWord 的转换序列是一个按下述规格形成的序列 beginWord -> s(1) -> s(2) -> ... -> s(k)： 每一对相邻的单词只差一个字母。对于 1 < i < k 时，每个 s(i) 都在…...

编程日记 2025/7/4 8:44:33

信息技术有限公司项目管理手册

这篇文档是信息技术有限公司的项目管理指导手册，对软件公司项目管理者具有重要价值，主要体现在以下几个方面： 管理全面规范涵盖内容广：从项目的整体管理到各个具体领域，如范围管理、进度管理、成本管理等&…...

编程日记 2025/6/29 10:14:56

TFTP服务调试

在tftpboot目录下进行sudo minicom 启动内核时问题：程序启动卡在Loading阶段原因：tftp协议的问题、或者网卡配置的问题解决：1.检查网线是否插好多试几次 2.检查tftp服务是否正常在minicom中调试ping pc机的ip地址 2.进入boot调…...

编程日记 2025/7/4 6:13:48

date-picker组件的shortcuts为什么不能配置在vue的data的return中

在 Vue 中，shortcuts 是一个选项，通常用于配置像 date-picker 这样的组件的日期快捷方式。这里有一些原因解释为什么 shortcuts 不应该配置在 data 的 return 中，而是应该配置在 data 的外部（例如，直接作为组件的一个属…...

编程日记 2025/7/3 14:08:59

迭代器模式：统一数据遍历方式的设计模式

迭代器模式：统一数据遍历方式的设计模式一、模式核心：将数据遍历逻辑与数据结构解耦在软件开发中，不同的数据结构（如数组、链表、集合）有不同的遍历方式。如果客户端直接依赖这些数据结构的内部实现来遍历元素&…...

编程日记 2025/6/29 9:24:08

RocketMQ 核心架构速览

欢迎光临小站：致橡树文章现有讲述比较简单，后续逐渐丰富各部分内容。 Apache RocketMQ 作为阿里巴巴开源的一款分布式消息中间件，凭借其高吞吐、低延迟、高可用等特性，成为金融级稳定性场景的首选解决方案。本文将深入剖析 Roc…...

编程日记 2025/7/3 8:01:11

kafka安装、spark安装

kafka简介 Kafka就是一个分布式的用于消息存储的消息队列。 kafka角色 Kafka中存储的消息，被消费后不会被删除，可以被重复消费，消息会保留多长，由kafka自己去配置。默认7天删除。背后的管理工作由zookeeper来管理。 kafka安装 …...

编程日记 2025/7/3 10:05:14

迅为RK3562开发板ARM四核A53核心板多种系统适配全开源

迅为RK3562开发板ARM四核A53核心板多种系统适配全开源 RK3562开发板(2GB内存16GB存储)...

编程日记 2025/6/29 9:24:04

用交换机连接两台电脑，电脑A读取/写电脑B的数据

1、第一步，打开控制面板中的网络和共享中心，如下图配置，电脑A和电脑B均要配置； 注意：要保证电脑A和电脑B在同一子网掩码下，不同的IP地址； 2、在电脑上同时按‘CommandR’，在弹出的输…...

编程日记 2025/7/3 16:22:47

线程入门3

synchronized修饰方法 synchronized可以修饰代码块(在线程入门2中有例子)，也可以修饰普通方法和静态方法。修饰普通方法修饰普通方法简化写法： 修饰静态方法修饰静态方法简化写法： 注意：利用synchronized上锁，锁的…...

编程日记 2025/6/29 10:35:59

【C++】AVL树

目录一、AVL树的引入二、AVL树 🍔AVL树的概念 🍟AVL树节点的定义 🌮AVL树的插入 🥪AVL树的旋转三、AVL树的验证四、结语一、AVL树的引入 🌟我们知道 map/multimap/set/multiset 这几个容器的共同点是&#…...

编程日记 2025/7/3 12:48:50

Java大师成长计划之第1天：Java编程基础入门

📢 友情提示： 本文由银河易创AI（https://ai.eaigx.com）平台gpt-4o-mini模型辅助创作完成，旨在提供灵感参考与技术分享，文中关键数据、代码与结论建议通过官方渠道验证。欢迎来到“Java大师成长计划”系列文…...

编程日记 2025/7/5 13:36:43

Java线程中断机制详解

中断机制是Java中一种协作式的线程停止方式，它提供了一种优雅的线程间通信机制，用于请求另一个线程停止当前工作。中断机制的核心概念中断标志位(Interrupt Status) 每个线程都有一个boolean类型的中断状态标志（native方法控制&#xff09…...

编程日记 2025/6/29 9:25:07

一、插值语法 {{ }}

二、核心指令

三、动态属性绑定

四、事件修饰符

五、条件渲染 vs 列表渲染总结

六、最佳实践

示例 1：插值语法 & 基础绑定

示例 2：条件渲染

示例 3：列表渲染

示例 4：事件处理

示例 5：动态绑定

示例 6：双向绑定

示例 7：综合实践

相关文章：

一、插值语法 `{{ }}`