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

vue初识

news 2025/9/14 17:58:29
  • 第一次接触vue，前端的html,css,jquery,js学习也有段时间了，就照着B站的视频简单看了一些，了解了一些简单的用法，这边做一个记录。

官网
工具：使用VSCode以及Live Server插件（能够实时预览）

第一个Vue程序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue基础</title></head><body><div id="app">{{message}}</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!"}})</script></body>
</html>

el:挂载点：设置Vue实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>el挂载点</title></head><body id="body">{{messgae}}<div id="app" class="abc">{{message}}<p>{{message}}</p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",//el:".abc",//el:"div",//el:"#body",data:{message:" hello Vue!"}})</script></body>
</html>

在这里插入图片描述

Vue实例的作用范围是什么呢？

  • Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其它的选择器

  • 可以使用其它的选择器，但是建议使用ID选择器

是否可以设置其它的dom元素呢

  • 可以使用其它的双标签，不能使用html和body

data数据对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>data数据对象</title></head><body><div id="app">{{message}}<h2>{{student.name}} ---{{student.mobile}}</h2><ul><li>{{hobbies[0]}}</li><li>{{hobbies[2]}}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!",student:{name:"张三",mobile:"16789028"},hobbies: ["学习","喝酒","打球"]}})</script></body>
</html>

常见指令

v-text

  • 作用：设置标签的内容
  • 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
  • 支持内部写表达式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-text</title></head><body><div id="app">{{message}}<h2 v-text="message+'a'">zhh</h2><h2>{{message+'sd'}} asd</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!"}})</script></body>
</html>

v-html

  • 作用：设置元素的innerHTML

  • 内容中有HTML结构会被解析成标签

  • v=text指令无论内容时什么.只会解析成文本

  • 解析文本使用v=text,需要解析html结构使用v-html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-html</title></head><body><div id="app">{{message}}<h2 v-text="title"></h2><h2 v-html="title"></h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!",title:"<h3>abc<h3>"}})</script></body>
</html>

v-on

  • v-on指令的作用是为元素绑定事件

  • 事件名不需要写on

  • 指令可以简写为@

  • 绑定的方法定义字methods属性中

  • 方法内部通过this关键字可以访问定义在data中数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-on</title></head><body><div id="app">{{message}}<input type="button" value="测试事件绑定" v-on:click="func1"><input type="button" value="测试事件绑定简写" @click="func2"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!"},methods: {func1() {console.log("1");alert("2")},func2:function() {alert(this.message)}}})</script></body>
</html>

v-on补充

  • 传递自定义参数，事件修饰符

  • 事件绑定的方法写成函数调用的形式，可传入自定义参数

  • 定义方法时需要定义形参来接收传入的实参

  • 事件的后面跟上.修饰符可以对事件进行限制

  • .enter可以限制触发的按键为回车

  • 事件修饰符有多种

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-on补充</title><!-- --></head><body><div id="app"><button @click="add(3,2)">加法计算</button><input type="text" @keyup.enter="sayHi"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!"},methods: {add: function(a1,a2) {alert(a1+a2)},sayHi:function() {alert(666)}}})</script></body>
</html>

v-bind

  • v-bind指令的作用是为元素绑定属性

  • 完整写法是v-bind:属性名

    简

  • 写的可以直接省略v-bind,只保留:属性名

  • 需要动态的增删改class建议使用对象的方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>.active{border: 1px solid red;}</style><title>v-bind</title><!--  --></head><body><div id="app">{{message}}<img v-bind:src="imgSrc" alt=""><br><img :src="imgSrc" alt="" :title="message+'404'" :class="isActive?'active':''"> <img :src="imgSrc" alt="" :title="message+'404'" :class="{active:isActive}"> </div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!",imgSrc:"../img/monkey.gif",isActive:true}})</script></body>
</html>

v-show

  • v-show指令的作用是根据真假切换元素的显示状态

  • 原理是修改元素的display，实现显示隐藏

  • 指令后面的内容，最终都会被解析为布尔值

  • 值为true元素显示，值为false，元素隐藏

  • 数据改变之后，对应元素的显式状态会同步更新

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-show</title><!----></head><body><div id="app"><input type="button" value="切换显示状态" @click="changeInShow"><button @click="addAge">累加年龄</button><br><img src="../img/monkey.gif" alt="" v-show="isShow"><br><img src="../img/monkey.gif" alt="" v-show="age>40"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!",isShow:true,age:34},methods:{changeInShow: function() {this.isShow=!this.isShow;},addAge:function() {this.age++;}}})</script></body>
</html>

