vue-todolist
完成成品Vue-todolist
基於Vue的TodoList示例,麻雀雖小,五臟俱全
技術棧
Vue + localStorage + hash
功能描述(使用說明)
-
新增備忘錄(輸入標題後回車新增,如果內容為空或只有空格會清空,什麼都不新增)
-
刪除備忘錄(點選標題後面的叉)
-
完成備忘錄(點選標題前面的核取方塊)
-
編輯備忘錄(雙擊標題進入編輯模式)
-
取消編輯備忘錄(按ESC或者失去焦點時)
-
完成編輯備忘錄(按Enter鍵完成[如果內容為空的時候會自動刪除],此時也會呼叫到失去焦點事件)
-
一鍵完成所有備忘錄(點選第一行的核取方塊)
-
過濾任務,顯示全部,未完成,已完成的備忘錄(點選全部,未完成,已完成按鈕)
-
清空已完成備忘錄(點選清空已完成)
Vue相關知識點練習:
載入環境
npm init -y
npm i -S underscore vue todomvc-app-css
vim index.html
複製格式化後的html
引入css
將英文標題換成中文標題
引入vue.js
新建vue的例項
寫一個預設的任務:todoList: [{}]
el選項掛載DOM
// 新建一個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()
}
}
}