<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <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.min.js"></script> <link rel="stylesheet" href="../lib/bootstrap.min.css"> </head> <body> <div id="app"> <input type="button" value="get请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <input type="button" value="jsonp请求" @click="jsonpInfo"> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { }, methods: { getInfo() { // 发起 get请求 // 当发起get请求之后,通过 .then 来设置成功的回调函数 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) { console.log(result) }) }, postInfo() { // 发起 post请求 // 当发起get请求之后,通过 .then 来设置成功的回调函数 this.$http.post('http://vue.studyit.io/api/post',{},{}).then(function (result) { console.log(result) }) }, getInfo() { // 发起 jsonp请求 // 当发起get请求之后,通过 .then 来设置成功的回调函数 this.$http.jsonp('http://vue.studyit.io/api/jsnop').then(result=> { console.log(result.body) }) } }, }) </script> </body> </html>