vue组件应用

在实际开发中，我们经常会遇到动态增加节点的需求这个时侯如果你会用vue的组件，就能解决实际问题。
这里附上代码

	<div id="todo-list-example">
	  <form v-on:submit.prevent="addNewTodo">
	    <label for="new-todo">Add a todo</label>
	    <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
	    <button>Add</button>
	  </form>
	  <ul>
	    <li
	      is="todo-item"
	      v-for="(todo, index) in todos"
	      v-bind:key="todo.id"
	      v-bind:title="todo.title"
	      v-on:remove="todos.splice(index, 1)"
	    ></li>
	  </ul>
	</div>
</body>

new Vue({
el: ‘#todo-list-example’,
data: {
newTodoText: ‘’,
i:0,
todos: [
{
id: 1,
title: ‘Do the dishes’,
},
{
id: 2,
title: ‘Take out the trash’,
},
{
id: 3,
title: ‘Mow the lawn’
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.nextTodoId
})
// this.newTodoText = “”
}
}
})