vue.js实现请求数据的方法示例

 更新时间:2017年02月07日 17:00:59   作者:LoVye  
这篇文章主要给大家介绍了vue.js实现请求数据的方法示例,文中分别介绍了vue1.0和vue2.0的示例方法,需要的朋友可以参考借鉴,下面来一起看看吧。

vue2.0示例代码如下:

var vm = new Vue({
      el:"#list",
      data:{
        gridData: "",
      },
      mounted: function() {
        this.$nextTick(function () {
          this.$http.jsonp('http://***.com').then(function(res) {
            console.log(res.data)
            this.gridData = res.data;
          })
        })
      },
    })

vue2.0版本废弃了ready定义的方法,使用mounted来代替,不过需要加上this.$nextTick(function(){})

如果没有请求成功看一下vuejs的版本

1.0版本的写法是这样的

var vm = new Vue({
  el:"#list",
  data:{
    gridData: '',
  },
  ready: function() {
    this.$http.jsonp('http://***.com').then(function(res){
      this.$set('gridData', res.data);
    })
  },
})

总结

以上就是关于vue.js 请求数据的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • Vue中的无限加载vue-infinite-loading的方法

    Vue中的无限加载vue-infinite-loading的方法

    本篇文章主要介绍了Vue中的无限加载vue-infinite-loading的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue两个版本的区别和使用方法(更深层次了解)

    Vue两个版本的区别和使用方法(更深层次了解)

    在我们使用 vue时,我们可以引用两个不同版本的 Vue,分别是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它们的区别是什么呢,今天我们就来分析下这两个不同版本之间的区别,一起看看吧
    2020-02-02
  • Vue Router history模式的配置方法及其原理

    Vue Router history模式的配置方法及其原理

    这篇文章主要介绍了Vue Router history模式的配置方法及其原理,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue基础之模板和过滤器用法实例分析

    vue基础之模板和过滤器用法实例分析

    这篇文章主要介绍了vue基础之模板和过滤器用法,结合实例形式分析了vue模板与过滤器的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-03-03
  • vue 循环动态设置ref并获取$refs方式

    vue 循环动态设置ref并获取$refs方式

    这篇文章主要介绍了vue 循环动态设置ref并获取$refs方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue使用splice()删除数组中的一个数据 弹出窗口提示问题

    vue使用splice()删除数组中的一个数据 弹出窗口提示问题

    这篇文章主要介绍了vue使用splice()删除数组中的一个数据 弹出窗口提示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue 组件参数校验与非props特性的方法

    Vue 组件参数校验与非props特性的方法

    这篇文章主要介绍了Vue 组件参数校验与非props特性的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    这篇文章主要介绍了Vue 子组件更新props中的属性值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 使用vue-touch报priority错误的解决

    使用vue-touch报priority错误的解决

    这篇文章主要介绍了使用vue-touch报priority错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue使用sign-canvas实现在线手写签名的实例

    Vue使用sign-canvas实现在线手写签名的实例

    sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端,本文给大家分享Vue使用sign-canvas实现在线手写签名,感兴趣的朋友一起看看吧
    2022-05-05

最新评论