Vue-数据监听

article/2025/7/22 3:02:00

数据监听

基础信息

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><h3>年龄：{{boy.age}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy:{name:'刘德华',age:30,hobby:['唱歌','演戏','耍帅'],friend:[{id:'001',name:'张学友',age:30},{id:'002',name:'郭富城',age:30},{id:'003',name:'黎明',age:30}],}},methods:{},});</script>
</html>
  • 运行效果
    在这里插入图片描述

修改年龄

刘德华 的 年龄 - 1

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 年龄-1

在这里插入图片描述

添加性别

刘德华 增加 性别属性 值为男 （基于 vue2）

Vue.set

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex(){console.log("刘德华 有性别了 （Vue.set）")Vue.set(this.boy,'sex',"男")}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 添加性别

在这里插入图片描述

vm.$set

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 添加性别

在这里插入图片描述

修改性别

刘德华 修改性别 男 => 猛男

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'}},});</script>
</html>
  • 运行效果

刘德华 添加 性别 男

在这里插入图片描述

点击 按钮 修改性别

在这里插入图片描述

修改朋友姓名

修改第一个朋友姓名为 张学良

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 修改朋友姓名

在这里插入图片描述

首位新增朋友

刘德华 朋友列表 首位新增朋友 周杰伦

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 首位新增朋友

在这里插入图片描述

增加爱好

刘德华 爱好 增加 首位增加一个喝酒 末位增加一个健身

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><button @click="addHobby">增加爱好</button><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })},addHobby(){console.log("首位新增一个爱好 <喝酒>");this.boy.hobby.unshift("喝酒")console.log("末位新增一个爱好 <健身>");this.boy.hobby.push("健身")}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 增加爱好

在这里插入图片描述

修改爱好

