vue-resource：https://github.com/pagekit/vue-resource
axios：http://www.axios-js.com/
Vue中并没有直接提供对HTTP请求模块的封装，而是以使用一个单独的插件去封装了HTTP的模块，vue-resource是vue提供的一个插件，除此之外你还可以使用其它的插件比如axios。
<script src="../lib/vue-2.4.0.js"></script>
<!-- vue-resource依赖于vue,它只是在Vue的this上扩展了$http-->
<script src="../lib/vue-resource-1.3.4.js"></script>
</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>
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() {
// 这里如果使用webstrom启动访问会报错，因为这是跨源访问，所以
// 按理说应该是在源网站上访问该页面
this.$http.get('http://vue.studyit.io/api/getlunbo')
.then((success) => {
console.log(success);
}, (error) => {
console.log(error);
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, {})
.then(success => {
console.log(success);
}) // error可以省略
},
jsonpInfo() {
this.$http.jsonp('http://vue.studyit.io/api/jsonp')
.then(result => {
console.log(result);
})
}
}
})
</script>
在vue-resource的文档里有Configuration项，在其中有说明。
// main.js中 // http请求 import VueResource from 'vue-resource' Vue.use(VueResource) // 设置全局http请求根路径[最后不带/，在请求时之前也不能带/] Vue.http.options.root = 'http://vue.studyit.io';
