用功能練習(xí)引導(dǎo)學(xué)習(xí)
通過(guò)小功能的學(xué)習(xí)，可以延展出很多的知識(shí)點(diǎn)者娱，同時(shí)也可以強(qiáng)化對(duì)代碼語(yǔ)法的熟悉程度绪颖。
俗話(huà)說(shuō)的好秽荤，熟能生巧！下面就讓我們開(kāi)始做一個(gè)小小的 TodoList 吧柠横！
1545874044440.png
我們想要實(shí)現(xiàn)這樣一個(gè)效果窃款，那么分析一下需求，才好開(kāi)始寫(xiě)邏輯呀～
- 每次在 input 框內(nèi)輸入一條信息牍氛，點(diǎn)擊提交后可以添加到 TodoList 當(dāng)中
- 每次提交后要清空 input 框
把基本DOM敲出來(lái)吧～
<div id="root">
<input />
<button > 提交 </button>
<ul>
<li>
<!-- 這里是列出的每一條信息 -->
</li>
</ul>
</div>
在學(xué)習(xí)了好幾個(gè) Vue 的指令之后晨继，我們應(yīng)該想到，每一個(gè) DOM 元素搬俊，我們都要讓它有事兒做：
- input 框應(yīng)該與 Vue 對(duì)象中 data 集合中的某個(gè)存儲(chǔ)輸入數(shù)據(jù)的變量雙向綁定
- button 按鈕應(yīng)該綁定提交輸入信息的事件紊扬，應(yīng)該是 methods 里的某一條
- ul 和 li 這對(duì)好兄弟一定和 我們的 v-for 相關(guān)曲饱，所以我們需要有一個(gè) list 數(shù)組來(lái)存放提交的各條信息
Script 部分
<script>
new Vue({
el: "#root",
data() {
return {
inputValue: 'hello',
list: []
}
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
}
}
})
</script>
這樣做了之后，再把對(duì)應(yīng)的項(xiàng)目和指令拼接好：
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit"> 提交 </button>
<ul>
<li v-for="(item, index) of list" :key="index">
{{ item }}
</li>
</ul>
不要遺漏細(xì)節(jié)珠月，處處都是知識(shí)點(diǎn)
這樣一個(gè) TodoList 就大體完成了扩淀，但似乎還有一個(gè)需求我們沒(méi)有實(shí)現(xiàn)：
- 每次輸入完、提交之后啤挎，需要清空輸入框
如果是以前學(xué)習(xí) jQuery 的我們驻谆，馬上就想著要開(kāi)始操刀 $( #... ).Somefunction() ... 去操作修改 DOM 了。
但請(qǐng)記住庆聘，在 Vue 里面胜臊，我們的目光焦點(diǎn)是 數(shù)據(jù) ！
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
- 因?yàn)?inputValue 和 input 框 是以 v-model 實(shí)現(xiàn)的數(shù)據(jù)雙向綁定伙判，那么只要我們清空 inputValue 字符串象对，input 框里自然也什么都沒(méi)有了。
- 處處都是小驚喜宴抚！學(xué)習(xí) Vue 時(shí)一定要時(shí)時(shí)刻刻多去想數(shù)據(jù)勒魔，而不是把目光停留在怎么機(jī)械地在 DOM 上實(shí)現(xiàn)！
