はじめに
Vue.jsの基本的な使い方まとめの続きです。
チュートリアルの鉄板であるTO DOアプリを作成していきます。
テンプレートを用意する
雛形となるHTMLとJSを作成します。
todoディレクトリを作成して、その中にindex.htmlとindex.jsを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TO DOアプリ</title>
</head>
<body>
<div id="app">
<!-- ここにVueインスタンスを展開する -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
続いてVueインスタンスを作成する。
var app = new Vue({
el: '#app'
})
入力フォームとメソッドの追加
form要素の中に入力フォームとボタンを追加する。
<div id="app">
<h2>TODO List</h2>
<form>
<input type="text">
<button>
追加
</button>
</form>
</div>
続いてbutton要素にv-on:clickを設定する。
buttonがクリックされたらaddItemメソッドを呼び出す。
<button v-on:click="addItem">
VueインスタンスにaddItemメソッドを記述する。
一旦、正常に動いているか確認するため、アラートを表示させてみる。
var app = new Vue({
el: '#app',
// メソッド定義
methods: {
addItem: function(event) {
alert()
}
}
})
次にbuttonをクリックした時にsubmitイベントが発動して、ページがリロードされるのを防ぐ処理をformに記述する。
preventはデフォルトの動作を停止させる。
<form v-on:submit.prevent>
TO DOリストにタスクを登録
input要素にv-modelを記述して双方向データバインディング出来るようにする。
これで、inputに入力した値がdataオプションで定義するプロパティと同期する。
<!-- v-modelを定義 -->
<input type="text" v-model="newItem">
dataオプションにnewItemと、入力した値(todoのタスク)を保存する配列todoを定義する。
var app = new Vue({
el: '#app',
data: {
newItem: '', // 入力フォームと双方向データバインディング
todos: [] // 入力したtodoを保存する配列
},
methods: {
addItem: function(event) {
alert()
}
}
})
さらに、入力フォームで入力した値を配列に保存できるようにaddItemメソッドを書き換える。
プロパティにはthis.プロパティ名でアクセスできる。
このthisはVueインスタンスを指す。
var app = new Vue({
el: '#app',
data: {
newItem: '',
todos: []
},
methods: {
addItem: function(event) {
var todo = {
item: this.newItem // todoオブジェクトに入力した値を保存
}
this.todos.push(todo) // todoを配列に追加
}
}
})
TO DOリストの改善
buttonをクリックしてタスクを追加した後に、inputに文字列が残ってしまうため、文字列をクリアにする記述をする。
さらに、空の文字列を保存するのを防ぐための処理を記述する。
methods: {
addItem: function(event) {
// 追加
if (this.newItem === '') return // 空の文字列の場合はここで処理を終える
var todo = {
item: this.newItem
}
this.todos.push(todo)
// 追加
this.newItem = '' // 入力フォームの文字列をクリア
}
TO DOリストの表示
HTML側でリスト表示させる記述をする。
v-forディレクィブを使って繰り返し処理をする。
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">
追加
</button>
</form>
<!-- 追記 -->
<ul>
<li v-for="todo in todos">
{{ todo.item }}
</li>
</ul>
<!-- 追記 -->
</div>
タスクの完了と未完了の実装
タスクの完了と未完了を管理するチェックボックスを設定する。
addItmeメソッドの変数todoを編集する。
チェック済みかどうか判定するisDoneを追加し、初期値をfalseに設定する。
var todo = {
item: this.newItem,
isDone: false // 追加
}
次に、HTMlにチェックボックスを追加し、v-modelディレクティブにtodo.isDoneを双方向データバインディングさせる。
これで、チェックされるとisDoneがtrueになる。
<ul>
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.isDone">
<span>{{ todo.item }}</span>
</li>
</ul>
タスクの削除を実装
登録したタスクを個別に削除するため、配列のindexを取得する。
v-for="(値, index) in 配列"で配列のindexが取れる。
続いて削除ボタンを追加し、タスクを削除するメソッドdeleteItemを定義する。
deleteItemメソッドの引数には配列のindexを持たせる。
<ul>
<li v-for="(todo, index) in todos"> <!-- indexの取得 -->
<input type="checkbox" v-model="todo.isDone">
<span>{{ todo.item }}</span>
<!-- 追加 -->
<button v-on:click="deleteItem(index)">Delete</button>
</li>
</ul>
続いてdeleteItemメソッドを定義する。
配列から要素を削除するJavaScriptのspliceメソッドを使用して、登録されたタスクを削除する。
methods: {
addItem: function(event) {
// 〜省略〜
},
//追加
deleteItem(index) {
this.todos.splice(index, 1) // sprice(削除を始めるindex, 削除する長さ)
}
}
まとめ
DOMの取得やデータの更新を意識することなく書けるので、コードの見通しがスッキリする。
そして、データバインディング楽しい
更新履歴
Vue.jsの基本的な使い方まとめ
Vue.jsでTO DOアプリを作る 
今ココ
Vue.js テンプレート制御ディレクティブ まとめ
Vue.js 算出プロパティとメソッドの違い