はじめに
Vue.jsに少し触れてみたので、その内容を「Vue.js入門」として、数回にわけて書いてきました。
今回の４回目（最終回）では「ToDoリスト」を作ってみました。
前の記事は以下を参照してください。
- Vue.js 入門（第１回） - Vue.jsでHello World と双方向データバインディング（v-model） -
- Vue.js 入門（第２回） - 算出プロパティ（computed）と監視（watch） -
- Vue.js 入門（第３回） - メソッド（methods） -
※ここではVue.jsの**2.x系（2.6.14）**を使用しています。3.x系では書き方が異なるので注意してください。
1. 作成するToDoリストの仕様
初期表示で以下の通り表示します。
①はToDoの入力欄で、②はToDoリストの表示欄です。
入力欄にToDoの名前を入力し（①）、「追加」ボタンをクリックします（②）。
すると、ToDoの入力欄がクリアされ（③）、ToDoリストに入力したToDoが追加されます（④）。
ToDoリストのチェックボックスをオンにすると、ToDoの名前の前に「完了」を表示します。
ToDoリストの「削除」ボタンをクリックすると（①）、ToDoリストの一覧から削除されます（②）。
2. ToDoリスト作成
2.1. jsの作成
var vm = new Vue({
el: '#app', // （１）
data: {
todos: [ // （２）
{isDone: false, name: 'Task1'},
{isDone: false, name: 'Task2'},
{isDone: false, name: 'Task3'}
],
input: '' // （３）
},
methods: {
addTodo: function(input) { // （４）
var todo = { // （５）
isDone: false,
name: input
};
this.todos.push(todo) // （６）
this.input = ''; // （７）
},
deleteTodo: function(index) { // （８）
this.todos.splice(index, 1) // （９）
}
}
});
（１）elの名称をappとして、HTMLの<div>と紐付けます。
（２）dataに変数todosを定義し、配列を保持します。todosはisDone（チェックボックスをチェックしているかどうかを保持する変数）とname（ToDoの名称を保持する変数）のセットの配列としています。HTMLのToDoリストと紐付けます。
（３）dataに変数inputを定義します。HTMLのToDoの入力欄と紐付けます。
（４）methodsにaddTodoを定義します。HTMLの追加ボタンをクリックしたときに呼び出されます。
（５）変数todoを定義し、isDoneは初期値falseを設定、nameにはinput（入力されたToDoの名称）を設定します。
（６）todos（ToDoリスト）に（５）のtodoを追加します。
（７）input（ToDoの名称の入力欄）に空文字を設定します。
（８）methodsにdeleteTodoを定義します。HTMLの削除ボタンをクリックしたときに呼び出されます。
（９）todos（ToDoリスト）から該当の行を削除します。
2.2. HTMLの作成
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Vue.jsでToDoリスト</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app"> <!-- （１） -->
<h1>ToDoリスト</h1>
<span>ToDo：</span>
<input type="text" v-model="input"> <!-- （２） -->
<button type="button" v-on:click="addTodo(input)">追加</button> <!-- （３） -->
<ul>
<li v-for="(todo, index) in todos"> <!-- （４） -->
<div>
<input type="checkbox" v-model="todo.isDone"> <!-- （５） -->
<span class="done" v-show="todo.isDone">完了</span> <!-- （６） -->
<span>{{ todo.name }}</span> <!-- （７） -->
<button type="button" v-on:click="deleteTodo(index)">削除</button> <!-- （８） -->
</div>
</li>
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
（１）id=appとして、Vueのインスタンスと紐付けます。
（２）v-model="input"として、input変数と紐付けます。
（３）v-on:click="addTodo(input)"で、押下時にaddTodoメソッドを呼び出すようにします。
（４）v-for="(todo, index) in todos"として、todos変数の件数分繰り返します。todoにtodosの1件分のデータを、indexに繰り返しのインデックスがセットされます。
（５）v-model="todo.isDone"で、isDone変数と紐付けます。
（６）v-show="todo.isDone"で、isDone変数がtrueの場合のみ表示させます。
（７）nameを表示させます。
（８）v-on:click="deleteTodo(index)"で、押下時にdeleteTodoメソッドを呼び出すようにします。
2.3. CSSの作成
今回は以下のCSSを定義しています。
ul,
li {
margin: 0 0 6px 0;
padding: 0;
list-style: none;
}
ul {
margin-top: 30px;
}
li div {
position: relative;
max-width: 300px;
width: 100%;
padding-right: 0px;
box-sizing: border-box;
white-space: break-all;
}
li button {
position: absolute;
top: 0;
right: 0;
}
.done {
color: #F00;
}