今日完成

Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Github开源地址： https://github.com/axios/axios

安装方法

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

GET 方法

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

GET 实例

new Vue({

  el: '#app',

  data () {

    return {

      info: null

    }

  },

  mounted () {

    axios

      .get('https://www.runoob.com/try/ajax/json_demo.json')

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

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

        console.log(error);

      });

  }

})

使用 response.data 读取 JSON 数据：

<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://www.runoob.com/try/ajax/json_demo.json')

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

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

        console.log(error);

      });

  }

})

</script>