原生vue.js实现待办事项清单，支持增删改查 |
您所在的位置：网站首页 › 待办清单怎么写 › 原生vue.js实现待办事项清单，支持增删改查 |
原生vue.js实现待办事项清单，支持增删改查
|
源码部分： Title [v-cloak] { display: none; } todos {{todo.title}} {{remaining}} {{remaining | pluralize}} left All Active Completed Clear completed // 下面的代码，表示使用了浏览器的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中的 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");运行效果： 并且，页面支持浏览器缓存功能，使用同一种浏览器添加的数据，下次重新打开数据依然在，如果切换浏览器，如先使用firefox添加数据，再通过Google打开界面，是没有数据显示的。 |
在文本框中输入内容及回车： 
点击左侧圆点选项： 
下面三个标签all、active、completed功能也比较清楚，active只显示没有被标记的项，completed只显示标记的项，即完成项，all则显示所有项。clear completed删除掉所有的完成项。【本文地址】