分为三个部分:
1.template模版：
|
1
2
3
4
5
6
|
<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操作:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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部分:
|
1
|
<todo-form :todos="todos"></todo-form> |
分三部分完成组件的构建，html提供容器，template编写详情，js操控流程（数据操作，将template填充到html等），大体概念是这样，还需继续深入
原文：https://www.cnblogs.com/fanmiaolan/p/11759066.html