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>

##  实现效果：