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

Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

news 来源：原创 2025/7/18 20:17:17

（一）初识指令和内容渲染指令v-html

1.v-html

案例：

官网的API文档

（二）条件渲染指令v-show和v-if

1. v-show

2. v-if

（三）条件渲染指令v-else和v-else-if

案例

（四）事件绑定指令 v-on

1.内联语句

简写

2.事件处理函数

3.给事件处理函数传参

（五）属性绑定指令v-bind

（六）列表渲染指令v-for

1.v-for中的key

区别：加key-不加key

（七）双向绑定指令v-model

（一）初识指令和内容渲染指令v-html

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v- 前缀的特殊标签属性

1.v-html

作用：设置元素的 innerHTML

语法：v-html = " 表达式 "

案例：

<body>

<div id="app">

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

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>

const app = new Vue({

el: '#app',

data: {

msg: `

<a href="https://www.baidu.com">

baidu

</a>

`

}

})

</script>

</body>

官网的API文档

（二）条件渲染指令v-show和v-if

1. v-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

2. v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

示例代码：

<html>

<head>

<style>

.box {

border: 3px solid #000000;

border-radius: 10px;

padding: 20px;

margin: 20px;

width: 200px;

}

</style>

</head>

<body>

<div id="app">

<div v-show="flag" class="box">我是v-show控制的盒子</div>

<div v-if="flag" class="box">我是v-if控制的盒子</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>

const app = new Vue({

el: '#app',

data: {

flag:true,

}

})

</script>

</body>

</html>

演示截图：

当flag为true时：

当flag为false时：

1.v-show的底层原理：

切换css的diaplay: none来控制显示还是隐藏

2.v-if的底层原理：

根据判断条件来控制元素的创建和移除（当结果为true时当前元素就创建出来，为false时元素就销毁）

（三）条件渲染指令v-else和v-else-if

1. 作用： 辅助 v-if 进行判断渲染

2. 语法： v-else v-else-if = "表达式"

3. 注意： 需要紧挨着 v-if 一起使用

案例

示例代码：

<html>

<head>

<title>

案例

</title>

</head>

<body>

<div id="app">

<p v-if="gender === 1">性别：♂ 男</p>

<p v-else>性别：♀ 女</p>

<hr>

<p v-if="score >= 90">成绩评定A：奖励电脑一台</p>

<p v-else-if="score >=70">成绩评定B：奖励周末郊游</p>

<p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>

<p v-else>成绩评定D：惩罚一周不能玩手机</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>

const app = new Vue({

el: '#app',

data: {

gender:1,

score:80

}

})

</script>

</body>

</html>

演示截图：

（四）事件绑定指令 v-on

作用：注册时间=添加时间+提供处理逻辑

语法：

<button v-on:事件名="内联语句">按钮</button>

<button v-on:事件名="处理函数">按钮</button>

<button v-on:事件名="处理函数(实参)">按钮</button>

v-on: 简写为 @

1.内联语句

<body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

页面实现：

事件名也不是非要写click，可以换成别的，比如mouseenter：

<body><div id="app"><button v-on:mouseenter="count--">-</button><span>{{count}}</span><button v-on:mouseenter="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

将鼠标移到“-”和“+”按钮，不用点击，就可实现加减

简写

将v-on:这一整块换成@，也就是换成@click，同样可以实现

2.事件处理函数

内联语句只适用逻辑简单的语句，当逻辑代码多了的时候，就需要更换了

语法：

v-on:事件名 = "methods中的函数名"

注意：

事件处理函数应该写到一个跟data同级的配置项（methods）中

methods中的函数内部的this都指向Vue实例

案例：

在页面设置一个按钮，能够多次切换隐藏文字
<body><div id="app"><button @click="fun()">切换显示隐藏</button><h2 v-show="isShow">嘿嘿嘿</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {isShow:true},methods:{fun(){app.isShow = !app.isShow}}})</script></body>
运行结果：

