VUE快速入门02-Axios通信

VUE快速入门02-Axios通信

一，使用axios发送ajax请求 

vue本身不具备发送ajax的请求，所以要借助第三方库来完成；

1.在1.x版本发送ajax请求可以使用vue-resource，不过现在vue-resource不在维护，官方推荐使用axios代替；

使用cdn引入即可:

<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

找一个json文件

{
  "name":"java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

 

通过我们的axions来进行访问

<script>

    let vm= new Vue({
        el: "#app",
        mounted(){
            axios.get('data.json').then(response=>console.log(response.data))

        }

    });
</script>