Vue.js は人気のあるフロントエンド フレームワークであり、その主な役割はデータとビューをバインドし、正しいコンテンツを自動的にレンダリングすることです。

Vue.js では、通常、ビューは次のメソッドを使用してレンダリングされます:

1. データ バインディングには補間式 {{}} を使用します

Vue 。 js は、データ バインディング用のテンプレートで補間式の使用をサポートしています。補間式は Vue.js の最も基本的なディレクティブの 1 つで、データをテンプレートにバインドするために使用されます。 Vue.js は Mustache 構文 (つまり、二重中括弧) を使用して HTML テンプレートに式を挿入します。

たとえば、次のテンプレートは単純なメッセージをレンダリングします:

 {{ message }} 

Vue.js インスタンスでは、テンプレート内で動的にレンダリングされる message 属性の値を設定できます。出力:

new Vue({ el: '#app', data: { message: 'Hello, Vue.js!' } });

これは、「Hello, Vue.js!」メッセージを含む div タグをレンダリングします。

2. 属性バインディングに v-bind ディレクティブを使用する

v-bind ディレクティブは、データを HTML 要素の属性にバインドするために使用されます。たとえば、次のコードでは、v-bind は title 属性を msg 文字列変数にバインドします。

 Hover your mouse to see the title 

Vue.js インスタンスでは、msg 属性の値を設定でき、その値は動的になります。テンプレート内でレンダリング:

new Vue({ el: '#app', data: { msg: 'Hello, Vue.js!' } });

ユーザーがこの要素の上にマウス ポインタを置くと、ブラウザには msg 属性の値を含むツールチップが表示されます。

3. ループ レンダリングには v-for ディレクティブを使用します

Vue.js は v-for ディレクティブを使用してリストをレンダリングします。これにより、各項目に基づいてリストがレンダリングされます。データ ソース内で HTML フラグメントを繰り返しレンダリングします。たとえば、次のコードでは、v-for ディレクティブは、メッセージ配列内の各文字列を li 要素としてレンダリングします。

 
{{ message }}
 

Vue.js インスタンスでは、messages 属性の配列を設定できます。テンプレート内で配列が動的にレンダリングされます:

new Vue({ el: '#app', data: { messages: ['Hello', 'Vue', 'JS'] } });

これにより、3 つのメッセージの順序なしリストがレンダリングされます。

4. v-if ディレクティブと v-show ディレクティブを使用して要素を条件付きでレンダリングします。

v-if ディレクティブと v-show ディレクティブの両方を使用して、要素を条件付きでレンダリングできます。テンプレート要素。 v-if ディレクティブは式の評価に基づいて条件付きで要素をレンダリングしますが、v-show ディレクティブは要素を完全にレンダリングまたは破棄するのではなく、CSS を介して要素を表示または非表示にします。

たとえば、次のコードでは、showHeading 変数の値に応じて、ページ上の h1 要素が条件付きでレンダリングされます。

This is the heading

Vue.js インスタンスでは、次のことができます。 showHeading プロパティを設定します。テンプレート内で動的にレンダリングされる値:

new Vue({ el: '#app', data: { showHeading: true } });

showHeading 値が true の場合、h1 要素はレンダリングされます。それ以外の場合、h1 要素はレンダリングされません。

概要

上記は、Vue.js の基本的なレンダリング手法の一部です。 Vue.js のレンダリングの動作原理とテクニックを理解し、習得することが、効率的で保守可能な Web アプリケーションを開発するための鍵となります。 Vue.js は、開発効率を向上させながら、データ バインディングとレンダリングの処理を簡素化するための豊富な命令とオプションを提供します。

以上がvueでレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。