一、json形式のAPIインターフェースを探しています.
http://jsonplaceholder.typicode.com/todos

二、app.jsでFetchメソッドを使ってインターフェース中のデータをgetする.

new Vue({
    el: "#vue-app",
    data() {
        return {
            todos: [],
        };
    },
    mounted() {//        
        //fetch api    
        fetch("http://jsonplaceholder.typicode.com/todos")
            .then(res => {
                return res.json();
            })
            .then(todos => {
                this.todos = todos;
            });
    },

 三、index.の中でtodosを巡回しました.

 
Fetch  
    

        

            

                
{{todo.title}}：{{todo.completed}}
            
        
        {{todos}}
    

四、get要求効果

五、 htmlにフォームを追加

六、app.jsにFetchメソッドを追加したPOST要求

    methods: {
        onSubmit() {
            //console.log(this.todo);
            fetch("http://jsonplaceholder.typicode.com/todos", {
                method: "POST",
                body: JSON.stringify(this.todo),
                headers: {
                    "Content-type": "application/json"
                }
            }).then(res => {
                return res.json();
            }).then(todo => {
                //console.log(todo);
                this.todos.unshift(todo);
            })
        },
    }

七、効果展示
       フォームにフィールドを追加して、フォームを提出したら、図のように遍歴します.