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

Vue框架总结案例

news 2025/8/9 12:56:32

目录

一、验证用户名是否已经被注册过

二、过滤器

三、图书管理系统

四、axios网络请求

一、验证用户名是否已经被注册过

1.案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">用户名:<input type="text" v-model="uname" />{{msg}}</div><script>var vue = new Vue({el:"#app",data:{ //属性uname:"",msg:""},watch:{ //监听属性uname(){ //监听uname绑定的输入框里面的值发生变化时，触发当前的函数// alert(this.uname);if("admin" === this.uname){ //模拟admin被注册过,实际开发中这个admin是查询数据库得到的this.msg = "此用户已被注册过,请重新输入"}else{this.msg = "可以注册"}}}})</script></body>
</html>

二、过滤器

1.过滤器的关键字是filters，也是和el、data、methods、computed、watch等同级的。

（1）格式：filters:{}

2.在filters的大括号中可以写一些转换数据的函数；这些函数中一般有两个参数，第一个参数用来接收要转换的值，第二个参数用来接收提示信息。

3.调用过滤器中的函数的格式：{{要转换的数据|filters中转换数据的函数("提示信息")}}。

4.作用：格式化数据，比如将字符串格式化为字符大写或小写，比如将日期格式化为指定格式，简单来说，过滤器就是过滤的，可以将数据在过滤器中进行一些转换。

5.注意：如果在使用过滤器的时候，只有一个参数，那么调用函数时，函数可以不写括号。

6.案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">{{msg|upperChange("转换之后:")}}<br />{{msg2|lowerChange("转小写:")}}<br />{{date|dateformat("中国时间:")}}<br /></div><script>var vue = new Vue({el:"#app",data:{msg:"hello vue",msg2:"HELLO VUE",date:new Date()},filters:{//过滤器//大写转小写upperChange(a,args){//第一个参数用来接收{{msg|upperChange("转换之后:")}}中msg的数据，args用来接收描述数据return args + a.toUpperCase();},//小写转大写lowerChange(a,args){return args + a.toLowerCase();},//日期格式的转换(开发中常用)dateformat(val,args){//              年月                          月份(0-11)              日return args+val.getFullYear() + "-" + (val.getMonth()+1) + "-" + val.getDate() + " " + val.getHours() + ":" + val.getMinutes() + ":" + val.getSeconds();}}})</script></body>
</html>

三、图书管理系统

1.Vue的数组的操作(变异方法)

（1）indexOf()：获取当前元素在数组中的下标。

  • 格式：数组名.indexOf(数组元素)

（2）push()：方法可向数组的末尾添加一个或多个元素，并返回新的长度。

（3）pop()：方法用于删除并返回数组的最后一个元素。

（4）shift()：方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

（5）unshift()：方法可向数组的开头添加一个或更多元素，并返回新的长度。

（6）splice()：方法向/从数组中添加/删除项目，然后返回被删除的项目。

  • 格式：splice(index,len,[item])
    • index：数组开始下标。
    • len：替换/删除的长度。
    • item：替换的值，删除操作的话item为空。
  • 可以用来添加/删除/替换数组内某一个或几个值。
  • 该方法会改变原始数组。

（7）sort()：方法用于对数组的元素进行排序。

（8）reverse()：方法用于颠倒数组中的元素顺序。

（9）concat()：方法用于连接两个或多个数组。

（10）slice()：方法可从已有的数组中返回选定的元素。

2.案例：

（1）css样式：

table td{border: 1px dashed orange;
}
table{border-collapse: collapse; /* 设置table的线条为单线条 */
}
tr{text-align: center;
}
.grid{width: 500px;margin: auto;
}
.title,.titleup{background-color: orange;
}

（2）html案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/abc.css"/></head><body><div id="app"><div class="grid"><table><tr class="titleup"><td colspan="4">编号:<input type="text" v-model="code" />名称:<input type="text" v-model="name" /><input type="button" value="提交" @click="add()" /></td></tr><tr class="title"><td>编号</td><td>名称</td><td>时间</td><td>操作</td></tr><tr v-for="book in books"><td>{{book.id}}</td><td>{{book.name}}</td><td>{{book.date|dateformat}}</td><td><a href="#" @click="edit(book)">修改</a>|<a href="#" @click="deleteBook(book)">删除</a></td></tr></table></div></div><script>var vue = new Vue({el:"#app",data:{code:"",name:"",flag:false, //false的状态时，是添加书籍的状态；true的状态时，是修改书籍的状态index:-1,books:[ //实际开发中我们后台开发人员，就是通过axios发送请求从数据库中取这个数据{id:1,name:"三国演义",date:new Date()},{id:2,name:"红楼梦",date:new Date()},{id:3,name:"水浒传",date:new Date()}]},methods:{//添加数据add(){if(this.code.length != 0 && this.name.length != 0 && !this.flag){//创建一个对象封装书籍数据(id,name,date)var newBook = new Object();newBook.id = this.code;newBook.name = this.name;newBook.date = new Date();//把当前newBook中的数据加入的books数组中this.books.push(newBook);//清空输入框中的数据this.code = "";this.name = "";}else if(this.code.length != 0 && this.name.length != 0){//修改状态this.books[this.index].id = this.code;//java数组中 books[0].name books[1] books[2]this.books[this.index].name = this.name;this.flag = false;//清空输入框中的数据this.code = "";this.name = "";}},//修改数据edit(book){this.flag = true;this.code = book.id;this.name = book.name;this.index = this.books.indexOf(book);},//删除数据deleteBook(book){// alert(book.name)//从数组中移除一个元素//先获取当前元素在数组中的下标索引var bookIndex = this.books.indexOf(book);//执行移除操作,第一个参数是要删除的元素的下标,第二个元素是要删除的个数this.books.splice(bookIndex,1);}},filters:{//日期的格式转换dateformat(val){return val.getFullYear() + "-" + val.getMonth() + "-" + val.getDate();}}})</script></body>
</html>

