当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue.js实现备忘录功能的方法

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

中国好声音重播,东胜区教育局,大唐女将樊梨花

这个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实现备忘录功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网