# 用户交互：
:-: 
>[success] 用户在表单输入数据，插入到下方的列表，这个列表其实就是一个数组。
> 用户输入数据其实就是在Vue实例的data中添加一个属性user即可
> 列表的数组如何表示？这里面我们发现每条数据 不仅仅有内容，还有可否选中的状态。用{selected:false,title:'内容'}来表示
## 用户输入数据
将用户数据和模板关联，列表数组格式设置。并且给用户数组添加功能(键盘enter键后添加到数组中）
~~~
<header id="header">
<h1>todos</h1>
<input v-model.trim="user"
@keydown.enter="add"
id="new-todo" placeholder="来添加一些大事件?" autofocus="autofocus">
</header>
……
<script>
var vm = new Vue({
el:'#todoapp',
data:{
user:'',
list:[]
},
methods:{
add(){
if(!this.user)return;
this.list.push({selected:false,title:this.user})
this.user = ''
}
}
})
</script>
~~~
>[warning] if(!this.user)return;用户内容为空，则不往下进行
> this.list.push({selected:false,title:this.user}) 将用户数据添加到数组中注意添加的是一个对象
> this.user = '' 添加完以后再将输入框内容 清空，便于下次操作
## 显示列表
>[success] 现在将数组中的数据显示到列表中。
> 对表单的值设置都是通过v-model来设置的，input\[type="checkbox"\]也不例外。
~~~
<li :class="{completed:item.selected}" v-for="(item,index) in list">
<div class="view">
<input v-model="item.selected" type="checkbox" class="toggle">
<label>{{item.title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" >
</li>
~~~
**效果如下：**
:-: 
>[danger] 注意：这里面的li身上的completed类名是当item.selected为true时才被选中
> 现在用户单击复选框，它就可以被选中了，再点就取消了。这是双向数据绑定的第二个表现，可以绑定对象的值，也可以修改对象的值。
```
vm.list
(3) [{…}, {…}, {…}, __ob__: Observer]
展开如下
0:
selected: false
title: (...)
1:
selected: false
title: (...)
2:
selected: true
title: (...)
length: 3
```
## 本地存储
> 我们重新刷新浏览器后，列表的数据就会被清空。怎么解决？
> 本地存储，不过我们也要思考一个问题，当前案例中只要用户操作一次数据就应该重新将数据更新到本地存储中。
> 本案例中，我们不仅是切换列表选中状态，还要双击编辑列表的内容，也要将数据更新到本地存储中。
> 那么我们发现这样引入本地存储并没有化简我们的功能，反而将代码写的更加繁琐。
>[success] Vue实例属性watch属性称之为侦听，当发现Vue实例中的data中的数据发生变化，可以监听并且可以触发对应的指令。
> 也就是说一旦data中的list属性数据发生变化 我们就可以执行对应的指令，重新更新本地存储即可。
### watch用法
~~~
//第一种用法
watch:{
list(){
功能
}
}
//第二种用法
watch:{
list:{
handler(){
功能
},
deep:true
}
}
~~~
>[warning] 注意 watch中的list属性是来自于data中已有的数据进行监听。
> watch有两种方法，
> 第一种用法称之为浅监测，如果对象嵌套很深，那么只会影响第一层对象
> 第二种用法称之为深度监测，重在于deep:true，如果deep:false则和第一种用法一样。
> 本案例中我们采用第二种深度监测/侦听
~~~
var local = {
get(){
return JSON.parse(localStorage.getItem('ym'))||[]
},
set(val){
localStorage.setItem('ym',JSON.stringify(val))
}
}
var vm = new Vue({
……
data:{
user:'',
list:local.get()
},
watch:{
list:{
handler() {
local.set(this.list)
},
deep:true
}
},
……
})
~~~
>[danger] 上面我们对本地存储进行封装，方便我们使用。
> data中的list数据修改为local.get()即网页打开或者刷新都是从本地存储中读取数据
> 并且开启侦听器watch，侦听list数据的变化。
