vue教程:使用axios发送ajax请求

介绍

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

axios目录

例子

在 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请求


原文出处:https://malaoshi.top/show_1IXIb4sLSeX.html