从零学习vue之简单演练一Todolist Demo

断断续续花了十来天时间把vue官网的基础篇看完了，打算做一个todolist Demo。先有个基本的框架，从易到难，功能从瘦到胖吧。

步骤一

定位功能：新增模块和展示模块。
为什么要包含两个模块，而不是放在同一模块中，目的两个：１.解耦；２.越复杂学到的东西越多。
简单的代码：
HTML：

    
    新增


    
您的代办事项：
    

        
{{ item }}
    

JS代码：

这样就实现了最简单的代办事项：

步骤一

程序中用到了vue的：v-on（简写@）、v-for、v-model，这些都不细说了。简单说说两个vue实例之间如何通信，起初是想是不是可以通过两个实例methods方法中互相通信，好像官方没有这个说法，只提到子组件和父组件的通信，和$on、$emit方法监听、触发事件。那么就暂时使用$on、$emit了。
这样一个简单的增加Todolist的功能就初步实现了。

当然，功能还不是很完备

步骤二

丰富功能点：删除和编辑功能。
删除功能简单，每次新增代办事项时同时新增一个删除图标，点击后此项事项消失。
编辑功能：可以考虑点击代办事项后出现新的input框，同时原代办事项隐藏，在input框中输入即可更新。
有了思路做起来就不是很难了。
每个待办事项储存在data中就不仅仅是文字了，还应该包含可编辑的状态flag，这样便于展示。
先放上完工的简陋Demo图：

步骤二

代码参见：

    
    新增


    
您的待办事项：
    

        

            {{ item.data }}
            确定
            X
        
    

可以看到代码中新引入了v-show，与v-if的区别是，v-show不管参考对象是否为真都会渲染dom，而v-if只在第一次为真时才开始渲染。根据showItems.currentItems中item.editable的真值，来控制是显示span还是input标签，从而实现了编辑功能。
删除功能考虑在数组中删除要确定其index，因此在v-for指令中通过(item, index) in currentItems的形式来获取index值，将index传入remove方法即可删除。
至此，一个大致的Todolist Demo初步完成了，细节再优化一下，美化下CSS即可。