Vue 的学习 0622

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