使用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
<template>
<input type="text" v-model="newItem">
<button @click="handleAdd">添加</button>
</template>
<script>
export default {
name:'addNew',
data(){
return{
newItem:""
}
},
methods:{
handleAdd:function(){
if(this.newItem == "" ){
alert("不能为空");
return;
}
this.$emit('submitNewItem',this.newItem);
this.newItem = "";
}
}
}
</script>
将input
框的value
值双向绑定到newItem
上,然后监听按钮的点击事件。
当点击按钮时,判断newItem
的值,如果newItem
为空,说明输入框内没有输入值,不执行任何操作,如果不为空,则触发父组件的submitNewItem
事件,并将组件内的newItem
以参数的形式传递给这个自定义事件,这步执行完之后将newItem
的值清空。
至此,添加模块就初步完成了。
接下来要在组件的入口文件APP.vue中注册这个组件
//APP.vue
<template>
<div id="app">
<h1>todoList</h1>
<addNew @submitNewItem="addNewItem"></addNew>
<p v-for="(item,index) in todoList" :key = "index">{{item}}</p>
</div>
</template>
<script>
import addNew from './components/addNew';
export default {
name:"app",
data(){
return {
todoList:[]
}
},
methods:{
addNewItem: function(newItem){
this.todoList.push(newItem);
}
},
components: {
addNew
}
}
</script>
首先在<addNew>
中监听我在addNew.vue中触发的自定义事件submitNewItem
,然后用事件addNewItem
处理这个自定义事件。下边这个<p>
暂时用来显示添加的事件。
在<script>
中首先引入addNew
组件,然后在data
中定义一个todoList
的数组用来存放未完成事件,具体如何添加,就在methods
中执行addNewItem
,这个函数的参数newItem
就是addNew
组件中this.$emit('submitNewItem',this.newItem);
中的this.newItem
,将这个newItem
添加到todoList
的末尾。
现在增加模块就算是完成了。
第三步
第三步要完成todo区域的所有功能
先写theList.vue
//theList.vue
<template>
<ul>
<li v-for="(item,index) in List" :key="index" @click="judgeItem(index)">{{item }}</li>
</ul>
</template>
<script>
export default {
name:"theList",
props:["List"],
methods:{
judgeItem:function(index){
this.$emit("handleJudde",index)
}
}
}
</script>
这个组件需要用到APP.vue里的todoList
数组,所以需要先在<script>
中用props
传递父组件的todoList
。现在再看<template>
,因为传递过来的数据是一个数组,所以在这<li>
里边用v-for
来遍历数组。最后还有一个功能是点击列表某一项,该项移入done区域,就相当于取出某一项,放入done区域。取出和放入的操作是在APP.vue
内实现的,组件里要做的就是把要操作的这一项的索引返回给APP.vue
,所以接下来监听<li>
的点击事件,并将点击 的这一项的索引以参数传给点击事件调用的方法,这个方法是生成一个自定义事件,并把参数index
传递给这个自定义事件,现在在组件里要做的工作就完成了,然后再看APP.vue
//APP.vue
<template>
<div id="app">
<h1>todoList</h1>
<addNew @submitNewItem="addNewItem"></addNew>
<thelist @handleJudge="toDone" :List="todoList"></thelist>
<p v-for="(item,index) in doneList">{{item}}</p>
</div>
</template>
<script>
import addNew from './components/addNew';
import thelist from './components/theList';
export default {
name:"app",
data(){
return {
todoList:[],
doneList:[]
}
},
methods:{
addNewItem: function(newItem){
this.todoList.push(newItem);
},
toDone: function(){
this.doneList.push(this.todoList.splice(index,1)[0])
}
},
components: {
addNew,
thelist
}
}
</script>
首先在<thelist>
中将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
<template>
<ul>
<li v-for="(item,index) in List" :key="index" @click="judgeItem(index)">{{item}}</li>
</ul>
</template>
<script>
export default {
name:"theList",
props:{
List:{
type:Array,
required:true,
},
ListType:{
type:Boolean,
default:false,
}
},
methods: {
judgeItem:function(index){
if(!this.ListType){
this.$emit("handleJudge",index);
}else{
this.$emit("handleDelete",index);
}
}
}
}
</script>
因为done区域用的组件和todo区域用的组件是同一个组件,所以首先需要给组件增加一个判断的功能,判断这个组件是在todo区域还是在done区域,这个判断的条件listType
就是起这么一个作用,由父组件决定显示在那个区域,由子组件判断并执行相应的方法,然后在点击事件调用的方法里进行判断,如果listType
为false,就说明这个组件在todo区域,这个点击执行的操作就应该是将点击项移入done区域,如果为true,就说明点击项是在done区域,此时就应该执行删除的操作。这里改变了props
的写法,规定List
是一个数组,规定listType
为一个默认值为false的布尔值,
APP.vue
//APP.vue
<template>
<div id="app">
<h1>todoList</h1>
<addNew @submitNewItem="addNewItem"></addNew>
<!-- todo区域 -->
<thelist @handleJudge="toDone" :List="todoList"></thelist>
<!-- done区域 -->
<thelist @handleDelete="toDelete" :List="doneList" :ListType="true"></thelist>
</div>
</template>
<script>
import addNew from './components/addNew';
import thelist from './components/theList';
export default {
name:"app",
data(){
return {
todoList:[],
doneList:[]
}
},
methods:{
addNewItem: function(newItem){
this.todoList.push(newItem);
},
toDone: function(){
this.doneList.push(this.todoList.splice(index,1)[0])
},
toDelete: function(index){
this.doneList.splice(index,1);
}
},
components: {
addNew,
thelist
}
}
</script>
在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
<template>
<div id="app">
<h1>TodoList</h1>
<addNew @submitNewItem = "addNewItem"></addNew>
<thelist @handleJudge = "toDone" title = "toDo" v-bind:List = "todoList"></thelist>
<thelist @handleDelete = "toDelete" title = "Done" v-bind:List = "doneList" :ListType = "true"></thelist>
</div>
</template>
<script>
import addNew from './components/addNew';
import thelist from './components/theList';
export default {
name: 'app',
data(){
return {
todoList:[],
doneList:[]
}
},
methods:{
addNewItem: function(newItem){
this.todoList.push(newItem);
},
toDone: function(index){
this.doneList.push(this.todoList.splice(index,1)[0]);
},
toDelete: function(index){
this.doneList.splice(index,1);
}
},
components: {
addNew,
thelist
}
}
</script>
addNew.vue
<template>
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">请输入待办事项</span>
</div>
<input type="text" class="form-control" v-model="newItem" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text" @click='handleAdd'>添加</span>
</div>
</div>
</div>
</template>
<script>
export default {
name:'addNew',
data(){
return {
newItem:""
}
},
methods:{
handleAdd:function(){
if(this.newItem == ""){
alert("不能为空");
return;
}
this.$emit('submitNewItem',this.newItem);
this.newItem = "";
}
}
}
</script>
theList.vue
<template>
<div class="card">
<h5 class="card-header">{{title}}</h5>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item" :class='typeClass' v-for="(item,index) in List" :key = "index" @click='judgeItem(index)'>{{item}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:'thelist',
props:{
List:{
type:Array,
required:true,
},
ListType:{
type:Boolean,
default:false,
},
title:[String,Number]
},
computed:{
typeClass(){
return {'list-group-item-danger':!this.ListType,
'list-group-item-success':this.ListType}
}
},
methods: {
judgeItem:function(index){
if(!this.ListType){
this.$emit("handleJudge",index);
}else{
this.$emit("handleDelete",index);
}
}
}
}
</script>
以上