今天花了多少时间在编程的学习上: 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>