はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

こちらのサイトにcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

Todo リストの作成

今回は今まで学習してきた知識を用いて Todo リストを作成してみましょう。

ループでデータを描画する v-for、データを入力する v-model、v-on:click を使います。

まずは最初に完成像を確認してみましょう。

こちらのサイトにcodesandboxを埋め込んでいますので、実際の振る舞いをご確認ください。

Text Area に好きな文字列を入力し、Add Todo List のボタンを押せば、

Todo リストに文字列が追加されていくことがわかると思います。

＜ template ＞内のコードから解説していきます。

・v-for でループ処理をしているコード

<li v-for="todo in todos">{{ todo.item }}</li>

配列(todos)内に値が存在している限り、todo.item の中身を描画するループ処理を繰り返します。

・v-model で入力を受け付けるコード

<input type="text" v-model="newItem" placeholder="やることを入力">

text タイプで newItem に text データを格納しています。

・v-on:click で処理を呼び出すコード

<button v-on:click="add">Add Todo List</button>

ボタンがクリックされた際に、＜ script ＞で定義した add 処理を呼び出します。

続いて、＜ script ＞内のコードを解説していきます。

・データの定義

data: function() {
  return {
    newItem: "",
    todos: []
  };
},

ユーザーの入力を受け付けるデータとして newItem、

これまでに入力されたデータを格納しておくために配列 todos を用意しています。

・todos に格納する add 処理

add: function() {
  let todosItem = {
    item: this.newItem
  };
  this.todos.push(todosItem);
  this.newItem = "";
}

オブジェクト型として格納するために let todosItem を宣言しています。

this.todos.push により、配列の最後尾に todosItem を格納します。

最後に this.newItem の中身をリセットしています。

今回はレイアウトも気にせずに簡単な Todo アプリを作ってみました。

HTML、CSS だけでは実現できなかった、

動きのあるページ作りが簡単に実装できることがわかったと思います。

最後まで見て頂きありがとうございました！他の記事も宜しくお願い致します。