データや関数の扱い方(本題の前に…)
まだ解説はしていないのですが、今後 関数
や 算出プロパティ
と呼ばれるものが出てきます。
Vue.jsでは関数を書く場所や指定の仕方にルールがあるので、全体の形だけ最初に確認しておきます。
※この時点で頑張って理解する必要はありません。全体の構成と使用方法のイメージだけなんとなく雰囲気がつかめたらいいなと思います!
data
:この中にデータ(変数のようなもの)を管理します。
methods
:この中に関数を管理します。
computed
:この中に算出プロパティを管理します(後ほど出てきます)
これらは、カンマ区切りで並べて書きます。
var app = new Vue({
el: "#app",
data: {
//データを準備
message: 'Hello Vue.js',
items: ['item1', 'item2', 'item3']
},
methods: {
//関数
},
computed: {
//算出プロパティ
}
});
例えば具体的に、「scoreを倍にして返す関数を利用して、HTMLに結果を表示する処理」は次のように書きます。
関数から、dataに用意した
score
にアクセスするにはthis
を使用します。
HTMLでは{{ }}
を使って関数を実行させています。
dataにあるmessage
とitems
はこの処理には使っていません。
それでは、本題のディレクティブに参りましょう。
「v-」から始まるディレクティブについて
前回、データをリアルタイムに変更するために v-model
というのを使いました。
「v-」から始まるこの v-model
は 「ディレクティブ」 というVue.jsの特殊な機能です。
ディレクティブ(Directive)は「指令」という意味があります。
いくつか種類がある中でも、vue.jsで特に重要なディレクティブの使い方について見ていきましょう!
v-for
v-for
はJavaScriptのfor文と仕組みも使い方もほぼ同じです。
では v-for
を使って、配列の中身を一覧表示してみましょう。
まず、main.js
の方にdataとして配列を準備します。
var app = new Vue({
el: "#app",
data: {
items: ['item1', 'item2', 'item3']
}
});
index.html
では、 li
に v-for
を追加します。
<div id="app">
<li v-for="item in items"> {{ item }}</li>
</div>
配列
items
の中身から一件ずつitem
に入る ➡{{ item }}
とすることで中身を出力することができます。
配列+オブジェクトのリスト表示
先ほどのは簡単な例でしたが、実際には例えばデータベースから取得したオブジェクトのような複雑なデータ形式を扱うことが多いです。
なので、オブジェクトの一覧表示の方法についても見ておきましょう。
var app = new Vue({
el: "#app",
data: {
users: [
{id: 1, name: 'taro', age: 21},
{id: 2, name: 'jiro', age: 22},
{id: 3, name: 'saburo', age: 23},
]
}
});
<div id="app">
<ul v-for="user in users">
<li>{{ user.name }} ({{user.age}}歳)</li>
</ul>
</div>
dataに
users
というオブジェクトを用意します。
あとは取り出した1件分のuser
にドットをつけて、データにアクセスします。
v-on
v-on
を使うと、JavaScriptで用意したイベントを使うことができます。
「ボタンをクリックされた」や「カーソルが乗った」など 「何かが起きたら何かをする」 というJavaScriptの addListener
のイメージです。
せっかくなので、上で使ったソースコードを元に
次のような 「追加ボタンを押すと任意の文字列を追加することができる機能」を作ってみます。
v-for
のすぐ下に追加する形で formタグ
を記述してください。
<div id="app">
<li v-for="item in items"> {{ item }}</li>
<form>
<input type="text">
<input type="submit" value="追加">
</form>
</div>
とりあえずは、入力欄と追加ボタンを作成しました。
<実装の方針>
- JavaScript側に「 newItem 」という変数を用意します。入力されたテキストを保持するためです。
➡︎v-model
を使って、input text
とJavaScriptに用意したnewItem
を紐付ける - JavaScript側に、配列に要素を追加していくための関数を用意する(「addItem」というキーでアクセスできるようにする)
➡︎ 配列items
に、入力されたテキスト( newItem )をpushする - formタグに「submit」された時のイベントを
v-on
を使って紐づける
➡︎<form v-on:submit="関数名">
という形で使用したい関数名を書く
(追加の処理に今回は 「submit」 を使用していますが、後で prevent
の解説をしたいためです。)
<ソースコード>
1. JavaScript側に「 newItem 」という変数を用意して、そこに入力されたテキストを格納する
var app = new Vue({
el: "#app",
data: {
//newItemを空の状態で用意する。
newItem: '',
items: ['item1', 'item2', 'item3']
}
});
2. JavaScript側に、配列に要素を追加していく関数を用意する(関数名は「addItem」)
データを準備する時は data:{}
の中に書いてきましたが、関数を準備する時は methods:{}
の中に書いてください。
data{}
の最後にカンマを入れて、methods{}
を追加します。あとはその中に関数を作成してください。
data: {
newItem: '',
items: ['item1', 'item2', 'item3']
},
methods: {
addItem: function() {
//data内のデータにはthisでアクセスできます
this.items.push(this.newItem);
}
}
3. formタグに「submit」された時のイベントを v-on
を使って紐づける
<form v-on:submit="addItem">
<input type="text" v-model="newItem">
<input type="submit" value="追加">
</form>
ここまでで、ほぼ完成なので一旦整理します。
①input欄に入力されたテキストは、JavaScriptに空で用意しておいた newItem
で受け取る。
そのinputタグには、JavaScriptと紐づけるためにinputタグに v-model
を追加
②submitされたときの処理をJavaScriptに追加。関数は、methods
というキーの中に書く。
③作成した関数と紐づけるために、formタグに v-on
を追加
動作確認(prevent)
実際に動かしてみるとわかりますが、追加ボタンを押してもまだ追加されません。
どうしてでしょうか…?
実は、 submitされたことで画面の更新が起きた ことが原因です。
submitタグに prevent
を追加するとリロードを防ぐことができます。
<div id="app">
<li v-for="item in items"> {{ item }}</li>
<form v-on:submit.prevent="addItem">
<input type="text" v-model="newItem">
<input type="submit" value="追加">
</form>
</div>
これで、追加ボタンの完成です。
本当は、submitを使用しない、つまりpreventを使わなくても追加ボタンを作る方法はあります。
「ページをリロードさせたくない」という時に使える機能の紹介でした。
v-if
ぱっと見てわかるようにv-if
を使うと条件分岐を行うことができます。
条件によって表示と非表示を切り替えたいときによく使います。
ではそれを作ってみましょう。
新しくHTMLを用意して、pタグに v-if
をつけてください。
<body>
<div id="app">
<p v-if="show">TRUE</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/main.js"></script>
</body>
show
という変数にtrueを持たせたので、v-if="show"
とすると当然条件はTRUEになりますよね。
なので、show
の値をfalseにして更新すると、HTMLの画面から「TRUE」の文字は消えることがわかります。
var app = new Vue({
el: "#app",
data: {
show: true
}
});
検証ツールからも確認できます。
trueの時は表示されている。
falseの時はコメントアウトされている。
v-if、v-else-if
Vue.jsで、else if
を使いたい場合についてです。
いつもの使い方とは、以下のように形が少し異なります。
<要素 v-if="条件式">コメント</要素>
<要素 v-else-if="条件式">コメント</要素>
<要素 v-else>コメント</要素>
具体例でみていきます。
データにscoreを用意してください。
var app = new Vue({
el: "#app",
data: {
score: 0
}
});
<div id="app">
<p v-if="score >= 70">合格です</p>
<p v-else>不合格です</p>
</div>
v-if
とv-else
を1行づつ書かなければいけないですが、こうすることで条件分岐が行えます。
v-show
v-show
は v-if
と同じように表示・非表示を切り替えることができるディレクティブです。
v-if
との違いは「そうじゃなかったら○○」のように else-if
が使えないのが大きな点です。
v-ifとv-showの細かな違い
v-if
:実際にタグを追加、削除することで表示・非表示が起きている
v-show
:style属性のdisplayプロパティの値を表示なら「block」非表示なら「none」として切り替えています。
v-show
は非表示の場合 「ただ見えなくなっているだけで要素は存在しています」
一方 v-if
は非表示の場合、タグ自体が本当に作成されていません。
v-ifとv-showの使い分け
v-show
:頻繁に表示・非表示を行う場合(要素の作成や削除に比べて、v-showは負荷が少ないため)
v-if
:細かく条件を指定したかったり、表示・非表示の頻度が低い場合
まとめ
今回は、以下の5点について見てきました。
・v-for
(リスト、オブジェクトの一覧表示)
・v-on
(追加ボタン作成)
・prevent
(リロードの解除)
・v-if
(表示・非表示の切り替え)
・v-show
(表示・非表示の切り替え)