03 ToDoアプリを作ってみます

ToDo管理ができるようなアプリを作りながら、Vue.jsの理解を深めていきます。

目標はシンプルなTODOリストの作成です。
WebStorageに保存してリロードしてもデータを保持できるようにしてます。

まずは data を用意してあげます。
適当に todos というキーで配列の値を持つことにします。
task 1 、 task 2 、 task 3 としてあげます。 

ファイルのパス：/VueApp/js/main.js

内容追加：

(function() {
 'use strict';
 var vm = new Vue({
   el: '#app',
   data: {
     todos: [
       'task 1',
       'task 2',
       'task 3'
     ]
   }
 });
})();

 
この data を UI に反映させたいので ul と li でリストにしてあげます。
単純にリストにしたいなら li の中に二重波括弧でそれぞれの data を書いていけば 大丈夫 です。

<ul>
　　　<li>{{ todos[0] }}</li>
     <li>{{ todos[1] }}</li>
     <li>{{ todos[2] }}</li> 
</ul>               

例えば todos[0] としてあげれば、 task 1 が表示されるはずです。

ただ当然のことながら配列をループさせて表示するための命令も用意されていて、その場合は v-for を使ってあげます。

todos の中身を todo に入れて、要素が終わるまで何らかの処理をしなさいというのは、このように書けば OK で、その場合は todo にそれぞれの値が入ってくるので、こうすると同じ結果になるはずです。

    <ul>
     <!-- <li>{{ todos[0] }}</li>
     <li>{{ todos[1] }}</li>
     <li>{{ todos[2] }}</li> -->
     <li v-for="todo in todos">{{ todo }}</li>
   </ul>             

ちなみに前回見た v-model だとか v-for とか v- から始まる特殊な属性をディレクティブと呼ぶので、用語として覚えておきます。

では Todo の追加もできるように form も追加しておきます。

    <form>
     <input type="text">
     <input type="submit" value="Add">
   </form>

input タグで、まずは type="text" と submit のためのボタンも用意してあげます。
value="Add" で追加します。

ブラウザの方で確認してみると上手くいっている

今回のポイントは、事前データの用意とv-forを利用することです。

以上　よろしくお願いいたします。
続きは次回にしていきます。

今回のソースコードは下記となります。

ファイルのパス：/VueApp/index.html
内容：