众所周知，Vuejs是现在最流行的三大前端开发框架之一，极大的方便了我们前端工作者的工作。这是作者整理的一个列表vue写的一个todolist的全过程。1、新建文件夹，配置环境变量。安装的命令行为：npminit-ynpmi-Stodomvc-app-cssunderscorevue2.新建一个HTML文件，复制格式化代码段，网址：http://todomvc.com/examples/b...将代码段中的显示内容改为中文3.导入Vuejscss等文件4.创建一个新的vue实例（框架）5.整个实现过程将数据写入到todoListindatadata:{//备忘数组todoList:[//任务是一个对象，text表示任务名称，checked为true表示已经完成，false表示未完成{text:'学习Vue',checked:false},{text:'LearningReact',checked:false}]},6.在li元素中添加v-for指令，代码如下：<liclass="completed"v-for="(todo,index)intodoList":key="'todo-'+index">7.输入任务显示在methodmethods:{//EdittaskeditTodo(index){//设置当前正在编辑的索引this.editingIndex=index;}}18.添加classCustomdirective,(writteninscript)://注册一个全局自定义指令v-focusVue.directive('focus',{//当绑定元素插入到DOM中时inserted:function(el){//焦点元素el.focus();},update(el){el.focus();}})19.使用自定义指令添加和保存todo其实就是取消了输入框保存方法methods:{...//保存任务，因为是动态绑定的，不需要保存，隐藏输入框即可saveTodo(todo){this.editingIndex=-1if(todo.text.trim().length<1){这个。deleteTodo(todo)}}}20.未完成任务数计算：{//未完成任务数activeCount(){returnthis.todoList.filter(item=>{return!item.checked}).length;}}21.将数据保存到本地localStorage，新建一个store.js文件[]');}捕获（错误）{返回[]；}},save(todoList){localStorage.setItem(STORAGE_KEY,JSON.stringify(todoList));}}引入store.js修改data中的初始化数据：data:{todoList:todoStorage.fetch()}22.给vue实例添加一个propertychangewatch,global//observepropertychangewatch:{todoList:{deep:true,handler:todoStorage.save}},23.完成所有函数添加计算属性：computed:{//是否所有任务都完成allDone:{get(){//未完成的任务数为0，表示全部完成，全部完成返回truereturnthis.activeCount===0;},set(value){this.todoList.forEach(todo=>{todo.checked=value});}}}使用v-model绑定完成所有功能：24.实现过滤全部、已完成、未完成的功能在实例化的Vue对象外放一个普通的过滤对象：```//一个普通的过滤对象，用于过滤任务列表varfilters={all:function(todos){returntodos;},active:function(todos){returntodos.filter(function(todo){return!todo.checked;});}，已完成：函数（待办事项）{返回待办事项。过滤器（函数（待办事项）{返回待办事项。已检查；}）；}};```增加一个属性visibility，表示我们是要显示全部，未完成，还是完成的数据：{visibility:'all',...}修改未完成数量的计算属性，使用上面的filters对象来过滤computed:{...//未完成任务数activeCount(){returnfilters.active(this.todoList).length;},}25添加任务过滤的computed属性：computed:{...//过滤任务列表filteredTodoList:function(){returnfilters[this.visibility](this.todoList);}}在DOM中添加点击事件，修改点击时的visibility属性all不完整完成26.修改列表渲染的循环语句：添加一个变量得到hash值：varvisibility=location.hash.substr(location.hash.indexOf('/')+1);能见度=能见度===''？'all':visibility将可见性属性的值设置为当前变量:data:{visibility:visibility,...}27.点击清除已完成的功能：添加一个已计算的已完成任务数属性：computed:{...//完成的任务数completedCount(){returnfilters.完成（this.todoList）。长度；}}添加清除完成的方法：methods:{...//清除已完成的任务列表clearCompleted(){this.todoList=filters.active(this.todoList)}}28、DOM元素绑定事件，以及v-show:0">Clearcompleted以上就是整理的全部内容，如有不好或写错的请指出我及时改正
