MVVMの中でもシンプルで学習障壁が低いと言われている「Vue.js」を使って、ToDoリストを作成してみました。（追加と削除のみの機能しかもたない簡単なToDOリストです。）
学習した内容の整理も兼ねて、記述したコードを紹介したいと思います。
※今回はVue.js v2.3.3を使用しています。
##ViewModel
scriptの記述は下記の通り▼
new Vue({
el: '#js-todoList',
data: {
newItem: "",
todos: []
},
methods: {
addItem: function(event) {
event.preventDefault();
if (this.newItem == "") return;
this.todos.push({
item: this.newItem
});
this.newItem = "";
},
deleteItem: function(todo) {
var index = this.todos.indexOf(todo);
this.todos.splice(index, 1)
}
}
})
まずはインプットしたデータを取得するnewItemとデータを格納する配列を定義。
さらにmethodsで下記の2つのfunctionを作成。
- 入力したデータを配列に格納するaddTodo
- 削除ボタンを押されたItemを配列から消すdeleteTodo
##View（HTML）
htmlはこちら▼
<div id="js-todoList">
<form>
<input type="text" v-model="newItem">
<button v-on:click="addItem">追加</button>
</form>
<ul>
<li v-for="todo in todos">
{{todo.item}}
<button v-on:click="deleteItem(todo)">削除</button>
</li>
</ul>
</div>
Vue.jsにはディレクティブと呼ばれるhtmlに組み込む機能があります。これはHTMLに独自の属性を付与することで、DOM操作を行う機能です。
今回は下記3つのディレクティブを使用しています。
v-model
inputされた値をバインディングして取得する機能
v-on
DOM イベントの購読、イベント発火時のJavaScriptの実行をハンドリングする機能。ここではaddItem、deleteItemの2つのfunctionを制御しています。
v-for
配列に格納されたデータを描写する機能
##まとめ
今回は簡単なToDOリストを作成してみました。まだまだ知らない機能がたくさんあるので、様々な制作物を通してvue.jsの理解を深めていきたいと思います。