vue学习笔记-todolist的实现

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

这里是前端页面

			

				新的事项
				
				添加
			
			
			

				

				
			
		

后台操作代码

Vue.component('todo-item', {
  				template: '\
    				
\
      					{{ title }}\
      					移除\
    				
\
  				',
  				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=''
					}
				}
			});

运行效果截图：