vue-resource的get和post方法

Vue-resource作为插件的形式存在，通过XMLHttpRequest或JSONP发起请求并处理响应，在开发中也非常常见，下面用vue-resource来请求books

get：在vue中新增ready对象，当页面加载完成时就去请求

new Vue({
    el: '#app',
    ready: function() {
        this.$http.get('book.json', function(data) {
            this.$set('books', data);
        }).error(function(data, status, request) {
            console.log('fail' + status + "," + request);
        })
    },
    data: {
        ....
        books:''
    },

这里讲json格式的数据保存在book.json中，这段数据你可以直接使用JSON.stringify()得到：

[
{"id":1,"author":"曹雪芹","name":"红楼梦","price":32},
{"id":2,"author":"施耐庵","name":"水浒传","price":30},
{"id":"3","author":"罗贯中","name":"三国演义","price":24},
{"id":4,"author":"吴承恩","name":"西游记","price":20}
]

post

语法：

this.$http.post(url,postdata,function callback)

在使用的时候遇到一个小坑，这个$http请求和jquery的ajax还是有点区别，这里的post的data默认不是以form data的形式，而是request payload。解决起来也很简单：
在vue实例中添加headers字段:

http: {
           headers: {'Content-Type': 'application/x-www-form-urlencoded'}
       }

后来翻了下vue-resource的源码，发现有更加简单的做法:

Vue.http.options.emulateJSON = true;