摘要:完成成品基于的示例,麻雀雖小,五臟俱全技術棧功能描述使用說明添加備忘錄輸入標題后回車添加如果內容為空或只有空格會清空,什么都不添加刪除備忘錄點擊標題后面的叉完成備忘錄點擊標題前面的復選框編輯備忘錄雙擊標題進入編輯模式取消編輯備忘錄按或者
vue-todolist 完成成品Vue-todolist
基于Vue的TodoList示例,麻雀雖小,五臟俱全
技術棧Vue + localStorage + hash
功能描述(使用說明)添加備忘錄(輸入標題后回車添加,如果內容為空或只有空格會清空,什么都不添加)
刪除備忘錄(點擊標題后面的叉)
完成備忘錄(點擊標題前面的復選框)
編輯備忘錄(雙擊標題進入編輯模式)
取消編輯備忘錄(按ESC或者失去焦點時)
完成編輯備忘錄(按回車鍵完成[如果內容為空的時候會自動刪除],此時也會調用到失去焦點事件)
一鍵完成所有備忘錄(點擊第一行的復選框)
過濾任務,顯示全部,未完成,已完成的備忘錄(點擊全部,未完成,已完成按鈕)
清空已完成備忘錄(點擊清空已完成)
Vue相關知識點練習: 加載環境el選項掛載DOMnpm init -y
npm i -S underscore vue todomvc-app-css
vim index.html
復制格式化后的html
引入css
將英文標題換成中文標題
引入vue.js
新建vue的實例
寫一個默認的任務:todoList: [{}]
// 新建一個Vue的實例對象 var todoapp = new Vue({ // 掛載 el: ".todoapp", // 數據 data: { // 備忘錄數組 todoList: [ // 一個任務就是一個對象,text表示任務的名稱,checked為true表示已完成,false表示未完成 { text: "學Vue", checked: false }, { text: "學React", checked: false } ] }, 方法 methods: { }, // 計算屬性 computed: { } })屬性
data: { newTodo: "", todos: todoStorage.fetch(), editedTodo: null, beforeEditCache: "", visibility }計算屬性(get,set)
computed: { //顯示任務總數量 showTodos() { return this.todos.length > 0 }, //未完成 activeCount() { return filters.active(this.todos).length }, //已完成 completedCount() { return filters.completed(this.todos).length }, //判斷所有任務 allDone: { get() { return this.activeCount === 0 }, set(value) { this.todos.map(todo => { todo.completed = value }) } }, //判斷 filteredTodos() { return filters[this.visibility](this.todos) } }
//store.js的判斷獲取 (function(){ var STORAGE_KEY = "todos" window.todoStorage = { fetch() { try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]") } catch(err) { return []; } }, save(todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) } } })();屬性觀察
var filters = { all: todos => todos, active: todos => todos.filter(todo => !todo.completed), completed: todos => todos.filter(todo => todo.completed) } var visibility = location.hash.substr(location.hash.indexOf("/")+1) visibility = visibility === "" ? "all" : visibility watch: { todos: { deep: true, handler: todoStorage.save//判斷當前應顯示的內容 } }方法
methods: { addTodo() { this.newTodo = this.newTodo.trim() if (!this.newTodo) { return } this.todos.unshift({ title: this.newTodo, completed: false }) this.newTodo = "" }, removeTodo(todo) { var index = this.todos.indexOf(todo) this.todos.splice(index, 1) }, editTodo(todo) { this.editedTodo = todo this.beforeEditCache = todo.title }, doneEdit(todo) { if (!this.editedTodo) { return; } this.editedTodo = null; todo.title = todo.title.trim() if (!todo.title) { this.removeTodo(todo) } }, cancelEdit(todo) { if (this.editedTodo) { todo.title = this.beforeEditCache this.editedTodo = null } }, removeCompleted() { this.todos = filters.active(this.todos) } }指令
directives: { focus: { update(el) { el.focus() } } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51508.html
閱讀 1877·2021-11-19 09:40
閱讀 2594·2021-08-30 09:46
閱讀 2177·2021-08-03 14:01
閱讀 2648·2019-08-30 10:54
閱讀 1197·2019-08-29 16:38
閱讀 1440·2019-08-29 11:02
閱讀 2536·2019-08-28 18:16
閱讀 1679·2019-08-28 18:09