3つだけ覚えてVue.jsでtodoアプリを作ってみる

必要最低限だけ理解して、Vue.jsでtodoアプリを作ってみる記事。

#Vue.jsってなんだ？
Vue.jsはJavaScriptのアプリケーションフレームワーク。

##特徴

* シンプルにかける
* リアルタイムでの反映が簡単に出来る（公式HPで試せる）
* 学習コストが低い

[Vue.js公式HP](http://vuejs.org/)

などが特徴。


#3つだけ覚えてTodoアプリ
シンプルな分、少し覚えたらすぐにかける。
Vue.jsで作ったtodoアプリがこちら。
[【デモ】](https://growsic.github.io/JS/VueJS/vueTodoApp/vueTodoApp.html)　[【github】](https://github.com/growsic/JS/blob/master/VueJS/vueTodoApp/vueTodoApp.html)


##覚えることその①：new Vueで初期化
Vue.jsを使いたかったら、vue.jsファイルを読み込んだ上で
 
```js
var app = new Vue({
//some code
})
```
で初期化してやればよい。何のことはない。
##覚えることその②：html内での関連付け

Vue.jsでは、v-○○というプロパティを付与することで、Vue.js内で利用出来るようになる。
○○に入るものは必要に応じて調べればいい。

```html

 <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ではない数を示している。
すなわち、終わっていないタスクの数。


##覚えることその③：データや処理を書き込む

```js
var app = new Vue({
//some code
})
```
の中の処理が一見わかりにくそうだけど、よく見てみると単純。
基本的な要素を覚えてしまえばすぐに理解できるようになる。

##el要素でidやclassを指定

```js
 el: '#todo'
```

で、html内のid=todoの要素を指定している。
この宣言によって、今から書くコードの適用範囲を指定している。

##扱う変数をdataで宣言
dataに変数を宣言して扱うことができる。
外部からデータを読み込んでここに入れてやれば、そのまま表示される

```js
 data: {
       todos: [],
       input: ""
   }
```

ここでは個々のタスクを格納するarrayと、入力フォームの初期値を宣言している。
todosは空である必要はなく、ここに要素を格納しておけば最初からその要素達が表示される。

##created: function(){}で読み込んだ際の処理を実装

```js
created: function(){
//some code
}
```

と書くことで、読み込んだ際の処理を実装できる。
今回のコードでは、this.todos.pushでtodosに要素の追加を行っている。
Vue.jsの特徴の通り、todosに追加された要素はそのまま反映される。

```js
 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でオリジナルの処理を実装

```js
methods:{
  originalFunction: function(){
   //some code
  }
}
```
で、originalFunctionという名前のメソッドを作れる。
メソッドの呼び出しは

```lang:html
<input type="button" v-on="click:originalFunction" />
```
のように、v-on要素にてトリガーを指定して呼び出すようにすることができる。



今回の例では、"add todo"がクリックされたらtodosにinputフォームの内容が追加されるようにしている。

```html
<input type="button" v-on="click: addTodo" value="add todo" />
```

で、要素がclickされたら実装したaddTodoメソッドが呼ばれる。

```js
methods:{
       addTodo: function(){
           if ( this.input === '' ) return;
           this.todos.push({ isDone:false , content:this.input });
           this.input = ""
       }
   }
```

#終わりに
以上、大きく３つの要素を覚えることで（実質10個以上ある気もするけど）、簡単な処理はできるようになる。お試しあれ。
　[【github】](https://github.com/growsic/JS/blob/master/VueJS/vueTodoApp/vueTodoApp.html)


###コード全容

```html
<!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>

```
## Vue.js参考書籍
[Vue.js入門 基礎から実践アプリケーション開発まで](https://www.amazon.co.jp/gp/product/B07J6FP6NQ/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B07J6FP6NQ&linkCode=as2&tag=hirocode-22&linkId=5614b4d30cf87df8eb08e657dacdfdb7)