vue.js實現任務列表(ToDoMVC)
阿新 • • 發佈:2019-02-18
;(function(){
// const todos = [
// {
// id:1,
// title:'吃飯',
// completed:true
// },
// {
// id:2,
// title:'睡覺',
// completed:false
// },
// {
// id:3,
// title:'寫程式碼',
// completed:true
// },
// ]
window.app = new Vue({
data:{
message:'todos_lzm1',
todos:JSON.parse(window.localStorage.getItem('todos') || '[]'),
todoText:'',
currentEditting:null,
filterText:'all'
},
//計算屬性是vue的一大特色
//一種帶有行為的屬性,本質是方法,本質是方法但是不能當做方法來呼叫,必須當做屬性來使用
//好處:相比方法的優勢是會快取計算的結果,效率很高
//計算屬性不是方法,只能當做屬性來使用
//
computed:{
//該成員就是一個方法,但是在使用的時候不能呼叫,
//簡寫方式,
// remainingCount(){
// return this.todos.filter(t => !t.completed).length
// }
//完整寫法
remainingCount:{
//當你訪問 remainingCount 時會預設呼叫 get() 方法
get(){
return this.todos.filter(t => !t.completed).length
},
//當你 例項.remainingCount = xxx 的時候會自動呼叫 set 方法
// set(){
// }
},
toggleAllStat:{
get(){
//計算屬性知道他依賴todos
//當 todos 發生改變的時候,計算屬性也會發生變化
return this.todos.every(t => t.completed)
},
set(){
//在自己的方法中呼叫自己就是訪問自己的 get 方法
const checked = !this.toggleAllStat
this.todos.forEach(item => {
item.completed = checked
})
}
},
filterTodos(){
switch(this.filterText){
case 'active':
return this.todos.filter(t => !t.completed)
break
case 'completed':
return this.todos.filter(t => t.completed)
break
default:
return this.todos
break
}
}
},
//監視成員的改變
watch:{
//當監視到 todos 改變時會呼叫 handler 方法
todos:{
handler(val,oldval){
//監視到 todos 的變化,把 todos 本次儲存記錄資料的狀態
window.localStorage.setItem('todos',JSON.stringify(this.todos))
},
deep:true //深度監視,只有這樣才能監視到 todos 孩子...孩子...的變化
}
},
methods:{
handleNewTodo(){//新增新的要完成的任務
//console.log('111')
const todoText = this.todoText.trim()
if(!todoText.length){//非空判斷
return
}
const todos = this.todos
todos.push({//將要新增的內容push到todos中
//如果資料元素為空就給1,否則就是最後一個元素的 id + 1
id:todos.length ? todos[todos.length-1].id+1:1,
title:todoText,
completed:false
})
this.todoText=''//新增完後清空
},
// handleToggleAll(e){//選中和取消所有任務項
// //0.繫結 checkbox 的 change 事件
// //1.獲取 CheckBox 的選中狀態
// //2.迴圈所有子任務項的選中狀態,將 checkbox 的選中狀態賦值給它們
// const checked = e.target.checked
// this.todos.forEach(item => {
// item.completed = checked
// })
// },
//當事件函式沒有傳引數的時候,第一個引數就是預設的事件原物件:event
//當事件函式有引數的時候,就沒有辦法獲取事件原函式:event
//可在傳遞引數的時候手動在呼叫方法的時候 $event 來接受 event 事件物件
handleRemoveTodo(index){//刪除單個任務項
//console.log(index)
this.todos.splice(index,1)
},
handleGetEdittingDblclick(todo){//雙擊獲取編輯框
console.log(todo)
this.currentEditting = todo
},
//儲存編輯任務,敲回車儲存
handleSaveEdit(todo,index,e){
//0.註冊繫結事件處理函式
//1.獲取文字框的資料
//2.資料校驗
// 如果資料為空,則刪除文字框
// 否則儲存編輯
//console.log(e.target.value)
const value = e.target.value
if(!value.length){//若為空,則刪除
this.todos.splice(index,1)
}else{ //儲存
todo.title = value
this.currentEditting = null//取消樣式
}
},
//按下esc鍵取消編輯,不儲存
handleCanceEditEsc(){
//取消樣式即可
this.currentEditting = null
},
handleClearCompleted(){ //點選clear completed清除已完成的選項
//注意不要在foreach中刪除元素,可以使用for迴圈,每刪一個可以手動的改變索引
for (var i = 0; i < this.todos.length; i++) {
if(this.todos[i].completed){
this.todos.splice(i,1)
i--
}
}
},
//獲取剩餘未完成任務數量
// getRemainCount(){
// return this.todos.filter(t => !t.completed).length
// }
}
}).$mount('#app')
//該事件只有 change 的時候才會執行,頁面初始化的時候不會執行
//註冊 hash(錨點) 的改變事件
window.onhashchange = function(){
app.filterText = window.location.hash.substr(2)
}
//頁面初始化的時候呼叫一次,保持路由狀態
window.onhashchange()
})()