2017/05/10
javascriptフレームワークのvue.jsを使ってみる③（簡単TODOリスト）
最近、気になっているvue.jsで今度は簡単なTODOリストを作ってみました。
ちなみに以前、書いた記事は以下になります。
javascriptフレームワークのvue.jsを使ってみる（入門編）
javascriptフレームワークのvue.jsを使ってみる②（ソート機能っぽいもの）
定番すぎるアプリ例ですが、やはり作ってみるとvue.jsの理解が深まったので、
とにかく何かを作ってみることは大事ですね〜
TODOリスト
今回のTODOリストの機能はシンプルで、
・タスク作成、編集、削除
・タスク完了のチェック(checkbox)
・タスクの状態表示の切り替え(完了、未完、すべて)
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | var todoListLS = []; //ローカルストレージ関係 var todoStorage = { get: function (todos) { todoListLS = JSON.parse(localStorage.getItem('simpleTodo') || '[]'); }, save: function (todos) { todoListLS = todos; localStorage.setItem('simpleTodo', JSON.stringify(todoListLS)); } } new Vue({ el: '.todoList', data: { todos: todoStorage.get(), newTask: '', filterTask: "all" }, watch: { todos: { handler: function (val) { todoStorage.save(val) }, deep: true } }, computed: { filteredTodos: function () { var task = this.todos; if(this.filterTask == "all"){ task = this.todos; }else if(this.filterTask == "complete"){ task = this.todos.filter(function(element) { return element.check; }); }else if(this.filterTask == "incomplete"){ task = this.todos.filter(function(element) { return !element.check; }); } return task; } }, methods: { addTask: function () { if(!this.newTask){ return false; } this.todos.push({ title: this.newTask, check: false }); this.newTask = ''; }, deleteTask: function (todo){ this.todos.splice(this.todos.indexOf(todo), 1); } } }); |
データの保存
javascriptの3行目〜14行目
今回のTODOリストはデータはローカルストレージに保存しています。
そのデータの取得、保存の処理になります。
ここのソース自体はvueは関係ありません。
初期設定
javascriptの18行目〜22行目
このTODOリストのデータをvueで扱うために、
todosにtodoStorage.get()を格納し、
newTaskは新しいタスクを作成する時の値で、初期は空に、
filterTaskはタスクの切り替えで使用する値で、初期値はallに設定しておきます。
watch
javascriptの23行目〜30行目
watchは、監視し、値が変更がされた時に対応するものです。
今回は、todosに変更があった場合、ローカルストレージに保存しています。
オブジェクトの子要素に変化があった時も対応させたいのでこのような書き方になっています。
タスク作成
html(タスク作成部分)
|
1 | <input type="text" placeholder="タスクを記入" class="add" v-model="newTask" v-on:keyup.enter="addTask"> |
javascriptの51行目〜60行目
タスクの作成addTaskの処理になります。
空の場合は処理を止めており、
作成された場合、todosのデータに、値をpushで追加します。
最後に、newTaskの値を空にしておきます。
タスクの表示
javascriptの32行目〜48行目
todosのデータを、filterTaskの値によって、新たな配列データを作成し、タスクを表示しています。
表示方法は下記htmlになります。
html(タスク表示部分)
|
1 2 3 4 5 6 7 | <ul class="lists"> <li v-for="todo in filteredTodos"> <label><input type="checkbox" name="check" v-model="todo.check" ><span class="icon-checkmark-circle"></span></label> <input type="text" name="task" v-model="todo.title"> <span class="delete icon-trash" v-on:click="deleteTask(todo)"></span> </li> </ul> |
v-forを使用し表示しています。
v-modelを使用し値を代入しているので、タスクの編集は特別な処理は必要なく、値が変更されたら保存されるようになっています。
タスクの削除
タスクの削除は、5行目のv-on:click=”deleteTask(todo)”になります。
jsは、
javascriptの61行目〜63行目
引数todoを用いて、todosデータからsliceで削除します。
説明がかなりざっくりとしていてわかりにくいかもしれませんが、
これでTODOリストの完成です。
やはりこういうアプリ系のものはjQueryで作るより、vueのようなフレームワークを使うほうがスッキリしていていい感じがします。
なにより、データの双方向バインディングと謳っているだけありその辺りはすごいスムーズです。
一応TODOリストのHTMLを載せておきます。
全体のHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="wrapper"> <div class="contents"> <h1>Todo</h1> <div class="main todoList"> <input type="text" placeholder="タスクを記入" class="add" v-model="newTask" v-on:keyup.enter="addTask"> <ul class="lists"> <li v-for="todo in filteredTodos"> <label><input type="checkbox" name="check" v-model="todo.check" ><span class="icon-checkmark-circle"></span></label> <input type="text" name="task" v-model="todo.title"> <span class="delete icon-trash" v-on:click="deleteTask(todo)"></span> </li> </ul> <div class="filters"> <select name="todoChange" v-model="filterTask" > <option value="all">All Tasks</option> <option value="incomplete">Incompelete Tasks</option> <option value="complete">Complete Tasks</option> </select> </div> </div> </div> </div> |
Author Profile
スターフィールド編集部
SHARE