把app换成this也是可以的，这样的可读性更高

3.给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

如果传递了参数，则实参 $event 表示事件对象，固定用法。

语法格式：

@click="fn(参数1,参数2)"

案例：

设置一个box，提供几个按钮，模拟买果汁，设置不同的饮料不同的价格，将每个饮料的价格参数传到事件处理函数中，更改剩余的钱的余额

<head><title>v-on指令案例</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style></head><body><div id="app"><div class="box"><h2>小蔡自动售货机</h2><button @click="buy(2)">可口可乐3元</button><button @click="buy(4)">橙汁4元</button><button @click="buy(5)">咖啡5元</button></div><p>银行卡余额：{{money}}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {money:100000},methods:{buy(price){this.money-=price}}})</script></body>

运行效果;

（五）属性绑定指令v-bind

作用：动态设置html的标签属性比如：src、url、title

语法：v-bind:属性名=“表达式”

v-bind:可以简写成 => :

案例：

动态绑定图片和一段文字

<div id="app"><img v-bind:src="url" v-bind:title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data:{url:'./img/1.png',msg:'金木'}})</script>

运行结果：

简写

运行结果：

（六）列表渲染指令v-for

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项

index 是每一项的索引，不需要可以省略

arr 是被遍历的数组

此语法也可以遍历对象和数

作用：多次渲染整个元素（数组，数字，对象），基于数据循环
遍历数组语法：v-for="(item,index) in 数组"

案例：

遍历一个数组并在页面上输出
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><div v-for="(item,index) in list">{{item}} - {{index}}</div></div><script>const app=new Vue({el:'#app',data:{list:['菠萝','苹果','橘子','榴莲']}})</script></body>
运行结果：

在渲染的时候我们只用到了item，那么我们是否可以省略index呢？

可以

运行结果：

1.v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：
<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>
注意：

key 的值只能是字符串或数字类型

key 的值必须具有唯一性

推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

区别：加key-不加key

key的作用：给元素添加唯一标识

v-for 的默认行为会尝试原地修改元素（就地复用）

当不加key删除元素的时候，程序就会直接在前几个数据里修改，比如删除第一个，那么就会把第一个元素的文字删除了，但是其他的一些属性没有删除，然后把下面的文字提上来。

（七）双向绑定指令v-model

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新

页面结果更新后，数据也会随之而变

可以快速获取或设置表单元素的内容

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

语法：v-model="变量"

需求：使用双向绑定实现以下需求

点击登录按钮获取表单中的内容

点击重置按钮清空表单中的内容

代码示例：

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app">用户名：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script>const app=new Vue({el:'#app',data:{username:'',password:''},methods:{login(){console.log(this.username,this.password)},reset(){this.username='',this.password=''}}})</script></body>

运行结果：

点击重置

点击登录

Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

目录 （一）初识指令和内容渲染指令v-html 1.v-html 案例： 官网的API文档 （二）条件渲染指令v-show和v-if 1. v-show 2. v-if （三）条件渲染指令v-else和v-else-if 案例 （四…...

编程日记 2025/7/18 20:17:17

Elixir GenServer

GenServer 是一个用来实现客户端-服务器模式中服务器的行为模块。 GenServer 是一个普通的 Elixir 进程，同其他 Elixir 进程一样，它可以用来保存状态、异步执行代码等。使用这个模块来实现通用服务器进程（GenServer）的优势在于&a…...

编程日记 2025/7/9 19:32:47

第八节、Bresenham直线插补【51单片机-TB6600驱动器-步进电机教程】

摘要：前面章节主要介绍单个电机控制，本节内容介绍两个电机完成直线插补运动一、 Bresenham直线算法介绍 Bresenham直线算法由Jack Elton Bresenham于1962年在IBM开发，最初用于计算机显示直线，它确定应该选择的n维光栅的点&#…...

编程日记 2025/7/18 20:08:17

JDK1.8

