Vue三种请求方式
程序员文章站
2022-05-18 15:30:09
...
~~<html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-Resource基本使用</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="vue-resoure">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="Jsonp请求" @click="jsonpInfo">
</div>
<script src="js/Vue-resource.js"></script>
</body>
</html>
<js 代码
var vm = new Vue({
el:"#vue-resoure",
data:{},
methods: {
getInfo:function () {
//发出get请求
this.$http.get("http://vue.studyit.io/api/getlunbo").then(function (res) {
console.log(res.body);
})
},
postInfo:function () {
//发出post请求
this.$http.post("http://vue.studyit.io/api/getlunbo",{id:1,name:'ypj'},{emulateJSON:true}).then(res=>{
console.log(res.body);
})
},
jsonpInfo:function () {
this.$http.jsonp("http://vue.studyit.io/api/getlunbo").then(res=>{
console.log(res.body);
})
}
}
});
上一篇： react中路由跳转传参的三种方式
下一篇： v3中路由跳转的三种方式