Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part3〜v-ディレクティブ

※この内容はVue.js入門の〜基礎から実践アプリケーション開発まで〜のP51〜P58を勉強したときの自己流理解メモです。


【これまでの記事】

- <a href="https://qiita.com/sakiyama0101/items/dfc2a20e2dac2fee2850">Vue.js入門〜Vue.jsのはじめの一歩〜を5分で飛ばし読みする</a>
    - Vue.js てHTML、CSS、jQuery、JSやってきたけど、それらと何が違うの?
- <a href="https://qiita.com/sakiyama0101/items/f80f3ed2405788cca0f9">Vue.js〜導入、基本の言葉の定義、考え方〜</a>
    - Vue.jsの導入、グローバル変数、コンストラクタ・インスタンスとは
- <a href="https://qiita.com/sakiyama0101/items/26290cf1d181f9382761">Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜</a>
    -  コンストラクタの書き方基本、$watch メソッド
- <a href="https://qiita.com/sakiyama0101/items/cb4cd7deb984076fd097">Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part2〜</a> 
    - データバインディング

この記事の内容は、Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part2〜の続編ですが、一記事完結しているので特に読む必要はありません。


若干復習のためにディレクティブを確認。

## ディレクティブ
messageプロパティにv-htmlディレクティブを使って生のHTMLをdataに持たせ、DOMに適用することができた。このような便利なVue.jsのディレクティブ機能をデータバイディングと絡めながらシチュエーションと合わせて考え、試していく。

## v-if ディレクティブ
dataプロパティは、ディレクティブを使うことでリアクティブを実現することができる。なんとなく、ここまで勉強してきて思ったのは、Vue.jsの売りはリアクティブ、便利さ、そして学習コストの低さ。いかにそれを実現するか。私はそれを学んでいくんだなということ。（コンポーネントとかも今後出てくるだろうけど、おそらくVue.jsの軸にのっとった素晴らしい機能なんだろうな。。上げすぎ?）  
  
`v-if`ディレクティブは、真偽値を判断してDOMを削除、挿入できます。

```index.vue
<div id="app-3">
  <p v-if="seen">おはよ</p>
  <p v-if="!seen">おはよ</p>
</div>


<script>
var app3 = new Vue({
  el: "#app-3",
  data: {
    seen: true
  }
})
</script>
```  

`seen`の真偽値
true : おはよ　表示
false : おはよ非表示　　

基礎はすごく簡単。けど実際の業務で使ったのはもっと複雑でした。例えば、twitterを思い出してみると、わたし自身のプロフィールページとわたし自身以外のプロフィールページを見に行くと少しずつ違うことがわかります。

<img width="1190" alt="v-ifのtrue" src="https://qiita-image-store.s3.amazonaws.com/0/119773/80940cda-20df-4769-b16b-f2c0a957f359.png">

<img width="1200" alt="v-ifのfalse" src="https://qiita-image-store.s3.amazonaws.com/0/119773/2f843ff1-2e1b-4489-83a5-8cf8f3b53552.png">
好きなYoutuberのTwitterのプロフィールページのスクショを...

この出し分けにも、v-ifが関わっています。大前提として、Vue.jsにおける考え方ということです。twitterはネイティブアプリでもありますし、webアプリでもあります。
ここで話すのはVue.jsでこのような出し分けをする方法です。

<img width="363" alt="v-ifの応用" src="https://qiita-image-store.s3.amazonaws.com/0/119773/ef516aeb-30a0-b603-70e1-03b282d3adeb.png">


v-ifには、true, falseを渡すことができるけれど、このような出し分けに使用できるみたい。基礎的な使い方しか出てきていなかったけれど、基本的なところは一緒でそれをコンポーネントにしたりして出し分けすることで、開発コストの軽減をしているんだなとなんとなくまたイメージができる。

## v-show ディレクティブ
DOM内の表示・非表示の切り替えには、v-ifの他にv-showも使用できる。

### v-ifとv-showの違い
v-if : DOMの追加と削除の切り替え
v-show : 表示・非表示の切り替え（displayの切り替え)

見た目的にはほぼ変わりないけど、じゃあどう使い分ける?というポイントがある、それはレンダリングコストを簡単に頭にいれておくといい。
v-if : DOM操作 → レンダリングコスト高い
v-show : スタイル操作 → DOM操作に比べてレンダリングコスト低い

頻繁に結果が変わるような値に関してはv-showを使って、一度しか変わらないような結果にるようであればv-ifを使うようにするのがいい。その都度判断して使用する。

## v-bind ディレクティブ

v-ディレクティブ には、引数をとるものがある。v-bind:class, v-bind:styleがその例です。

### v-bind:class
クラスのバインドは、v-ifと考え方は似ており、v-bind:classに指定されたオブジェクトの真偽によってclass属性を変える。

```index.vue
<div id="app-5">
    <div v-bind:class="{ active: isActive }">v-bind:classでtrueを持つ</div>
</div>

<script>
var app5 = new Vue({
  el: "#app-5",
  data: {
    isActive: true
  }
})
</script>
```
dataに真偽値を渡す。
また、このv-bind:classは、通常付与したclassを生かしつつも使用することができる。そして、複数のクラス切り替えも可能。

```index.vue
<div id="app-5">
    <div class="plain" v-bind:class="{ active: isActive, 'hidden': isHidden }">v-bind:classでtrueを持つ</div>
</div>


<script>
var app5 = new Vue({
  el: "#app-5",
  data: {
    isActive: true,
    isHidden: false
  }
})
</script>
```

デベロッパーツールで確認
<img width="355" alt="クラスバインド" src="https://qiita-image-store.s3.amazonaws.com/0/119773/428063ea-9117-0485-010a-87b9fb7b1e83.png">

class名がplain active になっていることがわかる。



```html

<div id="app-4">
  <a v-bind:href="http://google.com">Go to Google</a>
</div>
```


ここまでで、v-ディレクティブ、v-if、v-bindの基本を確認した。 実際の業務ではコンポーネントを利用する際に、v-ifディレクティブとv-bind:classを使うというような実用方法がありました。その内容は、今後のコンポーネントを学ぶ際に一緒にまとめます。 

次は、DOM要素内にロジックを組み込んでVue.jsのJavaScript要素を確認していきます。以下予告。

## 【次回予告】Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part4〜

次は、

- リストレンダリング
- イベントハンドリング
- フォーム入力バインディング

などを確認していこうと思います。

おわり