Vue axios异步通信和计算属性

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来返回接受的数据

此外 axios传递参数的方式 是在url后加一个对象 用params 来定义传递的内容：axios.get(url,{params:{传递的参数}})

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(); } } 计算出当前时间戳 在前端引用它的方法和引用普通属性一样