Vue 不睡觉教程3 - 来点实在的：自动计算剩余时间的任务列表

名字灵感来自我的书《HBase不睡觉书》 意为让你看了也不会想睡觉的教程 ：）

目标

前两课教的是入门和文件结构。都没有什么实在的东西。这次我们要来点实在的。我们要做出一个待办列表。这个待办列表有以下特点：

1. 可以自动从文本中抽取出这件事情的开始时间
2. 可以显示当前距离这件事情的开始时间还有多久，比如：23:40 回家 (还有 6 小时 36 分 15 秒)
3. 如果当前时间已经超过了计划时间，则以灰色字体显示任务，并加上删除线

通过这个例子我们可以学到以下知识点

1. v-for属性
2. v-bind:key属性
3. v-on属性
4. 在vue中使用bootstrap
5. 在vue中使用localStorage
6. watch属性
7. computed属性
8. 在vue中定义私有方法
9. webpack自动打包
10. v-if, v-else-if, v-else属性
11. v-show属性

背景

• vue版本：2.5.16
• 文件结构基于上节课的文件结构: Vue不睡觉教程2 大家可以直接从 https://github.com/alexxiyang/learn-vue 下载源码，下载后使用git checkout lesson2 命令切换到lesson2的源码

注意事项

 在说本节课的步骤之前，先提醒大家，该完代码记得用以下命令编译后才能用浏览器看到你的更改

npx webpack

编译后记得要访问的页面文件不是根目录下的index.html。那只是源文件。你需要访问 dist/index.html。

创建TodoList组件

修改App.vue

我们先来构建项目框架。这个项目只有一个组件：TodoList。

将App.vue中之前的 import 引用 修改为 import TodoList from './components/TodoList' 就像这样

import TodoList from './components/TodoList.vue'

然后在template模板代码块中引用它，并在components对象中引用它。修改完的App.vue是这样的：

<template>
  <div id="app">
    <TodoList/>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'app',
  components: {
    TodoList
  }
}
</script>

新建TodoList.vue组件

将HelloVue.vue删掉。然后在src/components文件夹下新建TodoList.vue组件，组件内容为

<template>
   <div id="todolist">{
  { message }}</div>
</template>

<script>
export default {
  name: 'TodoList',
  data: function() {
    return {
      message: '这是一个待办列表'
    }
  }
}
</script>

照例使用 npx webpack打包，然后访问 http://learn-vue/dist/index.html 。如果成功，你就可以 看到 “这是一个待办列表” 的字样。

显示任务列表(v-for)

既然是一个待办列表，那么核心的数据对象就应该是一个array。让我们来新建这个array

data: function() {
    return {
      taskList: [
        "7:00 学英语", 
        "10:00 学Vue"
      ]
    }
  }

我们来使用v-for来显示它

<template>
   <div id="todolist">
     <table>
       <thead>
         <th>任务</th>
       </thead>
      <tbody>
        <tr v-for="task in taskList">
          <td>{
  { task }}</td>
        </tr>
      </tbody>
     </table>
   </div>
</template>

显示的效果为：

如果你的task是一个object，你可以使用以下方式来显示它的属性

<tr v-for="task in taskList">
   <td>{
  { task.id }} {
  { task.name}}</td>
</tr>

如果你使用的是 visual studio code，那么有可能看到以下错误提示：

Elements in iteration expect to have 'v-bind:key' directives.

这是因为当vue要求当使用v-for来显示列表时，需要使用v-bind:key来标定列表主键，就像这样

<tr v-for="task in taskList" v-bind:key="task.id">
          <td>{
  { task.id }} {
  { task.name }}</td>
        </tr>

因为我们的例子过于简单了，每个纪录只是一行字符串，所以可以忽略这个错误提示。在本例中我们不需要理会这个错误提示。但是在实际的项目中，请一定加上:key。

为什么要加上v-bind:key？

以下引用自vue官网：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的