本篇將做出一個Todolist入門款,需要懂得一點組件的基礎。如果對組件還不熟悉可以參考官方的組件基礎文檔。
首先,我們的Todolist預計要有以下功能:
1.新增事項
2.刪除事項
著重在功能實現了…就無視外觀吧。
新增事項
我們可以用form來包裹,在input 綁定 v-model = "newTodoText"
,這個 newTodoText 預設為空值:
<!--新增項目-->
<form v-on:submit.prevent="addNewTodo">
<p>
<h3>新增待辦事項</h3>
</p>
<input id="newtodo" v-model="newTodoText" placeholder="例如:買文具">
<button>新增</button>
</form>
項目管理
用ul li列表來呈現事項,is="todo-item"
等同<todo-item>
;v-for="(todo,index) in todos"
代表從 todos 陣列中取得值以及索引;設key為todo.id,title設為todo.title,v-on加上remove="todos.splice(index,1)"
。
<!--項目管理-->
<ul>
<li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
</ul>
2.2.0+ 的版本裡,在組件上使用 v-for 時,必須要有 key,這裡是設key為todo.id。
創建組件實現刪除按鈕
使用Vue.component創建一個全域 todo-item 組件,設定template為:
<li>{{ title }}<button v-on:click="$emit('remove')">Remove</button></li>
這個模板可以在每條事項右方加上Remove的按鈕。
$emit('remove')
與項目管理區塊的li標籤中的 v-on:remove="todos.splice(index, 1)"
做掛勾,當點擊第n個事項的Remove按鈕時會在todos陣列中刪除索引為n的項目。
註:$emit() 由內向外傳出,特性為事件觸發才更新資料,屬於事件類型。
Vue.component('todo-item', {
template: '\<li>\{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\',
props: ['title']
})
創建Vue實例
在data中新增一個todos陣列,key值有id與title,並且給定nextTodoId為4 (代表使用者手動新增的事項起始id為4)。
新增方法addNewTodo(),該方法可將使用者輸入的事項push進todos陣列中,id則會根據nextTodoId自動遞增;最後在給定newTodoText值為空,即可實現新增事項後輸入框自動清空。
new Vue({
el: '#todo-list',
data: {
newTodoText: '',
todos: [{
id: '1',
title: '洗衣服'
}, {
id: '2',
title: '洗碗'
}, {
id: '3',
title: '煮飯'
}],
nextTodoId: 4
},
methods: {
addNewTodo: function() {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
完整程式碼
html
<!--新增項目-->
<form v-on:submit.prevent="addNewTodo">
<p>
<h3>新增待辦事項</h3>
</p>
<input id="newtodo" v-model="newTodoText" placeholder="例如:買文具">
<button class="button"><i class="fa fa-plus"></i> 新增</button>
</form>
<!--管理項目-->
<ul>
<li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
</ul>
script
<script>
Vue.component('todo-item', {
template: '\<li>\{{ title }}\<button v-on:click="$emit(\'remove\')">Remove</button>\</li>\',
props: ['title']
})
new Vue({
el: '#todo-list',
data: {
newTodoText: '',
todos: [{
id: '1',
title: '洗衣服'
}, {
id: '2',
title: '洗碗'
}, {
id: '3',
title: '煮飯'
}],
nextTodoId: 4
},
methods: {
addNewTodo: function() {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
</script>
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
- [楓之谷私服] 簡單的飛天椅子(坐騎)改法 v120 - 2022 年 6 月 19 日