【Vue】Vue2（4）

文章目录

  • 1 绑定样式
  • 2 条件渲染
  • 3 列表渲染
    • 3.1 基本列表
    • 3.2 key的原理
    • 3.3 列表过滤
    • 3.4 列表排序
    • 3.5 更新时的一个问题
    • 3.6 Vue监测数据改变的原理_对象
    • 3.7 模拟一个数据监测
    • 3.8 Vue.set的使用
    • 3.9 Vue监测数据改变的原理_数组
    • 3.10 总结Vue数据监视

1 绑定样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 绑定样式：1. class样式写法:class="xxx" xxx可以是字符串、数组、对象。字符串写法适用于：类名不确定，要动态获取。数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。--><!-- 准备好一个容器--><div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div> <br/><br/><!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div> <br/><br/><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'尚硅谷',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:false,atguigu2:false,},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy', 'sad', 'normal']const index = Math.floor(Math.random() * 3) // [0, 3)this.mood = arr[index]}},})</script>
</html>

2 条件渲染

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>条件渲染</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 条件渲染：1.v-if(结构直接移除)写法：(1).v-if="表达式" (2).v-else-if="表达式"(3).v-else="表达式"适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.v-show(display)写法：v-show="表达式"适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。--><!-- 准备好一个容器--><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><!-- 使用v-show做条件渲染 --><h2 v-show="false">欢迎来到{{name}}</h2><h2 v-show="1 === 1">欢迎来到{{name}}</h2><!-- 使用v-if做条件渲染 --><h2 v-if="false">欢迎来到{{name}}</h2><h2 v-if="1 === 1">欢迎来到{{name}}</h2><div v-show="n === 1">Angular</div><div v-show="n === 2">React</div><div v-show="n === 3">Vue</div><!-- v-else和v-else-if 结构要紧紧连在一起 --><div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>哈哈</div><!-- v-if与template的配合使用 template只能与v-if配合 --><template v-if="n === 1"><!-- 在源代码中不存在template --><h2>你好</h2><h2>尚硅谷</h2><h2>北京</h2></template></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'尚硅谷',n:0}})</script>
</html>

3 列表渲染

3.1 基本列表

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- v-for指令:1.用于展示列表数据2.语法：v-for="(item, index) in xxx" :key="yyy"3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）--><!-- 准备好一个容器--><div id="root"><!-- 遍历数组 --><h2>人员列表（遍历数组）</h2><ul><li v-for="(p,index) of persons" :key="index"><!-- v-for="p in persons" :key="p.id"(每个节点的标识) -->{{p.name}}-{{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息（遍历对象）</h2><ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul><!-- 遍历字符串 --><h2>测试遍历字符串（用得少）</h2><ul><li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li></ul><!-- 遍历指定次数 --><h2>测试遍历指定次数（用得少）</h2><ul><li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}<!-- index从0开始， number从1开始 --></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{// 有顺序--用数组persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],car:{name:'奥迪A8',price:'70万',color:'黑色'},str:'hello'}})</script>
</html>

3.2 key的原理

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>key的原理</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2.对比规则：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。3. 用index作为key可能会引发的问题：1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。2. 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。4. 开发中如何选择key?:1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。--><!-- 准备好一个容器--><div id="root"><!-- 遍历数组 --><h2>人员列表（遍历数组）</h2><button @click.once="add">添加一个老刘</button><ul><li v-for="(p,index) of persons" :key="index"><!-- 如果key省略，自动设置为index，应该p.id作为唯一标识(key) -->{{p.name}}-{{p.age}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}]},methods: {add(){const p = {id:'004',name:'老刘',age:40}this.persons.unshift(p)}},})</script>
</html>

3.3 列表过滤

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p,index) of filPerons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false//用watch实现//#region，可在该处折叠代码/* new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){// 返回新数组this.filPerons = this.persons.filter((p)=>{return p.name.indexOf(val) !== -1 // -1表示不存在，""空串返回0})}}}}) *///#endregion//用computed实现new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}]},computed:{filPerons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1})}}}) </script>
</html>

