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

Vue2中常用指令

news 来源：原创 2025/5/14 10:27:07

文章目录

Vue2中常用指令
- 1. v-text 动态渲染纯文本内容
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 2. v-html 动态渲染 HTML 内容
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 3. v-bind 动态绑定 HTML 属性
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
  - 5. 绑定class属性的用法
  - 6. 绑定style属性的用法
  - 7. 修饰符
  - - (1) .lazy
    - (2) .number
    - (3) .trim
- 4. v-model: 双向数据绑定
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 5. v-for: 列表渲染
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 6. v-if、v-else-if 和 v-else 条件渲染
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 7. v-show 条件渲染
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 8. v-on 事件处理
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
  - 5. 修饰符
  - - (1) .stop
    - (2) .prevent
    - (3) .capture
    - (4) .self
    - (5) .once
    - (6) .passive
    - (7) .{keyCode | keyAlias}
    - (8) .系统修饰键
    - (9) .exact
    - (10) 鼠标按钮修饰符
- 9. v-cloak 防止未编译的 Mustahge 语法闪烁
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 10. v-pre 跳过编译
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 11. v-once 只渲染一次
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项
- 12. v-slot 插槽
- - 1. 作用
  - 2. 基本用法
  - 3. 示例
  - 4. 注意事项

Vue2中常用指令

1. v-text 动态渲染纯文本内容

1. 作用

v-text 指令用于动态地将纯文本内容插入到 DOM 中。它会替换元素的 textContent 属性。

2. 基本用法

<div v-text='textContent'></div>

3. 示例

new Vue({el: '#app',data: {textContent: 'This is dynamic text content.'}
});

4. 注意事项

v-text 不会解析 HTML 标签，适合插入纯文本内容。
如果需要插入 HTML 内容，建议使用 v-html。

2. v-html 动态渲染 HTML 内容

1. 作用

v-html 指令用于动态地将 HTML 内容插入到 DOM 中。它会替换元素的 innerHTML 属性。

2. 基本用法

<div v-html="htmlContent"></div>

3. 示例

new Vue({el: '#app',data: {htmlContent: '<p style="color: red;">This is dynamic HTML content.</p>'}
});

4. 注意事项

使用 v-html 时要小心，避免插入恶意代码或导致 XSS 攻击。
如果需要插入纯文本，建议使用 v-text。

3. v-bind 动态绑定 HTML 属性

1. 作用

v-bind 指令用于动态地绑定一个或多个属性，或一个表达式或对象。当表达式的值变化时，绑定的属性也会自动更新。

2. 基本用法

<!-- 动态绑定一个属性 -->
<img v-bind:src="imageSrc" alt="Dynamic Image">
<!-- 简写 直接在属性前加： -->
<img :src="imageSrc" alt="Dynamic Image">
<!-- 动态绑定多个属性 -->
<img v-bind="{ src: imageSrc, alt: imageAlt }">

3. 示例

new Vue({el: '#app',data: {imageSrc: 'https://example.com/image.jpg',imageAlt: 'Vue Logo'}
});

4. 注意事项

当属性名包含中划线（kebab-case）时，绑定时需要用引号包裹，例如：v-bind:my-attribute=“value”。
v-bind 可以与 CSS 类名绑定，例如：v-bind:class=“className”。

5. 绑定class属性的用法

数组的写法

// 直接传递一个数组, 数组里面的类名要写字符串, 注意:这里的class需要使用v-bind做数据绑定
<p :calss="['thin', 'italic']"></p>

数组中嵌套对象

// 数组中推荐使用这种方式
<p :class="['thin', 'italic',{'active':flag}]"></p> // 这里的flag在data中定义, 是一个布尔值

数组中使用三元表达式

// data中定义一个布尔值类型的flag,在数组中用三元表示来显示这个flag
<p :class="['thin', 'italic', flag ? 'active':'noactive']"></p>

直接使用对象

// 在为class使用v-bind绑定对象的时候,对象的属性是类型,
// 由于对象的属性可带可不带引号,写法自己决定, 属性的值是一个标识符
<p :class="{thin: true, italic: true, active: false}"></p>

6. 绑定style属性的用法

直接在标签上通过 :style 的形式书写

// 对象就是无序键值对的集合
使用方式：
<p :style="{color:'red', 'font-weight':200}"></p>

将样式定义在data中, 在:style绑定的标签中引用

