Vue は HTML ベースのテンプレート構文を使用し、そのコンポーネント インスタンスをレンダリングされた DOM に宣言的にデータバインドできるようにします。すべての Vue テンプレートは構文的に有効な HTML であり、準拠したブラウザおよび HTML パーサーで解析できます。
補間構文:
データ バインディングの最も基本的な形式は補間構文です。{ {}} を直接使用して二重中括弧内にコンテンツを記述します。これは Vue によって直接解析され、DOM 上にレンダリングされます。
<span>{
{ msg }}</span> // msg是在data中定义的变量生の HTML:
コマンド v-html レンダリング メソッドを使用してタグを直接レンダリングすることは非常に危険であり、XSS 漏洩を引き起こす可能性が非常に高くなります。コンテンツが安全で信頼できることがわかっている場合にのみ使用してください。v-html でレンダリングされたコンテンツは、元のラベルのコンテンツを完全に置き換え、元のラベルさえも置き換えられます。
<span v-html='html'>{
{ msg }}</span>動的データバインディング:
動的データ バインディング v-bind。たとえば、ループを使用する場合、diff 比較のために ID の一意の値を記述する必要があります。そのため、id を記述するとき、v-bind を使用しない場合は文字列としてレンダリングされます。v-bind を使用してバインドされたデータが応答可能になります。動的データ バインディングの頻度は非常に高いため、vue は v-bind の短縮形、つまり直接 use: を使用してバインドします。
<span v-bind:id='proId'>{
{ msg }}</span> // 原始写法
<span :id='proId'>{
{ msg }}</span> // 简写JavaScript 式:
ロジックが 1 文に要約できるほど単純な場合は、 { {}} に直接記述することができます。
<span v-bind:id='proId'>{
{ ok ? 'yes' : 'no' }}</span>