断断续续花了十来天时间把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即可。
