使用vue-cli3.0写一个todoList

2018-12-12  本文已影响0人  KuiSAhn

看完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>

以上

上一篇下一篇

猜你喜欢

热点阅读