分为三个部分:
1.template模版:

<script type="text/x-template" id="todo-form-template">
    <form v-on:submit.prevent="addtodo(newtodo)">
        <input type="text" v-model="newtodo.title">
        <button type="submit">提交</button>
    </form>
</script>

2.vue.js的js操作:

Vue.component('todo-form',{
    template:'#todo-form-template',
    props:['todos'],
    data(){
        return {
            newtodo:{id:null,title:'',completed:false}
        } 
    },
    methods:{
        addtodo(newtodo){
            this.todos.push(newtodo);
            this.newtodo = {id:1,title:'',completed:false};
            // console.log(this.newtodo);
        },
    }
});

3:html部分:

<todo-form :todos="todos"></todo-form>

分三部分完成组件的构建,html提供容器,template编写详情,js操控流程(数据操作,将template填充到html等),大体概念是这样,还需继续深入