はじめに
自分が勉強した内容のまとめなので、正確性は保証しません。
こちらのサイトにcodesandboxを埋め込んでいます。
実際の振る舞いを見ながらコードの確認ができるので非常に便利です。
シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。
Todo リストの作成
今回は今まで学習してきた知識を用いて Todo リストを作成してみましょう。
ループでデータを描画する v-for、データを入力する v-model、v-on:click を使います。
入力を反映してくれる Todo リストの完成像
まずは最初に完成像を確認してみましょう。
こちらのサイトにcodesandboxを埋め込んでいますので、実際の振る舞いをご確認ください。
Text Area に好きな文字列を入力し、Add Todo List のボタンを押せば、
Todo リストに文字列が追加されていくことがわかると思います。
入力を反映してくれる 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 だけでは実現できなかった、
動きのあるページ作りが簡単に実装できることがわかったと思います。
最後まで見て頂きありがとうございました！他の記事も宜しくお願い致します。