使用vue-cli3.0写一个todoList

看完vue的文档后准备做这么一个todolist的小demo，刚开始完全不知道如何下手，在网上看了一堆文章，但是都没有写到我的心坎上。今天通过自己摸索再加上看一些别人的文章，做出了一个自己还算满意的todolist。现在将整个过程写下来。

深度截图_选择区域_20181211205049.png

关于安装node和vue-cli的过程不在赘述，直接从创建工程开始

准备工作

首先创建工程

$ vue create todolist

因为这个项目中用到了bootstrap，所以等工程创建完成后安装bootstrap

$ npm install bootstrap --save

bootstrap安装完成后初步的准备工作就完成了，现在再来确定一下整个demo的功能和文档的结构
整个demo的功能是：

1. 输入框输入待办事项后点击添加，该事项会出现在todo区域内，输入框内的文字消失
2. todo区域内的事项显示为红色，点击某一事项后，该事项移入done区域
3. done区域内的事项显示为绿色，点击某一事项后，该事项消失

由功能可以看出首先需要一个输入的组件，然后需要一个显示todo区域的组件，最后再需要一个显示done区域的组件。
然后会发现第二个和第三个的功能差不多，所以整合为一个组件
所以整个demo总共需要两个组件
那么文档结构为

$ tree src/
src/
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── addNew.vue
│   └── theList.vue
└── main.js

app.vue为组件的入口
至此，准备工作完成

第一步

main.js是整个程序的入口文件，加载各个公用组件

import Vue from 'vue'
import App from './App.vue'    //页面入口文件
import 'bootstrap/dist/css/bootstrap.css'     //为项目引入bootstrap.css

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

这部分不存在不是太难理解

第二步

第二步要做的是让输入的组件跑起来

先来写addNew.vue
先写好模板

//addNew.vue

将input框的value值双向绑定到newItem上，然后监听按钮的点击事件。
当点击按钮时，判断newItem的值，如果newItem为空，说明输入框内没有输入值，不执行任何操作，如果不为空,则触发父组件的submitNewItem事件，并将组件内的newItem以参数的形式传递给这个自定义事件，这步执行完之后将newItem的值清空。
至此，添加模块就初步完成了。
接下来要在组件的入口文件APP.vue中注册这个组件

//APP.vue

首先在中监听我在addNew.vue中触发的自定义事件submitNewItem,然后用事件addNewItem处理这个自定义事件。下边这个

暂时用来显示添加的事件。

在

这个组件需要用到APP.vue里的todoList数组，所以需要先在

首先在中将todoList绑定到List中，这样todoList就被传递到子组件中，然后再监听子组件中的自定义事件handleJudge，如果监听到这个事件后，就执行方法toDone，并将自定义事件的参数index传递给这个这个方法，这个方法要做的就是根据参数index取出某一个值this.todoList.splice(index,1)[0]，并将这个值添加至doneList末尾this.doneList.push(this.todoList.splice(index,1)[0])

现在第三步就已经做完了

第四步

这一步完成done区域的功能

//theList.vue

因为done区域用的组件和todo区域用的组件是同一个组件，所以首先需要给组件增加一个判断的功能，判断这个组件是在todo区域还是在done区域，这个判断的条件listType就是起这么一个作用，由父组件决定显示在那个区域，由子组件判断并执行相应的方法，然后在点击事件调用的方法里进行判断，如果listType为false，就说明这个组件在todo区域，这个点击执行的操作就应该是将点击项移入done区域，如果为true，就说明点击项是在done区域，此时就应该执行删除的操作。这里改变了props的写法，规定List是一个数组，规定listType为一个默认值为false的布尔值，

APP.vue

//APP.vue

在done区域中，首先将doneList绑定到List上，然后再将判断组件显示区域的的条件true绑定到ListType，由于默认为false，所以todo区域的不用绑定。然后监听自定义事件handleDlete，监听到该事件后，将参数传入其调用的方法toDelete中，toDelete方法的作用就是根据传入的索引删除掉doneList数组中相应的值this.doneList.splice(index,1);。

现在整个demo的核心功能都已经实现，接下来就是写相应的样式，我直接套用的bootstrap，所以这部分不再赘述，至于两个组件中显示不同颜色，则是在计算属性中判断ListType，并绑定相应的类。

最后为源码

main.js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

addNew.vue

theList.vue

以上