【IMWeb训练营作业】Todo List制作

最新推荐文章于 2020-03-02 09:28:20 发布

原创最新推荐文章于 2020-03-02 09:28:20 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了一个使用Vue.js开发的任务管理器应用，包括页面布局和核心JavaScript代码。该应用支持添加、删除任务，标记任务为完成或未完成，并提供过滤功能以查看所有任务、仅未完成任务或已完成任务。

一、效果图

1、初始状态

2、添加信息：完成与未完成任务比对

3、显示所有任务

4、显示未完成任务

5、显示已完成任务

二、核心代码

1、页面部分

        
  
			
   
				
    
					
     任务计划列表
    
			
   
		
  
		
  
			
   
				
    
					
     添加任务：
					
     
				
    
				
    
     {{noCheckeLength}}个任务未完成
    
				
    
					
     
						
      所有任务
					
     
				
    
				
    
					
     
						
      未完成的任务
					
     
				
    
				
    
					
     
						
      已完成的任务
					
     
				
    
				
    
					
     任务列表：
					
     
						
      未添加任务
						
       
         
          
         {{item.title}}

2、JS部分

			var store = {
				save(key, value) {
					localStorage.setItem(key, JSON.stringify(value));
				},
				fetch(key) {
					return JSON.parse(localStorage.getItem(key)) || [];
				}
			}
			var list = store.fetch("vue");
			var filter = {
				all: function(list) {
					return list;
				},
				finished: function(list) {
					return list.filter(function(item) {
						return item.isChecked;
					})
				},
				unfinished: function() {
					return list.filter(function(item) {
						return !item.isChecked;
					})
				}
			}
			var vm = new Vue({
				el: ".container",
				data: {
					list: list,
					todo: "",
					edtorTodos: '',
					beforeTitle: '',
					visibility: "all"
				},
				watch: {
					list: {
						handler: function() {
							store.save("miaov-new-class", this.list);
						},
						deep: true
					}
				},
				computed: {
					noCheckeLength: function() {
						return this.list.filter(function(item) {
							return !item.isChecked
						}).length
					},
					filteredList: function() {
						return filter[this.visibility] ? filter[this.visibility](list) : list;
					}
				},
				methods: {
					addTodo() {
						this.list.push({
							title: this.todo,
							isChecked: false
						});
						this.todo = '';
					},
					deleteTodo(todo) {
						var index = this.list.indexOf(todo);
						this.list.splice(index, 1);
					},
					edtorTodo(todo) {
						console.log(todo);
						this.beforeTitle = todo.title;
						this.edtorTodos = todo;
					},
					edtorTodoed(todo) {
						this.edtorTodos = '';
					},
					cancelTodo(todo) {
						todo.title = this.beforeTitle;
						this.beforeTitle = '';
						this.edtorTodos = '';
					}
				},
				directives: {
					"focus": {
						update(el, binding) {
							if(binding.value) {
								el.focus();
							}
						}
					}
				}
			});

			function watchHashChange() {
				var hash = window.location.hash.slice(1);
				vm.visibility = hash;
			}
			watchHashChange();
			window.addEventListener("hashchange", watchHashChange);