Detailed explanation of implementing memo function in vue.js-JS Tutorial-php.cn

Detailed explanation of implementing memo function in vue.js

巴扎黑

Release： 2017-07-23 15:26:26

Original

2034 people have browsed it

This demo of vue’s implementation of memo function was found by K on github. K thought this was a very simple demo for getting started with vue.js, so I shared it here.

(Respect the results of other people’s work, start with small things ~ Original github address of the demo:)

1. Achieve results

2. Code display

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>备忘录</title><link rel="stylesheet" type="text/css" href="css/index.css?1.1.11" /><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" :class="{ selected: visibility == &#39;all&#39; }">All</a></li>  <li><a href="#/active" :class="{ selected: visibility == &#39;active&#39; }">Active</a></li>  <li><a href="#/completed" :class="{ selected: visibility == &#39;completed&#39; }">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?1.1.11"></script><script language="JavaScript" src="js/vue.js?1.1.11"></script><script language="JavaScript" src="js/index_vue.js?1.1.11"></script></html>

Copy after login

// 本地缓存设置// 防止页面关闭后，数据全部丢失的问题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')

Copy after login

The above is the detailed content of Detailed explanation of implementing memo function in vue.js. For more information, please follow other related articles on the PHP Chinese website!