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 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 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
php cookie的操作实现代码(登录)
2010/12/29 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php常用正则函数实例小结
2016/12/29 PHP
一个实用的php验证码类
2017/07/06 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
介绍下static、final、abstract区别
2015/01/30 面试题
档案工作个人总结
2015/03/03 职场文书
如何用python清洗文件中的数据
2021/06/18 Python