axios简单使用样例

最新推荐文章于 2024-07-25 09:24:40 发布

反正我是不学了

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量46

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端 html

本文链接：https://blog.csdn.net/weixin_51504215/article/details/130033831

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios+vue</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击会生成一条笑话" @click="get">
    <p>{{ content }}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var app = new Vue({
        el:"#app",
        data:{
            content:"好笑的笑话"
        },
        methods:{
           get:function (){
               var that  = this
                axios.get("https://autumnfish.cn/api/joke").then(
                        function (response){
                            console.log(response.data);
                            that.content = response.data},
                        function (err){
                            console.log(err)}
                )
            }
        }
    })
</script>
</body>
</html>

本样例使用axios向一个笑话网站发送一个获取请求，并返回获取值到页面上。

通过按钮绑定一个点击事件，点击事件会触发axios请求。