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



#ハロー
その３です。
[その１](https://qiita.com/yusuke_ten/items/21f97fe961d0070af418)と[その２](https://qiita.com/yusuke_ten/items/3c5ae79da459fb566fbd)を見ていない人はぜひ見てね！


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

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


[公式のディレクティブ一覧はこちらです。](https://jp.vuejs.org/v2/api/#v-text)

#よく使うやつ
##v-on
クリックとかのイベントに合わせて関数を実行します。難しくいうとhtmlの要素とイベントリスナを結びつけます。
以下の図を見てみましょう。

![Vue_-_JSFiddle.png](https://qiita-image-store.s3.amazonaws.com/0/251548/12442240-9e55-3c2f-3591-3367b2596fc8.png)

[jsfiddleで確認してください。](https://jsfiddle.net/uqwz1rsr/)

他にもフォーム要素をサブミットするのにページ遷移させないようにすることもできたりします。
![スクリーンショット 2018-04-30 0.43.38.png](https://qiita-image-store.s3.amazonaws.com/0/251548/2c04af6d-9de0-a0ae-7e85-2275ee81bdd1.png)

[jsfiddleで確認してください。](https://jsfiddle.net/vf9wuc9u/)

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


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

とのことです。

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

![Vue_-_JSFiddle2.png](https://qiita-image-store.s3.amazonaws.com/0/251548/fc19631a-3fed-116a-e45e-bb2782063706.png)


[jsfiddleで確認してください。](https://jsfiddle.net/p79aseps/)

##v-if
v-ifはv-showとは違って要素を作ったり消したりします。
**v-ifとv-showはコンポーネントと組み合わせると、さらに便利です。**

![スクリーンショット 2018-04-30 10.35.28.png](https://qiita-image-store.s3.amazonaws.com/0/251548/1b6246be-b5c2-ea7a-b417-0804410713ef.png)

[jsfiddleで確認してください。](https://jsfiddle.net/yhnp6txn/)

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

![スクリーンショット 2018-04-30 21.33.21.png](https://qiita-image-store.s3.amazonaws.com/0/251548/1d86cb28-3486-d60f-825a-d133fd7486a1.png)

[jsfiddleで確認してください。](https://jsfiddle.net/nqhdd48e/)

##v-for

**配列やオブジェクトをループするのに使います。**
公式によると
>item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです:

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

![Vue_-_JSFiddle3.png](https://qiita-image-store.s3.amazonaws.com/0/251548/3e19191f-2774-aa9f-e797-fa38e87a169c.png)

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

[jsfiddleで確認してください。](https://jsfiddle.net/uwbap3wu/)

##v-bind
htmlのタグの中には{{ }}の記法が使えないのでv-bindを使います。
真偽値に合わせてクラスやidを切り替えたりできます。
**htmlタグの中で双方向バインディングを使いたいときに使いましょう。**

![Vue_-_JSFiddle4.png](https://qiita-image-store.s3.amazonaws.com/0/251548/ac60c968-5bcd-c59c-be9f-c06a745fb46d.png)

[jsfiddleで確認してください。](https://jsfiddle.net/xascvc8x/)

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

##v-model
**v-modelはformの内容とjsでバインディングするのに使う、と覚えましょう。**
チェックボックスの場合はbooleanをとったりするので挙動に気をつけましょう。

![スクリーンショット 2018-04-30 23.47.14.png](https://qiita-image-store.s3.amazonaws.com/0/251548/b0c38480-2321-27d6-2934-9c1810170056.png)

[jsfiddleで確認してください。](https://jsfiddle.net/yxqso4b4/)

#たまに使う
##v-text
{{ }}の記法とほぼ同じです。

![Vue_-_JSFiddle5.png](https://qiita-image-store.s3.amazonaws.com/0/251548/ac453934-48ce-af05-9a35-6f6292861013.png)


[jsfiddleで確認してください。](https://jsfiddle.net/wmhre5w6/)

##v-html
htmlを直でぶち込みます。

![スクリーンショット 2018-05-01 0.47.30.png](https://qiita-image-store.s3.amazonaws.com/0/251548/a78f7ffd-e168-ec87-812c-7af685c43c48.png)

[jsfiddleで確認してください。](https://jsfiddle.net/ujsn8xz0/)
注意点としてぶち込むhtmlタグ内にディレクティブを書いても機能しないので気をつけてください。
ディレクティブを書きたい場合はv-htmlではなくコンポーネントで代用してください。

#あんまり使わない
##v-pre
v-preを使った要素と、全ての子要素のコンパイルをスキップします。
**ディレクティブを使わない要素に指定してあげることでページの読み込みの高速化が狙えます。**
慣れてきたら使ってみるといいでしょう。
![スクリーンショット 2018-05-01 0.54.12.png](https://qiita-image-store.s3.amazonaws.com/0/251548/9b35a4d9-2f70-a253-b055-7a993950dad2.png)

[jsfiddleで確認してください。](https://jsfiddle.net/cpnj0oo3/)

##v-clock
読み込み中に{{ }}が見えたりしたらちょっと不格好ですよね？
そういう場合はv-clock　を使いましょう。
読み込みが終わるまでv-clockは使えます、読み込み終了後は使えません。なのでcssと組み合わせて以下のように使いましょう

![スクリーンショット 2018-05-01 1.01.29.png](https://qiita-image-store.s3.amazonaws.com/0/251548/8925d993-1f5f-12d6-a71f-1edcac7e5368.png)

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

[jsfiddleで確認してください。](https://jsfiddle.net/5c0a93kq/)

##v-once
要素とコンポーネントをページ読み込み時に一度だけ描画します。
その後は、要素とその子要素はVueインスタンスから操作などは一切受け付けません。

![スクリーンショット 2018-05-01 1.07.51.png](https://qiita-image-store.s3.amazonaws.com/0/251548/3bc479c9-07aa-a176-3c94-76ace05b08e7.png)

[jsfiddleで確認してください。](https://jsfiddle.net/9nbn1crj/)

#おわり
ぬわああん疲れたもおおおおおおん。
途中でやめたくなったぞ。
次こそはemitとpropsについて書きますんで許してください。