使用vue-cli3.0写一个todoList 使用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.cssVue.config.productionTip = falsenew 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数组，所以需要先在

【使用vue-cli3.0写一个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 = falsenew Vue({ render: h => h(App), }).$mount('#app')

App.vue

addNew.vue

theList.vue

以上