vue学习笔记：用vue来写一个todolist，并且在vue中封装一个js，在组件中调用

傷城~ 2024-04-17 06:04 38阅读 0赞

今天我要实现的是一个简单的可以在本地进行缓存的todolist待办事项功能，例如网上的待办事项：[http://www.todolist.cn/][http_www.todolist.cn]，可以根据自己的需要进行添加、删除和改变事项的状态，下面我们就用vue来实现 这个功能。

我们使用的vue-cli搭建的一个项目，在app.vue根组件进行编写，这样就不用创建路由进行跳转了，具体实现如下：

组件html模板：

<template>
      <div id="app">
        <input type="text" v-model="InputVal" @keydown="addVal($event)">
        <br>
        <hr>
        <h2>进行中</h2>
            <ul>
              <li v-for="(item,index) in list" v-if="!item.checked">
                <input type="checkbox" name="" id="" v-model="item.checked" @change="SaveDelete">{
       {item.title}} -- <button  @click="Delete(index)">删除</button >
              </li>
            </ul>
    
        <h2>已完成</h2>
            <ul>
              <li v-for="(item,index) in list" v-if ="item.checked">
                <input type="checkbox" v-model="item.checked" >{
       {item.title}} -- <button @click="Delete(index)">删除</button> 
              </li>
            </ul>
      </div>
    </template>

js代码：

封装的本地缓存组件：storage.js

// 封装本地缓存localStorage
    
    
    var storage = {
    
        set(key,value){
            localStorage.setItem(key,JSON.stringify(value));
        },
        get(key,value){
            return JSON.parse(localStorage.getItem(key,value));
        },
        remove(key){
            localStorage.removeItem(key);  
        }
    }
    
    // 封装完成之后的一个方法一定要把封装的方法暴露出去,这样其他的文件才能用
    export default storage;

通过一个input文本框进行代办事项的添加，实际原理就是通过input文本数据绑定，代办的事项添加到一个数组中，再把数组数据进行遍历，遍历出来的每一项都存在一个属性checked，根据遍历出的数据前面的checkbox多选框进行对事项状态的改变，默认添加的待办事项的状态是checked：false，也就是单选框未选中状态，也就是待办事项状态，当我们选择了input框，滴啊版事项就变成了已办事项，checked：true，这样就完成了代办事项标的基本功能，添加事项的时候采用的是键盘点击事件@keydown,这个事件中的$event对象，有一个键盘标识序号，我们以回车键为例，触发添加事件，回车键的序号是13，也就是代码中的e.keyCode == '13'，这是我们会向数组中添加一个代办事项。

基本功能完成后，但是当我们刷新页面的时候我们之前添加的数据就会消失，这个时候我们就需要配用到本地缓存，可以保证我们刷新页面的时候数据不会被清除，这个本地缓存功能我们通过封装一个组件进行完成，主要是为了减少代码的冗余性，也锻炼我们一下模块化开发的意识。首先我们要建立一个空的js文件，就是我们需要放置封装本地缓存方法的地方，然后根据本地缓存数据的特性，创建储存方法set和取出缓存数据的方法get和移除缓存数据的方法remove，注意这个封装的组建中一定要把组件给暴露出去，其他的组件次才能调用，代码如上图，然后我们就可以在组建中引入这个封装的组件：

// 在组件中引入封装的方法
    import storage from './model/storage.js';

然后可以在js中直接调用，添加数据的时候和修改数据的时候，通过触发storage.set方法存储数据，当页面刷新的时候，通过生命周期mounted默认加载缓存的数据，从而达到本地缓存数据的效果。

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

[http_www.todolist.cn]: http://www.todolist.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/4a668732feb0426fb0e303921c7b5273.png