1.Vue实现axios网络请求
1.1 代码
<!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>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #f4f4f4;
}
li {
width: 200px;
border: 1px solid #efefef;
padding: 5px;
margin: 10px;
background: fff;
}
li img {
width: 100%;
}
li h3 {
font-size: 20px;
font-weight: 400;
}
</style>
</head>
<body>
<div id="app">
<button @click="clickBtn">获取列表</button>
<ul>
<li v-for="item in listArr">
<img :src="item.picurl" alt="">
<h3>{{item.title}}</h3>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
listArr:[]
},
methods:{
clickBtn(){
// axios.get("https://ku.qingnian8.com/dataApi/qingKu/getList.php",{
// //有参数的请求方式
// params: {
// num: 5,
// page: 2
// }
// })
// .then((res)=>{
// console.log(res);
// this.listArr=res.data;
// })
axios({
url: "https://ku.qingnian8.com/dataApi/qingKu/getList.php",
method: "get",
params: {
num: 3,
page: 2
}
}).then((res)=>{
console.log(res);
this.listArr=res.data;
})
}
}
});
</script>
</body>
</html>1.2 显示效果
