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

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

步骤一

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

<div id="addNew">
    <input type="text" name="newItemInput" v-model="newItem">
    <button @click="addNewItem(newItem)">新增</button>
</div>
<div id="showPanel">
    <h2>您的代办事项：</h2>
    <ul>
        <li v-for="item in currentItems">{{ item }}</li>
    </ul>
</div>

JS代码：

<script>
var addNew = new Vue({
    el: '#addNew',
    data: {
        todoItems: [],
        newItem: ''
    },
    methods: {
        addNewItem: function() {
            this.todoItems.push(this.newItem);
            showItems.$emit('addNew', this.newItem); //shoItems的监听
        }
    }
});
var showItems = new Vue({
    el: '#showPanel',
    data: {
        currentItems: []
    },
    methods: {
        addNewItem: function(item) {
            this.currentItems.push(item);
        }
    }
});
showItems.$on('addNew', function(item) {
    this.currentItems.push(item);
}); 
</script>

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

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

当然，功能还不是很完备

步骤二

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

代码参见：

<div id="addNew">
    <input type="text" name="newItemInput" v-model="newData">
    <button @click="addNewItem(newData)">新增</button>
</div>
<div id="showPanel">
    <h2>您的待办事项：</h2>
    <ol>
        <li v-for="(item, index) in currentItems">
            <span @click="changeEditale(item)" v-show="!item.editable">{{ item.data }}</span>
            <span v-show="item.editable"><input type="text" :name="index" v-model="item.data"><span @click="changeEditale(item)">确定</span></span>
            <span class="remove" @click="remove(index)">X</span>
        </li>
    </ol>
</div>

<script>
var addNew = new Vue({
    el: '#addNew',
    data: {
        todoItems: [],
        newData: ''
    },
    methods: {
        addNewItem: function() {
            this.todoItems.push(this.newData);
            showItems.$emit('addNew', this.newData); 
        }
    }
});
var showItems = new Vue({
    el: '#showPanel',
    data: {
        currentItems: []
    },
    methods: {
        remove: function(index) {
            this.currentItems.splice(index, 1);
            addNew.$emit('remove', index);
        },
        changeEditale: function(item) {
            item.editable = !item.editable;
        }
    }
});
showItems.$on('addNew', function(newData) {
    var item = {
        data: newData,
        editable: false
    };
    this.currentItems.push(item);
});
addNew.$on('remove', function(index) {
    this.todoItems.splice(index, 1);
});
</script>

可以看到代码中新引入了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即可。