Vue.jsで作るtodoアプリ
前回の記事はこちら
Vue.js ディレクティブの基礎２
これまで紹介したディレクティブを使って
簡単なtodoアプリを作ってみましょう。
jsfiddleで実際に記述しながら読むことをおすすめします。
下記が完成品です。
ページのリロードをせずにタスクの追加・完了・削除ができよう実装します。
※タスクの保存はしない仕様とします。
空のVueインスタンスとテンプレートの作成
まずはhtmlとjsシートに下記を準備します。
※jsfiddleを使用してコード部分のみ記述します。
index/html
<div id="app">
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
})
要素の配置とイベントハンドリング
index/html
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text">
<button v-on:click="addItem">Add</button>
</form>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
methods:{
addItem:function(event){
alert();
}
}
})
デバッグのためにalertを記述して動作確認します。
alertダイアログが表示されます。
formのsubmitイベントでページのリロードを無効にするため
formタグにイベント修飾子preventを追記しておきましょう。
inputタグの中身を双方向データバインディングする
index/html
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">Add</button>
</form>
<pre>{{ $data }}</pre>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
data:{
newItem:""
},
methods:{
addItem:function(event){
alert();
}
}
})
v-modelディレクティブでinputタグの中身をバインディングします。
デバッグ用にpreタグを使用してdataオプションの中身を確認しましょう。
タスクの追加
次に空の配列を用意しAddボタンのクリックイベントで
タスクを配列に格納していきます。
index/html
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">Add</button>
</form>
<pre>{{ $data }}</pre>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
data:{
newItem:"",
todos:[]
},
methods:{
addItem:function(event){
//alert();
if(this.newItem == '')return; //タスク未入力の場合は追加しない
var todo = {
item: this.newItem
};
this.todos.push(todo);
this.newItem = '' //タスク追加後に入力欄を空にする
}
}
})
dataオプションに空の配列todosを作成し
addItemメソッド内でinputタグの中身を
todoとして取得してtodosの配列へ格納しています。
task入力後にinput欄をクリアしておきましょう。
合わせてタスク未入力の場合は追加ができないようif文を記述しましょう。
タスクのリスト表示
index/html
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">Add</button>
</form>
<ul>
<li v-for="todo in todos">{{todo.item}}</li> <!--配列の中身を１つずつ取得-->
</ul>
<pre>{{ $data }}</pre>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
data:{
newItem:"",
todos:[]
},
methods:{
addItem:function(event){
//alert();
if(this.newItem == '')return;
var todo = {
item: this.newItem
};
this.todos.push(todo);
this.newItem = ''
}
}
})
v-forディレクティブをliタグに設定して配列の中身を取得します。
タスクの管理とスタイルの設定
index/html
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">Add</button>
</form>
<ul>
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.isDone"><!--チェックボックス同期-->
<span v-bind:class="{done: todo.isDone}">{{todo.item}}</span><!--classの追加-->
</li>
</ul>
<pre>{{ $data }}</pre>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
data:{
newItem:"",
todos:[]
},
methods:{
addItem:function(event){
//alert();
if(this.newItem == '')return;
var todo = {
item: this.newItem,
isDone:false
};
this.todos.push(todo);
this.newItem = ''
}
}
})
index.css
# app ul{
list-style:none;
}
# app li > span.done{
text-decoration:line-through;
}
タスクにチェックボックスを設定しv-modelディレクティブで
ステータスをisDoneと同期します。
isDoneのステータスによってclassが付与されるよう
v-bindディレクティブでclassをバインディングしましょう。
classの付与によって打ち消し線が表示されるようCSSを記述しました。
タスクの削除
index/html
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">Add</button>
</form>
<ul>
<li v-for="(todo,index) in todos"> <!--indexを引数に追加-->
<input type="checkbox" v-model="todo.isDone">
<span v-bind:class="{done: todo.isDone}">{{todo.item}}</span>
<button v-on:click="deleteItem(index)">Delete</button> <!--indexを引数に指定-->
</li>
</ul>
<pre>{{ $data }}</pre>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el:'#app',
data:{
newItem:"",
todos:[]
},
methods:{
addItem:function(event){
if(this.newItem == '')return;
var todo = {
item: this.newItem,
isDone:false
};
this.todos.push(todo);
this.newItem = ''
},
deleteItem:function(index){ //indexを引数に指定
this.todos.splice(index,1) //indexで指定された要素を1つ削除
}
}
})
以上でtodoアプリは完成となります。
タスクの追加、完了、削除の動作確認をして
問題なければデバッグ用のpreタグを消しておきましょう。
次回はテンプレート構文です。
Vue.jsテンプレート構文