Vue 中的 Axios 使用

最新推荐文章于 2022-09-23 09:56:58 发布

小鸟哗啦啦

最新推荐文章于 2022-09-23 09:56:58 发布

阅读量189

点赞数

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

本文链接：https://blog.csdn.net/vampire10086/article/details/107386442

版权

VUE 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

Axios 中文文档地址

axios 的显著优势在于代码量较 fetch 少了很多

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue fetch</title>
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Fetch请求</h1>
    <div id="vue-app">
        <!-- post 请求 -->
        <form @submit.prevent="submit">
            <input type="text" v-model="todo.title" />
            <input type="checkbox" v-model="todo.completed" />
            <input type="submit" value="提交" />
        </form>


        <ul>
            <li v-for="todo in todos">
                <h1>{{todo.title}}</h1>
                <p v-if="todo.completed">{{todo.completed}}</p>
            </li>
        </ul>


    </div>

    <script src="./app.js"></script>
</body>

</html>

app.js

const app = new Vue({
    el: "#vue-app",
    data() {
        return {
            todos: [],
            todo: {
                title: '',
                completed: false
            }
        }
    },
    mounted() {
        // axios get 请求接口
        axios.get('http://jsonplaceholder.typicode.com/todos')
            .then(res => {
                this.todos = res.data
            })
    },
    computed: {},
    methods: {
        //axios post 请求接口
        submit() {
            axios.post('http://jsonplaceholder.typicode.com/todos', this.todo)
                .then(res => {
                    console.log(res.data);
                    this.todos.unshift(res.data);
                })
        }
    }
})

小鸟哗啦啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 中的 Axios 使用

Axios 中文文档地址axios 的显著优势在于代码量较 fetch 少了很多HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue fetch</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/v
复制链接

扫一扫