Vueのテンプレート構文は、HTMLをベースにしたテンプレート構文を使用します、基本はHTMLですが、様々な拡張機能が用意されています。
展開
生のHTMLよりも、HTMLの内容を簡単に置き換えることができます。書き方としては、二重波括弧 {{ ... }} で囲まれたやつです。
例：
<div> {{ text }} </div>
let text = "This is Vue";
この例では、text の値を変更すると、div の内容も自動的に変更されます。
これは「テキスト展開 (tekisuto tenkai)」または「テキスト挿入 (tekisuto sounyuu)」と呼ばれます。
プロパティーとバインディング
Vueでは、双方向バインディングという機能があります。HTMLまたはJavaScriptで変更したデータは、どこから変更しても、もう一方の値もそれに合わせて変わります。
例えば、input 要素の v-model ディレクティブを使うと、入力された値が自動的に Vue インスタンスのデータに反映されます。(例如，使用 input 元素的 v-model 指令，输入的值会自动反映到 Vue 实例的数据中。)
ディレクティブ
ディレクティブは、JavaScriptの関数や値の宣言とバインディングのための文法です。
v-if、v-on、v-for など、v- で始まる特別な属性は、ディレクティブと呼ばれます。
・ v-if: 条件付きレンダリング、指定された条件が真の場合のみ、要素をレンダリングします
・ v-on (または @): イベントリスナー、 DOMイベント (例えば、クリック) をリッスンし、対応するJavaScriptの関数を実行します
・v-for: リストレンダリング配列の各要素に対して、要素を繰り返しレンダリングします。.