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

用功能练习引导学习

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

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

1545874044440.png

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

• 1. 每次在 input 框内输入一条信息，点击提交后可以添加到 TodoList 当中
  2. 每次提交后要清空 input 框

把基本DOM敲出来吧～

    
     提交 

    

        

            
        
    

在学习了好几个 Vue 的指令之后，我们应该想到，每一个 DOM 元素，我们都要让它有事儿做：

• input 框应该与 Vue 对象中 data 集合中的某个存储输入数据的变量双向绑定
• button 按钮应该绑定提交输入信息的事件，应该是 methods 里的某一条
• ul 和 li 这对好兄弟一定和 我们的 v-for 相关，所以我们需要有一个 list 数组来存放提交的各条信息

Script 部分

这样做了之后，再把对应的项目和指令拼接好：

    
     提交 

    

        

            {{ item }}
        
    

不要遗漏细节，处处都是知识点

这样一个 TodoList 就大体完成了，但似乎还有一个需求我们没有实现：

• 每次输入完、提交之后，需要清空输入框

如果是以前学习 jQuery 的我们，马上就想着要开始操刀 $( #... ).Somefunction() ... 去操作修改 DOM 了。

但请记住，在 Vue 里面，我们的目光焦点是 数据 ！

methods: {
            handleSubmit: function () {
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
}

• 因为 inputValue 和 input 框 是以 v-model 实现的数据双向绑定，那么只要我们清空 inputValue 字符串，input 框里自然也什么都没有了。
• 处处都是小惊喜！学习 Vue 时一定要时时刻刻多去想数据，而不是把目光停留在怎么机械地在 DOM 上实现！