axios基本使用

最新推荐文章于 2022-09-07 21:07:00 发布

还不下马受降

最新推荐文章于 2022-09-07 21:07:00 发布

阅读量133

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43865846/article/details/116352925

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax不是一门语言，而是一种访问方式，异步的js和xhml。
<script>标签引入axios，添加@click事件以后，根据输入的需要查询的信息条数，查询笑话结果。然后v-for显示到页面。
引用方法简单，axios.get().then()为基础，在连接中加入动态的需要查询的条数。
值得注意的是，在axios下，由于this指针不再是vue实例中的指针，如果在axios中使用this指针，指向的不一样，因此把vue实例中的this复制给that，让that和this指向同一个地址，然后在axios中使用that就可以访问

学习自B站黑马程序员教程，接口亦是，可访问

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
     <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
  
    <div id="music">
          <button v-on:click="searchsongs" >更新笑话</button> 
          <input type="number" name="piece" id="num" v-model="num">
          <table border="1px" style="width: 50%; margin: auto;">
              <tr>
                  <td style="background-color: skyblue;">笑话</td>
                  
                
              </tr>
                <tr v-for="item in joke">

                <td>{{item}}</td>
          
                </tr>
          </table>
    </div>

</body>
   
<SCRipt>
    var search = new Vue({
        el: '#music',
        data:{
            songname:'',
            joke: [],
            num: 3,
        },
        methods: {
            searchsongs : function(){
                that=this;
                console.log(this.num)
              axios.get("https://autumnfish.cn/api/joke/list?num="+this.num)
                .then(function(response){ 
                    console.log(response);
                    that.joke=response.data.jokes;
                })
            }
        }
    })
</SCRipt>
 

</script>
 
</html>

在这里插入图片描述

还不下马受降

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios基本使用

ajax不是一门语言，而是一种访问方式，异步的js和xhml。<script>标签引入axios，添加@click事件以后，根据输入的需要查询的信息条数，查询笑话结果。然后v-for显示到页面。引用方法简单，axios.get().then()为基础，在连接中加入动态的需要查询的条数。值得注意的是，在axios下，由于this指针不再是vue实例中的指针，如果在axios中使用this指针，指向的不一样，因此把vue实例中的this复制给that，让that和this指向同一个地址，然后在
复制链接

扫一扫

专栏目录