Vue的基本用法及模板语法
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 渲染函数。结合响应系…...
Redis数据库与GO完结篇：redis操作总结与GO使用redis
一、redis操作总结 由于写redis命令的时候有提示符，所以下表只给出命令名称 数据类型操作简介字符串GET, SET, MGET, MSET, SETEX,DEL最基本的数据类型，存储任意二进制数据，支持简单操作和原子计数。适合存储重复数据。哈希HSET, HGET, HDE…...
《重生到现代之从零开始的C语言生活》—— 动态内存管理
动态内存分配 我们在开辟内存的时候就是 int a 3;这样 但是这样开的空间大小是固定的，且大小不能调整 但是如果我们用动态内存开辟的话，就可以自己申请和释放空间、 malloc 是C语言提供的一个开辟动态空间的函数 void* malloc (size_t size);//si…...
四、Spring Boot集成Spring Security之登录登出业务逻辑
Spring Boot集成Spring Security之登录登出业务逻辑 一、概要说明二、基于内存的用户名密码1、默认用户名密码2、自定义用户名密码3、为方便测试添加测试接口TestController 三、登录登出重要概念介绍四、登录业务逻辑1、登录业务相关过滤器2、访问业务请求处理流程①、访问业务…...
pipe和pipefd
Linux 中 pipe 的详细介绍 在 Linux 中，pipe 是一个系统调用，用于创建一个管道，这是一种用于进程间通信（IPC）的机制。管道允许两个进程之间进行单向数据传输，通常是一个进程向管道写入数据，而另…...
无人机之飞控仿真技术篇
一、无人机飞控仿真技术的定义 无人机飞控仿真技术主要是指飞行控制系统仿真，它是以无人机的运动情况为研究对象，面向对象的复杂系统仿真。通过该技术，可以模拟无人机的飞行过程，评估飞行控制系统的性能，优化飞行参数&…...
Tetra Pak利乐触摸屏维修beijer北尔触摸屏维修E1151
TetraPak利乐包装机触摸显示屏维修，北尔全系列型号触摸屏修理 维修注意事项： 上电前，应检查负载是否接上或是否正确； 测量电压时，确认档位是否在电压档。要确认仪器仪表的量程应大于测试点的电压； 更换电…...
Python_网络编程（IP 端口 协议）
网络编程： 互联网时代，现在基本上所有的程序都是网络程序，很少有单机版的程序了。网络编程就是如何在程序中实现两台计算机的通信。Python语言中，提供了大量的内置模块和第三方模块用于支持各种网络访问，而且Python语言…...
Adobe Acrobat提示“3D数据解析错误”
原因：在使用Adobe Acrobat打开3D PDF时，因当前Adobe Acrobat的配置存在错误，所以无法打开 解决方法：重新生成配置 首先到达下面的路径C:\Users\你的用户名\AppData\Local\Adobe\Acrobat 下面为我的路径内容 若该路径下存在文件…...
红帽7—Mysql路由部署
MySQL Router 是一个对应用程序透明的InnoDB Cluster连接路由服务，提供负载均衡、应用连接故障转移和客户端路 由。 利用路由器的连接路由特性，用户可以编写应用程序来连接到路由器，并令路由器使用相应的路由策略 来处理连接，使其…...
LLM4Rec最新工作: 字节发布用于序列推荐的分层大模型HLLM
前几个月 Meta HSTU 点燃各大厂商对 LLM4Rec 的热情，一时间，探索推荐领域的 Scaling Law、实现推荐的 ChatGPT 时刻、取代传统推荐模型等一系列话题让人兴奋，然而理想有多丰满，现实就有多骨感，尚未有业界公开真正复刻 …...
怎么高效对接SaaS平台数据？
SaaS平台数据对接是指将一个或多个SaaS平台中的数据集成到其他应用或平台中的过程。在当前的数字化时代，企业越来越倾向于使用SaaS平台来管理他们的业务和数据。然而，这些数据通常散布在不同的SaaS平台中，这对于企业数据的整合和分析来说可能…...
Spark算子使用-Map,FlatMap,Filter,diatinct,groupBy,sortBy
目录 Map算子使用 FlatMap算子使用 Filter算子使用-数据过滤 Distinct算子使用-数据去重 groupBy算子使用-数据分组 sortBy算子使用-数据排序 Map算子使用 # map算子主要使用长场景，一个转化rdd中每个元素的数据类型，拼接rdd中的元素数据…...
CSS响应式布局
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。…...
AI大模型书籍丨掌握 LLM 和 RAG 技术，这本大模型小鸟书值得一看！
本指南旨在帮助数据科学家、机器学习工程师和机器学习/AI 架构师探索信息检索与 LLMs 的集成及其相互增强。特别聚焦于 LLM 和检索增强生成（RAG）技术在信息检索中的应用，通过引入外部数据库与 LLMs 的结合，提高检索系统的性能。 …...
Mysql和Oracle使用差异和主观感受
这两种常用的关系型数据库有何差异？ 支持和社区 MySQL：有一个活跃的开源社区，用户可以获取大量的文档和支持。 Oracle：提供了专业的技术支持，但通常需要额外的费用。 易用性 MySQL：通常被认为是更易于学…...
【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…...
C++设计模式——装饰器模式
欢迎来到 破晓的历程的 博客 ⛺️不负时光，不负己✈️ 什么是装饰器模式？ 装饰器模式（Decorator Pattern）是一种结构型设计模式，允许你向一个现有的对象添加新的功能，同时又不改变其结构。这种模式通过创…...
C#使用ITextSharp生成PDF文件实例详解
许多项目开发中需要生成PDF， 常规办法使用官方提供的Microsoft.Office.Interop.Worddll插件，但是这种方法需要完全安装OFFICE，另外版本不一致还会出现很多错误。一般不推荐使用。 下面介绍这种巧妙的用法，定能事半功倍。 本文使用ITextSharp完成功能。 首先，通过NuGet…...
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…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）
Name：3ddown Serial：FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名：Axure 序列号：8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...
:LeetCode 142. 环形链表 II（Linked List Cycle II）详解)
Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解
文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一：HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二：Floyd 快慢指针法（…...
生信服务器 | 做生信为什么推荐使用Linux服务器？
原文链接：生信服务器 | 做生信为什么推荐使用Linux服务器？ 一、 做生信为什么推荐使用服务器？ 大家好，我是小杜。在做生信分析的同学，或是将接触学习生信分析的同学，<font style"color:rgb(53, 1…...
c++算法学习3——深度优先搜索
一、深度优先搜索的核心概念 DFS算法是一种通过递归或栈实现的"一条路走到底"的搜索策略，其核心思想是： 深度优先：从起点出发，选择一个方向探索到底，直到无路可走 回溯机制：遇到死路时返回最近…...