Vue学习笔记04Axios应用程序
什么是axios
Axios是一个开源的可以用在浏览器端和Node]S的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:
- 从浏览器中创建
XMLHttpRequests
- 从
node.js
创建http
请求 - 支持
Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON
数据 - 客户端支持防御
XSRF
(跨站请求伪造)
创建data.json,模拟JSON数据
{
"name": "百度",
"url": "http://www.baidu.com",
"page": 66,
"isNonProfit": true,
"address": {
"street": "海淀区",
"city": "北京市",
"country": "中国"
},
"links": [
{"name": "Google",
"url": "http://www.google.com"
},
{"name": "Baidu",
"url": "http://www.baidu.com"
},
{"name": "Sougou",
"url": "http://www.sougou.com"
}
]
}
创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Axios应用程序</title>
</head>
<body>
<div id="app">
<div>
名称:{{info.name}}
</div>
<div>
url:{{info.url}}
</div>
</div>
<script>
var app = new Vue({
//element的缩写,挂载元素
el:"#app",
data(){
return{
info:{
name:'',
url:''
}
}
},
//请求数据
mounted(){
//链式编程
axios
.get('data.json')//获取数据
.then(response => this.info = response.data)
}
})
</script>
</body>
</html>
运行结果:
添加数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Axios应用程序</title>
</head>
<body>
<div id="app">
<div>
名称:{{info.name}}
</div>
<div>
url:{{info.url}}
</div>
<!--添加数组-->
<ul>
<li v-for="link in info.links">
{{link.name}}--->{{link.url}}
</li>
</ul>
</div>
<script>
var app = new Vue({
//element的缩写,挂载元素
el:"#app",
data(){
return{
info:{
name:'',
url:'',
links:[]
}
}
},
//请求数据
mounted(){
//链式编程
axios
.get('data.json')//获取数据
.then(response => this.info = response.data)
}
})
</script>
</body>
</html>
使用a标签,点击跳转百度页面
将
<div>
url:{{info.url}}
</div>
改为:
<div>
<!--使用a标签,点击跳转页面-->
url:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
</div>
运行示例:
点击跳转: