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)//监听