vue.js实现备忘录功能的方法

2019-11-19 16:07:31

字体：大中小

来源：转载

供稿：网友

这个vue实现备忘录的功能demo是K在github上找到的，K觉得这是一个用来对vue.js入门的一个非常简单的demo，所以拿在这里共享一下。

（尊重他人劳动成果，从小事做起~ demo原github地址：https://github.com/vuejs/vue）

一、实现效果

二、代码展示

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>备忘录</title>    <link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />    <style>[v-cloak] { display: none; }</style>  </head>  <body>  <section class="todoapp">   <header class="header">    <h1>todos</h1>    <input class="new-todo"     autofocus autocomplete="off"     placeholder="What needs to be done?"     v-model="newTodo"     @keyup.enter="addTodo">   </header>   <section class="main" v-show="todos.length" v-cloak>    <input class="toggle-all" type="checkbox" v-model="allDone">    <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)"       @keyup.esc="cancelEdit(todo)">     </li>    </ul>   </section>   <footer class="footer" v-show="todos.length" v-cloak>    <span class="todo-count">     <strong>{{ todos.length }}</strong> {{ remaining | pluralize }} left    </span>    <ul class="filters">     <li><a href="#/all" rel="external nofollow" :class="{ selected: visibility == 'all' }">All</a></li>     <li><a href="#/active" rel="external nofollow" :class="{ selected: visibility == 'active' }">Active</a></li>     <li><a href="#/completed" rel="external nofollow" :class="{ selected: visibility == 'completed' }">Completed</a></li>    </ul>    <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">     Clear completed    </button>   </footer>  </section>    <footer class="info">      <p>双击编辑一条备忘录</p>    </footer>  </body>  <script language="JavaScript" src="js/director.js"></script>  <script language="JavaScript" src="js/vue.js"></script>  <script language="JavaScript" src="js/index_vue.js"></script></html>

// 本地缓存设置// 防止页面关闭后，数据全部丢失的问题var STORAGE_KEY = 'todos-vuejs-2.0'var todoStorage = {    // 获取本地存储中的内容  fetch:function(){    // JSON.parse()解析一个json字符串    //  localStorage.getItem 从本地存储中获取STORAGE_KEY字段的值    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]');    //  foreach遍历todos，两个参数分别为遍历出的每一个子单元及对应的索引    todos.forEach(function(todo,index){      todo.id = index;    })    todoStorage.uid = todos.length;    return todos;  },    // 保存时将内容写进本地存储  save:function(todos){    // localStorage.setItem 将todos转化成字符串存入本地存储，键名为STORAGE_KEY    localStorage.setItem(STORAGE_KEY,JSON.stringify(todos))  }  }// 可视化状态过滤设置//  包括全选（all）、选择未完成（active）、选择已完成（completed）var filters = {  all:function(todos){    return todos;  },    //  filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。  active:function(todos){    return todos.filter(function(todo){      return !todo.completed;    })  },    completed:function(todos){    return todos.filter(function(todo){      return todo.completed;    })  }}// vue实例化var app = new Vue({    //  data 参数设置  data:{    todos:todoStorage.fetch(),    newTodo:'',    editedTodo:null,    visibility:'all'  },    //  watch 监视todos在本地储存中的变化  watch:{    todos:{      handler:function(todos){        todoStorage.save(todos)      },      deep:true    }  },    //  computed 检测数据发生变动时执行函数  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        })      }          }  },    //  methods 方法设置  methods:{    addTodo:function(){      var 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)    }  },    directives:{    'todo-focus':function(el,binding){      if(binding.value){        el.focus()      }    }  }})// hashchange URL的片段标识符更改触发function onHashChange(){  var visbility = window.location.hash.replace(/#//?/, '');  if(filters[visbility]){    app.visibility = visbility  }else{    window.location.hash = '';    app.visbility = 'all'  }}window.addEventListener('hashchange',onHashChange)onHashChange()// mount 手动挂载app.$mount('.todoapp')

以上这篇vue.js实现备忘录功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：JS 判断某变量是否为某数组中的一个值的3种方法(总结)

下一篇：AugularJS从入门到实践(必看篇)