JDK1.8 1. Lamdba表达式 Lambda表达式是什么？ Lambda是一个匿名函数，我们可以将Lambda表达式理解为一段可以传递的代码（将代码像数据一样传递）。使用它可以写出简洁、灵活的代码。作为一种更紧凑的代码风格，使java语…...

编程日记 2025/7/14 8:15:43

【jvm】讲讲jvm中的gc

目录 1. 说明2. 主要算法2.1 标记-清除算法2.2 复制算法2.3 标记-整理算法3. 主要回收器3.1 Serial GC3.2 Parallel GC3.3 CMS（Concurrent Mark-Sweep）GC3.4 G1（Garbage-First）GC 4. 触发条件4.1 Minor GC（Young GC&am…...

编程日记 2025/7/14 16:11:13

Oracle 用户管理模式下的恢复案例-不完全恢复

1. 不完全恢复的几种常用方法 01. recover database using backup controlfile 如果丢失当前控制文件，用冷备份的控制文件恢复的时候，用来告诉 oracle，不要以 controlfile 中的 scn 作为恢复的终点； 02. recover database until …...

编程日记 2025/7/17 20:47:45

Leetcode经典题4--查找数组中的多数元素+Boyer-Moore 投票算法

题目描述： 给定一个大小为 n 的数组 nums ，返回其中的多数元素。多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。输入输出示例输入：nums [2,2,1,1,1,2,2] 输出…...

编程日记 2025/7/18 19:57:51

ubuntu20.04 如何使用 perf 性能分析工具以及 hotspot 性能分析可视化工具？

官方文档：https://perfwiki.github.io/main/ 如何安装：https://askubuntu.com/questions/50145/how-to-install-perf-monitoring-tool 首先是安装 perf: sudo apt-get install linux-tools-common sudo apt-get install linux-tools-generic sudo apt-…...

编程日记 2025/7/15 10:00:12

Scala-隐式转换

系统自动完成的：把一种类型的数据转成了另一种类型的数据。不是所有的类型都可以执行隐式转换函数的参数类型和返回值类型是重要的，它约定了把什么类型转成什么类型 //张三的函数def getAge():Double{8.5}//函数名：tranform 不重要//函…...

编程日记 2025/7/18 19:56:47

基于Java和Vue开发的漫画阅读软件漫画阅读小程序漫画APP

前景分析受众广泛：漫画的受众群体广泛，不仅限于青少年，还涵盖了成年人等多个年龄层和社会阶层。漫画文化在全球范围内的影响力不断扩大，未来漫画软件创业可以考虑全球市场的拓展。市场需求大：数字化阅读趋势下&…...

编程日记 2025/7/18 20:09:19

租赁小程序的优势与应用场景解析

内容概要租赁小程序，听起来是不是很酷？其实，它就是一个让你可以方便地租借各种高成本但用得不频繁的商品的平台。想象一下，当你需要租一件派对用的华丽小礼服，或是想体验一下超酷的运动器材，租赁小程序就…...

编程日记 2025/7/14 5:47:56

CC-Link IEFB转Modbus TCP协议网关（技术分享）

一，设备主要功能捷米特JM-CCLKIE-TCP网关实现连接到CC-Link IE Field Basic总线中做为从站使用，连接到Modbus TCP总线中做为主站或从站使用。应用广泛：捷米特JM-CCLKIE-TCP广泛应用于支持Modbus TCP接口的上位机、变频器、仪表、马保等等…...

编程日记 2025/7/18 20:11:22

开发手札：Win+Mac下工程多开联调

最近完成一个Windows/Android/IOS三端多人网络协同项目V1.0版本，进入测试流程了。为了方便自测，需要用unity将一个工程打开多次，分别是Win/IOS/Android版本，进行多角色联调。在Win开发机上，以Windows版本为主版…...

编程日记 2025/7/18 16:51:29

SSM报错：表现层方法应该返回字符串，但是返回页面