v-if

  • v-if指令的作用是：根据表达式的真假切换元素的显式状态

  • 本质是通过操控dom元素来切换显示状态

  • 表达式的值为true,元素存在于dom树中,为false,从dom树中移除

  • 频繁的切换v-show,反之使用v-if,前者的切换消耗小

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-if</title><!-- v-if指令的作用是：根据表达式的真假切换元素的显式状态本质是通过操控dom元素来切换显示状态表达式的值为true,元素存在于dom树中,为false,从dom树中移除频繁的切换v-show,反之使用v-if,前者的切换消耗小--></head><body><div id="app"><button @click="changeShow">切换显示状态</button><button @click="changeAge">增加年龄</button><img src="../img/monkey.gif" alt="" v-if="true"><img src="../img/monkey.gif" alt="" v-if="isShow"><img src="../img/monkey.gif" alt="" v-if="age>40"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!",isShow:true,age:30},methods: {changeShow: function() {this.isShow=!this.isShow;},changeAge: function() {this.age++;console.log(this.age)}}})</script></body>
</html>

v-for

  • v-for指令的作用是根据数据生成列表结构

  • 数组经常与它结合使用

  • 语法是(item,index) in数据

  • item和index可以结合其它指令一起使用

  • 数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-for</title><!----></head><body><div id="app"><ul><li v-for="(item,index) in hobbies" :title="item">{{index+1}}兴趣有：{{item}}</li></ul><h2 v-for="it in students">{{it}}{{it.name}} {{it.age}}</h2>{{message}}</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!",hobbies:["打球","睡觉","打游戏"],students:[{name: "abc",age:"34"},{name:"rty",age: "45"}]}})</script></body>
</html>

v-model

  • 获取和设置表单元素的值(双向数据绑定)

  • v-model指令的作用是设置和获取表单元素的值

  • 绑定的数据会和表单元素值相关联

  • 绑定的数据<---->表单元素的值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-model</title><!-- --></head><body><div id="app">{{message}}<button @click="setM">修改message</button><input type="text" v-model="message" @keyup.enter="getM"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:" hello Vue!"},methods: {getM:function() {alert(this.message)},setM:function(){this.message="aaaa"}}})</script></body>
</html>

使用常用指令实现小功能

计数器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>计数器</title><style>#app {width: 480px;height: 100px;margin: 200px auto;}.input-num {margin-top: 20px;height: 100%;display: flex;border-radius: 10px;overflow: hidden;box-shadow: 0 0 4px black;}.input-num button {width: 150px;height: 100%;font-size: 40px;color: gray;cursor: pointer;border: none;outline: none;}.input-num span {height: 100%;font-size: 40px;flex: 1;text-align: center;line-height: 100px;}</style></head><body><div id="app"><div class="input-num"><button @click="sub">-</button><span>{{num}}</span><button v-on:click="add">+</button></div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{num:1},methods: {sub:function() {if(this.num>0){this.num--}else {alert("到最小值了")}},add: function(){if ((this.num) < 10) {this.num ++;}else {alert("到最大值了")}}}})</script></body>
</html>

