今天花了多少时间在编程的学习上: 3
今天完成的事情:
1.在完成了官网的一个小例子的仿写之后目标盯上了github上面一个抓取豆瓣电影并展示的 <a href="https://github.com/superman66/vue2.x-douban">项目</a>
2.理了一遍暂时对于项目的结构有点头绪,接下来需要找一个youtube的视频将过程再理一次然后自己用印象笔记总结下来, 以后照着这个路径去走。
3.上次计划的重写js的部分已经完成了,直接用codepen写的保存了在里面。
4.下面这句常用来加一的手段
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的作用
5.编辑todo标题的实现,里面的变量一用来在取消的动作中回复名字,变量2在这里实际上用做一个调整去触发相应的方法,详情见代码。市级上直接改变title就可以改变本地的值所以不需要写太多的代码
editTodo: function (todo) {
this.beforeEditCache = todo.title
this.editedTodo = todo
},
6.todo-focus就是上面提到的在满足条件后执行的方法,这个是自己注册的标签,以后会用到明天写一个专题
<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的作用
7.这个allDone的写法set用来切换所有元素的完成值,而get则是用来在set执行之前把完成的值设为false(仅在元素完成值为true的时候需要)。不然的话在true状态下第一次点击会失效
allDone: {
get: function () {
return this.remaining === 0
},
set: function (value) {
this.todos.forEach(function (todo) {
todo.completed = value
})
}
8.这句为什么可以直接编辑
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
答: 这一句并不可以编辑,而是通过这一句让焦点自动聚焦在了input框里面,实际上编辑的是input而不是label
明天计划的事情:
1.参照上面提到的项目来仿写一遍。