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 浮动广告实现代码
Dec 25 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
jquery实现数字输入框
2017/02/22 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
实例讲解python函数式编程
2014/06/09 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
幼儿园数学教学反思
2014/02/02 职场文书
文案策划专业自荐信
2014/07/07 职场文书
安全环保演讲稿
2014/08/28 职场文书
挂靠协议书
2015/01/27 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL