テンプレート構文ディレクティブ構文

2024-07-12

//命令の構文:

1. 指定とは何ですか?またその機能は何ですか?

ディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を応答アクション DOM に適用することです。

2. vue フレームワーク内のすべての命令の名前は v- で始まります。

3. ラベルには補間が、命令はラベルに書かれています。

vue ボックス内のすべての命令は、HTML タグの属性の形式で存在します。

例えば： <span 指令写在这 >{</span>{ここに補間構文の場所があります}}

注: タグの属性位置に命令が記述されていますが、ブラウザはこのコマンドを理解できません。最初に vue フレームワークによってコンパイルされる必要があります。コンパイルされた内容はブラウザで見ることができます。

4. 指示の文法規則

命令の構文形式

<HTML 标签 v-指令名：参数 = “表达式”></HTML>

式、以前は補間構文 { {ここに記述できる内容}} とすると、命令内の式に記述できる内容は、実は全く同じです。ただし、命令内の表現位置以外に｛を追加することはできません。{}}

すべての命令にパラメータや式があるわけではありません

一部の命令はパラメータや式を必要としません。例: v-once。

一部の命令ではパラメータは必要ありませんが、式が必要です。例: v-if = "expression"

一部の命令はパラメータと式の両方を必要とします。例: v-bind:parameter = "expression"

機能: 要素を 1 回だけレンダリングし、その後再レンダリングします。要素とそのすべての子ノードは静的メモリに配置され、更新のパフォーマンスを最適化するために使用できます。

機能: 式の実行結果にはブール型のデータが必要です: true または false

true: この命令が配置されているタグがブラウザに表示されます。

false: このディレクティブが配置されているタグはブラウザーにレンダリングされません。

<body>

<h1>{{メッセージ}}</h1/>

<h1 v-once>{{メッセージ}}</h1>

<h1 v-if="a>b">テスト：{{メッセージ}}</h1>

</div>

新しいVue（{

el: '#app'

データ（）{

メッセージ: 'qwert'

a : '20'

b: '21'

}

}）

</scirpt>

</body>

技術共有