图片切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- <link rel="stylesheet" href="../css/index.css"/> --><title>图片切换</title></head><body><div id="app"><!-- <button @click="next">测试</button> --><img src="../img/prev.png" alt="" @click="prev" v-if="num>0"><img v-for="(item,index) in imgSrcs":src="item" alt="" v-show="num==index" ><img src="../img/next.png" alt="" @click="next" v-if="num!=10"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=new Vue({el: "#app",data: {message: "hi",num:0,imgSrcs:["../img/00.jpg","../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg","../img/07.jpg","../img/08.jpg","../img/09.jpg","../img/10.jpg",]},methods: {prev:function() {// if(this.num>0){// 	//alert("--")// }this.num--;},next:function() {// if(this.num<10){// 	//alert("++")// }this.num++;}}})</script > </body></html>

相关文章：

vue初识

第一次接触vue&#xff0c;前端的html,css,jquery,js学习也有段时间了&#xff0c;就照着B站的视频简单看了一些&#xff0c;了解了一些简单的用法&#xff0c;这边做一个记录。 官网 工具&#xff1a;使用VSCode以及Live Server插件&#xff08;能够实时预览&#xff09; 第…...

编程日记 2023/2/18 5:02:57

火山引擎入选《2022 爱分析 · DataOps 厂商全景报告》，旗下 DataLeap 产品能力获认可

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 2 月 9 日&#xff0c;国内领先的数字化市场研究与咨询机构爱分析发布了《2022 爱分析DataOps 厂商全景报告》&#xff08;以下简称报告&#xff09;&#xff0c;报…...

编程日记 2023/2/18 5:01:50

java-spring_bean的生命周期

生命周期&#xff1a;从创建到消亡的完整过程初始化容器 1. 创建对象&#xff08;内存分配 &#xff09; 2. 执行构造方法 3. 执行属性注入&#xff08;set操作&#xff09; 4. 执行bean初始化方法 使用bean 执行业务操作 关闭/销毁容器 1.执行bean销毁方法 bean销毁时机 容…...

编程日记 2023/2/18 4:59:33

微服务相关概念

一、谈谈你对微服务的理解&#xff0c;微服务有哪些优缺点&#xff1f;微服务是由Martin Fowler大师提出的。微服务是一种架构风格&#xff0c;通过将大型的单体应用划分为比较小的服务单元&#xff0c;从而降低整个系统的复杂度。优点&#xff1a;1、服务部署更灵活&#xff1…...

编程日记 2023/2/18 4:58:28

论文解读：（TransA）TransA: An Adaptive Approach for Knowledge Graph Embedding

简介 先前的知识表示方法&#xff1a;TransE、TransH、TransR、TransD、TranSparse等。的损失函数仅单纯的考虑hrh rhr和ttt在某个语义空间的欧氏距离&#xff0c;认为只要欧式距离最小&#xff0c;就认为h和th和th和t的关系为r。显然这种度量指标过于简单&#xff0c;虽然先…...

编程日记 2023/2/18 4:57:22

js将数字转十进制+十六进制（联动el-ui下拉选择框）

十进制与十六进制的整数转化一、十进制转十六进制二、十六进制转十进制三、联动demo一、十进制转十六进制 正则表达式&#xff1a; /^([0-9]||([1-9][0-9]{0,}))$/解析&#xff1a;[0-9]代表个位数&#xff0c;([1-9][0-9]{0,})代表十位及以上 二、十六进制转十进制 正则表达…...

编程日记 2023/2/18 4:56:12

关于RedissonLock的一些所思

关于RedissonClient.getLock() 我们一般的使用Redisson的方式就是&#xff1a; RLock myLock redissonClient.getLock("my_order");//myLock.lock();//myLock.tryLock();就上面的例子里&#xff0c;如果某个线程已经拿到了my_order的锁&#xff0c;那别的线程调用m…...

编程日记 2023/2/18 4:55:02

C++:倒牛奶问题

文章目录题目一、输入二、输出三、思路代码题目 农业&#xff0c;尤其是生产牛奶&#xff0c;是一个竞争激烈的行业。Farmer John发现如果他不在牛奶生产工艺上有所创新&#xff0c;他的乳制品生意可能就会受到重创&#xff01; 幸运的是&#xff0c;Farmer John想出了一个好主…...

编程日记 2023/2/18 4:53:55

MySQL8.x group_by报错的4种解决方法

在我们使用MySQL的时候总是会遇到各种各样的报错&#xff0c;让人头痛不已。其中有一种报错&#xff0c;sql_modeonly_full_group_by&#xff0c;十分常见&#xff0c;每次都是老长的一串出现&#xff0c;然后带走你所有的好心情&#xff0c;如&#xff1a;LIMIT 0, 1000 Error…...

编程日记 2023/2/18 4:52:48

具有非线性动态行为的多车辆列队行驶问题的基于强化学习的方法

论文地址&#xff1a; Reinforcement Learning Based Approach for Multi-Vehicle Platooning Problem with Nonlinear Dynamic Behavior 摘要 协同智能交通系统领域的最新研究方向之一是车辆编队。研究人员专注于通过传统控制策略以及最先进的深度强化学习 (RL) 方法解决自动…...

编程日记 2023/2/18 4:51:37

TrueNas篇-硬盘直通

硬盘直通 在做硬盘直通之前&#xff0c;在trueNas(或者其他虚拟机)内是检测不到安装的硬盘的。 在pve节点查看硬盘信息 打开pve的shell控制台 输入下面的命令查看硬盘信息&#xff1a; ls -l /dev/disk/by-id/该命令会显示出实际所有的硬盘设备信息&#xff0c;其中ata代…...

编程日记 2023/2/18 4:50:30

手机子品牌的“性能战事”：一场殊途同归的大混战

在智能手机行业进入存量市场后&#xff0c;竞争更加白热化。当各国产手机品牌集体冲高端&#xff0c;旗下子品牌们也正厮杀正酣&#xff0c;显现出刀光剑影。处理器、屏幕、内存、价格等各方面无不互相对标&#xff0c;激烈程度并不亚于高端之争。源于OPPO的中端手机品牌realme…...

编程日记 2023/2/18 4:49:22

dockerfile自定义镜像安装jdk8,nginx,后端jar包和前端静态文件，并启动容器访问

dockerfile自定义镜像安装jdk8,nginx,后端jar包和前端静态文件&#xff0c;并启动容器访问简介centos7系统里面我准备的服务如下:5gsignplay-web静态文件内容如下:nginx.conf配置文件内容如下:Dockerfile内容如下:run.sh启动脚本内容如下:制作镜像并启动访问简介 通过用docker…...

编程日记 2023/2/18 4:48:15

MongoDB 全文检索

MongoDB 全文检索 全文检索对每一个词建立一个索引&#xff0c;指明该词在文章中出现的次数和位置&#xff0c;当用户查询时&#xff0c;检索程序就根据事先建立的索引进行查找&#xff0c;并将查找的结果反馈给用户的检索方式。 这个过程类似于通过字典中的检索字表查字的过…...

编程日记 2023/2/18 4:47:06

JS中声明变量，使用 var、let、const的区别

一、var 的使用 1.1、var 的作用域 1、var可以在全局范围声明或函数/局部范围内声明。当在最外层函数的外部声明var变量时&#xff0c;作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。 2、当在函数中声明var时&#xff0c;作用域是局…...

编程日记 2023/2/18 4:45:57

汽车改装避坑指南：大尾翼

今天给大家讲一个改装的误区&#xff1a;大尾翼 很多车友看到一些汽车加了大尾翼&#xff0c;非常的好看&#xff0c;就想给自己的车也加装一个。 那你有没有想过&#xff0c;尾翼这东西你真的需要吗&#xff1f; 赛车为什么加尾翼&#xff1f;尾翼主要是给车尾部的一个压低提供…...

编程日记 2023/2/18 4:44:48

【Unity资源下载】POLYGON Dungeon Realms - Low Poly 3D Art by Synty

$149.99 Synty Studios 一个史诗般的低多边形资产包&#xff0c;包括人物、道具、武器和环境资产&#xff0c;用于创建一个以奇幻为主题的多边形风格游戏。 模块化的部分很容易在各种组合中拼凑起来。 包包含超过1,118个详细预制件。 主要特点 ◼ ◼ 完全模块化的地下城!包…...

编程日记 2023/2/18 4:43:38

知识汇总：Python办公自动化应该学习哪些内容

当前python自动化越来越受到欢迎&#xff0c;python一度成为了加班族的福音。还有大部分人想利用python自动化来简化工作&#xff0c;不知道从何处下手&#xff0c;所以&#xff0c;这里整理了一下python自动化过程中的各种办公场景以及需要用到的python知识点。 Excel办公自动…...

编程日记 2023/2/18 4:42:32

软件架构知识5-架构设计流程

一、识别复杂度 举例&#xff1a;设计一个亿级用户平台设计&#xff0c;直接对标腾讯的 QQ&#xff0c;按照腾讯 QQ的用户量级和功能复杂度进行设计&#xff0c;高性能、高可用、可扩展、安全等技术一应俱全&#xff0c;一开始就设计出了 40 多个子系统&#xff0c;然后投入大…...

编程日记 2023/2/18 4:41:24

【银河麒麟V10操作系统】修改屏幕分辨率的方法

文章目录前言系统概述方法1&#xff1a;使用命令行修改方法2&#xff1a;写文件修改方法3&#xff1a;界面端修改的方法前言 本文记录了银河麒麟V10系统修改分辨率的方法。 使用命令行修改写文件修改界面端修改的方法 系统概述 方法1&#xff1a;使用命令行修改 打开终端&am…...

编程日记 2023/2/18 4:40:18

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/9/11 21:14:42

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/9/9 10:11:52

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/8/18 9:46:04

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/9/9 10:09:37

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/9/2 18:18:51

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/9/2 18:36:21