// 先将样式定义在data中的一个变量身上
new app({el: "#app",data: {styleObject: {color:'red', 'font-weight':200}}
})
// 在标签上,通过属性绑定的形式,将样式对象应用到元素中
<p :style="styleObject"></p>

在 :style 中通过数组，引用多个 data 上的样式对象

// 先将样式定义在data中的一个变量身上
new app({el: "#app",data: {styleObject1: {color:'red', 'font-weight':200},styleObject2: {color:'red', 'font-weight':200}}
})
// 在标签上,通过属性绑定的形式,将样式对象应用到元素中
<p :style="[styleObject1, styleObject2]"></p>

7. 修饰符

(1) .lazy

作用: 将 v-model 的更新时机从 input 事件改为 change 事件，即只有在输入框失去焦点或按下回车键时才更新数据。
示例:

<input v-model.lazy="message">

适用场景: 适用于需要延迟更新数据的场景，例如表单提交

(2) .number

作用: 将输入的值自动转换为数字类型。
示例:

<input v-model.number="age" type="number">

适用场景: 适用于需要处理数字输入的场景

(3) .trim

作用: 自动去除输入值的首尾空格。
示例:

<input v-model.trim="message">

适用场景: 适用于需要清理用户输入的场景

4. v-model: 双向数据绑定

1. 作用

v-model 指令用于在表单输入和应用数据之间创建双向绑定。它会根据表单控件的类型自动选择合适的方式更新数据。

2. 基本用法

<!-- 文本输入 -->
<input v-model="message" placeholder="Enter your message"><!-- 多行文本 -->
<textarea v-model="message"></textarea><!-- 单选按钮 -->
<input type="radio" v-model="selected" value="Option 1">
<input type="radio" v-model="selected" value="Option 2"><!-- 复选框 -->
<input type="checkbox" v-model="checked">

3. 示例

new Vue({el: '#app',data: {message: '',selected: '',checked: false}
});

4. 注意事项

v-model 默认会绑定到表单元素的 value 属性，但对于复选框和单选按钮，它会绑定到 checked 属性。
可以通过 .lazy 修饰符延迟更新，直到用户离开输入框时才更新数据。

5. v-for: 列表渲染

1. 作用

v-for 指令用于基于数组或对象渲染一个列表。它可以遍历数组、对象或数字，并为每个元素生成对应的 DOM 结构。

2. 基本用法

<!-- 渲染数组 -->
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul><!-- 渲染对象 -->
<div v-for="(value, key, index) in object" :key="key">{{ index }}. {{ key }}: {{ value }}
</div>

3. 示例

new Vue({el: '#app',data: {items: [{ id: 1, name: 'Apple' },{ id: 2, name: 'Banana' },{ id: 3, name: 'Orange' }],object: {name: 'Vue.js',version: '2.6.14',description: 'A progressive framework for building user interfaces.'}}
});

4. 注意事项

使用 v-for 时，建议始终提供唯一的 key 属性，以提高渲染性能并避免潜在的更新问题。
如果需要同时访问索引，可以使用 v-for=“(item, index) in items”。

6. v-if、v-else-if 和 v-else 条件渲染

1. 作用

v-if 指令用于根据表达式的真假条件来动态地渲染元素。v-else-if 和 v-else 则用于提供多个条件分支。

2. 基本用法

<div v-if="type === 'admin'">Welcome, Admin!
</div>
<div v-else-if="type === 'user'">Welcome, User!
</div>
<div v-else>Welcome, Guest!
</div>

3. 示例

new Vue({el: '#app',data: {type: 'user'}
});

4. 注意事项

v-if 是真正的条件渲染，它会根据条件的真假动态地创建或销毁 DOM 元素。
如果需要频繁切换条件，建议使用 v-show，它只是通过 CSS 的 display 属性控制元素的显示和隐藏。

7. v-show 条件渲染

1. 作用

v-show 指令用于根据表达式的真假值来控制元素的显示或隐藏。它通过动态地切换 CSS 的 display 属性来实现。

2. 基本用法

<div v-show="isVisible">This is visible only if 'isVisible' is true.</div>

3. 示例

new Vue({el: '#app',data: {isVisible: true}
});

4. 注意事项

v-show 始终会渲染元素，只是通过 CSS 控制其显示或隐藏。
与 v-if 不同，v-show 不会销毁或重新创建 DOM 元素，因此适合频繁切换的场景。

