原生vue.js实现待办事项清单，支持增删改查

源码部分：

<!DOCTYPE html>
<html lang="en">
<head><!--设置页面的utf-8编码格式--><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--引入了对应的css文件--><link rel="stylesheet" type="text/css" href="https://unpkg.com/todomvc-app-css@2.2.0/index.css"><!--引入对应的vue.js外部文件--><script type="text/javascript" src="https://unpkg.com/vue@latest/dist/vue.js"></script><title>Title</title><style>[v-cloak] {display: none;}</style>
</head>
<body>
<!--定义了header，包括文字的提示和输入框-->
<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"><!--v-for循环--><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)"></li></ul></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></ul><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 instancelet app = new Vue({// app initial statedata: {todos: todoStorage.fetch(),newTodo: "",editedTodo: null,visibility: "all"},// 定义watcher// watch todos change for localStorage persistencewatch: {todos: {handler: function (todos) {todoStorage.save(todos);},deep: true}},// 定义computed properties，可以认为是用来过滤的// http://vuejs.org/guide/computed.htmlcomputed: {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打开界面，是没有数据显示的。

原生vue.js实现待办事项清单，支持增删改查相关推荐

Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
如何基于Restful ABAP Programming模型开发并部署一个支持增删改查的Fiori应用
Jerry之前的文章30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用发布之后,有朋友问我,"没错, 我是在你的文章里看到了Fiori应用的 ...
30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用
2016年时,Jerry曾经写过一系列关于SAP Fiori Smart Template(现在更名为Fiori Elements了)的博客,介绍了所谓的MDD开发方法论 - Metadata Dri ...
JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查参考文章: (1)JS组件系列--BootstrapTable+Kno ...
JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(一) 参考文章: (1)JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案( ...
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
vue结合php增删改查实例,从vue基础开始创建一个简单的增删改查的实例
1.安装vue-clicnpm install vue-cli -g --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目 ...
vue实现ToDoList待办事项/清单
1.这个功能运用的知识点比较多,computed计算,watch监听,directives自定义指令和methods定义事件,还有一些属性绑定,列表渲染,表单绑定指令,按键修饰符,表单修饰符等... ...

原生vue.js实现待办事项清单，支持增删改查

原生vue.js实现待办事项清单，支持增删改查相关推荐

最新文章

热门文章