Vue+ajax的使用小结

js

var vue = new Vue({
        el:"#vueid",  
        data:{
            selectById : "",
        },
        methods:{
            yourMethod:function(id){ 
                 $.ajax({
                    type : "POST",
                    url : "selectCsdbById.shtml",
                    data : {
                        id : id,
                    },
                    success : function(data) {
　　　　　　　　　　　　　　 var message = $.parseJSON(data);//后台返回的json数据需要转为对象
                         vue.selectById=message;//把后台返回的JSON数据赋给selectById
                    },
                    error : function(){
                        alert("错误");
                    }

                });
            },
            updateById:function(){
                $.ajax({
                        type : "POST",
                        url : "updateById.shtml",
                        data : vue.selectById,
                        success : function(data) {
                            alert(data);
                        },
                        error : function(){
                            alert("错误");
                        }

                    });
            },
        }
    })      

html

<div id="vueid">
<input type="text" name="name" v-model="selectById.name" > //v-model实现数据的双向绑定
</div>

注意：使用<a>标签时，必须令href="JavaScript:void(0)"，这样做的作用是禁止页面刷新（表示页面不做任何动作），否则vue渲染会失败

总结：

使用vue+ajax可以有效的减少页面的刷新，并且不需要拼接html代码，当需要更新表单时，由于v-model的双向绑定，只需要提交相应的对象就行，对象里的数据已经自动替换了。（刚接触VUE，菜鸟一枚，写的不好勿喷！！！同时希望各位大神指出不对的地方！O(∩_∩)O谢谢！！！！）