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

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

【これまでの記事】

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

この記事の内容は、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を思い出してみると、わたし自身のプロフィールページとわたし自身以外のプロフィールページを見に行くと少しずつ違うことがわかります。

好きなYoutuberのTwitterのプロフィールページのスクショを...

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

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>

デベロッパーツールで確認

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


<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〜

次は、

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

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

おわり