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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
js动态创建标签示例代码
Jun 09 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
在elementui中Notification组件添加点击事件实例
Nov 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
财政专业求职信范文
2014/02/19 职场文书
元旦联欢会主持词
2014/03/26 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
最常使用的求职信
2014/05/25 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
龙猫观后感
2015/06/09 职场文书