Vue基本⑤（テンプレート構文）

では今回から<template>タグの中身について詳しく説明していきます。
以前、<template>タグはHTMLを記載するところと説明しましたが、実はHTMLとしてそのままブラウザに渡されているというわけではなく、Vueファイルの中身はHTMLも含めてViteなどによってJavaScriptのコードに変換されています。
実際に検証ツールでApp.vueファイルを見るとJavaScriptのコードに変換されています。
つまり<template>タグ内のHTMLはJavaScriptのコード生成のツールとして使用されています。

<script></script>

<template>
  <div>Nyan</div>
</template>

<style></style>

この<template>タグで使うのは一般的で使いやすいHTMLが採用されているので初心者でも扱いやすいフレームワークとなっています。
厳密にはHTMLではないのでテンプレート構文という名前になっています。
そのテンプレート構文がHTMLの文法のルールに従っているということになり、そしてVueではその文法に従う範囲でさまざまなルールを追加しています。

ではそのルールを説明していきます。
１.{{}}
この二重波括弧{{}}ですが、ここにはJavaScriptの式を入れることができます。例えば、

<template>
  <div>{{ 10 + 20 }}</div>
</template>

すると計算結果の３０が表示されます。
で、前回のref関数でもやりましたが、{{}}内に定数や変数も入れられます。

<script setup>
import { ref } from 'vue'

const count = ref(5)
</script>

<template>
  <div>{{ count + 20 }}</div>
</template>

もちろん、複数の計算式も可能です。

<script setup>
import { ref } from 'vue'

const count = ref(5)
const count2 = ref(30)
</script>

<template>
  <div>{{ count + count2 }}</div>
</template>

そして、三項演算子も入れられます。

<script setup>
import { ref } from 'vue'

const count = ref(5)
const count2 = ref(30)
</script>

<template>
  <div>{{ count + count2 }}</div>
  <div>{{ count > 4 ? 'nyan' : 'nyaaaan' }}</div>
</template>

countは4より大きいのでnyanと出ます。

ここで注意ですが、この{{}}内の式は単一のものしか入れられません。
if文やfor文などは入れませんし、関数内の定数なども取り出して入れるということはできません。

では次回からはv-属性のディレクティブについて書いていきます。