8. v-on 事件处理

1. 作用

v-on 指令用于监听 DOM 事件，并在事件触发时执行 JavaScript 函数。它支持各种事件，如点击、输入、提交等。

2. 基本用法

<!-- 点击事件 -->
<button v-on:click="handleClick">Click Me</button><!-- 键盘事件 -->
<input v-on:keyup.enter="handleEnter" placeholder="Press Enter">
<!-- 简写  v-on: => @ -->
<input @keyup.enter="handleEnter" placeholder="Press Enter">

3. 示例

new Vue({el: '#app',methods: {handleClick() {alert('Button clicked!');},handleEnter() {alert('Enter key pressed!');}}
});

4. 注意事项

v-on 可以简写为 @，例如：@click=“handleClick”。
可以通过修饰符（如 .stop、.prevent、.capture）来增强事件处理能力。

5. 修饰符

(1) .stop

作用: 阻止事件冒泡，即阻止事件向上级 DOM 元素传播。
示例:

<button @click.stop="handleClick">Click Me</button>

适用场景: 适用于需要防止事件冒泡的场景

(2) .prevent

作用: 阻止事件的默认行为，例如表单提交时阻止页面刷新。
示例:

<form @submit.prevent="handleSubmit"><button type="submit">Submit</button>
</form>

适用场景: 适用于需要阻止默认行为的场景

(3) .capture

作用: 使用事件的捕获模式，即事件在目标元素触发前先在父元素捕获。
示例:

<div @click.capture="handleCapture"><button @click="handleClick">Click Me</button>
</div>

适用场景: 适用于需要在父元素捕获事件的场景

(4) .self

作用: 只有当事件的目标元素是当前元素时才触发处理函数。
示例:

<div @click.self="handleSelf"><button @click="handleClick">Click Me</button>
</div>

适用场景: 适用于需要区分事件来源的场景

(5) .once

作用: 事件只触发一次。
示例:

<button @click.once="handleOnce">Click Me</button>

适用场景: 适用于需要限制事件触发次数的场景

(6) .passive

作用: 事件的默认行为立即执行，不会等待事件处理函数完成。
示例:

<div @scroll.passive="handleScroll">Scroll Me</div>

适用场景: 适用于需要优化滚动性能的场景

(7) .{keyCode | keyAlias}

作用: 从特定键触发事件时执行。
示例:

<input @keyup.13="handleSubmit"> <!-- 13 是 Enter 键的 keyCode -->
<input @keyup.enter="handleSubmit"> <!-- 使用别名 -->

适用场景: 适用于需要监听特定按键的场景

(8) .系统修饰键

.ctrl
.alt
.shift
.meta

作用: 仅在按下相应按键时才触发事件。
示例:

<div @click.ctrl="handleCtrl">Click Me</div>

适用场景: 适用于需要组合键触发事件的场景

(9) .exact

作用: 仅在按下精确的系统修饰符组合时才触发事件。
示例:

<button @click.ctrl.exact="handleExact">Click Me</button>

适用场景: 适用于需要精确控制修饰键的场景。

(10) 鼠标按钮修饰符

.left
.right
.middle

作用: 限制处理函数仅响应特定的鼠标按钮。
示例:

<div @click.left="handleLeft">Click Me</div>

适用场景: 适用于需要区分鼠标按钮的场景

9. v-cloak 防止未编译的 Mustahge 语法闪烁

1. 作用

v-cloak 指令用于在 Vue 实例初始化之前隐藏未编译的 Mustache 语法，防止页面在加载时显示原始的模板语法。

2. 基本用法

<div v-cloak>{{ message }}
</div>

3. 示例

new Vue({el: '#app',data: {message: 'Hello, Vue!'}
});

4. 注意事项

通常与 CSS 样式配合使用，例如：[v-cloak] { display: none; }。
在生产环境中，建议使用 v-cloak 来避免页面加载时的闪烁问题。

10. v-pre 跳过编译

1. 作用

v-pre 指令用于跳过 Vue 的编译过程，直接显示原始的 Mustache 语法或模板内容。

2. 基本用法

<div v-pre>{{ This will not be compiled by Vue }}
</div>

3. 示例

new Vue({el: '#app'
});

4. 注意事项

