vue学习笔记-todolist的实现

使用vue来实现一个todolist是一个相对来说简单的事情
首先应该是前端页面，

这里是前端页面

<div id="todolistexample">
			<form v-on:submit.prevent="addNewTodo">
				<label for="new-todo">新的事项</label>
				<input v-model="newTodoText" 
					id="new-todo" 
					placeholder="添加新的待办事项">
				<button>添加</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>

后台操作代码

Vue.component('todo-item', {
  				template: '\
    				<li>\
      					{{ title }}\
      					<button v-on:click="$emit(\'remove\')">移除</button>\
    				</li>\
  				',
  				props: ['title']
			})
		
			var todoexample=new Vue({
				el: '#todolistexample',
				data:{
					newTodoText:'',
					todos:[
						{
							id:1,
							title:'洗碗',
						},
						{
							id:2,
							title:'洗衣服',
						},
						{
							id:3,
							title:'叠被子',
						}
					],
					nextTodoId:4,
				},
				methods:{
					addNewTodo:function(){
						this.todos.push({
							id: this.nextTodoId++,
							title: this.newTodoText
						})
						this.newTodoText=''
					}
				}
			});

运行效果截图：