Vue axios asynchronous communication and computing properties

Vue axios recommended to use asynchronous communication in fact also can be done using ajax But since Vue was axios recommended that we use axios conduct a simple asynchronous communication and the like are familiar with ajax ajax students must also be on axios Quick Start

vue has a hook function mounted () it performs this time if we want to get some data to the server to fetch certainly we are usually loaded with asynchronous strategy axios is such a solution at the beginning of loading pages it is an asynchronous we then Mounted communication (we performed asynchronously load operation) in -> axios axios common method is to axios.get(url).then(response=>(拿到response后的动作 response.data就是拿回的数据)) 他是一种链式编程的思想 =>simultaneously back data is not always stored in the attribute data stored in the data we need () function is used to return a return acceptable data

Further embodiment axios parameter is passed after adding a url params object is defined by the contents transmission:axios.get(url,{params:{传递的参数}})

data () format data to be retrieved and consistent format 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>

It is very simple to calculate the properties and general properties of the comparison is more like a cache function. There is a property which is computed in the computing code properties in Vuecomputed : { time : function(){ return Date.now(); } } 计算出当前时间戳 在前端引用它的方法和引用普通属性一样