v-pre 通常用于调试或展示 Vue 的模板语法。
被 v-pre 标记的内容不会被 Vue 编译，因此不会响应数据变化

11. v-once 只渲染一次

1. 作用

v-once 指令用于让数据只渲染一次，后续数据变化不会更新视图。

2. 基本用法

<div v-once>{{ message }}
</div>

3. 示例

new Vue({el: '#app',data: {message: 'This will not update if message changes.'}
});

4. 注意事项

v-once 适合用于不需要动态更新的内容，例如版权声明或固定的提示信息。
使用 v-once 后，Vue 不会再监听该部分的 DOM 更新。

12. v-slot 插槽

1. 作用

v-slot 指令用于定义组件的插槽内容，允许在组件内部插入自定义内容。

2. 基本用法

<my-component><template v-slot:header><h1>Header Content</h1></template><template v-slot:default><p>Default Slot Content</p></template><template v-slot:footer><p>Footer Content</p></template>
</my-component>

3. 示例

Vue.component('my-component', {slots: {header: 'header',default: 'default',footer: 'footer'}
});new Vue({el: '#app'
});

4. 注意事项

v-slot 是 Vue 2.6+ 引入的新语法，用于替代 slot 和 slot-scope。
可以使用 # 语法简写，例如：<template #header>…。

Vue2中常用指令

文章目录 Vue2中常用指令1. v-text 动态渲染纯文本内容1. 作用2. 基本用法3. 示例4. 注意事项 2. v-html 动态渲染 HTML 内容1. 作用2. 基本用法3. 示例4. 注意事项 3. v-bind 动态绑定 HTML 属性1. 作用2. 基本用法3. 示例4. 注意事项5. 绑定class属性的用法6. 绑定style属性的…...

编程日记 2025/5/14 10:27:07

09-轮转数组

