Vue的交互

vue本身不支持交互,所以在交互时需要引入模块vue-resource.js

1.直接获取文件内的内容:

'use strict';
window.onload=function(){
  new Vue({
    el:'body',
    data:{
      a:12
    },
    methods:{
      get:function(){
        this.$http.get('a.txt').then(function(res){
          console.log(res.data);
        },function(err){alert(err)});
      }
    }
  });
};

2.get通过get.php'

'use strict';
window.onload=function(){
  new Vue({
    el:'body',
    data:{
      d:12
    },
    methods:{
      get:function(){
        this.$http.get('get.php',{'a':1,'b':4}).then(function(res){
          console.log(res.data);
        },function(err){console.log(err.status)});
      }
    }
  });
};

3.post通过post.php'

'use strict';
window.onload=function(){
  new Vue({
    el:'body',
    data:{
      a:1
    },
    methods:{
      post:function(){
        this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){
          alert(res.data)
        },function(err){console.log(err.data)});
      }
    }
  });
}

};4.通过jsonp获取数据

'use strict';
window.onload=function(){
  new Vue({
    el:'body',
    data:{
      d:12
    },
    methods:{
      get:function(){
        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{wd:4},{jsonp:'cb'}).then(function(res){
          alert(res.data.s);
        },function(err){console.log(err.status)});
      }
    }
  });
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容