欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue axios异步通信和计算属性

程序员文章站 2022-07-12 19:16:41
...

Vue中推荐使用axios来进行异步通信 其实使用ajax也是可以做到的 不过既然Vue推荐的是axios 那我们就来使用axios进行一次简单的异步通信把 和ajax很像 熟悉ajax的同学对axios一定也可以快速上手

vue中有一个钩子函数 mounted() 它会在开始加载页面的时候执行 这个时候我们如果想取一些数据 肯定是向服务器去取 一般我们都是用异步加载的策略 axios就是这样一个解决方案 它属于异步通信 我们再mounted()中执行我们要异步加载的动作–>axios axios的常用方法是 axios.get(url).then(response=>(拿到response后的动作 response.data就是拿回的数据)) 他是一种链式编程的思想 => 同时 拿回的数据 我们不能存放在data属性中 我们需要存放在data()函数中 用一个return来返回接受的数据

data()中 数据的格式必须和取回的json格式一致

<div id = "d1">
			<div>{{info.name}}</div>
			<div>{{info.url}}</div>
			<div>{{info.intro.msg1}}</div>
			<div>{{info.intro.msg2}}</div>
			<div>{{info.intro.msg3}}</div>
			<div>{{info.final}}</div>
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el : '#d1',
				data(){//存放axios返回的数据 格式必须和取到的json格式一致
					return {
						info : {
							name : null,
							url : null,
							intro : {
								msg1 : null,
								msg2 : null,
								msg3 : null,
							},
							final : null
						}
					}
				},
				mounted(){//钩子函数 链式编程
					axios.get("../js/myjson.json").then(response=>(this.info=response.data))
				}
			})
		</script>

计算属性很简单 它和一般属性的比较就是多了一个类似于缓存的功能 。 在Vue中有一个 computed属性 里面就是计算属性的代码 computed : { time : function(){ return Date.now(); } } 计算出当前时间戳 在前端引用它的方法和引用普通属性一样