第四章生命周期函数--35 vue-resource发起get、post、jsonp请求

vue-resource 官网 https://github.com/pagekit/vue-resource

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <title>Document</title>
 8     <!--1.导入Vue的包-->
 9     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
10     <!-- 注意：vue-resource依赖与Vue，所以先后顺序要注意，先导入vue，再导入vue-resource -->
11     <!-- this.$http.jsonp -->
12     <!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> -->
13     <script src="./lib/vue-resource-1.5.1.js"></script>
14   </head>
15 
16   <body>
17       <div id="app">
18       <input type="button" value="get请求" @click="getInfo">
19       <input type="button" value="post请求" @click="postInfo">
20       <input type="button" value="jsonp请求" @click="jsonpInfo">
21       </div>
22 
23 
24       <script>
25           //创建 Vue 实例，得到 ViewModel
26           var vm =  new Vue({
27               el:'#app',
28         data:{
29           msg:''
30         },
31         methods:{
32           getInfo(){//发起get请求
33             //当发起get请求之后，通过then来设置成功的回调函数
34             this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
35               //通过result body 拿到服务器返回的成功的数据
36               // console.log(result)
37             })
38           },
39           postInfo(){//发起post请求
40             //手动发起的Post请求，默认没有表单格式，所以，有的服务器处理了
41             //通过post方法的第三个参数，{emulateJSON:true}设置提交的内容类型为普通表单数据格式
42             this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
43               console.log(result.body)
44             })
45           },
46 
47           jsonpInfo(){//发起JSONP请求
48             //箭头哈数默认就是个匿名函数
49             this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result =>{
50               console.log(result.body)
51             })
52           }
53         }
54           
55           });
56       </script>
57   </body>
58 </html>