# 用戶交互：
:-: 
>[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數據的變化。
