🌵Vue网络应用

2022-12-05 76

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 🌵Vue网络应用

1. 网络应用

Vue结合网络数据开发应用

2. axios

功能强大的网络请求库

使用方法：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址？key=value&key2=values//////////).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value}).then(function(response){},fucntion(err){})
复制代码

<script>
    $(function () {
        //编写jQuery相关代码
        $(".get").click(function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response) {
                for (var i in response.data["jokes"]) { console.log(response.data["jokes"][i]); }
            }, function (err) {
                console.log(err);
            })
        });
        $(".post").click(function () {
            axios.post("https://autumnfish.cn/api/user/reg", { username: "发生发个方法" }).then(function (response) {
                console.log(response);
            }, function (err) {
                console.log(err);
            })
        })
    });
</script>
<body>
    <input type="button" value="来3个笑话" class="get">
    <input type="button" value="哈哈哈" class="post">
</body>
复制代码

3.axios+vue

axios如何结合vue开发网络应用

语法：

var app = new Vue({
    el:"#app,
    data:{
        joke:"搞笑的笑话"
    }，
    methods:{
        getjokes:function(){
            axios.get("地址").then(function(response){},function(){});
        }
    }
})
复制代码