vue的双向绑定在处理FORM表单数据时非常方便使用，vue也提供了支持json对象与XMLHttpRequest对象 vue-resource：The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP。

所以利用这点在处理表单提交时非常方便。

html部分

<div id="app">
    <form @submit.prevent="submit">
        <div>
            姓名：<input type="text" v-model="user.name">
        </div>
        
        <div>
            性別：
            <label>
                <input type="radio" value="男" v-model="user.gender"> 男
            </label>
            <label>
                <input type="radio" value="女" v-model="user.gender"> 女
            </label>
        </div>
        
        <input type="submit" value="提交">
    </form>
</div>

js部分

提交的formData就是我们绑定在HTML表单中的DATA。在JS methods中 我们提交的方法中直接 this.student 就是我们的数据。

调用 VUE 实例中 this.$http就可以进行提交了。和Angulars处理表单提交基本是相同的。

<script>
export default {
    data:{
        return {
            student:{
                userName:"",
                gender:""
            }
        }
    },
    methods: {
        submit(){
           
            var formData = JSON.stringify(this.student); // this指向这个VUE实例 data默认绑定在实例下的。所以直接this.student就是要提交的数据
            this.$http.post(url,formData).then(function(data){
                if(data.json().state=="success")
                        console.log("success");       
                }
            }).catch(function(){
              console.log("服务器异常！");
            });
            
        }

    }
}
</script>