Vuejs ,jQuery ajax, Vue resource 简单请求实例

HTML 代码：

    

        

            {{ person.name }}
        
    
  

Vue js 与 jQuery ajax 结合案例代码

var app = new Vue({
    //router,
    data: {
        people: null
    },
    created: function() {
        
        $.ajax({
            url: 'test.php',            
        }).done((res) =>{
            //console.log(res);
            this.people = JSON.parse(res);
            //console.log('124234234523');
            //console.log(this.people.name);
        });
    }
}).$mount('#app');

Vue js 与 Vue resource 结合案例代码

HTTP GET - Example

var app = new Vue({
    //router,
    data: {
        peopleColumns: ['name', 'age', 'eyeColor'],
        people: null,
    },
    created: function() {
        this.$http.get('test.php').then(function(res) {
            //this.people = res.data; // *(不知道res.data 与 res.body 有什么区别)*
            this.people = res.body;
        }, (res) => {
            console.log('Something is wrong.');
        });
    }
}).$mount('#app');

HTTP POST - Example

var app = new Vue({
    data: {
        peopleColumns: ['name', 'age', 'eyeColor'],
        people: null,
                currentPage: 0,
                size: 10,
    },
       created:function() {
           Vue.http.options.emulateJSON = true;
            var item = {current: this.currentPage, size: this.size};
                this.$http.post('/user/index', item).then(
                    function (response) {
                      this.tableData3 = response.body.data.users;
                      //this.total = response.body.data.total;
                      //this.pageSize = response.body.data.size;
                }, function (response) {
                    console.log("请求失败")
                });
                console.log("每页" + val + "条");
              
              // emulateJSON 配置可以写到发起的 POST 请求
              /*
               var item = {current: this.currentPage, size: this.size};

this.$http.post('/user/index', item, {emulateJSON: true}).then(
    function (response) {
      this.tableData3 = response.body.data.users;
      //this.total = response.body.data.total;
      //this.pageSize = response.body.data.size;
    },
    function (response) {
        console.log("请求失败");
    }
);
console.log("每页" + val + "条");
              */
    }
}).$mount('#app');

注意： 对 vue-resource POST 请求的解释

[@seekwe](https://github.com/seekwe) The post data is send JSON encoded, in order to 
decode it in PHP you need to do this:

> $data = json_decode(file_get_contents('php://input'), true);var_dump($data);

If you want to use the normal $_POST data you need to enable the emulateJSON option:
> Vue.http.options.emulateJSON = true;

Vue resource http post 数据没有接受到

About arrow function

I have an request to get some data and add it to a variable,

When I use:

.then(function(response) {
this.persons = response.data;
});

It does not assign response.data to this.persons but when I do the following:
.then(response => this.persons = response.data);
It assigns it fine to use. Please see the js fiddle: https://jsfiddle.net/trhhtyxr/2/

As I have explained it here, arrow syntax does not bind it's own this, arguments, 
super, or new.target. Arrow functions are always anonymous. These function expressions 
are best suited for non-method functions. Scope of this changes inside a function() 
block and it does not refer to the currently executing function, while with arrow 
function, this refers to the currently executing function only.

正在寻找使用 Vue component, 与 Vue router 结合的例子。