斷斷續(xù)續(xù)花了十來天時(shí)間把vue官網(wǎng)的基礎(chǔ)篇看完了坠韩，打算做一個(gè)todolist Demo卑笨。先有個(gè)基本的框架孕暇，從易到難，功能從瘦到胖吧赤兴。
步驟一
定位功能：新增模塊和展示模塊妖滔。
為什么要包含兩個(gè)模塊，而不是放在同一模塊中桶良，目的兩個(gè)：１.解耦座舍；２.越復(fù)雜學(xué)到的東西越多。
簡(jiǎn)單的代碼：
HTML：
<div id="addNew">
<input type="text" name="newItemInput" v-model="newItem">
<button @click="addNewItem(newItem)">新增</button>
</div>
<div id="showPanel">
<h2>您的代辦事項(xiàng)：</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的監(jiān)聽
}
}
});
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>
這樣就實(shí)現(xiàn)了最簡(jiǎn)單的代辦事項(xiàng)：
程序中用到了vue的：v-on（簡(jiǎn)寫@）陨帆、v-for曲秉、v-model采蚀，這些都不細(xì)說了。簡(jiǎn)單說說兩個(gè)vue實(shí)例之間如何通信承二，起初是想是不是可以通過兩個(gè)實(shí)例methods方法中互相通信榆鼠，好像官方?jīng)]有這個(gè)說法，只提到子組件和父組件的通信亥鸠，和$on妆够、$emit方法監(jiān)聽、觸發(fā)事件负蚊。那么就暫時(shí)使用$on神妹、$emit了。
這樣一個(gè)簡(jiǎn)單的增加Todolist的功能就初步實(shí)現(xiàn)了家妆。
當(dāng)然鸵荠，功能還不是很完備
步驟二
豐富功能點(diǎn)：刪除和編輯功能。
刪除功能簡(jiǎn)單揩徊，每次新增代辦事項(xiàng)時(shí)同時(shí)新增一個(gè)刪除圖標(biāo)腰鬼，點(diǎn)擊后此項(xiàng)事項(xiàng)消失。
編輯功能：可以考慮點(diǎn)擊代辦事項(xiàng)后出現(xiàn)新的input框塑荒，同時(shí)原代辦事項(xiàng)隱藏熄赡，在input框中輸入即可更新。
有了思路做起來就不是很難了齿税。
每個(gè)待辦事項(xiàng)儲(chǔ)存在data中就不僅僅是文字了彼硫，還應(yīng)該包含可編輯的狀態(tài)flag，這樣便于展示凌箕。
先放上完工的簡(jiǎn)陋Demo圖：
代碼參見：
<div id="addNew">
<input type="text" name="newItemInput" v-model="newData">
<button @click="addNewItem(newData)">新增</button>
</div>
<div id="showPanel">
<h2>您的待辦事項(xiàng)：</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的區(qū)別是，v-show不管參考對(duì)象是否為真都會(huì)渲染dom牵舱，而v-if只在第一次為真時(shí)才開始渲染串绩。根據(jù)showItems.currentItems中item.editable的真值，來控制是顯示span還是input標(biāo)簽芜壁，從而實(shí)現(xiàn)了編輯功能礁凡。
刪除功能考慮在數(shù)組中刪除要確定其index，因此在v-for指令中通過(item, index) in currentItems的形式來獲取index值慧妄，將index傳入remove方法即可刪除顷牌。
至此，一個(gè)大致的Todolist Demo初步完成了塞淹，細(xì)節(jié)再優(yōu)化一下窟蓝，美化下CSS即可。
