zoukankan      html  css  js  c++  java
  • vue 中使用 AJAX获取数据的方法

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

    看下例:

    <script type="text/javascript">
        
         new Vue({
                el:'#app',
                data:{data:""},
                created:function(){
                    var url="json.jsp";
                    var _self=this;
                    $.get(url,function(data){
                        _self.data=eval("(" + data +")");
                    })
                    /*
                    this.$http.get(url).then(function(data){
                        var json=data.body;
                        this.data=eval("(" + json +")");
                    },function(response){
                        console.info(response);
                    })*/
                }
              });
        </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方便。

  • 相关阅读:
    JAVA整理05---手写简单的linkedlist来学习linkedlist
    JAVA整理04---手写简单的arraylist来学习arraylist
    java整理03--常用类
    java整理02--面向对象深入
    每周学习进度
    软件工程课程总结
    梦断代码阅读笔记03
    scrum第二阶段项目冲刺_day10
    scrum第二阶段项目冲刺_day09
    scrum第二阶段项目冲刺_day08
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/6158612.html
Copyright © 2011-2022 走看看