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


Posted in Javascript onJuly 10, 2017

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

(尊重他人劳动成果,从小事做起~  demo原github地址:https://github.com/vuejs/vue)

一、实现效果

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

二、代码展示

<!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实现备忘录功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
javascript demo 基本技巧
Dec 18 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
JS跨域总结
Aug 30 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 #Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 #Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 #Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 #Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 #Javascript
vue子父组件通信的实现代码
Jul 09 #Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
类的另类用法--数据的封装
2006/10/09 PHP
php读取msn上的用户信息类
2008/12/05 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
浅析Python基础-流程控制
2016/03/18 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python找出完数的方法
2018/11/12 Python
24式加速你的Python(小结)
2019/06/13 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
python中常见错误及解决方法
2020/06/21 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
大学应届生的自我评价
2014/03/06 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年客服工作总结范文
2015/04/02 职场文书