axios结合vue在线获取一条笑话_app

1.导入引入vue和axios在线地址

    
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

2.创建一个div容器

在div容器里面放一个在线获取笑话的按钮，以及渲染笑话的p标签，通过v-on指令绑定具体的方法给按钮。

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

joke是定义在Vue实例中的数据，getJoke是通过axios获取笑话的方法，文章下面均会介绍。

3.创建一个Vue实例

在里面通过el绑定div容器，在data中定义了一个为joke的变量，定义了通过axios获取笑话的getJoke方法。
注意，由于this在经过axios前后会发生改变，所以我们需要将this保存起来。

<script>
        /*
        接口:随机获取一条笑话
        请求地址:https://autumnfish.cn/api/joke
        请求方式:get
        请求参数:无
        响应内容:随机笑话
        */
       var app=new Vue({
           el:"#app",
           data:{
               joke:"很好笑的笑话"
           },
           methods:{
               getJoke:function(){
                   //因为this在经过axios会改变，所以需要将axios保存起来
                   var that=this;
                   axios.get("https://autumnfish.cn/api/joke")
                   .then(function(response){
                       console.log(response);
                       console.log(response.data);
                       that.joke=response.data;
                   },function(error){
                       console.log(error);
                   })
               }
           }
       })
    script>

4.完整代码展示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios+vuetitle>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}p>
    div>
    <script>
        /*
        接口:随机获取一条笑话
        请求地址:https://autumnfish.cn/api/joke
        请求方式:get
        请求参数:无
        响应内容:随机笑话
        */
       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);
                       console.log(response.data);
                       that.joke=response.data;
                   },function(error){
                       console.log(error);
                   })
               }
           }
       })
    script>
body>
html>