Vue 2.5从零开始学习 —— 5. Vue TodoList

用功能练习引导学习

通过小功能的学习，可以延展出很多的知识点，同时也可以强化对代码语法的熟悉程度。

俗话说的好，熟能生巧！下面就让我们开始做一个小小的 TodoList 吧！

1545874044440.png

我们想要实现这样一个效果，那么分析一下需求，才好开始写逻辑呀～

• 1. 每次在 input 框内输入一条信息，点击提交后可以添加到 TodoList 当中
  2. 每次提交后要清空 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 上实现！