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

vue初识

news 2025/11/5 8:46:00
  • 第一次接触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

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/11/2 1:18:26

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/11/4 1:39:10

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/10/27 21:06:53

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/10/31 14:56:20

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2025/10/29 5:50:11

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2025/10/17 23:51:34