<!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> <script src="./lib/vue-2.4.0.js"></script> <!--Note: vue-resource dependent on Vue, so the order is to be noted -> <-! The this http.jsonp $. -> < Script the src = "./ lib / VUE-Resource-1.3.4.js" > </ Script > </ head > < body > < div ID = "App" > < INPUT type = "Button" value = "GET request" @click = "getInfo" > < INPUT type = "Button" value = "POST request " @click =" postinfo " > <input type="button"value = "Request JSONP" @click = "jsonpInfo" > </ div > < Script > // Create Vue instance, to give the ViewModel var VM = new new Vue ({ EL: ' #app ' , Data: {}, Methods: { getInfo () { // initiate get request // after initiation get request, to set a successful callback function .then the this . http.get $ ( ' http://vue.studyit.io/api/getlunbo ' ). the then ( function (Result) { //console.log (result) // get the whole data comprising a header, Status // by result.body get successful data returned by the server // the console.log (result.body) }) }, postinfo () { // initiate post request file application / X-form-urlencoded of wwww- // manually initiated Post request form is not the default format, so that the server can not handle some // third parameter post method, {emulateJSON: true} content type filed common data format form the this . http.post $ ( ' http://vue.studyit.io/api/post ' , {}, {emulateJSON: to true }). the then (Result => { Console .log (result.body) }) }, jsonpInfo () { // 发起JSONP 请求 this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => { console.log(result.body) }) } } }); </script> </body> </html>