vuecli-案例TodoList--正在进行

vuecli-案例TodoList--正在进行

制作http://todolist.cn/ 官网效果，思路分析如下所示：

视图层html：

<template>
    <div>
        <!-- 输入之后，就提交 -->
        <input type="text" v-model="inputValue" @keypress.enter="submit">
        <h2>正在进行({{list.length}})</h2>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{item.title}}
                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</template>

逻辑层js：

<script>
export default {
    name: 'JdApp',
    data() {
        return {
            inputValue:'',
            list:[
                {title:'a', done:true},
                {title:'b', done:true},
                {title:'c', done:false},
                {title:'d', done:false}
            ],
            updateState:-1
        };
    },
    created() {
        let todoList = localStorage.todoList;
        if(todoList){
            this.list = JSON.parse(todoList)
        }
    },
    watch:{
        list:{
            handler(list){
               localStorage.todoList = JSON.stringify(list);
               
            }
        },
        deep:true
    },
    methods: {
        submit(){
            if(this.inputValue==''){
                alert('请输入内容');
                return false
            }
            this.list.push({
                title:this.inputValue,
                done:false
            })
            this.inputValue = ''
        },
        del(index){
        //    let rel =  window.confirm('你确认删除吗?')
        //    if(!rel) return
            this.list.splice(index,1)
        }
    },
};
</script>

当用户在input单行文本框中，按回车的时候，触发@keypress.enter="submit" 这个事件，调用方法中心的submit方法

这个方法的作用是：

（1）判断传入内容是否为空 

（2）向数组中追加内容---push()

（3）把文本框中输入的内容清空掉

当点击“删除”按钮的时候，触发@click="del(index)"这个事件，调用方法中心的del方法

这个方法的作用是：

（1）弹出提示窗口，确认是否删除

（2）删除指定项上的内容---splice()

特别注意：

在添加内容到list中的时候，如果在刷新页面的时候，数据不被清空，我们需要把数据进行本地存储。

因为在vue中，每次刷新created 生命周期钩子函数，都会自动执行。

所以，在created中 进行数据的本地存储。

    created() {
        let todoList = localStorage.todoList;
        if(todoList){
            this.list = JSON.parse(todoList)
        }
    },

当数组list中数据发生变化的时候，使用watch对list对象进行深度监听deep:true。

    watch:{
        list:{
            handler(list){
               localStorage.todoList = JSON.stringify(list);
               
            },
            deep:true
        }
    },

预览效果如下所示：

修改遍历过程中的数组中的，某个元素，在数据中心data中定义一个变量updateState:-1

数组中的内容 是用下标表示的，例如：list[index], 如果list数组中 的索引值为-1，表示数组中没有内容！

（注意：这里给updateState:-1 赋值为-1，表示当前数组没有内容）

在数据中心data中定义一个变量updateState:-1  ~~~~当前哪个元素要修改，记录下标

视图层span标签和input标签，则其一出现：（要么出现span，要么出现input）

因为在这里

我们添加了一个条件(双路分支)指令

updateState==index

如果我们在遍历的过程中的index索引的值，正好等于数据中心data中updateState的值，说明当前我们要对这个元素进行修改，同时通过updateState记录当前元素的下标。在这一刻，不显示span，显示input文本框！！！

updateState!=index

在这一刻，我们显示span，不显示input文本框！！！

当我们点击 span标签的时候，获取当前元素的索引（把index索引作为参数，传入change方法中）

触发@click="change(index)"这个事件，调用方法中心的change方法

        change(index){
            // 把从视图层传入过来的索引index值，赋值给数据中心data的updateState去使用
            this.updateState = index;
            console.log(this.updateState)
        }

这个方法的作用是：

（1）把从视图层传入过来的索引index值，赋值给数据中心data的updateState去使用

在视图层，点击某个span标签，获取这一项的索引，将索引打印到控制台，如下所示

因为，上面分析有~~

我们在视图层 添加了 一个条件(双路分支)指令

updateState==index

如果我们在遍历的过程中的index索引的值，正好等于数据中心data中updateState的值，说明当前我们要对这个元素进行修改，同时通过updateState记录当前元素的下标。在这一刻，不显示span，显示input文本框！！！

updateState!=index

在这一刻，我们显示span，不显示input文本框！！！

因为我们这点击span标签，触发change方法，change方法~~~让updateState==index ，index和updateState相等。所以，此时页面上显示出来的是input文本框。

当input文本框 在 视图层出现的时候，我们可以去修改input文本框中的值！！！（这一点很重要，它出现，你才能去修改它里面的内容！！！）

点击input文本框，通过2个事件，调用方法中心的update方法

@blur="update"  @keypress.enter="update"

方法中心这个update方法的作用是：

（1）把从视图层传入过来的索引index值，赋值给数据中心data的updateState去使用

        update(){
            this.updateState = -1
            console.log(this.list)
        }

预览效果如下所示：

注意：

这里

鼠标点击input，

然后在点击一次

才能获取文本框的焦点！！

用户 再点击，才能获取 文本框的焦点，

这里，我们可以在main.js中定义一个全局指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

这样，在每个组件中，就可以使用这个指令了

例如：在App.vue的视图层，使用：

预览效果，如下所示：

到这里，整个案例分析完。这个案例涉及到的知识点 比较综合。可以把前面的知识点进行 系列的贯彻和复习。

注意：

点击复选框的时候，把当前这一项删除掉，当数据项，删除的时候，点击事件会去“找”数组里的下一项为当前项

解决问题的办法：

在复选框上，添加~~~vue中的 事件修饰符.prevent的使用---阻止事件的默认行为