必要最低限だけ理解して、Vue.jsでtodoアプリを作ってみる記事。
Vue.jsってなんだ？
Vue.jsはJavaScriptのアプリケーションフレームワーク。
特徴
- シンプルにかける
- リアルタイムでの反映が簡単に出来る（公式HPで試せる）
- 学習コストが低い
などが特徴。
3つだけ覚えてTodoアプリ
シンプルな分、少し覚えたらすぐにかける。
Vue.jsで作ったtodoアプリがこちら。
【デモ】 【github】
覚えることその①：new Vueで初期化
Vue.jsを使いたかったら、vue.jsファイルを読み込んだ上で
var app = new Vue({
//some code
})
で初期化してやればよい。何のことはない。
覚えることその②：html内での関連付け
Vue.jsでは、v-○○というプロパティを付与することで、Vue.js内で利用出来るようになる。
○○に入るものは必要に応じて調べればいい。
<div id="todo">
<h1>My Todos</h1>
//v-○○で関連付け
<div v-repeat="t : todos | orderBy 'isDone'">
<input type="checkbox" v-model="t.isDone" />
//変数を配置
{{$index}}:{{t.content}}
</div>
<input type="text" v-model="input" value="">
<input type="button" v-on="click: addTodo" value="add todo" />
<div>
left {{lefts}} tasks.
</div>
</div>
v-repeat="t : todos | orderBy 'isDone'"
ここではTodoリストを作るため、v-repeatという要素を指定してtodosに入っている要素を列挙するにしている。
t : todosではtodosというarrayの要素をtとして取り出している。
orderBy 'isDone'は、todosの要素にもたせているisDoneというboolean型をもとに、並びかえる処理を行っている。
要するに、完了したタスク(isDoneがtrueのもの)が下にいく。
t.isDone
todoの要素であるtの、isDoneというプロパティにアクセスする。
{{lefts}}
leftsという要素の中身を表示する。
ここではtodosの要素の中でisDoneがtrueではない数を示している。
すなわち、終わっていないタスクの数。
覚えることその③：データや処理を書き込む
var app = new Vue({
//some code
})
の中の処理が一見わかりにくそうだけど、よく見てみると単純。
基本的な要素を覚えてしまえばすぐに理解できるようになる。
el要素でidやclassを指定
el: '#todo'
で、html内のid=todoの要素を指定している。
この宣言によって、今から書くコードの適用範囲を指定している。
扱う変数をdataで宣言
dataに変数を宣言して扱うことができる。
外部からデータを読み込んでここに入れてやれば、そのまま表示される
data: {
todos: [],
input: ""
}
ここでは個々のタスクを格納するarrayと、入力フォームの初期値を宣言している。
todosは空である必要はなく、ここに要素を格納しておけば最初からその要素達が表示される。
created: function(){}で読み込んだ際の処理を実装
created: function(){
//some code
}
と書くことで、読み込んだ際の処理を実装できる。
今回のコードでは、this.todos.pushでtodosに要素の追加を行っている。
Vue.jsの特徴の通り、todosに追加された要素はそのまま反映される。
created: function(){
this.title = "My Todos";
var saved = [
{
isDone:true,
content:"content1"
},
{
isDone:false,
content:"content2"
},
{
isDone:false,
content:"content3"
},
{
isDone:false,
content:"content4"
}
]
//savedをtodosに入れていく
for(var i = 0; i < saved.length; i++){
this.todos.push(saved[i]);
}
},
methodsでオリジナルの処理を実装
methods:{
originalFunction: function(){
//some code
}
}
で、originalFunctionという名前のメソッドを作れる。
メソッドの呼び出しは
<input type="button" v-on="click:originalFunction" />
のように、v-on要素にてトリガーを指定して呼び出すようにすることができる。
今回の例では、"add todo"がクリックされたらtodosにinputフォームの内容が追加されるようにしている。
<input type="button" v-on="click: addTodo" value="add todo" />
で、要素がclickされたら実装したaddTodoメソッドが呼ばれる。
methods:{
addTodo: function(){
if ( this.input === '' ) return;
this.todos.push({ isDone:false , content:this.input });
this.input = ""
}
}
終わりに
以上、大きく３つの要素を覚えることで（実質10個以上ある気もするけど）、簡単な処理はできるようになる。お試しあれ。
【github】
コード全容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js todo app</title>
<script src="vue.js"></script>
</head>
<body>
<div id="todo">
<h1>My Todos</h1>
//v-○○で関連付け
<div v-repeat="t : todos | orderBy 'isDone'">
<input type="checkbox" v-model="t.isDone" />
//変数を配置
{{$index}}:{{t.content}}
</div>
<input type="text" v-model="input" value="">
<input type="button" v-on="click: addTodo" value="add todo" />
<div>
left {{lefts}} tasks.
</div>
</div>
<script type="text/javascript">
//Vueで初期化
var app = new Vue({
//elementを指定
el: '#todo',
//データを初期化
data: {
todos: [],
input: ""
},
//自動的に計算
computed: {
lefts: function(){
return this.todos.filter(function(t){ return !t.isDone }).length;
}
},
//読み込んだ最初に呼ばれる関数
created: function(){
this.title = "My Todos";
var saved = [
{
isDone:true,
content:"content1"
},
{
isDone:false,
content:"content2"
},
{
isDone:false,
content:"content3"
},
{
isDone:false,
content:"content4"
}
]
for(var i = 0; i < saved.length; i++){
this.todos.push(saved[i]);
}
},
//変数の宣言
methods:{
addTodo: function(){
if ( this.input === '' ) return;
this.todos.push({ isDone:false , content:this.input });
this.input = ""
}
}
})
</script>
</body>
</html>