介绍

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

例子

在 axios部分（数据）参见：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请求