VueJs Ajax数据交互

在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。

<li class="article" v-for="list in data">
    <a href="#">
        <img :src="'<%=Conf.OSS_IMG_URL%>' + list.icon" alt="">
        <p class="wallName">{{list.name}}</p>
        <p class="walltext">{{list.name}} <span>免费</span></p>
    </a>
</li>

<script type="text/javascript">
new Vue ({
    el : '#example',
    data : {data : ""},
    created : function(){
        var _self = this;
        $.ajax({
            url : 'listTemController/queryTemplate',
            type : 'post',
            async : false,
            data : {list : '3'},
            datatype: "json",
            success : function (data) {
                console.log(data);
                _self.data = data.list;
            }
        })
    }
})
 </script>

这里必须设置 vue的data的初始数据，即使此时数据为空。

在使用ajax获取数据时，使用vue-resource 更加合适。

使用vue-resource代码如下：

<script type="text/javascript">

     new Vue({
            el:'#app',
            data:{data:""},
            created:function(){
                var url="json.jsp";

                this.$http.get(url).then(function(data){
                    var json=data.body;
                    this.data=eval("(" + json +")");
                },function(response){
                    console.info(response);
                })
            }
          });
    </script>

这里我们看到设置VUE实例数据时，直接使用 this.data 就可以设置vue的数据了。

使用jquery的时候，代码如下：

<script type="text/javascript">
     new Vue({
            el:'#app',
            data:{data:""},
            beforeCreate:function(){
                var url="json.jsp";
                var _self=this;
                $.get(url,function(data){
                    _self.data=eval("(" + data +")");
                })
            }
          });
    </script>

这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用，这样使用起来没有vue-resource方便。