VueDemo中的TodoMVC

因为自己之前写了个Todolist,看到官方也有个TodoList.所以打算研究一下官方的代码,看看自己的代码不足之处并加以改进.

官方TodoMVC
图一

我们先一部分一部分来
首先我们要知道的是数据是如何储存在localStorage

var STORAGE_KEY = 'todos-vuejs-2.0'

var todoStorage = {
    //将数据提取出来
  fetch: function () {
    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach(function (todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  // 将数据存储到localStorage
  save: function (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

过滤器

var filters = {
  //返回全部项目
  all: function (todos) {
    return todos
  },
  //返回未完成的项目
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.completed//filter()只会返回true的数组元素
    })
  },
  //返回完成的项目
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.completed
    })
  }
}

以下是还未输入内容时的框

<header class="header">
    <h1>todos</h1>
    <input class="new-todo"
      autofocus autocomplete="off"//off表示这个input不会自动获得焦点
      placeholder="What needs to be done?"
      v-model="newTodo"
      @keyup.enter="addTodo">
  </header>

输入完第一个任务的界面
图二

<section class="main" v-show="todos.length" v-cloak>
//v-cloak说明下面这段代码是隐藏到编译结束为止的,也就是说下面那段代码只有在输入完第一个任务名才会显示出来的
    ①<input class="toggle-all" type="checkbox" v-model="allDone">
    <ul class="todo-list">
      ②<li v-for="todo in filteredTodos"//filteredTodos引用computed中的函数
        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>
    </ul>
  </section>

!!全选和取消全选任务

①这个input是图二中的第一段代码的复选框,它的功能是全选和取消全选.它实现这个功能的js代码如下:

  computed: {
    filteredTodos: function () {
      return filters[this.visibility](this.todos)
    },
    remaining: function () {//返回未完成任务的数量
      return filters.active(this.todos).length
    },
    allDone: {
      get: function () {
        return this.remaining === 0
      },
      set: function (value) {
        this.todos.forEach(function (todo) {
          todo.completed = value
        })
      }
    }
  },

这个get函数和set函数是访问器属性,它们不包含数据值,在读取访问器属性的就会代用getter函数来返回有效的值.在写入访问器属性时会调用setter函数并传入新值.
回到代码当中,这段代码的作用就是,在读取allDone的时候调用 get函数,使图二左下角的任务未完成数为零,在点击①的时候传入value,调用set函数将每一个任务的todo.completed都改成与allDone相同的value,从而实现全选或全不选

!!点击完成任务

③<input class="toggle" type="checkbox" v-model="todo.completed">

这里用v-model进行双向数据绑定,把③这个复选框绑定todo.completed,使得input为√的时候则todo.completed为true

!!编辑任务

④<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
...
⑤<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)">
...js代码↓...
methods:{
    editTodo: function (todo) {
    //将原本的任务title赋予到临时的beforeEditCache中,然后放在cancelEdit中可以调用
      this.beforeEditCache = todo.title
      this.editedTodo = todo
    },
    doneEdit: function (todo) {
      if (!this.editedTodo) {
        return
      }
      this.editedTodo = null
      todo.title = todo.title.trim()//去除空格
      if (!todo.title) {
        this.removeTodo(todo)
      }
    },
    cancelEdit: function (todo) {
      this.editedTodo = null
      todo.title = this.beforeEditCache
    },
}
...
directives: {
    'todo-focus': function (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  }

在④的时候采用@dblclick双击才能触发editTodo方法,值得注意的是,④和⑤在位置上通过css(通过:class实现样式的替换)重合了起来,实现了⑤替换④的操作,然后在⑤中利用了 v-todo-focus将焦点从④转换到了⑤.然后⑤中通过键盘操作来进行完成编辑和取消编辑的方法操作

!!删除任务

跟编辑任务差不多,采用了splice方法进行删除操作

removeTodo: function (todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
    },

!!切换任务状态可见

    <ul class="filters">
    <!-- 选择哪种状态可见 -->
      <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
      <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
      <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
    </ul>
    ...
    computed: {
        filteredTodos: function () {
          return filters[this.visibility](this.todos)
        },
    }

在li中通过:class来给visibility赋值,visibility值变了之后使得css发生相应的变化
然后url变化调用onHashChange 方法,若url后缀变为#/active,

function onHashChange () {
  var visibility = window.location.hash.replace(/#\/?/, '')//获取url后缀并去除/#\/?/多余符号
  if (filters[visibility]) {
  //若filters[visibility]存在则赋予给这个组件内的visibility值(visibility值变化则使computed中的filteredTodos函数返回值变化,则实现切换任务状态可见)
    app.visibility = visibility
  } else {
    window.location.hash = ''//若后缀为空则使组件内的visibility值为'all'
    app.visibility = 'all'
  }
}

window.addEventListener('hashchange', onHashChange)//监听