この記事では、Vue.js がブラウザーでテンプレート レンダリングを実装する方法を紹介します。これには、必要な友人が参照できるように共有します。ルールは記述されたテンプレートにロードされ、ブラウザーに表示される HTML.vue.js 出力は、フロントエンド (つまり、ブラウザー内) でテンプレート レンダリングされます。
フロントエンドとバックエンドのレンダリングの比較
バックエンド: サーバープロセスがデータベースからデータを取得した後、フロントエンドテンプレートエンジンを使用して、データを取得して HTML を生成し、それをネットワーク経由でユーザーのブラウザに送信し、ブラウザによって解析されて表示されるページになります。
フロントエンド: JS を使用して、ブラウザーでデータと HTML テンプレートを結合します。 フロントエンドレンダリングの利点は次のとおりです:
1. ビジネスの分離。バックエンドはデータインターフェイスを提供するだけでよく、フロントエンドは対応するバックエンド環境を展開する必要がありません。開発用のバックエンド データを削除すると、開発効率が向上します。
2. 計算量が転送され、本来バックエンドでのレンダリングが必要だったタスクがフロントエンドに転送され、サーバーへの負荷が軽減されます。バックエンドレンダリングの利点
1. 検索エンジンに優しい。
2. ホームページの読み込み時間は短いですが、バックエンド レンダリングが読み込まれた直後に HTML が表示されますが、フロントエンド レンダリングは読み込み完了後もある程度の js レンダリング時間が必要です。条件付きレンダリング
1.v-if/v-else
データ値に基づいてDOMノードとそれに含まれる子要素を出力するかどうかを決定します。
<p v-if="yes">yes</p> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<p>yes</p>
<p v-if="yes">yes</p>
<p v-else>no</p> //注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。
<p v-if="yes">
<p v-if="inner">inner</p>
<p v-else>not inner </p>
</p>
<p v-else>no</p> new Vue({
data: {
yes: true,
inner :false
}
}) <p>
<p>not inner</p>
</p> <p v-show="show">show</p>
<p v-show="show">show</p>
<p v-else>hidden</p>リストレンダリング
v-for命令は主にリストレンダリングに使用され、受け取った配列に従ってv-forにバインドされたDOM要素と内部のサブ要素を繰り返しレンダリングし、配列を取得できます。エイリアスを設定することにより、内部データがノードにレンダリングされます。
v-for遍历数组： <ul>
<li v-for="item in items">
<h3>{{ item.title}}</h3>
<p>{{item.description}}</p>
</li>
</ul>
var vm = new Vue({
el: '#app', data: {
items: [
{_id:1,title:"title-1",description:"description-1"},
{_id:2,title:"title-2",description:"description-2"},
{_id:3,title:"title-3",description:"description-3"},
{_id:4,title:"title-4",description:"description-4"}, ]
}
});さらに、インデックスに独自のエイリアスを作成することもできます:
<li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>注: vue.js はデータ内の配列のネイティブ メソッドをカプセル化するため、配列が変更されたときにビューの更新をトリガーできますが、ビューはトリガーできません。次の 2 つの状況でトリガーされます。 更新されました:
1. インデックスを介して配列要素を直接変更します。例: vm.items[0] = {title:'title-changed'};
最初のケースでは、Vue.js は、データを変更しながらビューを更新する $set メソッドを提供します。これは次のように記述できます:
vm.items.$set(0,{title:'title-changed'})
或者 vm.$set('items[0]',{title:'title-also-changed'});<li v-for="item in items" track-by="_id"></p>
<li v-for="(key,value) in objectDemo">
{{ key }} - {{ $key }} : {{ value }} </li>
var vm = new Vue({
el:'#app', data: {
objectDemo : {
a:'a-value',
b:'b-value',
c:'c-value'
}
}
}) <li v-for="n in 5">{{ n }}</li>template タグの使用法
コマンドを template タグに適用しますが、それは最終的なレンダリング結果には含まれません。
<template v-if="yes">
<p>this is first dom</p>
<p>this is second dom</p>
</template>
//输出结果 <p>this is first dom</p>
<p>this is second dom</p>template标签也支持使用v-for指令，用来渲染同级的多个兄弟元素。 <template v-for="item in items">
<p>{{ item.name }}</p>
<p>{{ item.desc }}</p>
</template>
関連する推奨事項:
フロントエンドテンプレートとレンダリング jquery jtemplates.js テンプレートレンダリングエンジンの詳細な使用法テンプレート+の設計と実装データ分離レンダリング手法 レンダリングテンプレートを使用してflaskを実装
以上がVue.js がブラウザーでテンプレートのレンダリングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
