Vueのテンプレート構文とは何ですか？

Question

Vueのテンプレート構文とは何ですか？

Accepted Answer

Vueテンプレートは**ディレクティブと補間が追加されたHTML**です。HTMLのようなマークアップに、特殊な属性（`v-`で始まるディレクティブ）と動的な値のための`{{ }}`を加えて書きます。 ## テキスト補間（マスタッシュ） ```vue ``` `{{ }}`はJavaScriptの*式*（ステートメントではなく）を評価し、結果をテキストとしてレンダリングします。データが変わると自動的に更新されます。 ## ディレクティブ — 特殊な v- 属性 ```vue ``` ## ショートハンド構文（至る所で使用） ```vue link ``` `:`（bind）と`@`（on）のショートハンドはVueの標準的な書き方です。完全な`v-bind:`/`v-on:`の形式はめったに見かけません。 ## 属性バインディング vs 補間 ```vue

``` テキストコンテンツには`{{ }}`を、属性値には`:attr`を使用します。属性内にマスタッシュを入れることはできません。 ## なぜ重要なのかテンプレート構文はVue UIを書く上での中核です。 `{{ }}`補間と`v-`ディレクティブ（`:`/`@`ショートハンド付き）の組み合わせにより、動的でリアクティブなUIを宣言的に表現できます。HTMLのように読みやすく、データドリブンです。よく使うディレクティブをマスターすることが、日々のVue開発の大部分です。