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的使用---阻止事件的默认行为
