vue 入门， todoList

#  实现逻辑：

> * 技术栈
> 1. 生命周期，creatd( 创建后执行)
> 2. methods'： 调用事件方法，结果不会缓存
> 3. Watch ： 监听器，监听输入的字数
> 4. Filters： 过滤器，时间
> 5. prevent ： 修饰符，阻止默认事件
> 6. computed： 计算属性，计算结果会被缓存

<template>
  <div>
    <H3>柚子小哥哥</H3>
   // 这是一个输入框，双向绑定，给一个回车事件
    <input type="text" v-model="inputVal" @keydown.enter="add" />
    // 这是一个为完成的，通过计算属性来得出，没有完成的条数
    <h3>未完成　( {{ NoList }} )</h3>
    <ul>
    // 这是一个循环遍历一个数组，v-show，这里是显示在页面上，因为添加的时候，已经是false，现在取反就是显示在页面上。
      <li v-for="(item, index) in TodoList" :key="index" v-show="!item.dome">
      // 这是一个复选框，给一个点击事件，和一个修饰符，阻止默认事件在事件方法，传一个对象化，和布尔值，true，一个切换功能
        <input type="checkbox" @click.prevent="change(item, true)" />
        // 这是一个双击修改数据，先if判断取反，判断条件是缩影不等于负一，在双击的方法里面穿一个对象和下标
        <span v-if="index != updateIndex" @dblclick="update(item, index)">
        //  输入框出来的内容
          {{ item.inputVal }}
        </span>
        // 这是一个输入框，判断下标等于负一，同时双向绑定内容，一个回车事件，和一个失去焦点事件
        <input
          v-if="index == updateIndex"
          type="text"
          v-model="item.inputVal"
          @keydown.enter="updateServe"
          @blur="updateServe"
        />
        // 这是一个点赞，功能，说白就是在添加的，一个数量的累加。
        <span @click="Str(item)"> 点赞: {{ item.Strt }} </span>
        // 这是一个事件的过滤器可以准确的计算出来。你什么时候发布的信息，
        <span> {{ item.createTime | FiltersTime }} </span>
        // 这是一个删除功能
        <span @click="del(index)"> ×</span>
      </li>
    </ul>
    //一个计算属性，计算出完成的条数
    <h3>已完成　( {{ YesList }} )</h3>
    // 这是已完成的内容，和上面的内容差不多是相反的
    <li v-for="(item, index) in TodoList" :key="index" v-show="item.dome">
      <input type="checkbox" checked @click.prevent="change(item, false)" />
      <span v-if="index != updateIndex" @dblclick="update(item, index)">
        {{ item.inputVal }}
      </span>
      <input
        v-if="index == updateIndex"
        type="text"
        v-model="item.inputVal"
        @keydown.enter="updateServe"
        @blur="updateServe"
      />
      <span @click="Str(item)"> 点赞: {{ item.Strt }} </span>
      <span> {{ item.createTime | FiltersTime }} </span>
      <span @click="del(index)"> ×</span>
    </li>
    <h3>
      筛选部分
    </h3>
    // 这是一个诗选功能，一个下拉列表
    <select v-model="screen">
      <option value="">请选择</option>
      <option value="whole">全部</option>
      <option value="NO">未完成</option>
      <option value="YES">已完成</option>
    </select>
    // 筛选成功之后，在fo循环遍历出来的数据
    <ul>
      <li v-for="(item, index) in ShowList" :key="index">
        <span> {{ item.inputVal }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screen: "",
      // 筛选添加的数组
      ShowList: [],
      // 一个双向绑定的空字符串
      inputVal: "",     
      // 操作的是这数组
      TodoList: [],
      // 声明一个变量为-1，用来判断双击修改
      updateIndex: -1,
      // 修改要存放一个空字符串中
      kong: "",
      // 字数默认为0
      small: 0,
      // 不能超过为10
      Big: 10,
      // 这个是一个监听字体数量，输入的字体超过范围，则不能添加，这个ref；true就是可以添加的到页面的数据
      referring: true,
    };
  },

  // 这是一个声明周期一个方法，创建后自行，
  created() {
  // 这几行代码的意思就是，localStorage。初始化本地存储
    let TodoList = localStorage.TodoList;
    if (TodoList) {
      this.TodoList = JSON.parse(TodoList);
    }
    // 这个是发布的事件排序
    this.TodoList.sort(function(a, b) {
      return b.createTime - a.createTime;
    });
  },
  // 这个就是筛选功能，
  watch: {
    screen(newSerl) {
      this.ShowList = [];
      switch (newSerl) {
        case "whole":
          this.ShowList = this.TodoList;
          break;
        case "NO":
          this.TodoList.map((item) => {
            if (!item.dome) {
              this.ShowList.push(item);
            }
          });
          break;
        case "YES":
          this.TodoList.map((item) => {
            if (item.dome) {
              this.ShowList.push(item);
            }
          });
          break;
      }
    },
  },
  // 这个就是一个时间的一个过滤器，
  filters: {
    FiltersTime(msg) {
      let data = new Date();
      let noe = data.getTime();
      let time = (noe - msg) / 1000 / 60;
      let Str = "";
      if (time <= 1) {
        Str = "刚刚";
      } else if (time <= 2) {
        Str = "1分钟前";
      } else if (time <= 3) {
        Str = "2分钟前";
      } else {
        let data = new Date();
        data.setTime(msg);
        // 这是一个模版字符串，时，分，秒
        Str = `${data.getHours()}:${data.getMonth()}:${data.getSeconds()}`;
      }
      return Str;
    },
  },
  // 计算属性，计算法已完成和未完成的条数
  computed: {
    //未完成的方法
    NoList() {
      let num = 0;
      this.TodoList.map((item) => {
        if (!item.dome) {
          num++;
        }
      });
      return num;
    },
    // 已完成的监听的条数
    YesList() {
      let num = 0;
      this.TodoList.map((item) => {
        if (item.dome) {
          num++;
        }
      });
      return num;
    },
  },
  // 调用事件的方法，结果不会缓存
  methods: {
    // 点赞拱功能，一个对象的累加，保存到本地存储
    Str(item) {
      item.Strt++;
      this.serve();
    },
    // 添加
    add() {
    // 这个就是判断，输入的字数超过了规定的字数，就是不执行一下的方法，return返回过去
      if (!this.referring) {
        alert("超过字数限制");
        return;
      }
     // 这是一个判断，判断输入框不能为空，
      if (this.inputVal != "") {
        alert("添加成功");
        this.TodoList.push({
          inputVal: this.inputVal,// 一个输入框的双向绑定的一个
          dome: false, // 这是一个复选框切换
          Strt: 0, // 点赞功能
          createTime: new Date().getTime(), // 这是一个时间戳
        });
      } else {
        alert("不能为空");
      }
      // 清空
      this.inputVal = "";
      // 调用保存方法
      this.serve();
      // 这是一个时间的排序
      this.TodoList.sort(function(a, b) {
        return b.createTime - a.createTime;
      });
    },
    // 复选框的切换功能
    change(item, checked) {
      if (checked) {
        item.dome = true;
      } else {
        item.dome = false;
      }
    },
    // 双击修改
    update(item, index) {
      this.kong = item.inputVal;
      this.updateIndex = index;
    },
    // 还原数据
    updateServe() {
      this.updateIndex = -1;
      this.inputVal = "";
      this.serve();
    },
    // 删除
    del(index) {
      this.TodoList.splice(index, 1);
      this.serve();
    },
    // 保存
    serve() {
      localStorage.TodoList = JSON.stringify(this.TodoList);
    },
  },
};
</script>
<style scoped></style>

##  实现效果：