版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88993449
第三方提供的数据请求模块
参考文档
https://www.npmjs.com/package/axios
效果图:
axios 的使用 步骤:
1、安装 cnpm install axios --save
2、哪里用哪里引入 import Axios from ‘axios’;
3、使用
App.vue 代码:
<template>
<div>
<button @click="httpGetData()">get请求数据</button>
<br>
<!--渲染接口拿到的数据-->
<ul>
<li v-for="item in list">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
/*
请求数据的模板
axios 的使用
1、安装 cnpm install axios --save
2、哪里用哪里引入 import Axios from 'axios';
3、使用
*/
import Axios from 'axios';
export default {
name: 'app',
data() {
return {
msg: 'Welcome to Your Vue.js App',
list: [],
}
},
methods: {
httpGetData() {
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(api).then((response) => {
this.list = response.data.result;
}).catch((error) => {
console.log(error);
})
}
}
}
</script>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
源码下载: