今天花了多少時間在編程的學習上: 3
今天完成的事情：
1.從慕課網的學習上面轉移到了vue官網上面項目的學習
2.鎖定目標TodoMVC
3.過濾的寫法
{{ remaining | pluralize }} 這種在一個數據后面加上 | xxx的寫法, xxx為一個過濾的方法,在filter中定義好
4.類名里面的二元寫法
<li><a
href="#/completed" :class="{ selected: visibility == 'completed' }">
Completed</a></li>
//不明白原理, 但是這樣的寫法的意思是
//如果visibility等于completed值的話就將class的值設為'selected'
5.Trim()方法用于消除兩邊的空白, 是一個在處理字符時候的常用方法
6.一個有趣的寫法, 用于直接獲得消除空格之后的值
var value = this.newTodo && this.newTodo.trim()
7.v-cloak 用于防止頁面加載未完全成功時顯示變量名
8.運用下面的代碼去延遲掛載
app.$mount('.todoapp')
9.重新復習了一遍splice的作用
明天計劃的事情：
1.在保留html和css代碼的情況下重寫一遍js的部分
遇到的問題：
addTodo: function () {
var value = this.newTodo && this.newTodo.trim()
if (!value) {
return
}
this.todos.push({
id: todoStorage.uid++,
title: value,
completed : false
})
this.newTodo = '',
}
//id: todoStorage.uid++, 這一句寫法為什么能這么用
//這個寫法里面this的作用
2.編輯todo標題的實現 editTodo
editTodo: function (todo) {
this.beforeEditCache = todo.title
this.editedTodo = todo
},
<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)">
//這句里面的v-todo-focus的作用和@blur的作用
4.這個allDone的寫法
allDone: {
get: function () {
return this.remaining === 0
},
set: function (value) {
this.todos.forEach(function (todo) {
todo.completed = value
})
}
5.這句為什么可以直接編輯
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
