ディレクティブの使い方を学ぼう
前回は、「elやdataとは何か？」VueJSの初歩について学びました。
今回は条件分岐や繰り返し分、イベントの発火などを行う
ディレクティブ
について学んで行きましょう。
ディレクティブとは何か？
ディレクティブというのは、VueJSではじめから用意されている「条件分岐」や「繰り返し」、「イベントの発火」などの 処理を行ってくれるものです。
「v-〇〇」という書き方をして、HTMLタグ何に記述していきます。
以下がよく使われるものです。
- v-if
- v-show
- v-for
- v-model
- v-bind
- v-on
これらについて一通りどういうものか実践しながら特訓します。
条件分岐のv-if
v-ifはただの条件分なので、簡単に覚えられると思います。
コードを見て「ふーんなるほど」と納得してください。
<div id="app">
<div v-if="value1">
value1!!
</div>
<div v-if="value2">
value2!!
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
value1: true,
value2: false,
},
})
</script>
v-ifなどのディレクティブはHTMLタグ内に書きます。 見て分かる通り、「value1はtrue」、「value2はfalse」となっているので、「value1!!」というところだけが表示されます。
ほぼv-ifと同じv-show
続いてv-showですが、これはほとんどv-ifと一緒です。 違うところとしては、v-ifがHTMLの自体を削除するのに対して、 v-showでHTMLは削除せず、CSSの「display: none」が付くだけになります。
Chromeの検証モードで要素を確認してみると v-ifの場合は「value2」の要素ごと消えているのが分かります。
一方v-showの場合は「value2」の要素はありますが、「display: none」となっています。
v-ifとv-showでこのくらいの違いしかないので、初めのうちは好みで使い分けて良いと思います。 慣れてきたら、特性を意識して使い分けると良いでしょう。
くるくる繰り返すv-for
v-forは配列等を繰り替えすものです。 前回説明した、配列を使いましょう。
data: {
users: [
{
name: 'takeshi',
age: 20,
},
{
name: 'minamino',
age: 40,
},
]
}この配列はユーザ一覧で、それぞれ名前と年齢を持っています。 これをv-forで回して、名前、年齢を表示してみましょう。
<div v-for="user in users">
{{ user.name }} : {{ user.age }}
</div>
↑のように記述すると、usersに入っているデータが一つひとつ取り出され、userに代入されます。 一回めの繰り返しでは、「takeshiと20」というデータとなっているので、それを表示しています。 このv-forは配列あるすべてのデータを繰り返します。今回は2つデータ（takeshiとminamino）があるので、2かい表示されます。
このように表示されればOKです。 このv-forはHTMLのタグを工夫すれば、色々面白ことができます。
例えばリストやテーブルを使ったりすると、表現が豊かになります。 様々な場面で利用する機会があるかなと思うので、頭の片隅に置いておくと良いかもしれません。
テーブルの場合
<table>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</table>
リストの場合
<ul>
<li v-for="user in users">
{{ user.name }} : {{ user.age }}
</li>
</ul>
入力欄とかにデータを双方向で反映させるv-model
v-modelは入力フォームなどで利用します。
例えば入力欄があり、入力下と同時に「入力した内容を画面に描画したい」時に使用します。
data: {
name: "takeshi"
},dataでnameを定義しておきます。
<input type="text" v-model="name">
{{ name }}
このようにv-modelでinputと結びつけてやると、入力欄に「takeshi」の文字列が最初からセットされます。
そして重要なのはここからです。v-modelで結び付けられた入力欄の内容を変えると、表示も勝手に切り替わります。 この仕組はリアクティブと呼ばれていて、ある値が変化するとそれを使っているところが全てリアルタイムで変わります。今回ある値はnameになります。
また、入力欄から内容を変えましたが、コード上でname = minaminoというふうにしても、表示は変わります。 この
html -> js js -> html
のように、どちらから値を変えても、もう一方も勝手に変わる。このような仕組みを双方向バインディングと呼んでいます。 今は「へえー」って感じで思うだけで十分です。
HTMLの属性に値を結びつけるv-bind
v-bindはv-modelと似ていますが、 js -> htmlだけで、HTMLの要素に対して値を反映させるということをしています。 具体的には以下のコードを見てみてください。
data: {
url: "http://google.com"
},<a v-bind:href="url">google</a>
まずdataでurlという変数にgoogleのURLを代入しました。 そして、aタグのhrefの前に「v-bind:」と入力しurlを値として入れました。 これによって、href属性の値にurlという変数がバインドされ、googleへのリンクが出来上がるという仕組みです。
今回はhrefでしたが、idやclass、style、disabled、checkedなどにもバインド出来ます。 classやcheckedなどは個人的によく使うかなと思います。
イベント発生時にある処理を発火させるv-on
v-onは使っていて一番楽しんじゃないかなと思います。 例えば「ボタンを押したらアラートが表示させたい」という時などに使います。
具体例を見てみましょう。
var app = new Vue({
el: '#app',
data: {
},
methods: {
alertMessage: function() {
alert("hello");
}
}
})<button v-on:click="alertMessage()">アラート表示</button>
今回新しい「methods」というものが出てきました。これは自分のメソッドを定義していくところになります。 詳しくは次回説明していきます。 今回「alertMessage()」というメソッドを作成し、呼ばれたら、alertを出すようにしました。
HTML側では「v-on:click="alertMessage()"」となっています。 v-onでクリックしたときに何を呼び出すかというのを決められます。
alertMessage()を呼び出すように指定しているので、ボタンを押してみると以下のようになります。
もちろん引数を取ることもできます。
省略して書きますが
alertMessage: function(name) {
alert("hello " + name);
}
v-on:click="alertMessage('takeshi')"とすると、alertに「hello takeshi」と表示されるはずです。
まとめ
今回はVueJSの基本的なディレクティブについて学びました。
- v-ifは条件分岐
- v-showはv-ifとほぼ一緒だが、v-ifが要素を完全に消すのに対して、v-showはCSSで消す
- v-forは繰り返し分。リストやテーブルと組み合わせると強力
- v-modelはフォームなどで双方向でリアルタイムに値を書き換える
- v-bindはHTMLの属性の値に変数を渡す
- v-onは何か操作をした時に、ある処理をするよう設定できる
この他にもディレクティブはありますが、基本的には上のものを抑えておけば、大抵のことは実現可能です。 また、今回v-onのところで「methods」というものが出てきましたが、これも重要なVueJSの機能なので、 次回詳しく学んで行きましょう。
methodsを使いだすと、出来ることの視野が広がってもっと面白くなりますよ。