vuecli搭建vue项目，实现正在进行todolist的操作

---

基本布局操作

---

1.找到 src 文件夹下的 views 文件夹，在里面新建一个文件 myinput.vue

 

2.在数据中心自定义一个对象数组，并在视图层通过 v-for渲染出来

data() {
        return {
            list:[
                {name:'a',done:true},
                {name:'b',done:true},
                {name:'c',done:false},
                {name:'d',done:false}
            ]
        };
    },

<ul class="pp">
            <li v-for="(p,index) in list" :key="index">
                {{p.name}}
            </li>
        </ul>

3.找到左侧文件夹中的 router 文件夹 下的index.js 文件

(1) 在上方引入 myinput

import myinput from '../views/myinput.vue'

(2) 在const routes 中配置 myinput 的路由规则

{
    path:'/myinput',
    name:'myinput',
    component:myinput
  }

4.找到左侧的 App.vue 文件，在上方的视图层通过标签跳转，去跳转我们的 myinput

<router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/myinput">myinput</router-link>

这时候，打开终端，进入当前项目后，输入  npm run serve

 运行结束后会出现两个网址

按住 Ctrl 单击打开，进来之后就是这样的，因为这是做个简单的例子，所以不多做样式

 点击上方的 myinput 就可以了

---

添加方法 

1.回到myinput文件中，在视图层的 ul 列表上面添加一个 input 文本框，并在data数据中心定义一个 mes:'',为空，通过 v-model绑定到 input 上

<input type="text" v-model="mes">

  mes:'',

2.在methods 定义一个 add 方法

add(){
            // 当没有输入内容时
            if(this.mes == ''){
                // 弹窗提醒输入内容
                window.alert('请输入内容');
                // 返回false，什么也不做
                return false
            }
            // 输入内容后向数组的最好以为添加元素
            this.list.push({name:this.mes,done:false})
            this.mes = ''
        }

3.在input 上添加 键盘按下事件，绑定在 enter上，当敲击回车时，添加进一个内容

<input type="text" v-model="mes" @keypress.enter="add">

 

---

添加删除方法

在视图层的 li 里为每一项添加一个按钮，并添加方法 del 传入参数 index

在方法中心定义在这个方法

<li v-for="(p,index) in list" :key="index">
                {{p.name}}--
                <button @click="del(index)">删除</button>
</li>

 del(index){
            this.list.splice(index,1)
        }

 

---

通过watch监听让页面的数据储存到本地储存 localStorage 中，并在created 生命周期函数中进行绑定，这样页面数据就与localStorage中的数据同步了

 created(){
        // 拿到本地存储中的数据
        let todoList = localStorage.todoList;
        if(todoList){
            this.list = JSON.parse(todoList);
        }
    },
    watch:{
        list:{
            handler(list){
                console.log(list);
                

                localStorage.setItem('todoList',JSON.stringify(list))
            },

        }
    },

在页面进行操作时注意查看控制台

 就算刷新之后，数据还是会保持同步