Vue todolist小实例

朱雀 2022-03-25 10:49 223阅读 0赞

### 版本01（初始） ###

<template>
    
    
      <div id="app">
       <input type="text" v-model="todo"/>  
       <button @click="doAdd()">+ 增加</button>
    
       <br>
    
       <hr>
    
       <br>
    
       <ul>
         <li v-for="(item,key) in list">
          {
       {item}} ------- <button @click="deleteDate(key)">- 删除</button>
         </li>
       </ul>
    
      </div>
    </template>
     
    <script> export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { todo:'', list:[], } }, methods:{ //这里是放方法的地方 doAdd(){ //1.获取文本框输入的值 2.把文本框中的值push进list中 this.list.push(this.todo); //将todo push到list中 this.todo=''; // 再将它为空 }, deleteDate(key){ //此key为形参 // alert(key) /*splice 的语法格式 array.splice(index,howmany,item1,.....,itemX) index 必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 item1, ..., itemX 可选。要添加到数组的新元素*/ this.list.splice(key,1);//从key开始删除一个元素 } } } </script>
    
    <style> </style>

01版本的代码中有双向绑定数据，定义/执行方法以及循环渲染数据等相关操作，部分地方也都做好了注释。但目前的页面样式较为简陋：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]

### 版本02（基本功能） ###

