【初めまして Vue.js】 v- ** 一体何者？

📝今日も変わらず、ちゃんと理解しておきたいVueの色々について、書いていきます。
今日は、早速、よくわからなくなってきた「v-****」、その辺りを調べてみようと思います。

公式を見て、おお〜ってなりました。
色々な種類の v- *** があるんですね。

せっかくなので、ひとつひとつ見ていきます。

v-text

要素に文字列を表示させるための命令。
これを使用すると他の要素が全部上書きれるため、他のHTMLタグや子要素があっても無視される。
HTML要素を無視して、全てを文字列として認識して出力する具体例↓。

samaple

<p v-text="'<strong>強調</strong>されたテキスト'"></p>
<!-- 表示結果: <strong>強調</strong>されたテキスト -->

v-html

要素のinnerHTMLを更新する。プレーンなHTMLとして挿入される。

XSSの攻撃対象にもなりうる → 適用させるのは絶対的に信頼できるコンテンツのみに限定し、外部からの提供コンテンツにはv-htmlは使用しない。

v-show

式の値の真偽値に基づいて、要素の可視性を変化させる。
要素の表示/非表示の切り替えに使用するディレクティブ。

• true: 要素を表示する
• false: 要素を非表示にするが、DOMからは消えない

<template>
  <div>
    <button @click="isVisible = !isVisible">
      {{ isVisible ? '非表示にする' : '表示する' }}
    </button>
    <p v-show="isVisible">このテキストは表示・非表示が切り替わります</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

v-if

要素を表示するかどうかを決める命令。

• true: 要素が表示される
• false: 要素はDOMから削除される

sample

<template>
  <button @click="showMessage = !showMessage">
    {{ showMessage ? '隠す' : '表示する' }}
  </button>
  <p v-if="showMessage">このメッセージは表示されます</p>
</template>

<script>
export default {
  data() {
    return {
      showMessage: false
    }
  }
}
</script>

💡 v-showとv-ifの違い

• v-if : 要素を追加、削除する
• v-show : 要素を見えないようにするだけで消さない

v-else

v-if、v-if/v-else-ifチェーンの"elseブロック"を表示する。
直前には、v-ifまたはv-else-ifが兄弟要素として必要。
<template>で使用するとテキストや複数の要素を含む条件ブロックを構成できる。

sample

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

v-ifに対するelse ifブロックを構成する。連鎖可能。
直前には兄弟要素としてv-if、v-elese-ifが必要。
<template>に使用すると、テキストや他の複数の要素を含んだ条件ブロックを構成できる。

sample

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

次はv-forから、同様に公式を参照しつつ勉強していきます📚
何か間違いや誤解を生みそうな表現がありましたら、大変お手数ではございますがご指摘をいただけますと幸いです。