在进行SSM项目时，后端表现层应该返回给前端字符串，但是却跳转页面 1.首先检查是否使用ResponseBody注解 ResponseBody注解作用：将java对象转为json格式的数据。将controller的方法返回的对象通过适当的转换器转换为指定的格式之后&#xff0…...

编程日记 2025/7/18 10:14:57

Unity中使用Sqlite存储本地数据

sqlite-net sqlite下载页我的环境：win11、unity团结1.3.4 1.下载sqlite-net，将SQLite.cs脚本导入Unity 2.下载各平台依赖项，如dll、aar等。导入Unity并设置 3.简单列子，打包测试 using System; using System.IO; using SQLi…...

编程日记 2025/7/18 18:24:08

微信直连：商户转账到零钱API开发报错：java.security.InvalidKeyException: Illegal key size

jdk版本解决方案：下载jce_policy-8，替换jre下的 local_policy.jar 文件替换jdk内的jre下的替换jre下的 JDK 8u161 之后默认使用了不限制的Policy...

编程日记 2025/7/6 13:32:35

语言处理程序基础

逻辑运算正规式有限自动机上下文无关文法表达式（前缀、后缀、中缀） 将表达式（a-b）*（c5）构造成树的步骤为：括号不能出现在树中；按照表达式的计算顺序来依次构造！&…...

编程日记 2025/7/18 19:51:33

deepsort复现报错TypeError: tuple indices must be integers or slices, not tuple 解决

deepsort复现中遇到的TypeError: tuple indices must be integers or slices, not tuple问题的解决-CSDN博客以上为参考教程。复现的时候出现这个报错，搞了好久试了好多方法，包括降 scikit-learn版本，都不行，最后终于找到这个博…...

编程日记 2025/7/18 19:52:40

「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用

本篇将带你实现一个数字键盘应用，支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。关键词 UI互动应用数字键盘按钮组件状态管理用户交互一、功能说明数字键盘应用将实现以下功能&…...

编程日记 2025/7/16 22:23:18

MSSQL SQLi Labs靶场第一关（手工版）

一.判断是否存在注入输入http://172.16.0.87/less-1.asp?id1页面异常加上闭合点：http://172.16.0.87/less-1.asp?id1--页面正常，说明存在注入二.判断数据库类型可通过以下Payload来探测当前站点是否是MSSQL数据库，正常执⾏说明后台数据…...

编程日记 2025/7/17 12:09:50

重磅更新：CnosDB 2.3.5.4 版本上线, 性能提升，问题修复一网打尽

📢 重磅更新：CnosDB 2.3.5.4 版本上线, 性能提升，问题修复一网打尽 📢 我们很高兴地向大家介绍最新版本的更新，以下是本次更新的主要内容： 🔹 版本号：2.3.5.4 🔹 发布…...

编程日记 2025/7/14 17:59:14

后端-编辑按钮的实现

编辑一共要实现两步： 1.点击编辑蹦出来一个弹窗，此时需要回显，根据id查出来这条数据 2.修改某些值之后点击保存的时候调用修改的接口根据id查询的时候正常操作修改值的时候要注意一些问题 mapper层的Employee和impl层的接收实体不一样...

编程日记 2025/7/2 8:56:26

Python语言基础入门教程

Python是一种简单易学、功能强大的编程语言，非常适合初学者入门。本篇博客将带你从零开始，学习Python的一些基础知识，并通过详细分析和实例帮助你理解。一、什么是Python？ Python是一种高级编程语言，具有以下特点&am…...

编程日记 2025/7/18 7:11:44

verilog编程规范

verilog编程规范文章目录 verilog编程规范前言一、代码划分二、verilog编码ABCDEFG 前言高内聚，低耦合，干净清爽的代码一、代码划分高内聚： 一个功能一个模块干净的接口提取公共的代码低耦合： 模块之间低耦合尽量用少量…...

编程日记 2025/7/18 20:13:58

Spring Boot 的启动原理

