Compared with the native Ajax, the method provided by axios will be easier to use. The network data has been obtained before, how to use it with Vue?
The core of network applications is that part of the data in data is obtained through the network. So initiate a network request in the method, and set the data returned by the server to the corresponding value in data after the response comes back!
The returned object is response, which has many attributes, and what we need to get is the attribute of data.
Outside and inside axios, this will change, very simple, then store this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<button type="button" @click="getjokemsg()">get请求</button>
<p>{
{ jokemsg }}</p>
</div>
<script type="text/javascript">
new Vue({
el: "#vue",
data:{
jokemsg: "很好笑的笑话"
},
methods:{
getjokemsg:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(
function(response){
console.log(response.data);
that.jokemsg = response.data;
},
function(err){
console.log(err)
}
)
},
}
}
)
</script>
</body>
</html>