看完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>
以上
网友评论