<!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="vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.6/vue-resource.js"></script>
</head>
<body>
<div id="app">
<button @click="getInfo">get请求</button>
<button @click="getPost">post请求</button>
<button @click="getJSONP">jsonp请求</button>
</div>
</body>
<script>
//创建一个vue实例
//当我们导入包之后,在浏览器的内存中就多了一个vue构造函数
var vm = new Vue({
el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
message:'测试'
},
methods: {
getInfo: function(){
//发起get请求
this.$http.get('https://api.apiopen.top/searchMusic').then(function(result){
console.log(result);
});
},
getPost: function(){
//发起post请求
this.$http.post('https://www.apiopen.top/weatherApi',{city:"成都"},{ emulateJSON: true }).then(function(result){
console.log(result);
});
},
getJSONP: function(){
//发起JSONP请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(function(result){
console.log(result.body);
});
},
}
});
</script>
</html>