给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。方法一：使用额外数组 function rotate(nums: number[], k: number): void {const n nums.length;k k % n; // 处理 k 大于数组长度的情况const newNums new A…...

编程日记 2025/5/14 6:32:55

本地Deepseek-r1:7b模型集成到Google网页中对话

本地Deepseek-r1:7b网页对话基于上一篇本地部署的Deepseek-r1:7b，使用黑窗口对话不方便，现在将本地模型通过插件集成到Google浏览器中安装Google插件在Chrome应用商店中搜索page assis 直接添加至Chrome 修改一下语言 RAG设置本地运行的模型&#…...

编程日记 2025/5/8 10:45:02

算法——结合实例了解广度优先搜索(BFS)搜索

一、广度优先搜索初印象想象一下，你身处一座陌生的城市，想要从当前位置前往某个景点，你打开手机上的地图导航软件，输入目的地后，导航软件会迅速规划出一条最短路线。这背后，就可能运用到了广度优先搜索&am…...

编程日记 2025/5/14 9:46:18

2025年3月营销灵感日历

2025年的第一场营销大战已经拉开帷幕了！ 三月可是全年最值钱的营销黄金月——妇女节、植树节、315消费者日三大爆点连击，还有春分、睡眠日、世界诗歌日等20隐藏流量密码。道叔连夜扒了18个行业数据，整理了这份《2025年3月营销灵感日历》&a…...

编程日记 2025/5/11 13:34:15

【认证授权FAQ】SSL/TLS证书过期导致的CLS认证失败

问题现象问题分析属于Agent操作系统的根认证机构过期问题，需要下载CA然后在系统安装。 DigiCert根证书和中间证书将在未来几年过期，一旦证书过期，基于证书颁发的SSL/TLS证书将不再信任，导致网站无法HTTPs访问。需要迁移到新的根…...

编程日记 2025/5/14 9:21:20

飞书专栏-TEE文档

CSDN学院课程连接：https://edu.csdn.net/course/detail/39573...

编程日记 2025/5/14 9:52:06

自己部署 DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录自己…...

编程日记 2025/5/12 17:48:49

机器学习:集成学习和随机森林

集成学习集成学习通过构建并合并多个模型来完成学习,从而获得比单一学习模型更显著优越的泛化能力,集成学习就是利用模型的"集体智慧",提升预测的准确率,根据单个模型方式,集成学习可分为两大类: 个体之间存在强依赖关系,其代表为Boosting算法个体之间不存在强依赖…...

编程日记 2025/5/12 17:49:10

力扣刷题（数组篇）

日期类 #pragma once#include <iostream> #include <assert.h> using namespace std;class Date { public:// 构造会频繁调用，所以直接放在类里面（类里面的成员函数默认为内联）Date(int year 1, int month 1, int day 1)//构…...

编程日记 2025/5/14 7:46:53

Jenkins 新建配置 Freestyle project 任务六

Jenkins 新建配置 Freestyle project 任务六一、新建任务在 Jenkins 界面点击 New Item 点击 Apply 点击 Save 回到任务主界面二、General 点击左侧 Configure Description：任务描述勾选 Discard old builds Discard old builds：控制何时…...

编程日记 2025/5/14 9:58:30

5.8 软件质量与软件质量保证

文章目录软件质量模型软件质量保证软件质量模型软件质量模型有ISO/IEC9126，McCall。 ISO/IEC9126从功能性、可靠性、易使用性、效率、可维护性、可移植性这6个方面对软件质量进行分析。功能性包含适合性、依从性、准确性、安全性、互用性。可靠性包含成熟性、容错…...

编程日记 2025/5/11 18:18:24

二次封装axios解决异步通信痛点

为了方便扩展，和增加配置的灵活性，这里将通过封装一个类来实现axios的二次封装,要实现的功能包括：为请求传入自定义的配置，控制单次请求的不同行为在响应拦截器中对业务逻辑进行处理，根据业务约定的成功数据结构，返回业务数据对响应错误进行处理，配置显示对话框或消息形…...

编程日记 2025/5/12 14:46:05

Flutter项目试水

1基本介绍本文章在构建您的第一个 Flutter 应用指导下进行实践可作为项目实践的辅助参考资料 Flutter 是 Google 的界面工具包，用于通过单一代码库针对移动设备、Web 和桌面设备构建应用。在此 Codelab 中，您将构建以下 Flutter 应用。该应用可以…...

编程日记 2025/5/14 9:33:59

Java 大视界 -- 边缘计算与 Java 大数据协同发展的前景与挑战（85）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/5/14 9:38:46

【第1章：深度学习概览——1.2 深度学习与机器学习、传统人工智能的区别与联系】

在科技飞速发展的时代，AI 技术如同一颗璀璨的明星，照亮了我们生活的方方面面。今天，让我们一起深入探寻 AI 技术的演进历程，看看它是如何从最初的简单规则系统，一步步发展成为如今强大的智能技术。一、开篇故事：三杯咖啡看懂三代 AI 想象一下，你经营着一家充满温馨氛…...

编程日记 2025/5/14 8:37:43

游戏引擎学习第99天

仓库:https://gitee.com/mrxiao_com/2d_game_2 黑板：制作一些光场(Light Field) 当前的目标是为游戏添加光照系统，并已完成了法线映射（normal maps）的管道，但还没有创建可以供这些正常映射采样的光场。为了继续推进&…...

编程日记 2025/5/14 10:14:52

NixHomepage - 简单的个人网站

💻 NixHomepage - 简单的个人网站推荐下个人的开源项目，演示网站，项目链接 https://github.com/nixgnauhcuy/NixHomepage，喜欢的话可以为我的项目点个 Star~ 📷 预览 ⚙️ 功能特性多平台适配明亮/暗黑模式切换 W…...

编程日记 2025/5/14 9:30:39

window patch按块分割矩阵

文章目录 1. excel 示意2. pytorch代码3. window mhsa 1. excel 示意将一个三维矩阵按照window的大小进行拆分成多块2x2窗口矩阵，具体如下图所示 2. pytorch代码 pytorch源码 import torch import torch.nn as nn import torch.nn.functional as Ftorch.set_p…...

编程日记 2025/5/14 8:49:11

Dockerfile 详解：构建自定义镜像

Dockerfile 是一种文本文件，包含了一系列指令，用于描述如何构建一个 Docker 镜像。通过 Dockerfile，我们可以将应用程序及其所有依赖打包成镜像，确保应用在不同环境中运行时保持一致性。掌握 Dockerfile 的写法和最佳实践，能够帮助我们高效地构建和管理容器镜像。本文将…...

编程日记 2025/5/9 12:46:16

vue2老版本 npm install 安装失败_安装卡主

vue2老版本 npm install 安装失败_安装卡主特别说明：vue2老版本安装慢、运行慢，建议升级vue3element plus vite 解决方案1： 第一步、修改npm 镜像为国内镜像使用淘宝镜像： npm config set registry https://registry.npmmir…...

编程日记 2025/5/6 7:33:37

【细看open_r1】精读训练和评估模型以及生成合成数据的脚本（src/open_r1）

src/open_r1 目录下主要包含了一些用于训练和评估模型以及生成合成数据的Python脚本，下面我们对其中几个主要的Python文件进行深度剖析。 configs.py 这个文件定义了两个数据类 GRPOConfig 和 SFTConfig，它们分别继承自 trl.GRPOConfig 和 trl.SFTConf…...

编程日记 2025/5/14 9:22:35

数据库数据恢复—MongoDB丢失_mdb_catalog.wt文件导致报错的数据恢复案例

MongoDB数据库存储模式为文档数据存储库，存储方式是将文档存储在集合之中。 MongoDB数据库是开源数据库，同时提供具有附加功能的商业版本。 MongoDB中的数据是以键值对(key-value pairs)的形式显示的。在模式设计上，数据库受到的约束更少。这…...

编程日记 2025/5/3 13:46:08

Qt 控件整理 —— 按钮类

一、PushButton 1. 介绍在Qt中最常见的就是按钮，它的继承关系如下： 2. 常用属性 3. 例子我们之前写过一个例子，根据上下左右的按钮去操控一个按钮，当时只是做了一些比较粗糙的去演示信号和槽是这么连接的，这次我们…...

编程日记 2025/5/11 6:46:37

当 LSTM 遇上 ARIMA！！

大家好，我是小青 ARIMA 和 LSTM 是两种常用于时间序列预测的模型，各有优劣。 ARIMA 擅长捕捉线性关系，而 LSTM 擅长处理非线性和长时间依赖的关系。将ARIMA 和 LSTM 融合，可以充分发挥它们各自的优势，构建更强大的时…...

编程日记 2025/5/12 6:35:39

SpringBoot实战：高效获取视频资源

文章目录前言技术实现SpringBoot项目构建产品选取配置数据采集号外号外前言在短视频行业高速发展的背景下，海量内容数据日益增长，每天都有新的视频、评论、点赞、分享等数据涌现。如何高效、精准地获取并处理这些庞大的数据，已成为各大平…...

编程日记 2025/5/12 4:34:55

MySQL索引数据结构详解

索引的定义：方便Mysql更高效的获取排好序的数据结构数据结构分为： 二叉树红黑树hash表B-Tree 二叉树规则：可视化二叉树从父节点查找数据，每个节点最多有两个子节点，左子节点比父节点小，右子节点比父节…...

编程日记 2025/5/11 21:04:52

Python----PyQt开发（PyQt基础，环境搭建，Pycharm中PyQttools工具配置，第一个PyQt程序）

一、QT与PyQT的概念和特点 1.1、QT QT是一个1991年由The Qt Company开发的跨平台C图形用户界面应用程序开发框架，可构建高性能的桌面、移动及Web应用程序。也可用于开发非GUI程序，比如控制台工具和服务器。Qt是面向对象的框架，使用特殊的代…...

编程日记 2025/5/1 1:54:11

C语言——排序（冒泡，选择，插入）

基本概念排序是对数据进行处理的常见操作，即将数据按某字段规律排列。字段是数据节点的一个属性，比如学生信息中的学号、分数等，可针对这些字段进行排序。同时，排序算法有稳定性之分，若两个待排序字段一致的数据在排序…...

编程日记 2025/5/12 17:54:15

物联网智能语音控制灯光系统设计与实现

背景随着物联网技术的蓬勃发展，智能家居逐渐成为现代生活的一部分。在众多智能家居应用中，智能灯光控制系统尤为重要。通过语音控制和自动调节灯光，用户可以更便捷地操作家中的照明设备，提高生活的舒适度与便利性。本文将介绍一…...

编程日记 2025/5/13 14:04:04

哪吒闹海！SCI算法+分解组合+四模型原创对比首发！SGMD-FATA-Transformer-LSTM多变量时序预测

哪吒闹海！SCI算法分解组合四模型原创对比首发！SGMD-FATA-Transformer-LSTM多变量时序预测目录哪吒闹海！SCI算法分解组合四模型原创对比首发！SGMD-FATA-Transformer-LSTM多变量时序预测效果一览基本介绍程序设计参考资料效果一览…...

编程日记 2025/5/14 4:22:25

Python实现决策树（Decision Tree）算法

在 Python 中实现一个决策树算法，可以使用 sklearn 库中的 DecisionTreeClassifier 类。这个类实现了分类任务中的决策树算法。下面是一个简单的例子，展示如何使用 DecisionTreeClassifier 来训练决策树并进行预测。 1. 安装 scikit-learn 如果你还没有…...

编程日记 2025/5/10 2:03:09

刷题日记---二叉树递归专题

文章目录 1. 从根到叶的二进制数之和2. 二叉树的坡度3. 总结 1. 从根到叶的二进制数之和描述： 给出一棵二叉树，其上每个结点的值都是 0 或 1 。每一条从根到叶的路径都代表一个从最高有效位开始的二进制数。例如，如果路径为 0 -> 1 ->…...

编程日记 2025/5/8 17:52:25

【C++】智能指针的使用及其原理

1. 智能指针的使用场景分析下⾯程序中我们可以看到，new了以后，我们也delete了，但是因为抛异常导，后⾯的delete没有得到执⾏，所以就内存泄漏了，所以我们需要new以后捕获异常，捕获到异常后dele…...

编程日记 2025/5/11 3:33:07

Jenkins 安装插件二

Jenkins 安装插件二一. 打开 Dashboard 打开 Jenkins 界面，不管在任何界面，只需要点击左上角 Dashboard 按钮即可二. 打开 Manage Jenkins 找到 Manage Jenkins -> System Configuration -> Plugins 点击 Plugins 打开界面如下 Updates&a…...

编程日记 2025/5/13 17:20:53

C++自研游戏引擎-碰撞检测组件-八叉树AABB检测算法实现

八叉树碰撞检测是一种在三维空间中高效处理物体碰撞检测的算法，其原理可以类比为一个管理三维空间物体的智能系统。这个示例包含两个部分：八叉树部分用于宏观检测，AABB用于微观检测。AABB可以更换为均值或节点检测来提高检测精度。八叉树的…...

编程日记 2025/5/11 11:48:14

Java 大视界 -- 云计算时代 Java 大数据的云原生架构与应用实践（86）

编程日记 2025/5/6 20:12:16

学习threejs，使用HemisphereLight半球光

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.HemisphereLight 二、…...

编程日记 2025/5/14 8:42:17

XML 命名空间

XML 命名空间引言 XML（可扩展标记语言）是一种用于存储和传输数据的标记语言。在XML中，命名空间（Namespace）是一个非常重要的概念，它主要用于解决XML文档中元素和属性的命名冲突问题。本文将详细介绍XML命…...

编程日记 2025/5/11 18:18:31

kubernetes-cni 框架源码分析

深入探索 Kubernetes 网络模型和网络通信 Kubernetes 定义了一种简单、一致的网络模型，基于扁平网络结构的设计，无需将主机端口与网络端口进行映射便可以进行高效地通讯，也无需其他组件进行转发。该模型也使应用程序很容易从虚拟机或者主机物…...

编程日记 2025/5/13 13:29:38

【嵌入式Linux应用开发基础】ioctl函数

目录一、概述 1.1. ioctl 的功能 1.2. 函数原型 1.3. 参数说明 1.4. 返回值 1.5. request 命令的定义二、典型应用场景 2.1. 串口通信控制 2.2. 网络设备配置与管理 2.3. 字符设备控制 2.4. 块设备管理 2.5. 多媒体设备控制三、关键注意事项 3.1. request 命令…...

编程日记 2025/5/13 3:49:45

开源的轻量级分布式文件系统FastDFS

FastDFS 是一个开源的轻量级分布式文件系统，专为高性能的分布式文件存储设计，主要用于解决海量文件的存储、同步和访问问题。它特别适合以中小文件（如图片、视频等）为载体的在线服务，例如相册网站、视频网站等。 FastD…...

编程日记 2025/5/11 14:04:38

从VGG到Transformer：深度神经网络层级演进对模型性能的深度解析与技术实践指南

一、技术原理（数学公式示意图） 1. 层深与模型容量关系数学表达：根据Universal Approximation Theorem，深度网络可表达复杂函数： f ( x ) f L ( f L − 1 ( ⋯ f 1 ( x ) ) ) f(x) f_L(f_{L-1}(\cdots f_1(x))) f…...

编程日记 2025/5/8 23:42:21

深入了解 Oracle 正则表达式

目录深入了解 Oracle 正则表达式一、正则表达式基础概念二、Oracle 正则表达式语法（一）字符类（二）重复限定符（三）边界匹配符（四）分组和捕获三、Oracle 正则表达式函数（…...

编程日记 2025/5/13 17:31:47

机器学习-监督学习

1. 定义与原理监督学习依赖于标记数据（即每个输入样本都对应已知的输出标签），模型通过分析这些数据中的规律，建立从输入特征到目标标签的映射函数。例如，在垃圾邮件检测中，输入是邮件内容，输出…...

编程日记 2025/5/9 17:19:29

Leetcode：学习记录

一、滑动窗口 1. 找出数组中元素和大于给定值的子数组的最小长度右指针从左到右遍历，在每个右指针下，如果去掉左边元素的元素和大于等于给定值则左指针右移一次，直到小于给定值，右指针右移一个。 2.找到乘积小于给定值的子数组…...

编程日记 2025/4/28 12:25:39

探索顶级汽车软件解决方案：驱动行业变革的关键力量

在本文中，将一同探索当今塑造汽车行业的最具影响力的软件解决方案。从设计到制造，软件正彻底改变车辆的制造与维护方式。让我们深入了解这个充满活力领域中的关键技术。设计软件：创新车型的孕育摇篮车辆设计软件对于创造创新型汽车模型至…...

编程日记 2025/5/11 13:06:56

AI前端开发：解放创造力，而非取代它

近年来，人工智能技术飞速发展，深刻地改变着各行各业，前端开发领域也不例外。越来越多的AI写代码工具涌现，为开发者带来了前所未有的效率提升。很多人担心AI会取代程序员的创造力，但事实并非如此。本文将探讨AI辅助前端…...

编程日记 2025/5/8 6:34:08

探讨使用ISVA代替“Open Liberty使用指南及微服务开发示例”中日志审计功能

在Open Liberty使用指南及开发示例（四）一文开始日志审计功能占有了一定的开发工作量，那么是否可以使用IBM Security Verify Access（ISVA）代替以节省开发工作？如果可行，那么以后各类应用的日志审…...

编程日记 2025/5/14 2:44:13

log4j2日志配置文件

log4j2配置文件每个项目都会用到,记录一个比较好用的配置文件,方便以后使用时调取,日志输出级别为debug,也可以修改 <?xml version"1.0" encoding"UTF-8"?> <Configuration monitorInterval"180" packages""><prope…...

编程日记 2025/5/12 6:45:18

文章目录

Vue2中常用指令

1. v-text 动态渲染纯文本内容

1. 作用

2. 基本用法

3. 示例

4. 注意事项

2. v-html 动态渲染 HTML 内容

1. 作用

2. 基本用法

3. 示例

4. 注意事项

3. v-bind 动态绑定 HTML 属性

1. 作用

2. 基本用法

3. 示例

4. 注意事项

5. 绑定class属性的用法

6. 绑定style属性的用法

7. 修饰符

(1) .lazy

(2) .number

(3) .trim

4. v-model: 双向数据绑定

1. 作用

2. 基本用法

3. 示例

4. 注意事项

5. v-for: 列表渲染

1. 作用

2. 基本用法

3. 示例

4. 注意事项

6. v-if、v-else-if 和 v-else 条件渲染

1. 作用

2. 基本用法

3. 示例

4. 注意事项

7. v-show 条件渲染

1. 作用

2. 基本用法

3. 示例

4. 注意事项

8. v-on 事件处理

1. 作用

2. 基本用法

3. 示例

4. 注意事项

5. 修饰符

(1) .stop

(2) .prevent

(3) .capture

(4) .self

(5) .once

(6) .passive

(7) .{keyCode | keyAlias}

(8) .系统修饰键

(9) .exact

(10) 鼠标按钮修饰符

9. v-cloak 防止未编译的 Mustahge 语法闪烁

1. 作用

2. 基本用法

3. 示例

4. 注意事项

10. v-pre 跳过编译

1. 作用

2. 基本用法

3. 示例

4. 注意事项

11. v-once 只渲染一次

1. 作用

2. 基本用法

3. 示例

4. 注意事项

12. v-slot 插槽

1. 作用

2. 基本用法

3. 示例

4. 注意事项

相关文章：