vue.cli3做ToDoList

一些小的碎碎念，记录自己的实际操作。

配置路由，引入，注册使用

知识点分析

• input输入框，输入按钮
• 待完成，完成按钮
• 未完成，撤销按钮，删除按钮

新的技术

• vuetify
• UI组件

输入部分

<v-row>
            <v-col :cols="6">
                <v-text-field placeholder="please input" v-model="input">
                </v-text-field>
            </v-col>
            <v-col :cols="3">
                <v-btn color="primary">添加</v-btn>
            </v-col>
  </v-row>

设置好html，用vuetify设置样式，简单方便又快捷。
用到了form里的text-field文本框

设置逻辑，创建thingList数组，存放清单的标题，时间等信息，用v-for循环语句v-for=“（item，index） in items: :key=“index”),创建新的div，通过this.thingList.push(),进行渲染，展示清单内容。

<div>
            <v-card v-for="(thing,index) in thingList" :key="index">
                <v-card-text>
                    {{thing.title}}
                </v-card-text>
            </v-card>
 </div>

注意输入框置空问题。

待完成，已完成部分

通过v-for进行条件渲染，用v-show通过thing.isDone选择某个清单该在哪一部分展现。
删除通过thisthingList.splice(index,1),通过下标进行删除，规定删除个数。

离线问题

想要刷新之后数据仍然存在，选择localstorage存取数据

watch:{
        thingList: {
            handler: function(value){
                localStorage.setItem("thingList",JSON.stringify(value));
            },
            deep: true,
        }
    },
    created(){
        const listStr = localStorage.getItem("thingList");
        this.thingList = JSON.parse(listStr);
    }, 

以上为解决离线问题方法，将存取的数据从对象转化为字符串，用stringify序列化，这种watch方法为深度监听方法，在created中反序列化，再变为对象实现离线保存数据。

遇到的问题是，function没有写全写了func，自动保存了这个包，出现”func“未被定义的问题