Axios Ajax 业务调用 Vue数组计算属性

最新推荐文章于 2024-01-01 11:09:57 发布

爱驹一族

最新推荐文章于 2024-01-01 11:09:57 发布

阅读量130

点赞数

分类专栏：框架

本文链接：https://blog.csdn.net/weixin_56762709/article/details/117568857

版权

框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.Axios Ajax业务调用

1.1 GET-?号参数请求
1.1.1 带参数提交数据
/* 2. get带参数的请求方式 ?号拼接的方式
URL: http://localhost:8090/getUserById?id=1
返回值: User对象的JSON串
*/
axios.get(“http://localhost:8090/getUserById?id=1”)
.then(function(result){
console.log(result.data)
})
1.1.2 编辑UserController
在这里插入图片描述

1.1.3 编辑UserService
在这里插入图片描述

1.2 GET-params对象语法
/**
* params 对象的方式提交
* 如果将来的参数有多个,则可以封装params对象.简洁
/
axios.get(“http://localhost:8090/getUserById”,{
params: {
id: 1
}
}).then(function(result){
console.log(result.data)
})
1.3 箭头函数语法
/ 简化回调函数的写法 */
axios.get(“http://localhost:8090/getUserById”,{
params: {
id: 1
}
}).then((result) => {
console.log(result.data)
})

2.VUE数组案例练习

2.1 常见数组函数
push() 在最后一个追加
pop() 删除最后一个
shift() 删除第一个元素
unshift() 在开头追加一个元素
splice() 在指定位置替换元素
sort() 数组排序默认是按照字符编码的顺序进行排序
reverse() 数组反转
2.2 语法调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 
				1.push() 在最后一个追加
				2.pop() 删除最后一个
				3.shift() 删除第一个元素
				4.unshift() 在开头追加一个元素
				5.splice() 在指定位置替换元素
				6.sort() 数组排序 默认是按照字符编码的顺序进行排序
				7.reverse() 数组反转
			 -->
			 <!-- 展现数组 -->
			 <span v-for="item in array">{{item}}  </span> <br>
			 <!-- 添加数据-->
			 数据: <input type="text" v-model="num"/> <br>
			 <button @click="push">push</button>
			 <button @click="pop">pop</button>
			 <button @click="shift">shift</button>
			 <button @click="splice">splice</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//1.定义数组
					array: [3,7,1,5,4],
					num: ''
				},
				methods: {
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					splice(){
						//参数说明: 
						//	1.操作数据起始位置  
						//	2.操作数量  
						//	3.替换元素的值(如果不写表示删除)
						//需求1：将第一位数据1替换为5 
						//this.array.splice(0,1,5)
						//需求2：将前2位数据 换为 8,9
						//this.array.splice(0,2,8,9)
						//需求3: 删除第四位数据
						//this.array.splice(3,1,'')
						  this.array.splice(3,1) 
					}
				}
			})
		</script>
	</body>
</html>

3.侦听器

3.1 侦听器说明
在侦听器中包含了监听器/过滤器下列按钮包含了课堂案例语法规则

侦听器

姓:

4.计算属性

4.1 计算属性概念
如果在插值表达式中有大量的数据计算,则可以通过计算属性的方式实现

4.2 计算属性语法

计算属性

计算:
{{msg.split('').reverse().join('')}}

	</div>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				msg: ''
			},
			methods: {
				reverseA(){
					console.log("我是方法调用")
					return this.msg.split('').reverse().join('')
				}
			},
			//定义计算属性
			computed: {
				//必须有返回值
				reverseStr(){
					console.log("我是计算属性")
					return this.msg.split('').reverse().join('')
				}
			}
		})
	</script>
</body>

4.3 计算属性与方法的区别

计算属性有缓存的操作只执行一次. 效率更高
计算属性调用时,只需要写属性名称 xxx
用户每次调用都会执行方法.没有缓存操作
方法调用时需要添加 xxx()

		{{reverseStr}}
		{{reverseStr}}
		{{reverseA()}}
		{{reverseA()}}

爱驹一族

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios Ajax 业务调用 Vue数组计算属性

1.Axios Ajax业务调用1.1 GET-?号参数请求1.1.1 带参数提交数据/* 2. get带参数的请求方式 ?号拼接的方式URL: http://localhost:8090/getUserById?id=1返回值: User对象的JSON串*/axios.get(“http://localhost:8090/getUserById?id=1”).then(function(result){console.log(result.data)})1.1.2 编辑UserCo
复制链接

扫一扫