3.4 列表排序

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>列表排序</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">年龄升序</button><button @click="sortType = 1">年龄降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p,index) of filPerons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{keyWord:'',sortType:0, //0原顺序 1降序 2升序persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},computed:{filPerons(){const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2)=>{return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age})}return arr}}}) </script>
</html>

3.5 更新时的一个问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>更新时的一个问题</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><button @click="updateMei">更新马冬梅的信息</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},methods: {updateMei(){// this.persons[0].name = '马老师' //奏效// this.persons[0].age = 50 //奏效// this.persons[0].sex = '男' //奏效// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})}}}) </script>
</html>

3.6 Vue监测数据改变的原理_对象

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{/*data：1. 加工data（匹配getter、setter，能实现对对象中属性的监视）2. vm._data = data属性改变，调对应的setter => 重新解析模板 => 生成新的虚拟DOM => 新旧虚拟DOM对比 => 更新页面。*/name:'尚硅谷',address:'北京',student:{name:'tom',age:{ // 依旧有getter和setter，会无限的找下去，直到不是对象了，数组也可以rAge:40,sAge:29,},friends:[ // name和age也有getter和setter，只要改数据一样重新解析模板...{name:'jerry',age:35}]}}})</script>
</html>

3.7 模拟一个数据监测

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>模拟一个数据监测</title></head><body><script type="text/javascript" >let data = {name:'尚硅谷',address:'北京',}//创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data)		console.log(obs)	//准备一个vm实例对象let vm = {}vm._data = data = obsfunction Observer(obj){//汇总对象中所有的属性形成一个数组const keys = Object.keys(obj)//遍历keys.forEach((k)=>{Object.defineProperty(this,k,{get(){return obj[k]},set(val){console.log(`${k}被改了, 我要去解析模板, 生成虚拟DOM.....我要开始忙了`)obj[k] = val}})})}</script></body>
</html>

3.8 Vue.set的使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue.set的使用</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器 --><div id="root"><h1>学校信息</h1><h2>学校名称：{{school.name}}</h2><h2>学校地址：{{school.address}}</h2><h2>校长是：{{school.leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性，默认值是男</button><h2>姓名：{{student.name}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2><h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{school:{name:'尚硅谷',address:'北京',},student:{name:'tom',// sex:男, {{student.sex}}: student.sex是undefined, {{undefined}}不会在页面上显示//         {{sex}}: sex不存在，报错age:{rAge:40,sAge:29,},friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {/*Vue.set / vm.$set(target, key, val): 实现后添加的数据也能实现响应式局限性：只能给data里面某一个对象追加属性，而不能给data追加属性vm和vm上的根数据data不能作为target*/addSex(){// Vue.set(vm._data.student,'sex','男')// vm.$set(vm._data.student,'sex','男')// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')}}})</script>
</html>

3.9 Vue监测数据改变的原理_数组

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理_数组</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>学校信息</h1><h2>学校名称：{{school.name}}</h2><h2>学校地址：{{school.address}}</h2><h2>校长是：{{school.leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性，默认值是男</button><h2>姓名：{{student.name}}</h2><h2 v-if="student.sex">性别：{{student.sex}}</h2><h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2><h2>爱好</h2><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">/*只有调用能够修改数组的7个方法(影响原数组)，vue才承认修改数组了push pop shift unshift splice sort reverse为什么知道调用的push呢？包装vue对数组的检测是靠包装数组身上的常用修改数组的方法实现的arr.push === Array.prototype.push: truevm._data.student.hobby.push === Array.prototype.push: falsevm._data.student.hobby.push是vue写的pushvue写的push: 1. 调用正常数组的push方法(原型上的) 2. 重新解析模板、生成虚拟DOM...vm._data.student.hobby.push('学习')vm.student.hobby.push('学习')不用那7个方法，也可以更改vm.$set(vm._data.student.hobby, 1, '打台球')vm.$set(vm.student.hobby, 1, '打台球') // 数据代理Vue.set(vm._data.student.hobby, 1, '打台球')*/Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{school:{name:'尚硅谷',address:'北京',},student:{name:'tom',age:{rAge:40,sAge:29,},hobby:['抽烟','喝酒','烫头'], // 没有为索引准备的getter和setter，不能拦截到修改friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')}}})</script>
</html>

3.10 总结Vue数据监视

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>总结Vue数据监视</title><style>button{margin-top: 10px;}</style><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!--Vue监视数据的原理：1. vue会监视data中所有层次的数据。2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)3. 如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：(1).调用原生对应的方法对数组进行更新。(2).重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法：1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()2.Vue.set() 或 vm.$set()特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象(vm._data) 添加属性！！！数据劫持：将传入data的每一个属性遍历一遍，都变为getter、setter的形式，把这种变化 / 操作叫做数据劫持。若修改了student，setter劫持住了，正常改数据然后重新解析模板。数据劫持和数据代理都是使用Object.definepProperty这个API做的--><!-- 准备好一个容器--><div id="root"><h1>学生信息</h1><button @click="student.age++">年龄+1岁</button> <br/><button @click="addSex">添加性别属性，默认值：男</button> <br/><button @click="student.sex = '未知' ">修改性别</button> <br/><button @click="addFriend">在列表首位添加一个朋友</button> <br/><button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/><button @click="addHobby">添加一个爱好</button> <br/><button @click="updateHobby">修改第一个爱好为：开车</button> <br/><button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/><h3>姓名：{{student.name}}</h3><h3>年龄：{{student.age}}</h3><h3 v-if="student.sex">性别：{{student.sex}}</h3><h3>爱好：</h3><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h3>朋友们：</h3><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{student:{name:'tom',age:18,hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')},addFriend(){this.student.friends.unshift({name:'jack',age:70})},updateFirstFriendName(){this.student.friends[0].name = '张三'},addHobby(){this.student.hobby.push('学习')},updateHobby(){// this.student.hobby.splice(0,1,'开车')// Vue.set(this.student.hobby,0,'开车')this.$set(this.student.hobby,0,'开车')},removeSmoke(){// filter不引起原数组的改变，新数组替换旧数组this.student.hobby = this.student.hobby.filter((h)=>{return h !== '抽烟'})}}})</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1558492.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

5.将扩散模型应用于具有特殊结构的数据

5.将扩散模型应用于具有特殊结构的数据

虽然扩散模型在图像和音频等数据应用领域中取得了巨大的成功&#xff0c;但他们不一定能无缝地转移到其他模态上。在许多重要的领域&#xff0c;数据有特殊的结构。为了让扩散模型有效运作&#xff0c;必须考虑并处理这些特殊结构。比如&#xff0c;经典扩散模型所依赖的分数的…
阅读更多...
「JVS更新日志」低代码、智能BI、逻辑引擎10.9功能更新说明

「JVS更新日志」低代码、智能BI、逻辑引擎10.9功能更新说明

项目介绍 JVS是企业级数字化服务构建的基础脚手架&#xff0c;主要解决企业信息化项目交付难、实施效率低、开发成本高的问题&#xff0c;采用微服务配置化的方式&#xff0c;提供了 低代码数据分析物联网的核心能力产品&#xff0c;并构建了协同办公、企业常用的管理工具等&am…
阅读更多...
SDUT数据结构与算法第二次机测

SDUT数据结构与算法第二次机测

目录 7-1 括号匹配 7-2 后缀式求值 7-3 表达式转换 7-4 【模板】KMP字符串匹配 比较详细注释和图解请看KMP——字符串匹配-CSDN博客&#xff0c;&#xff08;点击链接可跳转&#xff09;一看就会 7-5 约瑟夫环&#xff08;押题&#xff0c;重要&#xff09; 7-6 单调栈&a…
阅读更多...
迪士尼数据泄露事件：全面审视数据安全策略与未来防护方向

迪士尼数据泄露事件：全面审视数据安全策略与未来防护方向

迪士尼数据泄露事件概述 一、 事件背景以及影响 在全球数字化转型加速的浪潮中&#xff0c;数据安全已成为企业运营不可忽视的基石。 华特迪士尼公司&#xff0c;作为全球知名的娱乐传媒巨头&#xff0c;其数据泄露事件无疑为业界敲响了警钟。此次事件不仅揭示了数据保护的严…
阅读更多...
Pymysql cur.fetchall() 返回 None

Pymysql cur.fetchall() 返回 None

大家在pymysql 的 cur.fetchall() 函数通常用于获取执行 SQL 查询后的所有结果。该函数返回一个包含查询结果的元组列表。如果 cur.fetchall() 返回 None&#xff0c;可能是由于以下多种问题导致的。 1、问题背景 在使用 Pymysql 库连接到 MySQL 数据库时&#xff0c;遇到这样…
阅读更多...
YOLOv5改进——普通卷积和C3模块更换为GhostConvV2卷积和C3GhostV2模块

YOLOv5改进——普通卷积和C3模块更换为GhostConvV2卷积和C3GhostV2模块

目录 一、GhostNetV2核心代码 二、修改common.py 三、修改yolo.py 三、建立yaml文件 四、训练 一、GhostNetV2核心代码 在models文件夹下新建modules文件夹&#xff0c;在modules文件夹下新建一个py文件。这里为GhostV2.py。复制以下代码到文件里面。 # TODO: ghostnetv…
阅读更多...
好用的免费录屏软件推荐，让软件操作教程制作不再困难

好用的免费录屏软件推荐，让软件操作教程制作不再困难

录屏软件就像是我们做教程或者玩游戏时的“小助手”&#xff0c;它能帮我们把屏幕上的东西都记录下来&#xff0c;让视频看起来更高大上。今天我就给你推荐三款免费的好货&#xff0c;用它们做教程&#xff0c;保证让你轻松又开心。 1. 福昕录屏大师 虫洞 https://www.foxits…
阅读更多...
【读书笔记·VLSI电路设计方法解密】问题4：今天的设计环境中使用的主要工艺技术是什么

【读书笔记·VLSI电路设计方法解密】问题4：今天的设计环境中使用的主要工艺技术是什么

主流的工艺技术是互补金属氧化物半导体&#xff08;CMOS&#xff09;技术。其他技术还包括双极性、双极CMOS&#xff08;biCMOS&#xff09;、绝缘体上硅&#xff08;SOI&#xff09;和砷化镓&#xff08;GaAs&#xff09;。 在CMOS技术中&#xff0c;"互补对称"指的…
阅读更多...
SD入门教程一：Stable Diffusion 基础（技术篇）

SD入门教程一：Stable Diffusion 基础（技术篇）

前言 在开篇的时候就大致讲了SD和VAE&#xff0c;那么今天我们具象化地再来讲讲Stable Diffusion&#xff08;稳定扩散&#xff09;。 严格说来它是一个由几个组件&#xff08;模型&#xff09;构成的系统&#xff0c;而非单独的一个模型。我以最常见的文生图为例&#xff0c;…
阅读更多...
大型保险公司进行营销活动时，如何与外部客户实现文件安全外发？

大型保险公司进行营销活动时，如何与外部客户实现文件安全外发？

大型保险公司为了吸引新客户、维护老客户、提升品牌形象以及推广特定的保险产品&#xff0c;会定期向外部客户或潜在客户发送营销文件。在客户签单后&#xff0c;保险公司会将客户相关的签单个人文件发送给客户。因此&#xff0c;大型保险公司内部存在较为频繁且重要的文件安全…
阅读更多...
安装DNS

安装DNS

在 CentOS 7 上安装并配置 BIND 以实现 DNS 的正向和反向解析可以按照以下步骤进行&#xff1a; 安装 BIND 打开终端并运行以下命令来安装 BIND 及其工具&#xff1a; yum install bind bind-utils -y配置 BIND 编辑主配置文件&#xff1a; 使用文本编辑器打开 BIND 的主配…
阅读更多...
电商价格监测的创新之路

电商价格监测的创新之路

在当今数字化高速发展的时代&#xff0c;电商如汹涌的浪潮席卷了商业的每一个角落。品牌们在这片广阔的电商海洋中奋力前行&#xff0c;而价格监测则成为了他们手中至关重要的罗盘。 力维网络以其专业的价格监测服务&#xff0c;为品牌在电商之海的航行点亮了一盏明灯。然而&a…
阅读更多...
多节点网络流量监控与网络性能优化的利器——轻松实现高效管理

多节点网络流量监控与网络性能优化的利器——轻松实现高效管理

目录 为什么网络性能监控如此重要&#xff1f; 多节点网络流量监控如何优化网络性能&#xff1f; 实例&#xff1a;AnaTraf如何帮助企业解决网络故障 了解更多 随着企业网络规模的不断扩大&#xff0c;维护网络性能的复杂性日益增加。如何实时监控网络流量、快速排查网络故…
阅读更多...
网安加·百家讲坛 | 潘继平：AI赋能DevOps平台：全面提升代码安全性

网安加·百家讲坛 | 潘继平：AI赋能DevOps平台：全面提升代码安全性

作者简介&#xff1a;潘继平&#xff0c;中国软协项目管理专委会专家&#xff0c;深圳市软件行业协会特聘专家。华为土耳其研究所外聘高级项目顾问&#xff0c;负责华为云应用生态圈产品线研发管理。曾为华为全球技术服务中心、华为制造IT以及华为流程IT解决方案提供等多个部门…
阅读更多...
（二）、CT系统硬件构成

（二）、CT系统硬件构成

简单来说分为以下几个步骤来描述整个CT系统的运行流程&#xff1a; X射线管和探测器环绕被测物体&#xff0c;准直器进行高度准直X射线。X射线穿过被测物料时发生衰减&#xff0c;其中有两个探测器&#xff0c;一个是参考探测器记录和测量来自X射线管的辐射强度&#xff0c;另…
阅读更多...
【C语言从不挂科到高绩点】28-数组综合运用

【C语言从不挂科到高绩点】28-数组综合运用

Hello&#xff01;彦祖们&#xff0c;俺又回来了&#xff01;&#xff01;&#xff01;&#xff0c;继续给大家分享 《C语言从不挂科到高绩点》课程!! 数组是我们在C语言学习过程中比较重要的一个知识点&#xff0c;也是在今后的学习与开发过程中经常会用到的技能&#xff0c;…
阅读更多...
明达IO：赋能工业机器人新未来

明达IO：赋能工业机器人新未来

摘要&#xff1a; 明达技术以其卓越的分布式IO&#xff08;MR30&#xff09;与一体式IO&#xff08;MR20&#xff09;产品&#xff0c;为工业机器人行业提供了完美的信号交互解决方案。在集群式机器人应用场景中&#xff0c;MR30分布式IO以其稳定性能和自由热插拔功能&#xf…
阅读更多...
“跨时空拥抱”风靡TikTok，这款AI视频工具借势变现20万美金，你也来看看吧！

“跨时空拥抱”风靡TikTok，这款AI视频工具借势变现20万美金，你也来看看吧！

用AI生成跨时空拥抱最近悄悄在海外翻红&#xff0c;还带火了一款AI视频产品。 8月28日&#xff0c;TikTok博主“iammskira”发布了一条配文为“用AI实现了拥抱我的妈妈&#xff0c;因为她已经不在人世了”的短视频教程&#xff0c;在TikTok上走红。 视频中&#xff0c;AI不仅…
阅读更多...
Java毕业设计：Java社区物品置换网站系统毕业设计源代码作品和开题报告

Java毕业设计：Java社区物品置换网站系统毕业设计源代码作品和开题报告

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…
阅读更多...
xss-labs靶场第五关测试报告

xss-labs靶场第五关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、注入点寻找 2、使用hackbar进行payload测试 3、绕过结果 四、源代码分析 五、结论 一、测试环境 1、系统环境 渗透机&#xff1a;本机(127.0.0.1) 靶 机&#xff1a;本机(127.0.0.…
阅读更多...
最新文章

Copyright @ 2022~2023