vue教程：使用axios发送ajax请求-马育民老师

# 介绍

Vue.js 2.0 版本以后，推荐使用 第三方库：**axios** 来完成 ajax 请求

[axios目录](https://www.malaoshi.top/show_1IXIaoV25yK.html "axios目录")

# 例子

在 axios部分（数据）参见：[axios get请求 ](https://www.malaoshi.top/show_1IXIZteqkMr.html "axios get请求 ")

```
<div id="app">{{msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
<script>
    axios.defaults.timeout=3000;
    axios.defaults.baseURL = 'http://localhost';

var app = new Vue({
        el: '#app', //找到id是app的元素
        data: { //数据
            msg: 'Hello Vue!'
        },
        mounted:function(){
            that=this//this是vue实例
            axios.get('/hello.json').then(function(res){
                console.log(res)
                console.log(res.data)
                that.msg=res.data.msg //在axios函数中，this表示axios实例，而不是vue实例
            })
        }
    })
</script>
```

在页面上显示 `hello vue！`

### vue的mounted()方法

这里需要用到 vue 的 `mounted` 方法，在模板渲染成html后调用，通常是初始化页面完成后，再做一些处理，如：发送ajax请求

原文出处：http://malaoshi.top/show_1IXIb4sLSeX.html