vue获取远程数据

116 阅读 0 评论 77 点赞

我是靠谱客的博主魁梧溪流，这篇文章主要介绍vue获取远程数据，现在分享给大家，希望可以做个参考。

1、axios的基础用法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
axios
//.get('/user?id=1&username=admin')
.post('/user?id=1&username=admin')
.then(function(response){
this.info = response.data;
}.bind(this))
.catch(function (error) { // 请求失败处理
console.log(error);
});
axios
// .get('/user', {id: '1',name: 'admin'})
.post('/user', {id: '1',name: 'admin'})
.then(function(response){
this.info = response.data;
}.bind(this))
.catch(function (error) { // 请求失败处理
console.log(error);
});

2、关于axios的实例

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<div v-for="site in sites">
name:{{ site.name }}--info:{{ site.info }}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
title : "",
sites : []
},
mounted:function(){
this.getdata();
},
methods:{
getdata: function(){
axios
// .get('/site?id=1')
.get('/site',{
params:{
id:1,
}
})
.then(function(response){
this.title = response.data.title;
this.sites = response.data.sites;
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
// ,getdata1: function(){
//
axios
//
.get('data1.json')
//
.then(response => (
//
console.log(response.data),
//
this.title = response.data.title,
//
this.sites = response.data.sites
//
))
//
.catch(function (error) {
//
console.log(error);
//
});
// }
}
})
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<div v-for="site in sites">
name:{{ site.name }}--info:{{ site.info }}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
title : "",
sites : []
},
mounted:function(){
this.getdata();
},
methods:{
getdata: function(){
axios
// .get('/site?id=1')
.get('/site',{
params:{
id:1,
}
})
.then(function(response){
this.title = response.data.title;
this.sites = response.data.sites;
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
// ,getdata1: function(){
//
axios
//
.get('data1.json')
//
.then(response => (
//
console.log(response.data),
//
this.title = response.data.title,
//
this.sites = response.data.sites
//
))
//
.catch(function (error) {
//
console.log(error);
//
});
// }
}
})
</script>
</body>
</html>