一文了解axios和vue的整合操作

<input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
         接口1:随机笑话
         请求地址:https://autumnfish.cn/api/joke/list
         请求方法:get
         请求参数:num(笑话条数,数字)
         响应内容:随机笑话
     */
        document.querySelector(".get").onclick=function (){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function (response){
                console.log(response);
            },function (err){
                console.log(err);
            })
        }

        /*
            接口2:用户注册
            请求地址:https://autumnfish.cn/api/user/reg
            请求方法:post
            请求参数:username(用户名,字符串)
            响应内容:注册成功或失败
        */
        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"李奕赫"}).then(function (response){
                console.log(response);
            },function (err){
                console.log(err);
            })
        }
    </script>

    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
         接口1:随机笑话
         请求地址:https://autumnfish.cn/api/joke/list
         请求方法:get
         请求参数:num(笑话条数,数字)
         响应内容:随机笑话
     */
        var app=new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function (){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response){
                        console.log(response.data)
                        that.joke=response.data;   /*这里不能使用this.joke，因为对象已经发生改变*/
                    },function (err){ })
                }
            },
        })
    </script>