Vue怎么制作Todo List网页

这篇"Vue怎么制作Todo List网页"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"Vue怎么制作Todo List网页"文章吧。

以下是HTML部分

 
添加任务：
  
  
   {{unCheckedLength}}个任务未完成
  
   所有任务   未完成任务   完成任务  
 
 
  还没有添加任何任务  
   
    
     
            {{item.title}}     
     ×    
       
  
 

Vue实例部分

var vm = new Vue({ el: ".main", data: {  list:list,  things:"",  editItem:"",  beforeTitle:"",  visibility:"all",  inputId:"", },  watch:{  list:{   handler:function(){    store.save("todolist",this.list)   },   deep:true  } }, computed:{  unCheckedLength(){   return this.list.filter(function(item){    return item.isChecked == false   }).length  },  filteredList(){      return filter[this.visibility] ? filter[this.visibility](this.list) : list  } }, methods: {  addTodo(ev){   if(this.things !== ""){    var item = {     title:this.things,     isChecked:false,     }    this.list.push(item)   }       this.things = "";  },  deleteTodo(item){   var index = this.list.indexOf(item);   this.list.splice(index,1);  },  editTodo(item){    this.beforeTitle = item.title;   this.editItem = item  },  edited(item){   this.editItem = ""  },  cancel(item){   item.title = this.beforeTitle;   this.editItem = "";   this.beforeTitle = ""  } }, directives:{  "focus":{            update(el,binding){    if(binding.value){     el.focus()    }   }  } }});

这是一个基本的Vue实例，el是和DOM元素连接的挂载点，data是代理数据，在DOM的内容中如果要用到代理数据就用{{xxx}}表示，比如{{list}}，{{visibility}}，而当data中的代理数据出现在DOM标签里的时候就不需要用花括号。

new Vue({ el: ".main", data: {  list:list,  things:"",  editItem:"",  beforeTitle:"",  visibility:"all",  inputId:"", }}）

Vue要用大的方法都放在methods部分

methods: {   addTodo(ev){    if(this.things !== ""){     var item = {      title:this.things,      isChecked:false,      }     this.list.push(item)    }        this.things = "";   },   deleteTodo(item){    var index = this.list.indexOf(item);    this.list.splice(index,1);   },   editTodo(item){     this.beforeTitle = item.title;    this.editItem = item   },   edited(item){    this.editItem = ""   },   cancel(item){    item.title = this.beforeTitle;    this.editItem = "";    this.beforeTitle = ""   } }

还有计算属性

computed:{  unCheckedLength(){   return this.list.filter(function(item){    return item.isChecked == false   }).length  },  filteredList(){      return filter[this.visibility] ? filter[this.visibility](this.list) : list }}

观察属性

watch:{  list:{   handler:function(){    store.save("todolist",this.list)   },   deep:true  }}

自定义属性

directives:{  "focus":{            update(el,binding){    if(binding.value){     el.focus()    }   }  }}

以上就是关于"Vue怎么制作Todo List网页"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。