Spring Boot 是由 Pivotal 团队发布的一个开源框架，它基于 Spring 框架，旨在简化企业级应用程序的开发过程。与传统的 Spring 项目相比，Spring Boot 提供了一种更加简洁、高效的方式来构建和部署应用程序。其核心理念是“约定优于配置”和“自…...

编程日记 2025/7/3 18:05:47

Oracle 19C RU补丁升级，从19.7to19.25 -单机

1. 环境信息： 角色数据库 IP地址数据库版本数据库名称源端单实例 172.30.21.191 19.7 hfzcdb 2. 安装准备用rman备份数据库，再备份下oracle目录： 命令： tar zavf oracle.tar /oracle 19.25版本关于19C的补丁内…...

编程日记 2025/7/18 6:24:50

Web day08 项目实战（2）

目录查询员工： 在EmpController层： 在pojo层： 在EmpServiceImpl 层中： 在dao层： 新增员工: pojo层： EmpController层： 在EmpServiceImpl 层中： 在EmpMapper层： …...

编程日记 2025/7/18 19:48:54

生命周期（vue2和vue3的生命周期对比）有哪些？

Vue.js 提供了一套完整的数据驱动和组件化思想，其生命周期钩子是开发者理解组件行为的关键。以下是 Vue 2 和 Vue 3 中生命周期钩子的对比： Vue 2 生命周期钩子创建阶段 beforeCreate：实例初始化之前调用，此时 data 和 methods …...

编程日记 2025/7/18 19:51:33

智慧信息发系统——控件磁吸

//鍙悜涓婂惛 function fun_鎺т欢纾佸惛_璁＄畻(鐏典綋y,寮曞姏鍊�,閫夋嫨鍖哄煙,璁＄畻鍧愭爣绫诲瀷) {const 灞忓箷椤圭洰 document.querySelectorAll(閫夋嫨鍖哄煙);var 璺濈鎴戞渶杩憏 0;var 鏈€杩戜竴娆″紩鍔� 0…...

编程日记 2025/7/18 19:54:46

【时间序列预测】基于PyTorch实现CNN_LSTM算法

文章目录 1. CNN_LSTM模型概述2. 网络结构3. 完整代码实现4.模型解析4.1 CNN层4.2 ReLU层4.3 MaxPooling层4.4 LSTM层4.5 输出层4.6 前向传播 5. 总结在时间序列预测任务中，CNN（卷积神经网络）和LSTM（长短期记忆网络）是…...

编程日记 2025/7/18 19:50:27

Android环境搭建

Android环境搭建第一步：安装 Homebrew 执行以下命令来安装 Homebrew： /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"检测是否安装成功： brew --version第二步：安装 No…...

编程日记 2025/7/18 4:50:46

HarmonyOS 5.0应用开发——Ability与Page数据传递

【高心星出品】文章目录 Ability与Page数据传递Page向Ability传递数据Ability向Page传递数据 Ability与Page数据传递基于当前的应用模型，可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。使用EventHub进行数据通信：在基类Context中提供…...

编程日记 2025/7/13 13:27:15

【数据结构】顺序表

一、顺序表的基本概念 1.1 概念顺序表是一种线性表的存储结构，其特点是：使用一段连续的存储空间存储线性表中的数据元素，通过数组实现，具有随机访问的能力。可以把顺序表直接理解为数组，只不过这个数组里可以存各种类…...

编程日记 2025/7/18 20:07:12

光伏与储能软件有哪些？

随着技术的不断进步，光伏与储能的软件系统也层出不穷，为这一领域的发展提供了强有力的支持。一、光伏设计软件 1、PVSyst 功能：这是一款全球广泛使用的光伏系统设计软件，支持光伏系统的模拟与设计，包括组件阵列、倾…...

编程日记 2025/7/18 19:53:43

AI周报（12.1-12.7）

AI应用-AI独立开发“小猫补光灯” 无论GitHub Copilot、Amazon CodeWhisperer，还是前面AI周报（6.23-6.29）Devv.ai，重在提高编码效率、提供编码补全和建议。小猫补光灯第一次让一个完全不会编程的产品经理，与AI协作&…...

