位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > GET 方法
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 安装方法 下一篇: POST 方法

我们可以简单的读取 JSON 数据:

GET 实例

new Vue({

  el: '#app',

  data () {

    return {

      info: null

    }

  },

  mounted () {

    axios

      .get('https://域名/json_demo.json')

      .then(response => (this.info = response))

      .catch(function (error) { // 请求失败处理

        console.log(error);

      });

  }

})

使用 response.data 读取 JSON 数据:

 

GET 实例

<div id="app">

  <h1>网站列表</h1>

  <div

    v-for="site in info"

  >

    {{ site.name }}

  </div>

</div>

<script type = "text/javascript">

new Vue({

  el: '#app',

  data () {

    return {

      info: null

    }

  },

  mounted () {

    axios

      .get('https://域名/json_demo.json')

      .then(response => (this.info = response.data.sites))

      .catch(function (error) { // 请求失败处理

        console.log(error);

      });

  }

})

</script>

 

GET 方法传递参数格式如下:

 

传递参数说明

// 直接在 URL 上添加参数 ID=12345

axios.get('/user?ID=12345')

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

 

// 也可以通过 params 设置参数:

axios.get('/user', {

    params: {

      ID: 12345

    }

  })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });


上一篇: 安装方法 下一篇: POST 方法
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)