用功能练习引导学习
通过小功能的学习，可以延展出很多的知识点，同时也可以强化对代码语法的熟悉程度。
俗话说的好，熟能生巧！下面就让我们开始做一个小小的 TodoList 吧！
1545874044440.png
我们想要实现这样一个效果，那么分析一下需求，才好开始写逻辑呀～
- 每次在 input 框内输入一条信息，点击提交后可以添加到 TodoList 当中
- 每次提交后要清空 input 框
把基本DOM敲出来吧～
<div id="root">
<input />
<button > 提交 </button>
<ul>
<li>
<!-- 这里是列出的每一条信息 -->
</li>
</ul>
</div>
在学习了好几个 Vue 的指令之后，我们应该想到，每一个 DOM 元素，我们都要让它有事儿做：
- input 框应该与 Vue 对象中 data 集合中的某个存储输入数据的变量双向绑定
- button 按钮应该绑定提交输入信息的事件，应该是 methods 里的某一条
- ul 和 li 这对好兄弟一定和 我们的 v-for 相关，所以我们需要有一个 list 数组来存放提交的各条信息
Script 部分
<script>
new Vue({
el: "#root",
data() {
return {
inputValue: 'hello',
list: []
}
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
}
}
})
</script>
这样做了之后，再把对应的项目和指令拼接好：
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit"> 提交 </button>
<ul>
<li v-for="(item, index) of list" :key="index">
{{ item }}
</li>
</ul>
不要遗漏细节，处处都是知识点
这样一个 TodoList 就大体完成了，但似乎还有一个需求我们没有实现：
- 每次输入完、提交之后，需要清空输入框
如果是以前学习 jQuery 的我们，马上就想着要开始操刀 $( #... ).Somefunction() ... 去操作修改 DOM 了。
但请记住，在 Vue 里面，我们的目光焦点是 数据 ！
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
- 因为 inputValue 和 input 框 是以 v-model 实现的数据双向绑定，那么只要我们清空 inputValue 字符串，input 框里自然也什么都没有了。
- 处处都是小惊喜！学习 Vue 时一定要时时刻刻多去想数据，而不是把目光停留在怎么机械地在 DOM 上实现！
