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