<template>
    
    
      <div id="app">
       <input type="text" v-model="todo" />  
       <button @click="doAdd()">+ 增加</button>
       <br>
    
       <hr>
    
       <br>
       <h2>进行中</h2>
       <ul>
         <li v-for="(item,key) in list" v-if="!item.check">
         <input type="checkbox" v-model="item.check"/>{
       {item.title}} ------- <button @click="deleteDate(key)">- 删除</button>
         
         </li>
       </ul>
              
       <br>
       <h2>已完成</h2>
       <ul>
         <li v-for="(item,key) in list" v-if="item.check">
         <input type="checkbox" v-model="item.check"/>{
       {item.title}} ------- <button @click="deleteDate(key)">- 删除</button>
         
         </li>
       </ul>
    
      </div>
    </template>
     
    <script> /* ['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态 而下面这样模拟数据的话，很清晰的分清了它的状态 [ { title:gym是个404, check:true }, { title:yjl是个500, check:false } ] */ export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { todo:'', list:[ { title:'gym是个404', check:true }, //这两个数据为默认数据 { title:'yjl是个500', check:false } ], } }, methods:{ //这里是放方法的地方 doAdd(){ //1.获取文本框输入的值 2.把文本框中的值push进list中 if(this.todo != ''){ this.list.push({ title:this.todo, check:false, //状态默认为false }); //将todo push到list中 this.todo='' } // 添加完数据之后，输入框为空 }, deleteDate(key){ //此key为形参 /*splice 的语法格式 array.splice(index,howmany,item1,.....,itemX) index 必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 item1, ..., itemX 可选。要添加到数组的新元素*/ this.list.splice(key,1);//从key开始删除一个元素 } } } </script>
    
    <style> </style>

02版本的代码提升了一个层次，实现了基本功能，注释做的也很详细。多处用到了双向绑定。但页面样式没做编写。效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
样式可自行添加，Vue todolist小实例基本完成。

### 版本03（保存搜索的历史记录） ###

在前两个版本中，没有实现可保存记录，也就是当页面刷新时原有的记录就没了，消失了。那么下面这个版本就完成了这个功能。

<template>
    
    
      <div id="app">
       <input type="text" v-model="todo" />  
       <button @click="doAdd()">+ 增加</button>
       <br>
    
       <hr>
    
       <br>
       <h2>进行中</h2>
       <ul>
         <li v-for="(item,key) in list" v-if="!item.check">
         <input type="checkbox" v-model="item.check" @change="saveList()"/>{
       {item.title}} ------- <button @click="deleteDate(key)">- 删除</button>
         
         </li>
       </ul>
              
       <br>
       <h2>已完成</h2>
       <ul>
         <li v-for="(item,key) in list" v-if="item.check">
         <input type="checkbox" v-model="item.check" @change="saveList()"/>{
       {item.title}} ------- <button @click="deleteDate(key)">- 删除</button>
         
         </li>
       </ul>
    
      </div>
    </template>
     
    <script> /* ['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态 而下面这样模拟数据的话，很清晰的分清了它的状态 [ { title:gym是个404, check:true }, { title:yjl是个500, check:false } ] */ export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { todo:'', list:[ { title:'gym是个404', check:true }, //这两个数据为默认数据 { title:'yjl是个500', check:false } ], } }, methods:{ //这里是放方法的地方 doAdd(){ //1.获取文本框输入的值 2.把文本框中的值push进list中 if(this.todo != ''){ this.list.push({ title:this.todo, check:false, //状态默认为false }); //将todo push到list中 this.todo='' } // 添加完数据之后，输入框为空 localStorage.setItem('list',JSON.stringify(this.list)) //保存记录，页面刷新纪录仍然存在。 //使用的是HTML的语法 }, deleteDate(key){ //此key为形参 /*splice 的语法格式 array.splice(index,howmany,item1,.....,itemX) index 必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 item1, ..., itemX 可选。要添加到数组的新元素*/ this.list.splice(key,1);//从key开始删除一个元素 localStorage.setItem('list',JSON.stringify(this.list)) //保存记录，页面刷新纪录仍然存在。 //使用的是HTML的语法 }, saveList(){ localStorage.setItem('list',JSON.stringify(this.list)) //使复选框也保存记录,对应上面代码的第15行和24行 } }, mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/ var list=JSON.parse(localStorage.getItem('list')); //得到保存的记录 if(list){ /*注意判断*/ this.list=list; } } } </script>
    
    <style> </style>

添加的主要代码在第15行、24行、77行、89行、92行和 第96到第103行

### 版本04（再次提升，使用模块化以及封装Storage组件） ###

我们发现频繁使用storage有点麻烦，那不如封装storage这个组件，然后直接调用。

1.  在src下面新建一个文件夹为model ，新建文件storage.js  
    ![在这里插入图片描述][20190121130539810.png]
2.  编写storage.js ，代码如下：

//封装操作localstorage本地存储的方法 模块化的文件
    
    // nodejs 基础
    
    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.  在App.vue 中改动的代码（主要是在script中有改动，怕读者产生视觉疲劳，这里就只发改动的代码）

import storage from './model/storage.js';   //导入这个文件
    //console.log(storage);
    export default {  // 表示将组件暴露出去
      // name: 'App', 给组件起个名字，可以删除
      data () {    //业务逻辑里定义的数据 
        return { 
         todo:'',
         list:[
           { 
             title:'gym是个404',
             check:true
           },                         //这两个数据为默认数据
           { 
             title:'yjl是个500',
             check:false
           }
           ],
    
        }
      },
      methods:{    //这里是放方法的地方
        doAdd(){ 
        //1.获取文本框输入的值 2.把文本框中的值push进list中
          if(this.todo != ''){ 
            this.list.push({ 
              title:this.todo,    
              check:false,        //状态默认为false
            }); 
            //将todo push到list中
            this.todo=''   // 添加完数据之后，输入框为空
          }       
    
          storage.set('list',this.list)  //封装了storage这个组件
        },
        deleteDate(key){   //此key为形参
          /*splice 的语法格式 array.splice(index,howmany,item1,.....,itemX) index 必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 item1, ..., itemX 可选。要添加到数组的新元素*/
          this.list.splice(key,1);//从key开始删除一个元素
    
          storage.set('list',this.list);  //封装了storage这个组件
        },
        saveList(){ 
          storage.set('list',this.list);  //封装了storage这个组件 
        }
      },
      mounted(){    /*生命周期函数 vue页面刷新就会触发的方法*/
    
              var list=storage.get('list'); //得到保存的记录
    
              if(list){   /*注意判断*/
                this.list=list;
              }
          }
    }
    </script>

这样一来，就方便很多了。

Vue todolist小实例的版本就先改动到这里，还会有后续版本，希望对大家会有帮助。若有任何疑问或是不解，请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/7bdc654ebc4d44dabd95a8a09e9a90ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/cc9fe3cfdfc84c2496b85fc128151f0a.png
[20190121130539810.png]: /images/20220325/ebc7e88f7f6246b1b3da1e6bd2507583.png