实现 vue+axios接口小应用

最新推荐文章于 2023-08-23 16:59:30 发布

cdada_26

最新推荐文章于 2023-08-23 16:59:30 发布

阅读量108

点赞数

分类专栏： VUE 文章标签： vue ajax

本文链接：https://blog.csdn.net/cdada_26/article/details/113476137

版权

VUE 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.效果展示
在这里插入图片描述

2. 步骤解析

导入vue.js和axios

2.定义方法 getJoke
3.axios应用
这里的接口是get请求 所以用axios.get(“https://autumnfish.cn/api/joke”)
如果是post、put等方式就对应的请求，（）里面是接口地址
下面是回调函数，返回接口请求到的内容，resp是定义的结果参数，

  .then(function(resp){
                        //这里的this不能访问到joke，所以在要通过外面定义的变量_this
                        // console.log(resp.data);
                        // console.log(this.joke);
                        _this.joke=resp.data;

                        // this.joke=resp.data
                    }

4.注意在回调函数里，不能访问到外面的joke，所以要先在外面的定义一个var _this=this;

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>study</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
    
   
    <div id="app">
        
           <button type="button" @click="getJoke" >笑话</button></button>  
           <p v-text="joke">{{joke}}</p> 
      
    </div>
</body>

    <script>
      
        var app=new Vue({
              el:"#app",
              data:{
                  joke:"这是一个很好笑的笑话"
               
              },

              methods:{
                  
                getJoke:function(){
                    console.log(this.joke);
                    //这里的this能访问到joke，所以在这里定义一个变量
                    var _this=this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(resp){
                        //这里的this不能访问到joke，所以在要通过外面定义的变量_this
                        // console.log(resp.data);
                        // console.log(this.joke);
                        _this.joke=resp.data;

                        // this.joke=resp.data
                    }

                    )


                }
                
              }
        })
        
    </script>
</html>

cdada_26

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
实现 vue+axios接口小应用

1.效果展示2. 步骤解析导入vue.js和axios2.定义方法 getJoke3.axios应用这里的接口是get请求所以用axios.get(“https://autumnfish.cn/api/joke”)如果是post、put等方式就对应的请求，（）里面是接口地址下面是回调函数，返回接口请求到的内容，resp是定义的结果参数， .then(function(resp){ //这里的this不能访问到joke，所以在要通过外
复制链接

扫一扫