プログラミング入門

この記事では、条件分岐を行う v-showディレクティブについて学習します。

この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

v-showとは

v-showディレクティブは、要素を表示/非表示切り替帰ることができます。

v-ifのように、DOMから要素を追加/削除するのではなく、CSSのdisplay プロパティをON/OFFすることで、を切り替えることができます。

v-showを使ってみる

それでは、実際に使ってみましょう。
v-ifのレクチャーのコードのつづきです。
p要素を設置して、表示、非表示を切り替えることをやります。

v-ifとなっているところを、v-showに書き換えます。

<div id="app">
  <p v-show="toggle">
  Hello
  </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    toggle: false
  }
})

toggleをfalseの時は、result欄に何も表示されてされません。
toggleをtrueに変えてみましょう。

プロパティがtoggleがtrueの時は、Helloと表示されています。

ここで、DOMツリーががどうなっているか観てみましょう。

Helloを選択して、右クリック、検証をクリックします。

<div id="app">
  <p>
    Hello
  </p>
</div>

このように、p要素が描画されています。

こここで、 toggle: falseにします。
右クリック ＞ 検証 として、 確認すると

p要素がCSSの、displayがnoneにより、非表示になっています。

v-ifディレクティブでは、条件を満たさなかった場合、要素はDOMレベルで削除されました。

それに対して、v-showでは、DOMからは削除されない点が特徴です。
CSSのdisplay プロパティを操作して、表示、非表示を切り替えます。

v-showのv-ifと比べたときのメリット

要素を頻繁に表示/非表示を繰り返す用途の場合、v-ifと比べて、描画コストを低く抑える観点で、有利です。

動画でv-showを学習する

サンプルコード

おわりに

この記事ではでは、条件分岐 v-showについて学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

この記事ではVue.jsの条件分岐 v-if について学習します。
v-ifは、何らかの条件によって。要素を表示/非表示切り替える時に利用します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

v-if 例題

ルートテンプレートに、p要素を配置して、表示、非表示を切り替えることをやってみましょう。

実装

それでは、実際にコードを書いていきましょう。
空のルートテンプレートをマウントとした
状態からはじめます。

表示、非表示を切り替えるために使う、プロパティーを用意します。
JavaScript

var app = new Vue({
  el: '#app',
  data: {
    toggle: false
  }
})

次に、p要素を配置します。
HTML

<div id="app">
  <p>
    Hello
  </p>
</div>

p要素にv-ifディレクティを設定します。
値には、プロパティtoggleを指定します。

<div id="app">
  <p v-if="toggle">
  Hello
  </p>
</div>

動作確認

プロパティがtoggleがtrueの時は、Helloと表示されています。
toggleをfalseに変えてみましょう。
Helloの文字が消えて
何も表示されなくなりました。

toggle: true
に戻します。

ここで、DOMツリーががどうなっているか観てみましょう。

Helloを選択して、右クリック、検証をクリックします。

<div id="app">
  <p>
    Hello
  </p>
</div>

このように、p要素が描画されています。

こここで、 toggle: falseにします。

右クリック > 検証 として、 確認すると

<div id="app"></div>

というように、p要素がDOMから削除されています。

v-if 利用時の注意点

v-ifディレクティブでは、条件を満たさなかった場合、要素はDOMレベルで削除される点に、注意してください。

要素を頻繁に表示/非表示を繰り返す用途の場合、描画コストが高くなる恐れがあります。
対策としては、cssのdipsplayプロパティーを利用する、v-showディレクティブを利用します。

v-showについては、次回以降の記事で学習していきます。

サンプルコード

動画でVue.jsのv-ifディレクティブを学習する

おわりに

この記事では、Vue.jsの条件分岐 v-ifについて学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

この、属性のデータバインディング v-bind について学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

v-bind 例題

テキスト入力の入力欄に、HelloVue.jsと表示
dataオプションに指定した、データをデータバインディングする

v-bind 回答

それでは、実際にコードを書いていきましょう。
空のルートテンプレートをマウントとした
状態からはじめます。

それでは、まず、
inputを配置します。

HTML

<div id="app"><input type="text" /></div>

dataオプションに messageプロパティを用意して、値はhello Vue.jsとします。

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

input に文字列を設定したするには、value属性に値を設定するします。
HTMLに直書きして値を設定してする場合には、こんな感じで書きます。

<input type="text" value="Hello" />

出力に、Helloと表示されました。

消しておきます。

つぎに、データバインディングで、inputのvalueに値を設定します
HTML

<div id="app"><input type="text" value="{{ message }}" /></div>

inputのvalueへのデータバインディングですが、いままでの学習を踏まえると、２重の中括弧のMustache（マスタッシュ）構文で、書きたくなってしまいます。

しかしながら、属性にマスタッシュ構文は使用することはできません。

展開されないで表示されてしまうとともに、consoleにエラーが表示されます。

Mustache（マスタッシュ）構文は、テキストコンテンツのための記法のため、属性に使用できないからです

属性へのデータバインディングには、v-bindディレクティブを使います。

<input type="text" v-bind:value="message" />

属性valueの前に、v-bind:をつけます。
属性の値には、dataoptionに設定していた、プロパティー名messageを記述します。

今度は、inputのvalue属性にmessageプロパティをバインドできて、
inputの入力欄に、Hello Vue.js!と表示されました。

実際にレンダリングされる、HTMLも確認してみましょう。
Hello Vue.js!のところで、右クリック、検証をクリックします。

<input type="text" value="Hello Vue.js!" />

動画で学習する

ソースコード

まとめ

属性へのデータバインディングには、マスタッシュ構文ではなくて、v-bindディレクティブを使用してください。
属性のデータバインディング v-bind について学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

この記事ではVue.jsのディレクティブとは、なにかについてプログラミング入門者向けに説明いたします。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

Vue.jsのディレクティブとは

ディレクティブとはv-で始まる特別な属性のことです。

ディレクティブは Vue.js によって提供された特別な属性を示すためにv- 接頭辞がついています

directive(日本語でいうと指令）という名前の通り、Vue.jsに何らかの指示を行う。仕組みです。

ディレクティブの例

Vue.jsには、多くのディレクティブがあるのですが、代表的なものとしては、下記のものがあります。

• v-bind
• v-if
• v-show
• v-for
• v-on
• v-model

使用例

例えば、このような形で使います。

<input type="text" v-bind:value="message"/>

v-bindの部分は、DOMへ反映される前に、Vue.jsによって解釈・変換されて、その後は内部的にのみ利用されます。

動画でVue.jsのディレクティブについて学習する

おわりに

この記事では、ディレクティブとは何かについて、学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する