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

Vue的基本用法及模板语法

news 2025/7/10 16:35:16

Vue.js使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue实例的数据。所有 Vue.js的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue`能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1.创建一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1- 引入核心模块，提供了构造函数Vue	--><script src="lib/vue.js"></script>
</head>
<body></body>
<script>// 1- vm即是Vue实例。// 2- Vue构造函数接收一个配置对象。// 3- 配置对象中可以设置data属性（类型是一个对象）// 4- data对象的属性会作为vm的实例属性(记住)。// 5- 建议将方法放置到methods属性中（类型也是一个对象）// const vm = new Vue({// 	// 实例中的数据// 	data:{// 		a:1,// 		b:2,// 		c:{// 			userName:"zhangsan"// 		},// 		d:[1,2,3]// 	},// 	// 定义方法// 	methods:{// 		fn(){//// 		}// 	}// });// console.log(vm);// 关于data的特点：// 1- data中的属性会作为Vue实例中的属性// 2- data的属性值发生改变，那么Vue实例中对应的属性值也会发生改变// 3- Vue实例中的属性值发生改变，那么data中的属性值也会发生改变。const data = {a:1}const vm = new Vue({data});data.a = 100;vm.a = 200;console.log(vm.a,data.a);
</script>
</html>

2.Vue挂载

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body><div class="root" id="root"><h1>{{str}}</h1><h1>{{this.str}}</h1><h1>{{vm.str}}</h1></div>
</body>
<script>// 注意重点：在Vue模板中可以直接使用Vue实例中的属性或方法（不需要使用this,不需要使用this)// 注意重点：模块中可以使用this(不建议），说明模块所处的环境上下文中的this指向的是Vue实例。// 挂载（Vue实例挂载）：指定Vue实例应用的范围（元素）const vm = new Vue({// 将ID为root的元素作为Vue实例挂载的元素（挂载的元素自此可以称为Vue模板）// el:document.querySelector("#root"),// 将ID为root的元素作为Vue实例挂载的元素（挂载的元素自此可以称为Vue模板）// el:"#root",// 将class为root的元素作为Vue实例挂载的元素（ 不建议）// el:".root",// 将标签名字为div的元素作为Vue实例挂载的元素（ 不建议）// el:"div",// el:"body",// 不允许// el:"html",// 不允许data:{str:"我现在开始学习Vue,第一步要进行挂载",vm:{str:"vm"}}})
</script>
</html>

2.1相同Vue实例挂载到不同元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="one"><h1>{{str}}</h1>
</div>
<div id="two"><h1>{{str}}</h1>
</div>
</body>
<script>// 同一个页面，支持多个实例挂载至不同元素中。new Vue({el:"#one",data:{str:"one"}})new Vue({el:"#two",data:{str:"two"}})
</script>
</html>

3.插值表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body><div id="root"><!--将Vue实例下的属性num进行渲染--><p>{{num}}</p><!--将Vue实例下的属性str进行渲染--><p>{{str}}</p><!--将字符串进行渲染--><p>{{"str"}}</p><!--将数字进行渲染--><p>{{1}}</p><!--将Vue实例下的属性bol进行渲染--><p>{{bol}}</p><!--将布尔值进行渲染--><p>{{false}}</p><!--将Vue实例下的属性fn进行渲染--><p>{{fn}}</p><!--将Vue实例下的fn函数运行的结果进行渲染--><p>{{fn()}}</p><!--将Vue实例下的属性arr进行渲染--><p>{{arr}}</p><!--将Vue实例下的属性obj进行渲染--><p>{{obj}}</p><p>{{null}}</p><p>{{undefined}}</p><p>{{sex===1?"男":"女"}}</p><p>{{str.split("").reverse().join("")}}</p><template></template></div>
</body>
<script>// 总结1：插值表达式支持字符串，数字，布尔，对象，数组，方法// 总结2：undefined,null不会进行任何输出（与React相同）// 总结3：数组不支持直接展开（React支持）// 总结4：支持输出对象（React不支持）// 总结5：Vue中包裹标签为<template></template>new Vue({el:"#root",data:{num:1,str:"师法魔级超",bol:true,arr:[1,2,3,4],sex:1,obj:{userName:"zhangsan"}},methods:{fn(){return this.str.split("").reverse().join("");}}})
</script>
</html>

4.vue中的指令

4.1v-html与v-text

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body><div id="root"><h3>v-text</h3><p v-text="userName">{{str}}</p><p v-text='userName'>{{str}}</p><p v-text=userName>{{str}}</p><p v-text=`userName`>{{str}}</p><hr/><h3>v-html</h3><p v-html="userName">{{str}}</p><p v-html='userName'>{{str}}</p><p v-html=userName>{{str}}</p><p v-html=`userName`>{{str}}</p><template v-html="userName">123</template></div>
</body>
<script>// 响应式：视图是通过数据进行驱动的（当数据发生改变，视图会根据所使用的数据的变化而变化）// 响应式即是视图会响应最新的数据。// v-text与v-html的共同特点：// 1- 值是一个字符串// 2- 该字符串会作为Vue实例的属性名，将对应的属性值在指令所在的标签中进行输出。// 3- 会覆盖原有数据。// 4- 属性值可以使用双引号，单引号// 5- 属性值也可以省略双引号，单引号// 6- 如果使用的是反引号会将包裹的值在标签中直接输出// 7- 无法与template结合使用。// v-text与v-html的区别:// v-text不支持HTML标签而v-html支持。new Vue({el:"#root",data:{str:"我是一个字符串",userName:"zhangsan"}})</script>
</html>

4.2v-if v-else-if v-else(条件渲染)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><p>{{isShow}}</p><p>{{isShow && "你好&&"}}</p><p>{{isShow || "你好||"}}</p><!-- 三元表达式	--><p>{{sex===1?"男":"女"}}</p><p>{{fn()}}</p><!--多条件1--><p>{{getAgeStr()}}</p><!--多条件2-使用指令--><p v-if="age>80">老年</p><p v-else-if="age>40">中年</p><p v-else-if="age>28">壮年</p><p v-else-if="age>18">青年</p><p v-else-if="age>12">少年</p><p v-else-if="age>6">儿童</p><p v-else>婴儿</p><hr/><template v-if="isLogin">您好，欢迎您的到来！</template><template v-else><input type="text" placeholder="请输入管理员账号"><input type="text" placeholder="请输入管理员密码"></template>
</div>
</body>
<script>// 注意1：v-if以及v-else-if的值是一个布尔值，如果成立则渲染指令所在的元素，不成立则不渲染// 注意2：v-else-if需要与v-if结合使用// 注意3：v-else=需要与v-if或v-else结合使用// 注意4：v-if,v-else-if,v-else指令所在的元素之间不要出现其它元素。new Vue({el:"#root",data:{isShow:true,sex:1,age:100,isLogin:true},methods:{fn(){return this.sex===1?"男":"女"},getAgeStr(){if(this.age>80) return "老年";if(this.age>40) return "中年"if(this.age>28) return "壮年"if(this.age>18) return "青年"if(this.age>12) return "少年"if(this.age>6) return "儿童"return "婴儿"}}})
</script>
</html>

4.3v-show

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<!--	<p v-if="isShow">v-if</p>-->
<!--	<p v-show="isShow">v-show</p>-->
<!--	<p v-show='isShow'>1</p>-->
<!--	<p v-show=isShow>2</p>--><p v-show="'isShow'">3</p><p v-show="''">4</p><p v-show="1">5</p><p v-show="0">6</p><p v-show="true">7</p><p v-show="false">8</p><p v-show="null">9</p><p v-show="undefined">10</p>
</div>
</body>
<script>// v-if与v-show的值都是布尔值。// v-if为true表示渲染元素，false表示不渲染元素// v-show为true表示显示元素，false表示隐藏元素（通过display:none）// 注意1：空字符串，0，undefined,null作为判断条件相当于false// 注意2：非空字符串，1作为判断条件相当于truenew Vue({el:"#root",data:{// isShow:true}})
</script>
</html>

4.4v-bind(属性渲染)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><!--未使用v-bind,直接设置属性值，而不需要使用Vue的实例属性	--><img width="50" src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/169453/32/37700/50662/64ae6e63Fffd824d7/f6409309d91610b1.jpg.avif" alt=""><hr/><!-- 将Vue实例属性imgSrc的值作为src的属性值。	--><img v-bind:width="imgW" v-bind:src="imgSrc" alt=""/><hr/><!-- 使用v-bind,直接设置属性值，而不需要使用Vue的实例属性	--><img v-bind:width="300" v-bind:src="'https://img12.360buyimg.com/pop/s590x470_jfs/t1/169453/32/37700/50662/64ae6e63Fffd824d7/f6409309d91610b1.jpg.avif'" alt=""><hr/><a href="http://www.baidu.com">百度</a><hr/><!-- 将字符串作为href的属性值--><a v-bind:href='"http://www.baidu.com"'>{{siteName}}</a><hr/><!-- 将实例属性siteHref作为href的属性值	--><a v-bind:href="siteHref">{{"百度3"}}</a><hr/><!-- 将实例属性w的值作为img的属性的名字。	--><img v-bind:[w]="imgW" v-bind:[h]="imgH" v-bind:[s]="imgSrc" alt=""/><hr/><a :href="siteHref">{{"百度3"}}</a><img :width="imgW" :src="imgSrc" alt=""><img :[w]="imgW" :[s]="imgSrc" alt="">
</div>
</body>
<script>// v-bind:属性名 有一个简写形式：冒号new Vue({el:"#root",data:{imgSrc:"https://img12.360buyimg.com/pop/s590x470_jfs/t1/169453/32/37700/50662/64ae6e63Fffd824d7/f6409309d91610b1.jpg.avif",imgW:200,imgH:400,siteName:"百度2",siteHref:"http://www.baidu.com",w:"width",h:"height",s:"src"}})
</script>
</html>

4.5style特殊

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><!-- 字符串	--><p style="background:yellow;color:red;">1</p><p :style="'background:yellow;color:red;'">2</p><p :style='"background:yellow;color:red;"'>3</p><p :style ="one">4</p><!-- 对象	--><p :style="{background:'green',color:'pink'}">5</p><p :style="two">6</p><!-- 数组	--><p :style="[{background:'yellow'},{color:'red'}]">7</p><p :style="[bg,cl]">8</p>
</div>
</body>
<script>new Vue({el:"#root",data:{one:"background:yellow;color:red;",two:{background:'green',color:'pink'},bg:{background:"yellow"},cl:{color:"red"}}})
</script>
</html>

4.6class特殊

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.bg{background:yellow;}.cl{color:red;}</style><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><!-- 字符串	--><p class="bg">1</p><p class="cl">2</p><p class="bg cl">3</p><p :class="'bg cl'">4</p><p :class="one">5</p><!-- 对象：常用	--><!-- class绑定的值可以是对象，对象的属性名即是样式类的名字，值是布尔。如果为true类生效，否则无效	--><p :class="{bg:false,cl:true}">6</p><!-- 数组	--><p :class="['bg','cl']">7</p></div>
</body>
<script>new Vue({el:"#root",data:{one:'bg cl'}})</script>
</html>

4.7v-on 事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><h3>{{num}}</h3>
<!--	未简写：--><!-- 1-语句	-->
<!--	<button v-on:click="num++">加1</button>--><!-- 2-函数:当点击按钮会调用Vue实例中的函数changeNum	-->
<!--	<button v-on:click="changeNum">加2</button>--><!-- 3-调用函数:函数名后加括号不会被立即调用	-->
<!--	<button v-on:click="changeNum2(3,$event)">加3</button>--><!-- 1-语句	--><button @click="num++">加1</button><!-- 2-函数:当点击按钮会调用Vue实例中的函数changeNum	--><button @click="changeNum">加2</button><!-- 3-调用函数:函数名后加括号不会被立即调用	--><button @click="changeNum2(3,$event)">加3</button>
</div>
</body>
<script>// 语句：如果操作语句比较简单，建议直接写语句// 函数：如果操作比较复杂或要在多个不同的地方调用且不需要传递参数使用函数// 调用函数：如果操作比较复杂或要在多个不同的地方调用且需要传递参数使用调用函数//         如果要传递事件对象可以通过$event// v-on可以简写：@new Vue({el:"#root",data:{num:0},methods:{changeNum(e){this.num+=2;// console.log("changeNum",this)// console.log(e.target.innerText)},changeNum2(num,e){this.num+=num;// console.log("changeNum2",num)console.log(e.target.innerText)}}})
</script>
</html>

4.8v-model

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><!-- 单向绑定：视图不会更新数据，但数据发生改变视图会改变	-->
<!--	<input v-bind:value="str" type="text">-->
<!--	<input :value="str" type="text">--><!-- 双向绑定：视图发生改变数据会变，数据改变视图也会改变	-->
<!--	<input @input="changeStr" :value="str" type="text">-->
<!--	<input @input="str=$event.target.value" :value="str" type="text">-->
<!--	<input @input="changeStr2($event)" :value="str" type="text">--><!-- 可以通过v-model指令实现双向绑定	--><input v-model="str" type="text"><!-- 注意：v-model只可以与表单元素结合使用-->
<!--	<div v-model="str"></div>--><h3>{{str}}</h3>
</div>
</body>
<script>new Vue({el:"#root",data:{str:"大家好！我叫刘德华！"},methods:{changeStr(e){this.str = e.target.value;// console.log(e.target.value)},changeStr2(e){this.str = e.target.value;}}})
</script>
</html>

4.8.1修饰符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><!-- 修饰符trim:去除左右空格	-->
<!--	<input v-model.trim="str" type="text">-->
<!--	<h3>青龙{{str}}白虎</h3>--><!-- 修饰符number:类型保持为number	-->
<!--	<input type="text" v-model.number="a">+<input type="text" v-model.number="b"> <button @click="sum=a+b">=</button>-->
<!--	<input v-model="sum" type="text">--><!-- 修饰符lazy:当失去焦点之后数据才会进行改变。--><input v-model.lazy="str" type="text"><h3>{{str}}</h3><h3>{{str}}</h3><h3>{{str}}</h3><h3>{{str}}</h3><h3>{{str}}</h3><h3>{{str}}</h3>
</div>
</body>
<script>new Vue({el:"#root",data:{str:"蔡徐坤",a:1,b:2,sum:3}})
</script>
</html>

4.9v-for(重点)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root"><!-- 1- 数组-->
<!--	<div v-for="item in arr">{{item}}</div>-->
<!--	<div v-for="(value,index) in arr">{{index}}：{{value}}</div>--><!-- 2- 对象-->
<!--	<div v-for="item in obj">{{item}}</div>-->
<!--	<div v-for="(value,key) in obj">{{key}}:{{value}}</div>--><!-- 3- 数字-->
<!--	<div v-for="item in num">{{item}}</div>-->
<!--	<div v-for="(n,i) in num">{{i}}:{{n}}</div>--><!-- 4- 字符串-->
<!--	<div v-for="item in str">{{item}}</div>-->
<!--	<div v-for="(s,i) in str">{{i}}:{{s}}</div>-->
</div>
</body>
<script>new Vue({el:"#root",data:{arr:["zhangsan","wangwu","zhaoliu","yanqi","shenba","qianjiu"],obj:{userName:"zhangsan",age:12},num:10,// [1,2,3,4,5,6,7,8,9,10]str:"我爱你中国，我亲爱的母亲，我为你流泪也为你自豪！"}})
</script>
</html>

4.9.1key

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 使用ID-->
<!--	<div :key="item.id" v-for="item in arr">-->
<!--		<h3>《{{item.bookName}}》</h3>-->
<!--		<p>作者：{{item.author}}</p>-->
<!--		<hr/>-->
<!--	</div>--><!-- 使用下标 --><div :key="index" v-for="(item,index) in arr"><h3>《{{item.bookName}}》</h3><p>作者：{{item.author}}</p><hr/></div>
</div>
</body>
<script>new Vue({el:"#root",data:{arr:[{id:1,bookName:"天龙八部",author:"金庸"},{id:2,bookName: "一念永恒",author:"耳根"}]}})
</script>
</html>

5.适用案例

5.1js实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#root button{padding: 5px;margin: 5px;}#root button.active{background: red;}#root div {width: 500px;height: 300px;border: 1px solid green;}</style>
</head><body><div id="root"><button>体育</button><button>娱乐</button><button>财经</button><div>体育新闻列表</div><div>娱乐新闻列表</div><div>财经新闻列表</div> </div>
</body>
<script>const btns = document.querySelectorAll("#root button");const divs = document.querySelectorAll("#root div");let index = 0;btns.forEach(function(item,i){//不让div显示divs[i].style.display = "none";item.onclick = function(){//点击的和显示的div一致的话就不用管了if(i === index) return; //不一致的话要先将元素置空btns[index].className = null;divs[index].style.display = "none";//将当前点击的赋值给indexindex = i;//将点击的显示按钮要高亮btns[index].className = "active";divs[index].style.display = "block";}});//默认的，开头第一个按钮btns[index].className = "active";divs[index].style.display = "block";
</script>
</html>

5.2vue实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#root button {padding: 5px;margin: 5px;}#root button.active {background: red;}#root div {width: 500px;height: 300px;border: 1px solid green;}</style>
<script src="lib/vue.min.js"></script>
<body><div id="root">//点击的时候给index赋值 v-bind 拿到index 判断是否是对应的div<button @click="index=0" :class="{active:index === 0}">体育</button><button @click="index=1" :class="{active:index === 1}">娱乐</button><button @click="index=2" :class="{active:index === 2}">财经</button>//判断 index的值<div v-show="index === 0">体育新闻列表</div><div v-show="index === 1">娱乐新闻列表</div><div v-show="index === 2">财经新闻列表</div></div>
</body>
<script>new Vue({el:"#root",data:{index:0}})
</script>
</html>

5.3vue高级实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#root button {padding: 5px;margin: 5px;}#root button.active {background: red;}#root div {width: 600px;height: 300px;border: 1px solid green;}
</style>
<script src="lib/vue.js"></script>
<body><div id="root"><button @click="index=i" :class="{active:index===i}" :key="item.id" v-for="(item,i) in newList">{{item.typeName}}</button><div v-show="index ===i" v-for="(data,i) in newList"><p v-for="info in data.items"><a href="info.newsHref" target="_blank">{{info.newsTitle}}</a></p></div></div></body>
<script>new Vue({el:"#root",data:{index:0,newList:[{id:1,typeName:"体育",items:[{id:11,newsTitle:"CBA选秀大会：陈国豪当选状元 邹阳意外跌至第五",newsHref:"https://fans.sports.qq.com/post.htm?id=1771451668139868317&mid=63#1_allWithElite"},{id:12,newsTitle:"从大山里的孩子到CBA职业球员，云南滑翔机矣进宏的故事有多励志？",newsHref:"https://new.qq.com/rain/a/20230715V03AI700"}]},{id:2,typeName:"娱乐",items:[{id:21,newsTitle:"《奔跑吧》后期团队回应！坦言压力很大，曝最后一期能播且很精彩",newsHref:"https://new.qq.com/rain/a/20230715V04IB500"},{id:22,newsTitle:"朱珠一边拍戏一边带娃，抱着女儿候场好心酸，两岁珠宝颜值复刻妈妈",newsHref:"https://new.qq.com/rain/a/20230715V041EZ00"}]},{id:3,typeName:"财经",items:[{id:31,newsTitle:"经济学家姚余栋：房地产是“黄金坑”，能熬出来，还有实实在在的需求",newsHref:"https://new.qq.com/rain/a/20230713V09O3D00"},{id:32,newsTitle:"国常会：我国正处于经济恢复的关键期 要做好能源电力保供工作",newsHref:"https://new.qq.com/rain/a/20230714A08E8400"}]}]}})
</script>
</html>

Vue的基本用法及模板语法

Vue.js使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue实例的数据。所有 Vue.js的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue将模板编译成虚拟 DOM 渲染函数。结合响应系…...

编程日记 2024/10/10 16:12:16

Redis数据库与GO完结篇：redis操作总结与GO使用redis

一、redis操作总结由于写redis命令的时候有提示符，所以下表只给出命令名称数据类型操作简介字符串GET, SET, MGET, MSET, SETEX,DEL最基本的数据类型，存储任意二进制数据，支持简单操作和原子计数。适合存储重复数据。哈希HSET, HGET, HDE…...

编程日记 2024/10/10 16:11:13

《重生到现代之从零开始的C语言生活》—— 动态内存管理

动态内存分配我们在开辟内存的时候就是 int a 3;这样但是这样开的空间大小是固定的，且大小不能调整但是如果我们用动态内存开辟的话，就可以自己申请和释放空间、 malloc 是C语言提供的一个开辟动态空间的函数 void* malloc (size_t size);//si…...

编程日记 2024/10/10 16:10:01

四、Spring Boot集成Spring Security之登录登出业务逻辑

Spring Boot集成Spring Security之登录登出业务逻辑一、概要说明二、基于内存的用户名密码1、默认用户名密码2、自定义用户名密码3、为方便测试添加测试接口TestController 三、登录登出重要概念介绍四、登录业务逻辑1、登录业务相关过滤器2、访问业务请求处理流程①、访问业务…...

编程日记 2024/10/10 16:07:51

pipe和pipefd

Linux 中 pipe 的详细介绍在 Linux 中，pipe 是一个系统调用，用于创建一个管道，这是一种用于进程间通信（IPC）的机制。管道允许两个进程之间进行单向数据传输，通常是一个进程向管道写入数据，而另…...

编程日记 2024/10/10 16:06:45

无人机之飞控仿真技术篇

一、无人机飞控仿真技术的定义无人机飞控仿真技术主要是指飞行控制系统仿真，它是以无人机的运动情况为研究对象，面向对象的复杂系统仿真。通过该技术，可以模拟无人机的飞行过程，评估飞行控制系统的性能，优化飞行参数&…...

编程日记 2024/10/10 16:05:44

Tetra Pak利乐触摸屏维修beijer北尔触摸屏维修E1151

TetraPak利乐包装机触摸显示屏维修，北尔全系列型号触摸屏修理维修注意事项： 上电前，应检查负载是否接上或是否正确； 测量电压时，确认档位是否在电压档。要确认仪器仪表的量程应大于测试点的电压； 更换电…...

编程日记 2024/10/10 16:04:42

Python_网络编程（IP 端口协议）

网络编程： 互联网时代，现在基本上所有的程序都是网络程序，很少有单机版的程序了。网络编程就是如何在程序中实现两台计算机的通信。Python语言中，提供了大量的内置模块和第三方模块用于支持各种网络访问，而且Python语言…...

编程日记 2024/10/10 16:03:37

Adobe Acrobat提示“3D数据解析错误”

原因：在使用Adobe Acrobat打开3D PDF时，因当前Adobe Acrobat的配置存在错误，所以无法打开解决方法：重新生成配置首先到达下面的路径C:\Users\你的用户名\AppData\Local\Adobe\Acrobat 下面为我的路径内容若该路径下存在文件…...

编程日记 2024/10/10 16:02:36

红帽7—Mysql路由部署

MySQL Router 是一个对应用程序透明的InnoDB Cluster连接路由服务，提供负载均衡、应用连接故障转移和客户端路由。利用路由器的连接路由特性，用户可以编写应用程序来连接到路由器，并令路由器使用相应的路由策略来处理连接，使其…...

编程日记 2024/10/10 16:00:33

LLM4Rec最新工作: 字节发布用于序列推荐的分层大模型HLLM

前几个月 Meta HSTU 点燃各大厂商对 LLM4Rec 的热情，一时间，探索推荐领域的 Scaling Law、实现推荐的 ChatGPT 时刻、取代传统推荐模型等一系列话题让人兴奋，然而理想有多丰满，现实就有多骨感，尚未有业界公开真正复刻 …...

编程日记 2024/10/10 15:59:32

怎么高效对接SaaS平台数据？

SaaS平台数据对接是指将一个或多个SaaS平台中的数据集成到其他应用或平台中的过程。在当前的数字化时代，企业越来越倾向于使用SaaS平台来管理他们的业务和数据。然而，这些数据通常散布在不同的SaaS平台中，这对于企业数据的整合和分析来说可能…...

编程日记 2024/10/10 15:56:27

Spark算子使用-Map,FlatMap,Filter,diatinct,groupBy,sortBy

目录 Map算子使用 FlatMap算子使用 Filter算子使用-数据过滤 Distinct算子使用-数据去重 groupBy算子使用-数据分组 sortBy算子使用-数据排序 Map算子使用 # map算子主要使用长场景，一个转化rdd中每个元素的数据类型，拼接rdd中的元素数据&#xf…...

编程日记 2024/10/10 15:55:26

CSS响应式布局

CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。…...

编程日记 2024/10/10 15:49:12

AI大模型书籍丨掌握 LLM 和 RAG 技术，这本大模型小鸟书值得一看！

本指南旨在帮助数据科学家、机器学习工程师和机器学习/AI 架构师探索信息检索与 LLMs 的集成及其相互增强。特别聚焦于 LLM 和检索增强生成（RAG）技术在信息检索中的应用，通过引入外部数据库与 LLMs 的结合，提高检索系统的性能。 …...

编程日记 2024/10/10 15:47:02

Mysql和Oracle使用差异和主观感受

这两种常用的关系型数据库有何差异？ 支持和社区 MySQL：有一个活跃的开源社区，用户可以获取大量的文档和支持。 Oracle：提供了专业的技术支持，但通常需要额外的费用。易用性 MySQL：通常被认为是更易于学…...

编程日记 2024/10/10 15:46:01

【Java】—— File类与IO流：File类的实例化与常用方法

目录 1. java.io.File类的使用 1.1 概述 1.2 构造器 1.3 常用方法 1、获取文件和目录基本信息 2、列出目录的下一级 3、File类的重命名功能 4、判断功能的方法 5、创建、删除功能 1.4 练习练习1： 练习2： 练习3： 1. java.io.Fil…...

编程日记 2024/10/10 15:45:00

C++设计模式——装饰器模式

欢迎来到破晓的历程的博客 ⛺️不负时光，不负己✈️ 什么是装饰器模式？ 装饰器模式（Decorator Pattern）是一种结构型设计模式，允许你向一个现有的对象添加新的功能，同时又不改变其结构。这种模式通过创…...

编程日记 2024/10/10 15:43:59

C#使用ITextSharp生成PDF文件实例详解

许多项目开发中需要生成PDF，常规办法使用官方提供的Microsoft.Office.Interop.Worddll插件，但是这种方法需要完全安装OFFICE，另外版本不一致还会出现很多错误。一般不推荐使用。下面介绍这种巧妙的用法，定能事半功倍。本文使用ITextSharp完成功能。首先，通过NuGet…...

编程日记 2024/10/10 15:42:58

10.9QT对话框以及QT的事件机制处理

MouseMoveEvent(鼠标移动事件) widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 设置窗口为无边框，去掉标题栏等装饰this->setWi…...

编程日记 2024/10/10 15:41:56

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2025/7/8 2:12:39

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/6/17 9:20:49

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/8 4:49:22

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...

编程新知 2025/7/10 10:37:13

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色点击visual studio 上方的工具-> 选项在选项窗口中，选择环境 -> 常规 ，将其中的颜色主题改成深色点击确定，更改完成...

编程新知 2025/7/8 15:26:57

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2025/7/10 5:36:35

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...

编程新知 2025/7/8 17:34:33