**Todolist综合案例（一）

Todolist Vue.js基本实现方法

我们先明白todolist这个案例的基本实现方法
循环遍历方法跟套用事件方法 比如 v-for v-if 这些常用的方法
todolist案例实用各种项目 基本样式也不会太大变化 说白了就是在俄罗斯套娃
我也是刚刚入门的新手

这边是效果实现图

首先我们先基本引入Vue.js的环境

cnpm install -g @vue/cli

然后在创建Vue的基本项目

vue create myapp

然后直接cd 进去项目myapp启动就行

 cd myapp

然后就正常启动

npm run serve

好了我们进入正题

我们先想一下todolist的大概流程
1.如图，文本框输入计划事件，回车之后，事件会出现在“正在进行”区域中，文本框清空。
2.点击事件前对应的复选框，事件会移至“已经完成”区域中，反之取消复选框勾选，事件会返回至“正在进行”区域中。
3.点击删除按钮，对应事件将会被删除。
4.刷新页面，数据不会清空（本地存储）。
5.点击“清除本地存储”按钮，刷新页面，数据将会清空

这边我们先写基本的CSS布局样式

<template>
  <div>
    <!-- 进行双向数据绑定 然后在给一个回车响应事件 -->
    <input type="text" v-model="list" @keydown.enter="add" />
    <!-- 获取数组里数据的长度 -->
    <h3>正在进行的{
    {
    Nolength}}</h3>
    <ul>
      <!-- 使用v-for进行遍历 -->
      <!-- v-show显示或隐藏的 完成和未完成的 把item打印的数据进行判断-->
      <li v-for="(item,index) in arry" :key="index" v-show="item.iscu==false">
        <!-- 给input一个点击事件判断选中是不是选中到完成到已完成里面 -->
        <input type="checkbox" @click.prevent="yes(item)" />
        <span class="item_title" v-if="uplist !=index" @click="eat(item,index)">{
    {
    item.title}}</span>
        <input
          type="text"
          v-if="uplist==index"
          v-model="item.title"
          @keydown.enter="off"
          @blur="off"
        />
        <!-- 给打印出来的数据一个删除方法 -->
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <!-- 判断已经完成的数组的完成的数量 -->
    <h3>已经完成了{
    {
    Yeslength}}</h3>
    <!-- 使用v-for进行遍历 -->
    <!-- v-show显示或隐藏的 完成和未完成的 把item打印的数据进行判断-->
    <li v-for="(item,index) in arry" :key="index" v-show="item.iscu==true">
      <input type="checkbox" checked @click.prevent="no(item)" />
      <span class="item_title" v-if="uplist !=index" @click="eat(item,index)">{
    {
    item.title}}</span>
      <input type="text" v-if="uplist==index" v-model="item.title" @keydown.enter="off" @blur="off" />
      <!-- 给打印出来的数据一个删除方法 -->
      <button @click="del(index)">删除</button>
    </li>
  </div>
</template>

上面就是基本css布局 每一步都打了注释 已经是很详细了
下面开始js部分的写法了

<script>
export default {
    
  data() {
    
    return {
    
      list: "", //一个的空的 来接受数据
      arry: [], //一个空的数组来接受数据
      uplist: -1, //要求修改元素的下标
      value: ""
    };
  },
  created() {
    
    //组件初始化  一开始就把本地数据加载出来
    let arry = localStorage.arry;
    if (arry) {
    
      // 用if判断把本地数据保存
      this.arry = JSON.parse(arry);
    }
  },
  methods: {
    
    add() {
    
      this.arry.push({
    
        title: this.list,
        iscu: false //判断完成状态 默认是未完成
      });
      this.list = "";
      //给一个空的
      this.save(); //保存数据到本地
    },
    del(index) {
    
      this.arry.splice(index, 1); //删除
      this.save(); //保存数据到本地
    },
    yes(item) {
    
      //判断input的选中是完成状态 利用上面的v-show判断
      item.iscu = true;
      this.save(); //保存数据到本地
    },
    no(item) {
    
      //判断input的选中是未完成状态 利用上面的v-show判断
      item.iscu = false;
      this.save(); //保存数据到本地
    },
    //为了保证页面刷新数据不会消失把数据保存到本地
    save() {
    
      localStorage.arry = JSON.stringify(this.arry); //保存数据到本地
    },

    eat(item, index) {
    
      this.uplist = index;
      this.value = item.title;
    },
    off() {
    
      this.uplist = -1;
      this.save();
    }
  },
  computed: {
    
    //计算属性 计算判断正在进行和完成的数组长度
    Yeslength() {
    
      let num = 0;
      this.arry.map(item => {
    
        if (item.iscu) {
    
          num++;
        }
      });
      return num;
    },
    Nolength() {
    
      let num = 0;
      this.arry.map(item => {
    
        //已经完成的数据可以跟上面一样取反就行了
        if (!item.iscu) {
    
          num++;
        }
      });
      return num;
    }
  }
};
</script>

**这边一个todolist的基本写法已经完成了

在给提几点建议跟注意事项

1.通过监听键盘的回车键，出发add方法，将输入的事件push进todoList中。其中，监听回车键是通过获取到keyCode判断是否为13来实现；push到todoList中的是一个对象，有things和isOver两个key值，其中things是事件内容，isOver是布尔类型，判断事件是否完成。

2.事件前面的checkbox需要与判断状态的变量（即data里面todoList的isOver）进行双向数据绑定，点击或取消勾选将会改变isOver的布尔值，通过此布尔值可以令事件有依据的出现在相应的区域中（未完成还是已结束）。未完成和已结束下的区域是两个不同的ui>li，利用v-for判断isOver的布尔值，从而对todoList中的数据进行渲染。

3.关于数据本地存储，通过localStorage.setItem()和localStorage.getItem()将todoList进行存储和获取。其中，当用户进行增加事件、删除事件、改变事件状态这三种操作时，均需要执行localStorage.setItem()。而获取本地存储的localStorage.getItem()则需要在mounted()生命周期函数中执行，实现打开网页时进行数据请求。

4.封装方法，对本地存储中数据的设置、获取、删除三个方法进行封装

5.注意数据存储时的类型，存时需要将数据转化成JSON字符串，获取时需要将数据转回JSON对象。
6.在取到localStorage中的list时，需要先判断是否存在，存在才能进行下一步的赋值给list[]数组，否则当list不存在的时候赋值会出错误。**