suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Implementierung der Memo-Funktion in vue.js

Detaillierte Erläuterung der Implementierung der Memo-Funktion in vue.js

巴扎黑
巴扎黑Original
2017-07-23 15:26:262106Durchsuche

Diese Demo der Vue-Implementierung der Memo-Funktion wurde von K auf Github gefunden. K dachte, es sei eine sehr einfache Demo für den Einstieg in vue.js, also habe ich sie hier geteilt.

(Respektieren Sie die Ergebnisse der Arbeit anderer, beginnen Sie mit kleinen Dingen ~ Ursprüngliche Github-Adresse der Demo:)

Erzielen Sie Ergebnisse

2. Codeanzeige

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierung der Memo-Funktion in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der jsPlumb-Flussdiagramm-ErfahrungNächster Artikel：Zusammenfassung der jsPlumb-Flussdiagramm-Erfahrung

In Verbindung stehende Artikel

Mehr sehen