四、axios网络请求

1.需要导入axios.js框架

2.发送get请求

（1）格式：axios.get("发送的地址",{params:{'键1':'值1','键2':'值2',...}}).then(function(response){})

（2）注意：第二个参数里放的json数据,then里面的function函数是用来接收反馈回来的数据的

（3）可以在函数中使用alert(response.data)去查看一下返回的数据

3.发送post请求

（1）发送post请求的话，需要将发送的数据使用对象封装

  • 使用URLSearchParams()对象封装
  • var params = new URLSearchParams();
  • 使用append往这个对象中添加数据
  • params.append("键","值");

（2）发送格式：axios.post("地址",封装的数据对象).then(function(response){alert(response.data)//显示服务器返回的信息}).catch(function(error){alert(error)//显示错误信息})

4.案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>axios请求</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">用户名:<input type="text" v-model="uname" /><br /> <!-- v-model的设置用来获取表单输入框中的数据 -->密码:<input type="password" v-model="pwd" /><br /><input type="button" @click="submit()" value="提交" /></div><script>var vue = new Vue({el:"#app",data:{uname:"小丽",pwd:"123"},methods:{submit(){//这个数据往服务器端发送，需要后面学习axios发送post/get网络请求技术//需要使用axios.js发送网络的请求//get请求  这个数据往服务器端发送，需要后面学习axios网络请求技术// axios.get("https://www.baidu.com",{// 	params:{'uname':this.uname,'pwd':this.pwd},// 	})// .then(function(response){ //then接收后台服务器的数据反馈// 	alert(response.data);// }).catch(function(error){ //catch如果有异常，捕获异常// 	alert(error);// });//POST请求//使用对象封装post请求提交的参数，需要放入请求体中var params = new URLSearchParams();//加入需要提交的数据params.append("uname",this.uname);params.append("pwd",this.pwd);axios.post("https:www.baidu.com",params).then(function(response){alert("post请求:" + response.data);}).catch(function(error){alert(error);})}}})</script></body>
</html>
http://www.lryc.cn/news/614551.html

相关文章：

  • HTML ＜picture＞ 元素：让图片根据设备 “智能切换” 的响应式方案
  • OpenAI 开源 GPT-OSS：1200亿参数推理模型上线，完全免费、商用可用，全民可控智能体时代正式开启！
  • 《前端60问：从设备判断到性能优化全解》
  • PeiQi网络安全知识文库PeiQi-WIKI-Book保姆式搭建部署教程
  • Nearest Smaller Values(sorting and searching)
  • 饿了么零售 sign 分析
  • lmbench在麒麟V10的编译测试
  • 水系热力图：制作化学污染物浓度值热力图
  • 深入理解 Java AWT Container：原理、实战与性能优化
  • vue项目常见BUG和优化注意事项
  • 论文reading学习记录7 - daily - ViP3D
  • Cesium 模型3dtiles压平，任意多面压平，无闪烁
  • 适用于在线3D测量和检测的3D激光轮廓仪
  • 什么是SSL证书颁发机构？
  • 【Layui】调整 Layui 整体样式大小的方法
  • Vue开发的3D全景图效果
  • 微服务的好与坏
  • Spring Boot 常用注解及其功能详解
  • 【LLM实战|langchain、qwen_agent】RAG高级
  • 力扣-238.除自身以外数组的乘积
  • 【ros-humble】2.自定义通讯接口发布者python，qt使用（话题）
  • Java多线程初阶-线程协作与实战案例
  • 在超算中心，除了立式机柜（rack-mounted）还有哪些形式？
  • 【大模型实战篇】部署GPT-OSS-120B踩得坑（vllm / ollama等推理框架）
  • 使用Prometheus + Grafana + node_exporter实现Linux服务器性能监控
  • 大语言模型的过去与未来——GPT-5发布小谈
  • （已解决）Mac 终端上配置代理
  • Document Picture-in-Picture API拥抱全新浮窗体验[参考：window.open]
  • 交流异步电机的定子与转子转速差产生的原因
  • KTH7111-离轴专用芯片，支持自校准，可替MA600和TLE5012,离轴精度可达±0.2