vue组件与生命周期，Vue缓存

一.案例知识点

1.splice移除和fieldset标签

splice(index,num) 从哪个索引开始，移除几个值
fieldset是一种框架标签，如下图所示，legend必须写在fieldset中

<fieldset>
     <legend>用户代办事项</legend>
</fieldset>

2.案例缓存数据
案例主要是代码的模块化封装，当前案例写数据缓存
每次载入的数据一刷新就没有了，这个时候需要缓存数据

Storage模块化组件

js文件，最后要用export default将文件暴露出去

JSON.parse()【从一个字符串中解析出json对象】
eg：定义一个字符串
var data=’{“name”:“goatling”}’
解析对象​ ​JSON.parse(data)
结果是：​name:“goatling”

JSON.stringify()【从一个对象中解析出字符串】
var data={name:‘goatling’}
JSON.stringify(data)
结果是：’{“name”:“goatling”}’

<template>
  <div id="app">
    <div class="title">
      <div class="title_left">
        ToDOList
      </div>
      <div class="user_input">
        <input
          type="text"
          placeholder="请输入..."
          @keydown.enter="user_valele"
          v-model="val"
        >
        <button @click="user_valele">添加</button>
      </div>
    </div>
    <div class="ing">
      <fieldset>
        <legend>用户代办事项</legend>
        <ul class="menu">
          <p>未完成事项：</p>
          <li
            v-for="(item,index) in listele"
            :key="index"
            v-if="!item.isfinish"
          >
            <input
              type="checkbox"
              :checked="item.isfinish"
              @click="user_finish(index)"
            />
            <!--: 是v-bind的简写-->
            <span>{
   {
   item.name}}</span>
            <button @click="user_delete(index)">删除</button>
          </li>
          <p>已完成事项：</p>
          <