修改 刘德华的第一个爱好 唱歌 => 爬山

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><button @click="addHobby">增加爱好</button><button @click="updateHobby">修改爱好</button><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })},addHobby(){console.log("首位新增一个爱好 <喝酒>");this.boy.hobby.unshift("喝酒")console.log("末位新增一个爱好 <健身>");this.boy.hobby.push("健身")},updateHobby(){console.log("修改 刘德华的第一个爱好了 ");// Vue.set(this.boy.hobby, 0, '爬山');// this.$set(this.boy.hobby, 0, '爬山');// 必须得用 push、pop、shift、unshift、splice、sort、reverse修改才能响应式，直接通过数组下标修改元素无法响应式this.boy.hobby.splice(0,1,'爬山')}},});</script>
</html>
  • 运行效果

在这里插入图片描述

点击 按钮 修改爱好
在这里插入图片描述

总结

  • vue 会监听data中 所有层级的数据

通过 setter实现监听 且是在初始化vue实例就定义好的数据 data

  1. 对象后追加的属性，默认vue不做响应式处理
  2. 如后追加的属性想要响应式处理，使用特定的API进行增加属性
    - Vue.set(target, propertyName/index, value )
    - vm.$set(target, propertyName/index, value )
  • 如何监听数组中的数据

通过包装数组更新元素的方法进行实现，本质做了两件事：

  1. 调用原生对应的方法对数组进行更新
  2. 重新解析模板，更新页面
  • Vue2 中修改数组中元素 且 需要响应式，必须使用指定的方法：
  1. push、pop、shift、unshift、splice、sort、reverse
  2. Vue.set(target, propertyName/index, value )
  3. vm.$set(target, propertyName/index, value )
  • Vue.set() 和 vm.$set() 不能给vm以及根数据对象（data） 追加属性

http://www.hkcw.cn/article/VnkgjjBxcw.shtml

相关文章

Java 注解式限流教程（使用 Redis + AOP）

Java 注解式限流教程（使用 Redis + AOP）

Java 注解式限流教程&#xff08;使用 Redis AOP&#xff09; 在上一节中&#xff0c;我们已经实现了基于 Redis 的请求频率控制。现在我们将进一步升级功能&#xff0c;使用 Spring AOP 自定义注解 实现一个更优雅、可复用的限流方式 —— 即通过 RateLimiter 注解&#xf…
阅读更多...
C++学习-入门到精通【10】面向对象编程：多态性

C++学习-入门到精通【10】面向对象编程：多态性

C学习-入门到精通【10】面向对象编程&#xff1a;多态性 目录 C学习-入门到精通【10】面向对象编程&#xff1a;多态性一、多态性介绍&#xff1a;多态电子游戏二、类继承层次中对象之间的关系1.从派生类对象调用基类函数2.将派生类指针指向基类对象3.通过基类指针调用派生类的…
阅读更多...
基于springboot的医护人员排班系统设计与实现(源码+文档+部署讲解）

基于springboot的医护人员排班系统设计与实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…
阅读更多...
1、python代码实现与大模型的问答交互

1、python代码实现与大模型的问答交互

一、基础知识 1.1导入库 torch 是一个深度学习框架&#xff0c;用于处理张量和神经网络。modelscope是由阿里巴巴达摩院推出的开源模型库。 AutoTokenizer 是ModelScope 库的类&#xff0c;分词器应用场景包括自然语言处理&#xff08;NLP&#xff09;中的文本分类、信息抽取…
阅读更多...
再见Cursor！Trae Pro 登场

再见Cursor！Trae Pro 登场

5 月 27 日&#xff0c;字节跳动旗下的 AI 编辑器 Trae 国际版正式推出了 Pro 订阅计划。长期以来&#xff0c;Trae 凭借免费使用和出色的编程体验&#xff0c;深受大家喜爱。不过&#xff0c;免费版在实际使用中&#xff0c;排队等待的情况时有发生&#xff0c;着实给用户带来…
阅读更多...
【Docker 从入门到实战全攻略（一）：核心概念 + 命令详解 + 部署案例】

【Docker 从入门到实战全攻略（一）：核心概念 + 命令详解 + 部署案例】

1. 是什么 Docker 是一个用于开发、部署和运行应用程序的开源平台&#xff0c;它使用 容器化技术 将应用及其依赖打包成独立的容器&#xff0c;确保应用在不同环境中一致运行。 2. Docker与虚拟机 2.1 Docker&#xff08;容器化&#xff09; 容器化是一种轻量级的虚拟化技术…
阅读更多...
rm删除到回收站

rm删除到回收站

rm删除到回收站 背景安装trash-clipip安装包管理器安装 将trash-put别名设为rm设置回收站文件过期时间 trash基本用法删除文件删除后文件去了哪里 查看回收站从回收站中恢复文件恢复文件到指定路径 删除回收站中的指定文件 背景 在Linux命令行下操作的时候会不小心误删文件或目…
阅读更多...
DDP与FSDP：分布式训练技术全解析

DDP与FSDP：分布式训练技术全解析

DDP与FSDP：分布式训练技术全解析 DDP（Distributed Data Parallel）和 FSDP（Fully Sharded Data Parallel）均为用于深度学习模型训练的分布式训练技术，二者借助多 GPU 或多节点来提升训练速度。 1. DDP（Distributed Data Parallel） 实现原理 数据并行：把相同的模型复…
阅读更多...
数据采集是什么？一文讲清数据采集系统的模式！

数据采集是什么？一文讲清数据采集系统的模式！

目录 一、数据采集是什么&#xff1f; 二、为什么要进行数据采集 1. 为企业决策提供依据 2. 推动科学研究的发展 3. 提升生产效率和质量 三、数据采集系统的模式 1. 实时采集模式 2. 定时采集模式 3. 事件驱动采集模式 四、不同模式的应用场景及选择考虑因素 1. 应用…
阅读更多...
python学习day33

python学习day33

知识点回顾&#xff1a; 1.PyTorch和cuda的安装 2.查看显卡信息的命令行命令&#xff08;cmd中使用&#xff09; 3.cuda的检查 4.简单神经网络的流程 a.数据预处理&#xff08;归一化、转换成张量&#xff09; b.模型的定义 i.继承nn.Module类 ii.定义每一个层 iii.定义前向传播…
阅读更多...
Python中的变量、赋值及函数的参数传递概要

Python中的变量、赋值及函数的参数传递概要

Python中的变量、赋值及函数的参数传递概要 python中的变量、赋值 python中的变量不是盒子。 python中的变量无法用“变量是盒子”做解释。图说明了在 Python 中为什么不能使用盒子比喻&#xff0c;而便利贴则指出了变量的正确工作方式。 如果把变量想象为盒子&#xff0c;那…
阅读更多...
如何优化微信小程序中渲染带有图片的列表（二进制流存储方式的图片存在本地数据库）

如何优化微信小程序中渲染带有图片的列表（二进制流存储方式的图片存在本地数据库）

方法一&#xff1a;对列表的获取进行分页处理 实现方法&#xff1a; 前端请求&#xff08;需要向后端传两个参数&#xff0c;pageIndex是获取第几页是从0开始&#xff0c;pageSize是这一页需要获取多少个数据&#xff09; 后端接口实现&#xff08;因为这里是通过参数拼接请求…
阅读更多...
电磁器件的“折纸革命“：牛津《Sci. Reports》发布剪纸超材料

电磁器件的“折纸革命“：牛津《Sci. Reports》发布剪纸超材料

01 前沿速递&#xff1a;顶尖团队破解行业难题 近日&#xff0c;牛津大学工程科学系杨云芳、Andrea Vallecchi、Ekaterina Shamonina、Christopher Stevens及游忠教授团队在《Scientific Reports》发表突破性研究&#xff0c;提出一类基于剪纸&#xff08;Kirigami&#xff0…
阅读更多...
【Java学习笔记】接口

【Java学习笔记】接口

接口 应用场景引出 一、接口的介绍 1. 接口的基本结构 interface 接口名{属性抽象方法 }引出关键字&#xff1a;implements 2. 子类实现接口 class a implements 接口名{}3. 接口中的属性说明&#xff1a;属性默认是public static final修饰的 &#xff08;1&#xff09;f…
阅读更多...
02 APP 自动化-Appium 运行原理详解

02 APP 自动化-Appium 运行原理详解

环境搭建见 01 APP 自动化-环境搭建 文章目录 一、Appium及Appium自动化测试原理二、Appium 自动化配置项三、常见 ADB 命令四、第一个 app 自动化脚本 一、Appium及Appium自动化测试原理 Appium 跨平台、开源的 app 自动化测试框架&#xff0c;用来测试 app 应用程序&#x…
阅读更多...
（1）pytest简介和环境准备

（1）pytest简介和环境准备

1. pytest简介 pytest是python的一种单元测试框架&#xff0c;与python自带的unittest测试框架类似&#xff0c;但是比unittest框架使用起来更简洁&#xff0c;效率更高。根据pytest的官方网站介绍&#xff0c;它具有如下特点&#xff1a; 非常容易上手&#xff0c;入门简单&a…
阅读更多...
同元软控、核动力研究院与华北电力大学产学研联合实训室正式揭牌

同元软控、核动力研究院与华北电力大学产学研联合实训室正式揭牌

2025年5月27日&#xff0c;华北电力大学、苏州同元软控信息技术有限公司&#xff08;以下简称“同元软控”&#xff09;、中国核动力研究设计院&#xff08;以下简称“核动力研究院”&#xff09;联合实训室揭牌授权仪式暨座谈交流会在华北电力大学召开。华北电力大学教务处处长…
阅读更多...
PyTorch中nn.Module详解

PyTorch中nn.Module详解

直接print(dir(nn.Module))&#xff0c;得到如下内容&#xff1a; 一、模型结构与参数 parameters() 用途&#xff1a;返回模块的所有可训练参数&#xff08;如权重、偏置&#xff09;。示例&#xff1a;for param in model.parameters():print(param.shape)named_parameters…
阅读更多...
若依项目天气模块

若依项目天气模块

在若依项目里添加了一个天气模块&#xff0c;记录一下过程。 一、功能结构与组件布局 天气模块以卡片形式&#xff08;el-card&#xff09;展示&#xff0c;包含以下核心功能&#xff1a; 实时天气&#xff1a;显示当前城市、温度、天气状况&#xff08;如晴、多云&#xff…
阅读更多...
APM32芯得 EP.06 | APM32F407移植uC/OS-III实时操作系统经验分享

APM32芯得 EP.06 | APM32F407移植uC/OS-III实时操作系统经验分享

《APM32芯得》系列内容为用户使用APM32系列产品的经验总结&#xff0c;均转载自21ic论坛极海半导体专区&#xff0c;全文未作任何修改&#xff0c;未经原文作者授权禁止转载。 最近我开始学习 uC/OS-III 实时操作系统&#xff0c;并着手将其移植到APM32F407 开发板上。在这个过…
阅读更多...
推荐文章

Copyright @ 2022~2023