原生vue.js实现待办事项清单，支持增删改查_vue实现已办和待办_穿条秋裤到处跑的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

耍酷的豌豆 · mysql concat函数性能-掘金· 1 年前 ·

纯真的红酒 · 如何实现录音时，只录手机内部发出的声音，不录 ...· 1 年前 ·

逆袭的凉面 · （最新版）如何正确移除Selenium中的 ...· 1 年前 ·

小胡子的李子 · View.SetOnApplyWindowI ...· 1 年前 ·

精明的蘑菇 · 资料 |《机器学习实战：基于 ...· 1 年前 ·

< meta http-equiv = " content-type " content = " text/html; charset=UTF-8 " >  < link rel = " stylesheet " type = " text/css " href = " https://unpkg.com/todomvc-app-css@2.2.0/index.css " >  < script type = " text/javascript " src = " https://unpkg.com/vue@latest/dist/vue.js " > </ script > < title > Title </ title > < style > [v-cloak] { display : none ; </ style > </ head >  < section class = " todoapp " > < header class = " header " > < h1 > todos </ h1 > < input autofocus autocomplete = " off " placeholder = " What needs to be done? " class = " new-todo " v-model = " newTodo " @keyup.enter = " addTodo " > </ header >  < section class = " main " v-show = " todos.length " v-cloak >  < input id = " toggle-all " type = " checkbox " class = " toggle-all " > < ul class = " todo-list " >  < li v-for = " todo in filteredTodos " class = " todo " :key = " todo.id " :class = " {completed: todo.completed,editing: todo == editedTodo} " > < div class = " view " > < input class = " toggle " type = " checkbox " v-model = " todo.completed " > < label @dblclick = " editTodo(todo) " > { {todo.title}} </ label > < button class = " destroy " @click = " removeTodo(todo) " > </ button > </ div > < input class = " edit " type = " text " v-model = " todo.title " v-todo-focus = " todo == editedTodo " @blur = " doneEdit(todo) " @keyup.enter = " doneEdit(todo) " @key.esc = " cancelEdit(todo) " > </ section >  < footer class = " footer " v-show = " todos.length " v-cloak > < span class = " todo-count " > < strong > { {remaining}} </ strong > { {remaining | pluralize}} left </ span > < ul class = " filters " > < li > < a href = " #/all " :class = " {selected: visibility == ' all ' } " > All </ a > </ li > < li > < a href = " #/active " :class = " {selected: visibility == ' active ' } " > Active </ a > </ li > < li > < a href = " #/completed " class = " {selected: visibility == ' completed ' } " > Completed </ a > </ li > < button class = " clear-completed " @click = " removeCompleted " v-show = " todos.length > remaining " > Clear completed </ button > </ footer > </ section > < script > // 下面的代码，表示使用了浏览器的localStorage进行存储，同事定义了fetch()和save() let STORAGE_KEY = "todos-vuejs-2.0" ; let todoStorage = { fetch : function ( ) { let todos = JSON . parse ( localStorage . getItem ( STORAGE_KEY ) || "[]" ) ; todos . forEach ( function ( todo , index ) { todo . id = index ; } ) ; todoStorage . uid = todos . length ; return todos ; save : function ( todos ) { localStorage . setItem ( STORAGE_KEY , JSON . stringify ( todos ) ) ; // 定义过滤器，可以分别对ative、completed和all进行过滤 let filters = { all : function ( todos ) { return todos ; active : function ( todos ) { return todos . filter ( function ( todo ) { return ! todo . completed ; } ) ; completed : function ( todos ) { return todos . filter ( function ( todo ) { return todo . completed ; } ) ; // app Vue instance let app = new Vue ( { // app initial state data : { todos : todoStorage . fetch ( ) , newTodo : "" , editedTodo : null , visibility : "all" // 定义watcher // watch todos change for localStorage persistence watch : { todos : { handler : function ( todos ) { todoStorage . save ( todos ) ; deep : true // 定义computed properties，可以认为是用来过滤的 // http://vuejs.org/guide/computed.html computed : { filteredTodos : function ( ) { return filters [ this . visibility ] ( this . todos ) ; remaining : function ( ) { return filters . active ( this . todos ) . length ; allDone : { get : function ( ) { return this . remaining === 0 ; set : function ( value ) { this . todos . forEach ( function ( todo ) { todo . completed = value ; } ) ; // 定义过滤器 filters : { pluralize : function ( n ) { return n === 1 ? "item" : "items" ; // methods that implement data logic. // note there's no DOM manipulation here at all. // 核心方法，实现对于待办事项的增加、删除和修改 // 注意：这里没有任何直接操作html dom的代码 methods : { addTodo : function ( ) { let value = this . newTodo && this . newTodo . trim ( ) ; if ( ! value ) { return ; this . todos . push ( { id : todoStorage . uid ++ , title : value , completed : false } ) ; this . newTodo = "" ; // 删除待办事项 removeTodo : function ( todo ) { this . todos . splice ( this . todos . indexOf ( todo ) , 1 ) ; // 编辑待办事项 editTodo : function ( todo ) { this . beforeEditCache = todo . title ; this . editedTodo = todo ; // 把待办事项标记为：已完成 doneEdit : function ( todo ) { if ( ! this . editedTodo ) { return ; this . editedTodo = null ; todo . title = todo . title . trim ( ) ; if ( ! todo . title ) { this . removeTodo ( todo ) ; // 取消编辑 cancelEdit : function ( todo ) { this . editedTodo = null ; todo . title = this . beforeEditCache ; // 删除已经完成的待办事项 removeCompleted : function ( ) { this . todos = filters . active ( this . todos ) ; // a custom directive to wait for the DOM to be updated // before focusing on the input field. // http://vuejs.org/guide/custom-directive.html // 使用自定义的directive，也就是html中的<todo-focus> directives : { "todo-focus" : function ( el , binding ) { if ( binding . value ) { el . focus ( ) ; } ) ; // handle routing // 处理路由 function onHashChange ( ) { let visibility = window . location . hash . replace ( /#\/?/ , "" ) ; if ( filters [ visibility ] ) { app . visibility = visibility ; } else { window . location . hash = "" ; app . visibility = "all" ; window . addEventListener ( "hashchange" , onHashChange ) ; onHashChange ( ) ; // mount // 最后，使用vue.js渲染整个页面 app . $mount ( ".todoapp" ) ; </ script > < script crossorigin = " " type = " text/javascript " src = " https://codesandbox.io/static/js/watermark-button.76f1e5b66.js " > </ script > </ body > </ html >

运行效果：
在这里插入图片描述在文本框中输入内容及回车：
点击左侧圆点选项：
下面三个标签all、active、completed功能也比较清楚，active只显示没有被标记的项，completed只显示标记的项，即完成项，all则显示所有项。clear completed删除掉所有的完成项。

并且，页面支持浏览器缓存功能，使用同一种浏览器添加的数据，下次重新打开数据依然在，如果切换浏览器，如先使用firefox添加数据，再通过Google打开界面，是没有数据显示的。

2.单击待办项的前面选择框可实现未完成或已完成切换 3.双击待办内容可以修改里面的内容，修改完成后点击空白处或enter键都可实现修改，如果不想修改按Esc键可恢复初始内容。 4.单击待办 1、在输入框中输入待办事项并按回车键可以把内容添加到下面列表中，并且待办事项总数会随之增加 2.、点击待办事项列表中"√"可以将事件添加到已完成事件中，点击“×”按钮，该按钮可以删除该事项 3.、已完成事项中可以删除事件整个项目的结构：实现的效果图：身为互联网农民工的我们，提起 Todo List 大家肯定一点都不陌生，因为Todo List是一个圈内比较知名的案例，可以通过 Java, Python 等后端语言再以少量的前端 Html 语言辅助实现整个 Todo List 的增、删、改、查功能。今天分享的 Todo List 案例与常见的实现方式不太一样，因为今天分享的案例是由纯前端代码 Vue 组件化来实现的，完全没有后端语言的支撑，也能实现 Todo List功能的动态效果。 Vue.js 是什么这是 Vue 官网对 Vue 的介绍每个人都需要做一个待办事项清单，对吧？这是一个处理多个列表的单页应用程序，并且（在 mColor 的帮助下）使用漂亮的渐变显示。当前数据使用 HTML 5 本地存储进行持久化，但可以轻松扩展以将数据保存到后端数据库或您网站上更永久的内容。 matt[at]mattlag[dot]com To change this template use File | Settings | File Templates. <%@ page contentType="text/ html ;charset=UTF-8" 文章目录0 使用技术1 项目搭建1.1 创建项目1.2 搭建项目结构1.2.1 准备数据1.2.2 组件化开发1.2.3 引入element-ui2 开发模块2.1 Header模块2.2 Input模块2.3 List模块2.4 Item模块3 项目文件4 优化4.1 条件渲染4.1.1 旧版渲染4.1.2 新版渲染4.2 按需更新4.2.1 利用生命周期4.2.2 利用纯组件5 用户体验 0 使用技术 axios 请求数据 json-server 模拟数据 react 操作dom element-ui