前端进阶Vue框架-----axios库（get和post）

最新推荐文章于 2022-12-28 15:25:19 发布

小不言啊

最新推荐文章于 2022-12-28 15:25:19 发布

阅读量101

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61656944/article/details/122989077

版权

首先，使用axios想要下载好包。

下载地址：axios - npm

进入地址直接往下找，找到如图CDN的下载地址

然后打开地址保存文件，存在文件中，方便导入 axios.js

然后再通过script src="文件的位置" 就导入了、

axios介绍：

get请求相对的方便了很多

  <title>Document</title>
    <script src="/lib/vue.js"></script>
    <script src="axios.js"></script>
    <style>
        li{
            overflow: hidden;
            list-style: none;
            padding: 10px;
        }

        li img{
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="handleFetch()">get请求</button>

        <ul>
            <li v-for="data in datalist" :key="data.filmId">
                <img :src="data.poster">
                {{data.name}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:[]
            },
            methods:{

                //axios  get请求方式

                handleFetch(){
                   axios.get("/json/maizuo.json").then(res =>{

                       this.datalist = res.data.data.films
                   })
                }
            }
        })
    </script>
    
</body>

post请求方式：

小不言啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端进阶Vue框架-----axios库（get和post）

首先，使用axios想要下载好包。下载地址：axios - npm进入地址直接往下找，找到如图CDN的下载地址然后打开地址保存文件，存在文件中，方便导入 axios.js然后再通过script src="文件的位置" 就导入了、axios介绍：get请求相对的方便了很多 <title>Document</title> <script src="/lib/vue.js"></script> ...
复制链接

扫一扫