Vue.jsの入門で必ず出てくるv-onとv-for
v-onとv-forを使うことができれば以下のようなToDoアプリもすぐ作れました！
今回のつまづきいたところ
- addボタンを押してもページがリロードされる
- フォームに打ち込んだ文字が消えない
それではVue.jsだけで簡単なToDoアプリを作っていきましょう！
まずは雛形をつくる
まずはJavaScript側。
【初心者向け】Vue.jsの双方向データバインディングと同じ作りをしているため、説明は簡単に書きます。
main.js
(function(){
"use strict";
var vm = new Vue({
el: '#app',
data: {
todos: [
'task1',
'task2',
'task3'
]
}
});
})();
new Vueで新規作成したインスタンスを変数vmに与えます。
HTML側の"id=app"はCSSのセレクタ同様'#app'で呼び出します。
次にdataを用意してあげるのですが、今回は'task'を仮置きしています。
後ほど、この***'task'の下にフォームから入力された値を表示できるよう***にします！
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Vue App</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app" class="container">
<h1>My Todo Lists</h1>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
</html>
HTML側ではtitleを「My Vue App」とし、表題に「My ToDo Lists」としています。
ここででてくるv-forでは先程main.jsで書いた、data内の配列todosを一つづつ画面にリストとして表示させるため、
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo }}</li>
</ul>
とします。
todosの中のtodoを一個づつfor文で取得しているイメージです。
尚、コメントをいただきましたv-forにはkey指定が推奨されている件ですが、公式ドキュメントを確認し、追記いたしました。
繰り返される DOM の内容が単純な場合や、性能向上のために標準の動作に意図的に頼る場合を除いて、可能なときはいつでも v-for に key を与えることが推奨されます。
雛形は以上です。
ここからv-onが出てきます
まず、HTML側でリストの下に
<!-- <form v-on:submit="addItem"> -->
<form @submit.prevent="addItem">
<input type="text" v-model="newItem">
<input type="submit" value="add">
</form>
を追記します。
基本はv-onですが**@で省略も可能です。
submit(ボタンを押下)した時にnewItemの値をv-on**(@submit)というディレクティブを使ってtodosに追加できます。
ここでsubmitしたときのメソッドをaddItemと指定します。
preventで無駄なページリロードを防ぐ
@submitのあとに出てくるpreventはリロードを防いでくれます。
これをしないと
リストに追加をしてもリロードしてしまって画面上に追加されません。
続いて、main.jsのdata内に**newItem: '',**を追加します。
newItem: '',
thisでdata内にアクセスする
data内にはthisを使ってアクセスできます。
},
methods: {
addItem: function(e){
this.todos.push(this.newItem);
this.newItem = '';
}
}
this.todosで配列にアクセスし、this.todos.pushとした後に**(this.newItem)とすることでnewIemがtodosの末尾に追加され、li要素に反映されるようになります。
このままでは、addした後にフォームに値が残ったままになるのでthis.newItem = '';を追加し、配列に値をpushした後はnewItem**空文字にすることでフォームに値が残る心配がなくなります。
サンプルもありますのでお試しください！
※2020年1月更新
##MENTAでコードレビューやプログラミング勉強相談を行っています！
お気軽にメッセージを下さい！
プランはこちらになります！