Vue 的学习 0622

今天花了多少时间在编程的学习上: 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.参照上面提到的项目来仿写一遍。

遇到的问题：