Vue-todolist

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

vue-todolist

完成成品Vue-todolist

基於Vue的TodoList示例,麻雀雖小,五臟俱全

技術棧

Vue localStorage hash

功能描述(使用說明)

  • 新增備忘錄(輸入標題後回車新增,如果內容為空或只有空格會清空,什麼都不新增)

  • 刪除備忘錄(點選標題後面的叉)

  • 完成備忘錄(點選標題前面的核取方塊)

  • 編輯備忘錄(雙擊標題進入編輯模式)

  • 取消編輯備忘錄(按ESC或者失去焦點時)

  • 完成編輯備忘錄(按回車鍵完成[如果內容為空的時候會自動刪除],此時也會呼叫到失去焦點事件)

  • 一鍵完成所有備忘錄(點選第一行的核取方塊)

  • 過濾任務,顯示全部,未完成,已完成的備忘錄(點選全部,未完成,已完成按鈕)

  • 清空已完成備忘錄(點選清空已完成)

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()
}
}
}

相關文章

前端開發 最新文章