<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in topics">{{item.title}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
<script src="../../js/axios.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
topics: []
},
created() {
this.getTopics()
},
methods:{
// 獲取所有主題的方法
getTopics() {
// axios.get('請求的地址url', {params參數})
// 在請求參數的地址上也可以進行參數的拼接
// axios.post('請求的地址url'，{key:value (post請求的參數)})
axios.get(
'https://cnodejs.org/api/v1/topics',
{
params: {
tab: 'good'
}
}
).then(res => { // 請求成功的回調函數
// console.log(res)
this.topics = res.data.data
})
}
}
});
</script>
</body>
</html>
在項目中如何使用axios？
下載指令：
cnpm install axios --save
導入：
封裝axios請求的數據：
可以在src 文件下創建一個文件夾進行封裝，以下以 server 爲例
