使用vue完成todolist

使用Vue完成todolist

• 使用vue-cli创建项目
• 样式使用scss
• 使用rem实现自适应
• 使用storage缓存数据

---

效果图

戳这里下载源码：https://download.csdn.net/download/yanzyan/10401165
或者移步GitHub：https://github.com/YanzYan/todolist

当输入信息后点击添加任务按钮或者按下enter键时，任务被添加到下面的列表中。并将列表数据保存起来。当任务完成时，点击任务将被添加上line-through的样式和删除任务按钮。

构建项目

项目的构建，在上一篇博客有详细的讲解，从最开始的资源下载到手机调试。https://blog.csdn.net/yanzyan/article/details/79036774

<template>
  <div>
    <div class="wrap-input">
      <input type="text" v-model.trim="msg" @keyup.enter = 'addTask()' placeholder="请添加任务..."/>
      <button @click="addTask()">添加任务</button>
    </div>
    <transition-group tag="ul">
      <li v-for="(item,index) in list"  :key="index">
        <p v-text="item.msg" @click="isFinished(index)" :class="{finish: item.isFinish}"></p>
        <button v-if="item.isFinish" @click="deleteitem(index)">删除任务</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
  import storage from '../../static/js/storage.js'
  export default {
    data(){
      return {
        list: [],
        msg: '',
        isFinish: false
      }
    },
    methods: {
      /*添加数据*/
      addTask() {
        this.list = this.list || [];
        if(this.msg){
          this.list.push({msg: this.msg, isFinish: this.isFinish});
          this.msg = '';
          storage.set('list',this.list);
        }
      },
      /*判断任务是否完成*/
      isFinished(index) {
        this.list[index].isFinish = !this.list[index].isFinish;
        storage.set('list',this.list);
      },
      /*删除数据*/
      deleteitem(index){
        this.list.splice(index, 1);
        storage.set('list',this.list);
      }
    },
    mounted: function () {
      /*取缓存*/
      this.list = storage.get('list');
    }
  }
</script>

<style lang="scss" scoped>
  .wrap-input{
    margin-top: 1rem;
    input{
      width: 65%;
      padding: .15rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-right: .2rem;
      font-size: .35rem;
      vertical-align: middle;
    }
    button{
      background-color: pink;
      color: #fff;
      border-radius: .12rem;
      font-size:.36rem;
      vertical-align: middle;
      padding: .1rem .3rem;
    }
  }
  ul{
    margin: .5rem .6rem;
    li{
      /*list-style: circle;*/
      text-align: left;
      font-size: .36rem;
      margin-bottom: .3rem;

      .finish{
        text-decoration: line-through;
        display: inline-block;
        width: 74%;
      }
      button{
        float: right;
        font-size: .3rem;
        border-radius: .12rem;
        padding: .04rem .2rem;
        background-color: pink;
        color: #fff;
        opacity: .7;
        &:active{
          opacity: .5;
        }
      }
    }

  }
  .v-enter-active, .v-leave-active {
    transition: all 1s;
  }
  .v-enter, .v-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(-50px) ;
  }

</style>

其中storage.js

var storage={
    set(key,value){
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },remove(key){
        localStorage.removeItem(key);
    }
}
export default storage;

注意点

1、 transition-group的使用方法
transition-group元素作为多个元素/组件的过渡效果，其子节点必须有独自的key。动画才能正常工作。

2、判断任务是否完成，需要用index作为参数

isFinished(index) {
  this.list[index].isFinish = !this.list[index].isFinish;
  storage.set('list',this.list);
},

其中还涉及到class的一些用法。

3、作为补充
我刚接触vue这类框架的时候最烦node_module，好久才恍然大悟觉得对它了解了一点，今天又get到一个新技能——使用命令行快速删除node_module，真的好用！

npm install rimraf -g
rimraf node_modules

掌握这个例子只是vue的入门吧。我也在学习中。继续努力！