Vue.js 入門：從零開始做一個極簡 To-Do 應用
阿新 • • 發佈：2019-12-25
Vue.js 入門：從零開始做一個極簡 To-Do 應用
寫作時間：2019-12-10
版本資訊：Vue.js 2.6.10
官網文件：https://cn.vuejs.org/
前言
學習 Vue 的最佳方式之一是「請立刻查閱 Vue.js 的官方文件」，簡單看一下「基礎」部分，配合本文食用更佳。
在開始寫程式碼之前，首先去 BootCDN 上找一下目前最新版本完整版的 Vue.js 的連結：https://cdn.bootcss.com/vue/2.6.10/vue.js ，與壓縮版（vue.min.js）不同，它（vue.js）包含完整的警告和除錯模式。
為了儘可能地保持簡單，本文不使用 Vue CLI 來構建專案，而是像用 jQuery 開發那樣，直接在 HTML 檔案裡引入 Vue.js 檔案。
如果文章中的程式碼有不明白的地方，我的建議是：直接抄程式碼，看效果，看文件，改程式碼，看效果，如此迴圈往復。
宣告式渲染
瞭解一下 Vue 官網的基礎部分的「宣告式渲染」部分 ，我們可以建立如下程式碼：
此時預覽 index.html 檔案，會看到頁面上出現 Hello, Vue.js! 的文字。
元件結構
我們把要做的 To-Do App 拆分成一個個小元件，目前先來一個元件 TodoList 和一個它的子元件 TodoItem 。通過熟悉 官網上的「元件基礎」教程 我們來繼續做下去。
TodoList 元件
先來做一下 TodoList 元件。我把程式碼都貼上過來，方便取用學習。
此文章之後的程式碼都是在下面這段程式碼的基礎上修改，到時我就只放修改的部分程式碼了，有必要的時候我會把全部程式碼貼出來。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue.js To-Do App</title> </head> <body> <div id="app"> <todo-list></todo-list> </div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script> Vue.component('todo-list', { data: function() { return {} }, template:` <ul> <li>Todo A</li> <li>Todo B</li> <li>Todo C</li> </ul> ` }) new Vue({ el: '#app', data: {} }) </script> </body> </html>
需要注意的內容：
- 元件的程式碼需要放到 new Vue 之前
- 定義元件的 data 時，data 必須是一個函式
- template 中的程式碼必須要有個外層容器包裹（最外層只能有一個元素）
改寫 TodoList 元件，新增所需資料：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js To-Do App</title>
</head>
<body>
<div id="app">
<todo-list v-bind:todos="todos"></todo-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<div class="todo-item" v-for="todo in todos">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button" v-show="!todo.done">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
</div>
`
})
new Vue({
el: '#app',
data: {
todos: [
{
title: '待辦 1',
content: '上課之前要抄一下同學的作業。',
done: false
},
{
title: '待辦 2',
content: '課間和朋友去球場打籃球。',
done: true
},
{
title: '待辦 3',
content: '英語課上故意調皮一下讓美麗的英語老師注意到然後提問我。',
done: false
},
{
title: '待辦 4',
content: '放學後趕緊跑，絕對不能聽某些人的話：「放學後你給我等著」。',
done: false
}
]
}
})
</script>
</body>
</html>需要注意的內容：
- 資料在 new Vue 的 data 中定義，需要傳遞給 TodoList 元件，使用 v-bind 指令，該程式碼表示將 todos 變數傳遞給 TodoList 元件的 todos 屬性。
<div id="app">
<todo-list v-bind:todos="todos"></todo-list>
</div>- TodoList 元件定義 props 用來接收傳遞過來的 todos ，在元件的 template 中可以直接使用。這裡我們使用 v-for 來迴圈渲染資料。
Vue.component('todo-list', {
// ... 省略 ...
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<div class="todo-item" v-for="todo in todos">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button" v-show="!todo.done">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
</div>
`
})雖然寫了給某些元素寫了 class 但是還沒有寫任何樣式，現在開啟 index.html 預覽是這樣的：
TodoItem 元件
現在我們把 class 為 todo-item 的元素提取出來作為單獨的元件，除此之外我們什麼也不做，預覽效果與剛才一致。
Vue.component('todo-item', {
props: ['todo'],
template: `
<div class="todo-item">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button" v-show="!todo.done">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
`
})
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo">
</todo-item>
</div>
`
})接下來加入編輯的功能
Vue.component('todo-item', {
props: ['todo'],
data: function() {
return {
isEditing: false
}
},
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">編輯 ✏</div>
<div class="button" v-show="!todo.done">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
<div class="todo-item" v-show="isEditing">
<div class="form">
<div class="field">
<label>Title</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>Content</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="closeForm">儲存並關閉編輯模式</button>
</div>
</div>
</div>
`,
methods: {
showForm: function() {
this.isEditing = true
},
closeForm: function() {
this.isEditing = false
}
}
})
新增的程式碼做了這幾點：
- 在 TodoItem 元件中新增編輯按鈕，並新增一個 isEditing 的屬性用來區分是否是編輯狀態。
- 新增編輯模式時 TodoItem 元件的程式碼
- 新增並繫結開啟和關閉編輯模式的事件
刪除 Todo
Vue.component('todo-item', {
// ... 省略 ...
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">編輯 ✏</div>
<div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
<div class="button" v-show="!todo.done">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
// ... 省略 ...
</div>
`,
methods: {
// ... 省略 ...
deleteTodo(todo) {
this.$emit('delete-todo', todo)
}
},
})在 TodoItem 元件中新增刪除按鈕，並新增刪除的方法，這個方法會向父元件 TodoList 傳送一個 delete-todo 事件以及要刪除的 todo 資料。
父元件 TodoList 中新增一個刪除事件，並監聽來自子元件的 delete-todo 事件。
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo" v-on:delete-todo="deleteTodo"
>
</todo-item>
</div>
`,
methods: {
deleteTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos.splice(index, 1)
}
},
})新增 Todo
新建一個 AddTodo 元件，將元件新增到 TodoList 元件中。
Vue.component('add-todo', {
data: function() {
return {
isAdding: false,
todo: {
title: '',
content: '',
done: false
}
}
},
template: `
<div>
<div v-on:click="showForm">新增 +++</div>
<div class="form" v-show="isAdding">
<div class="field">
<label>標題</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>內容</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="saveForm">儲存</button>
<button class="close" v-on:click="closeForm">取消</button>
</div>
</div>
`,
methods: {
showForm() {
this.isAdding = true
},
saveForm() {
if (this.todo.title && this.todo.content) {
this.$emit('add-todo', this.todo)
this.closeForm()
}
},
closeForm() {
this.isAdding = false
this.todo = {
title: '',
content: '',
done: false
}
}
}
})
Vue.component('todo-list', {
// ... 省略 ...
template:`
<div class="todo-list">
<add-todo v-on:add-todo="addTodo"></add-todo>
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo" v-on:delete-todo="deleteTodo"
>
</todo-item>
</div>
`,
methods: {
// ... 省略 ...
addTodo(todo) {
this.todos.push(todo)
}
},
})AddTodo 元件預設只顯示一個新增按鈕，當點選新增按鈕的時候顯示需要填寫的表單，填寫完成後點選儲存，將向父元件 TodoList 傳送一個 add-todo 事件以及表單資訊。
父元件 TodoList 監聽 add-todo 事件並在事件觸發後向 todos 資料中新增一條由 AddTodo 元件傳送的資料。
完成 Todo
TodoItem 元件中，點選完成按鈕，傳送 complete-todo 事件給父元件 TodoList 。
父元件 TodoList 監聽 complete-todo 事件並在事件觸發後從 todos 資料中要完成的那條資料標記為已完成。
Vue.component('todo-item', {
// ... 省略 ...
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">編輯 ✏</div>
<div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
<div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
......
`,
methods: {
// ... 省略 ...
completeTodo(todo) {
this.$emit('complete-todo', todo)
}
}
})
Vue.component('todo-list', {
// ... 省略 ...
template:`
<div class="todo-list">
......
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo"
v-on:delete-todo="deleteTodo"
v-on:complete-todo="completeTodo"
>
</todo-item>
</div>
`,
methods: {
// ... 省略 ...
completeTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos[index].done = true
}
}
})
至此，一個基本功能還算健全的 To-Do App 就完成了。
完整程式碼
最終的完整程式碼如下，可以直接拿走自己執行預覽一下。
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js To-Do App</title>
</head>
<body>
<div id="app">
<todo-list v-bind:todos="todos"></todo-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component('add-todo', {
data: function() {
return {
isAdding: false,
todo: {
title: '',
content: '',
done: false
}
}
},
template: `
<div>
<div v-on:click="showForm">新增 +++</div>
<div class="form" v-show="isAdding">
<div class="field">
<label>標題</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>內容</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="saveForm">儲存</button>
<button class="close" v-on:click="closeForm">取消</button>
</div>
</div>
`,
methods: {
showForm() {
this.isAdding = true
},
saveForm() {
if (this.todo.title && this.todo.content) {
this.$emit('add-todo', this.todo)
this.closeForm()
}
},
closeForm() {
this.isAdding = false
this.todo = {
title: '',
content: '',
done: false
}
}
},
})
Vue.component('todo-item', {
props: ['todo'],
data: function() {
return {
isEditing: false
}
},
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">編輯 ✏</div>
<div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
<div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">點選完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
<div class="todo-item" v-show="isEditing">
<div class="form">
<div class="field">
<label>Title</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>Content</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="closeForm">儲存並關閉編輯模式</button>
</div>
</div>
</div>
`,
methods: {
showForm: function() {
this.isEditing = true
},
closeForm: function() {
this.isEditing = false
},
deleteTodo(todo) {
this.$emit('delete-todo', todo)
},
completeTodo(todo) {
this.$emit('complete-todo', todo)
}
},
})
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<add-todo v-on:add-todo="addTodo"></add-todo>
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo"
v-on:delete-todo="deleteTodo"
v-on:complete-todo="completeTodo"
>
</todo-item>
</div>
`,
methods: {
deleteTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos.splice(index, 1)
},
addTodo(todo) {
this.todos.push(todo)
},
completeTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos[index].done = true
}
},
})
new Vue({
el: '#app',
data: {
todos: [
{
title: '待辦 1',
content: '上課之前要抄一下同學的作業。',
done: false
},
{
title: '待辦 2',
content: '課間和朋友去球場打籃球。',
done: true
},
{
title: '待辦 3',
content: '英語課上故意調皮一下讓美麗的英語老師注意到然後提問我。',
done: false
},
{
title: '待辦 4',
content: '放學後趕緊跑，絕對不能聽某些人的話：「放學後你給我等著」。',
done: false
}
]
}
})
</script>
</body>
</html>（完）