vue-交互 -取值- 赋值

交互:
$http （ajax）

如果vue想做交互

引入: vue-resouce

//一个vue文件

get:
this.$http.get(url,{
            a:1,
            b:2
        }).then(function(res){
            //成功方法
            alert(res.data);
        },function(res){ 
            //失败方法
            alert(res.status);
        });

//post:
        this.$http.post('post.php',{
            a:1,
            b:20
        },{
            emulateJSON:true  //解析json格式
        }).then(function(res){
            //成功
            alert(res.data);
        },function(res){
        //失败
            alert(res.status);
        });  

// 一个简单的get请求

    <div id="box">
            <input  type="button" value="确定" @click="add()" />
            <ul v-for="a in msg"> //数组赋值
                <li>{{a.a}}</li>
                <li>{{a.b}}</li>
                <li>{{a.c}}</li>
            </ul>
    </div>

<script>
    var aa = new Vue({
        el: "#box",
        data: {
            msg: [] //一个json数组
        },
        methods: {
            add: function() {

                this.$http.get({
                    url: 'home.json', //一个本地的json文件
                    data: {
                        //后台发送数据
                    }
                }).then(function(res) {
                    var data = res.data.data;//取值
                    for(var i in data) {
                        this.msg.push({ //把值push到上面的msg里面
                            a: data[i].title,
                            b: data[i].tonnage,
                            c: data[i].moveMode

                        })
                    }

                })
            }
        }
    })
</script>