Vue异步通讯
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
使用Axios的理由
由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !
模拟一段json格式的数据
{
"name": "weg",
"age": "18",
"sex": "男",
"url":"https://www.baidu.com",
"address": {
"street": "文苑路",
"city": "南京",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
{
"name": "cqh video",
"url": "https://www.4399.com"
}
]
}
使用axios要引入cdn
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js">script>
//注意要用到钩子函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="vue">
<div>{{info.name}}div>
<a v-bind:href="info.url">点我进入a>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js">script>
<script>
var vm = new Vue({
el: "#vue",
//data:vm的属性
//data():vm方法
data(){
return{
//请求的返回参数,必须和json字符串一样,可以没有，但是有必须要一样
info:{
name: null,
age: null,
sex: null,
url: null,
address: {
street: null,
city: null,
country: null
}
}
}
},
//钩子函数，链式编程，ES6新特性
mounted(){
axios
.get('data.json')
.then(response => (this.info = response.data))
}
})
script>
html>