Vue入门基础（Axios请求）

时间 2020-02-16

标签 vue 入门基础 axios 请求繁體版

原文原文链接

axios.htmljavascript

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

<head>
    <meta charset="UTF-8">
    <!--引用cnd 的axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <h1>Axios请求</h1>
    <div id="app-vue-axios">

        <form @submit.prevent="onSubmit">
            <input type="text" v-model="todo.title">
            <input type="checkbox" v-model="todo.completed">
            <input type="submit" value="提交">
        </form>

        <!--get 请求-->
        <ul>
            <li v-for="todo in todos">
                <h1>{{todo.title}}</h1>
                <p v-if="todo.completed">{{todo.completed}}</p>
            </li>
        </ul>
    </div>
</body>
<script src="axios.js"></script>

</html>

axios.jshtml

const one=new Vue({
    el:"#app-vue-axios",
    data(){
        return{
           todos:[],
           todo:{
               title:"",
               completed:false
           }
        }
    },
    // mounted 是一个工做函数  打开页面前会自动执行
    mounted(){
        //axios api 请求接口 
        //get请求 请求成功后 从then中获取数据赋值给res
        axios.get("http://jsonplaceholder.typicode.com/todos")
        .then(res=>{
            this.todos=res.data;
        });
    },
    methods:{
        onSubmit(){
             //POST 请求
            axios.post("http://jsonplaceholder.typicode.com/todos",this.todo)
            .then(res=>{
                //console.log(res.data);
                this.todos.unshift(res.data);//对象加入到数组里
            });
        }
    }
});

页面效果vue