Posted at

Vue.jsをシンプルに理解しよう その3

More than 1 year has passed since last update.


ハロー

その3です。

その1その2を見ていない人はぜひ見てね!

propsとemitについて書くと言ったな、あれは嘘だ。

というわけで今回はディレクティブについてです。

ディレクティブはVue.jsの基礎です、またディレクティブはそんなに数が多くないので全部紹介します。

公式のディレクティブ一覧はこちらです。


よく使うやつ


v-on

クリックとかのイベントに合わせて関数を実行します。難しくいうとhtmlの要素とイベントリスナを結びつけます。

以下の図を見てみましょう。

jsfiddleで確認してください。

他にもフォーム要素をサブミットするのにページ遷移させないようにすることもできたりします。

jsfiddleで確認してください。

v-onの使いどころはクリックなどのイベントに合わせて関数を実行する、と覚えると分かりやすいんじゃないでしょうか?


v-showとv-if

真偽値に基いてhtmlの要素の表示または非表示を行います。

公式によると 


一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。


とのことです。


v-show

cssのdisplayプロパティで表示、非表示を操作します。

jsfiddleで確認してください。


v-if

v-ifはv-showとは違って要素を作ったり消したりします。

v-ifとv-showはコンポーネントと組み合わせると、さらに便利です。

jsfiddleで確認してください。


v-elseとv-else-if

if文があるのでelse文もelse-if文もあります

jsfiddleで確認してください。


v-for

配列やオブジェクトをループするのに使います。

公式によると


item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです:


とのことで、v-forのみ通常のディレクテブトは違う書き方が必要なようです。

上の図のように配列やオブジェクトをループする場合には、引数の順番が決まっているので注意してください。

jsfiddleで確認してください。


v-bind

htmlのタグの中には{{ }}の記法が使えないのでv-bindを使います。

真偽値に合わせてクラスやidを切り替えたりできます。

htmlタグの中で双方向バインディングを使いたいときに使いましょう。

jsfiddleで確認してください。

Vueインスタンスからコンポーネントに値を渡したりするのにも使えます、この部分はまた今度詳しく説明します。


v-model

v-modelはformの内容とjsでバインディングするのに使う、と覚えましょう。

チェックボックスの場合はbooleanをとったりするので挙動に気をつけましょう。

jsfiddleで確認してください。


たまに使う


v-text

{{ }}の記法とほぼ同じです。

jsfiddleで確認してください。


v-html

htmlを直でぶち込みます。

jsfiddleで確認してください。

注意点としてぶち込むhtmlタグ内にディレクティブを書いても機能しないので気をつけてください。

ディレクティブを書きたい場合はv-htmlではなくコンポーネントで代用してください。


あんまり使わない


v-pre

v-preを使った要素と、全ての子要素のコンパイルをスキップします。

ディレクティブを使わない要素に指定してあげることでページの読み込みの高速化が狙えます。

慣れてきたら使ってみるといいでしょう。

jsfiddleで確認してください。


v-clock

読み込み中に{{ }}が見えたりしたらちょっと不格好ですよね?

そういう場合はv-clock を使いましょう。

読み込みが終わるまでv-clockは使えます、読み込み終了後は使えません。なのでcssと組み合わせて以下のように使いましょう

v-clockを適用したdiv要素はページの読み込みが終了するまでは不可視となります。

jsfiddleで確認してください。


v-once

要素とコンポーネントをページ読み込み時に一度だけ描画します。

その後は、要素とその子要素はVueインスタンスから操作などは一切受け付けません。

jsfiddleで確認してください。


おわり

ぬわああん疲れたもおおおおおおん。

途中でやめたくなったぞ。

次こそはemitとpropsについて書きますんで許してください。