[vue案例的知识点]todo-list

文章的原材料来自于vue的官方示例：https://cn.vuejs.org/v2/examples/todomvc.html，我们在学习过程中，试着对其中的一些知识点进行记录：

一、浏览器数据存储，为了方便，此处将数据存储到客户端的缓存中，使用localStorage,他的主要api有

　　localStorage.getItem(key)和localStorage.setItem(key,value)

二、对于localStorage中的数据采取json数组形式保存，因此在保存value和获取时候需要先做json和string的转化，ECMA5提供了两个转化方法：

　　将指定格式数据转为json：JSON.parse(string);将json转为string：JSON.stringify(json)

var TODO_KEY="vue-todo";

var todoStorage={
    fetch:function(){
        var todos=JSON.parse(localStorage.getItem(TODO_KEY)||'[]')
        todos.forEach(function(todo,index){
            todo.id=index;
        });
        todoStorage.uid=todos.length;
        return todos;
    },
    save:function(todos){
        localStorage.setItem(TODO_KEY,JSON.stringify(todos));
    }
}

三、使用hashchange监听浏览器地址栏变化

　　在单页应用同页跳转的情况下，添加监听window.addEventListener('hashchange',onHashChange)来获取地址栏的变化，然后可以使用window.location.hash来监听到地址栏的后缀变化，如果xxx.html#/all,此处值为"#/all",获取地址栏的值变化，此处主要根据地址栏的visibility过滤不同的内容

function onHashChange(){
    var visibility=window.location.hash.replace(/#\/?/,'');
    if(filters[visibility]){
        app.visibility=visibility;
    }else{
        window.location.hash='';
        app.visibility='all';
    }
}
window.addEventListener('hashchange', onHashChange)
onHashChange()

三、json或者数组的过滤

　　如果要根据todos中的completed的状态过滤掉对应的子项，需要使用filter，如过滤掉非completed的项，是如下写法

function(todos){
        return todos.filter(function(todo){
            return !todo.completed;
        });

四、json或者数组中的某一项，修改

　　如果要将todos的子项中的内容进行修改，需要使用forEach操作，如将所有completed修改为true，如下写法：

            this.todos.forEach(function(todo){
                todo.completed=true;
            });

五、自定义vue标签

        <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)">

在此input标签中，我们希望如果是正在编辑的todo时候，自动被选中，此处自定义了一个v-todo-focus标签，此标签的格式如下

  directives: {
    'todo-focus': function (el, value) {
      if (value) {
        el.focus()
      }
    }
  }

指令定义，官方提供了五个钩子函数来供我们使用，分别代表了一个组件的各个生命周期

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

在这里其他几个都好理解，关于模板更新（update）这里，本人的理解是：该指令所在的模板有变化而需要重新渲染的时候，比如当一个输入框的model发生了变化就会触发指令。当然此处说的比较模糊，具体的还有待研究。

六、v-cloak标签

vuejs做的界面加载过程中会闪现vue的变量，如{{msg}}，在标签加上v-cloak,在css定义可以解决此问题

[v-cloak] {
  display: none;
}

<section class="main" v-show="todos.length" v-cloak>

这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。

在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。问题来了，怎么才算是 ready 呢？这就需要了解 vuejs instance 的生命周期了

七、使用watch完成localStorage的写入操作

  watch: {
    todos: {
      handler: function (todos) {
        todoStorage.save(todos)
      },
      deep: true
    }
  },

在todo-list的应用中，整个操作过程中的增删改查操作很多，系统使用todos来保存每次操作后的结果，然后使用watch监控todos的变化，完成缓存的更新，注：deep表示深复制，即元素发生变化，也会导致他的变化

八、计算属性和观察属性

在todo-list有一个全选按钮，如果选中的时候，所有任务被标记为完成，如果任务全部完成，此标记也会被标记选中

1、以下是我的实现，对allDon进行watch，如果发生了改变，则修改所有任务状态，

        allDone:function(){
            this.allDone!=this.allDone;
            var selDone=this.allDone;
            this.todos.forEach(function(todo){
                todo.completed=selDone;
            });
        }

同时在computed计算remaining的时候，根据remaining修改allDone

        remaining:function(){
            var remaining=filters.active(this.todos).length;
            this.allDone=remaining===0?true:false;
            return remaining;
        }

2、以下是官方实现，使用computed的get和set操作allDone，减少了元素定义，也更为清晰

    allDone: {
      get: function () {
        return this.remaining === 0
      },
      set: function (value) {
        this.todos.forEach(function (todo) {
          todo.completed = value
        });
      }

九、数组的操作-使用push和slice进行添加数组元素和删除数组元素，略

十、使用filters进行格式化，此处其实可以使用computed进行实现

filters: {
    pluralize: function (n) {
      return n === 1 ? 'item' : 'items'
    }
  },

十一、在做var app=new Vue()的时候，我们可以不用指定元素，等其他初始化完成后，最后一步再使用mount进行绑定

// mount
app.$mount('.todoapp')

 十二、对于todo的编辑和展示切换

对于某一条todo，我们要求双击进行切换到编辑模式，回车切换到展示模式，我们的处理是：对于此todo，两种模式在页面上共存，通过method方法，改变对应的class，达到切换的目的。

      <li v-for="todo in filteredTodos"
        class="todo"
        :key="todo.id"
        :class="{ completed: todo.completed, editing: todo == editedTodo }">
        <div class="view">
          <input class="toggle" type="checkbox" v-model="todo.completed">
          <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
          <button class="destroy" @click="removeTodo(todo)"></button>
        </div>
        <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)">
      </li>

代码可以看到，显示todo的地方有一个div用于显示，一个input用于编辑，根据editedTodo来确定是否给li绑定editing的class，如果绑定后，class如下，显示edit，隐藏view

.todo-list li.editing .edit {
    display: block;
    width: 506px;
    padding: 12px 16px;
    margin: 0 0 0 43px;
}

.todo-list li.editing .view {
    display: none;
}