Vue3 テンプレート構文
Vue は HTML ベースのテンプレート構文を使用しており、開発者が宣言的に DOM を基盤の Vue インスタンスのデータにバインドすることを可能にします。
Vue の核となるのは、簡潔なテンプレート構文を使用して、データを宣言的に DOM にレンダリングすることを可能にするシステムです。
リアクティブシステムと組み合わせることで、アプリケーションの状態が変化したとき、Vue はコンポーネントを再レンダリングするための最小コストをインテリジェントに計算し、DOM 操作に適用できます。
例
<div>
<!--補間-->
<p>{{ message }}</p>
<!-- v-bind -->
<a :href="url">Link</a>
<!-- v-on -->
<button @click="handleClick">Click me</button>
<!-- v-for -->
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
補間
テキスト
データバインディングの最も一般的な形式は、使用することです{{...}}（二重中括弧）のテキスト補間：
{{...}}タグの内容は、対応するコンポーネントインスタンス内のmessageプロパティの値に置き換えられます。もしmessageプロパティの値が変更された場合、{{...}}タグの内容も更新されます。
タグの内容を変更したくない場合は、次を使用することでv-onceディレクティブで一度だけの補間を実行し、データが変更されても、補間された内容は更新されません。
<span v-once>这个将不会改变: {{ message }}</span>
Html
v-html ディレクティブを使用して HTML コードを出力します：
v-html ディレクティブ
試してみる »
属性
HTML 属性内の値には v-bind ディレクティブを使用する必要があります。
<div v-bind:id="dynamicId"></div>ブール属性の場合、通常の値は true または false です。属性値が null または undefined の場合、その属性は表示されません。
<button v-bind:disabled="isButtonDisabled">按钮</button>
上記のコードで isButtonDisabled の値が null または undefined の場合、disabled 属性はレンダリングされた <button> 要素に含まれさえしません。
次の例では use の値を判断し、true の場合は class1 クラスのスタイルを使用し、それ以外の場合はそのクラスを使用しません。
v-bind ディレクティブ
試してみる »
式
Vue.js は完全な JavaScript 式のサポートを提供します。
JavaScript 式
試してみる »
式は、現在のアクティブなインスタンスのデータスコープ内で JavaScript として解析されます。制限として、各バインディングは単一の式のみを含むことができるため、次の例はすべて機能しません：
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
ディレクティブ
ディレクティブは、v- プレフィックスを持つ特別な属性です。
ディレクティブは、式の値が変更されたときに特定の動作を DOM に適用するために使用されます。次の例：
例
試してみる »
ここでは、v-if ディレクティブが式 seen の値（true または false）に基づいて、p 要素を挿入するかどうかを決定します。
他にも多くのディレクティブがあり、それぞれ特別な機能を持っています。たとえば、v-for ディレクティブは配列のデータをバインドしてアイテムのリストをレンダリングできます：
例
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'サンプル' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
試してみる »
引数
引数はディレクティブの後にコロンで指定します。たとえば、v-bind ディレクティブは HTML 属性をリアクティブに更新するために使用されます：
例
試してみる »
ここで href は引数であり、v-bind ディレクティブにその要素の href 属性を式 url の値とバインドするように指示します。
もう 1 つの例は、DOM イベントをリッスンするために使用される v-on ディレクティブです：
<!-- 完整语法 --> <a v-on:click="doSomething"> ... </a> <!-- 缩写 --> <a @click="doSomething"> ... </a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>
ここでの引数は、リッスンするイベント名です。
修飾子
修飾子は半角ピリオド.で示される特別な接尾辞であり、ディレクティブが特別な方法でバインドされるべきことを示します。たとえば、.prevent修飾子は指示しますv-onディレクティブがトリガーされたイベントに対して呼び出すevent.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
ユーザー入力
input 入力ボックスでは、v-model ディレクティブを使用して双方向データバインディングを実現できます：
双方向データバインディング
試してみる »
v-modelディレクティブは、input、select、textarea、checkbox、radio などのフォームコントロール要素上で双方向データバインディングを作成するために使用され、フォーム上の値に基づいて、バインドされた要素の値を自動的に更新します。
ボタンのイベントには v-on を使用してイベントをリスンし、ユーザーの入力に応答できます。
次の例では、ユーザーがボタンをクリックした後に文字列を反転する操作を行います：
文字列反転
試してみる »
省略形
v-bind の省略形
Vue.js は、最もよく使用される 2 つのディレクティブに特別な省略形を提供しています。
<!-- 完整语法 --> <a v-bind:href="url.html"></a> <!-- 缩写 --> <a :href="url.html"></a>
v-on の省略形
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>その他の拡張