编程日记 2025/7/18 20:11:21

windows 脚本批量管理上千台服务器实战案例

如果你们有接触服务器，都是知道服务器有BMC管理界面的，这几天我在做项目中，需要不断的开关机服务器，如果一两台服务器登录BMC界面重启服务器还好，如果服务器数量非常的庞大，成百上千台，我们不可…...

编程日记 2025/7/17 23:46:24

一级路由访问家里的二级路由设备例如nas

家里升级千兆网，更换了光猫设备，家里走网线的话，只有100m速度，就直接用了光猫的无线，这次换的很顶，下载和打游戏也够用了，基本上没有网络波动。就客厅用了一个路由器，接了nas和摄像头…...

编程日记 2025/7/15 5:45:45

线程（二）——线程安全

如何理解线程安全： 多线程并发执行的时候，有时候会触发一些“bug”，虽然代码能够执行，线程也在工作，但是过程和结果都不符合我们的开发时的预期，所以我们将此类线程称之为“线程安全问题”。例如&#xff…...

编程日记 2025/7/15 19:35:01

Altium Designer学习笔记 31 PCB布线优化_GND处理

基于Altium Designer 23学习版，四层板智能小车PCB 更多AD学习笔记：Altium Designer学习笔记 1-5 工程创建_元件库创建Altium Designer学习笔记 6-10 异性元件库创建_原理图绘制Altium Designer学习笔记 11-15 原理图的封装编译检查 _PCB封装库的创建Al…...

编程日记 2025/7/14 20:14:43

第四节、电机定角度转动【51单片机-TB6600驱动器-步进电机教程】

摘要：本节介绍用电机转动角度计算步骤，从而控制步进电机转角一、计算过程 1.1 驱动器接收一个脉冲后，步进电机转动一步，根据驱动器设置的细分值计算一个脉冲对应电机转动的角度step_x s t e p x s t e p X … … ① step_{x…...

编程日记 2025/7/15 14:44:24

亚马逊云科技用生成式AI，向开发的复杂性动手了

生成式 AI、分布式扩展功能全面进化，还降价了。同一天的发布，完全不同的方向。今天凌晨，云计算巨头亚马逊云科技的 re:Invent 与大号创业公司 OpenAI 的发布「撞了车」。后者公布了一系列生成式 AI 应用，价格更贵、性能更强大&a…...

编程日记 2025/7/15 16:32:43

SharpDevelop IDE IViewContent.cs类

文件位置：IViewContent.cs /// <summary>/// IViewContent is the base interface for "windows" in the document area of SharpDevelop./// A view content is a view onto multiple files, or other content that opens like a document/// (e.…...

编程日记 2025/7/16 11:43:15

【工具变量】地级市城市全社会用电量数据（2006-2021年）

一、数据范围：覆盖中国300多个地级市二、包含指标： 省份、地级市、年份、全社会用电量。三、数据来源：国家电网查询数据。对于极大部分城市，国网售电量就是全社会用电量(往年的售电量和全社会用电量数据相同）,此外…...

编程日记 2025/7/15 8:29:45

vue列表滚动动画效果

一、效果展示： 录屏2024-12-07 02.16.59 二、步骤： 1. 需要用<transition-group>包裹需要渲染的item列表 ⚠️注意：这里的:key"item.id"，必须要用id之类的，不能用index <transition-group name&qu…...

编程日记 2025/7/13 17:07:18

33.5 remote实战项目之设计prometheus数据源的结构

本节重点介绍 : 项目要求通过remote read读取prometheus中的数据通过remote write向prometheus中写入数据准备工作新建项目 prome_remote_read_write设计prometheus 数据源的结构初始化项目要求通过remote read读取prometheus中的数据通过remote write向prometheus中写…...

编程日记 2025/7/14 14:24:23