Vue.js がブラウザーでテンプレートのレンダリングを実装する方法

この記事では、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>

2.v-show

    <p v-show="show">show</p>
    <p v-show="show">show</p>
    <p v-else>hidden</p>

注: v-show 要素は、バインディング値が true か false かに関係なく、DOM に表示され、維持されます。バインディング値を変更すると、要素の css 属性の表示のみが切り替わります。 v-if 要素の場合、ページにはこのラベルは表示されません。

3.v-if vs v-show

1. v-ifを切り替えると、DOMの動作レベルが変化します。 v-show はスタイルのみを変更しました。したがって、スイッチングの観点から見ると、v-show は v-if よりもパフォーマンスの消費が少なくなります。

2. v-if が切り替えられると、v-if のテンプレートにはデータ バインディングまたはサブコンポーネントも含まれる可能性があるため、vue.js には部分的なコンパイル/アンインストール プロセスが行われます。 v-show は引き続き通常の操作を実行し、css スタイルを display: none に設定します。

一般に、v-if はスイッチング コストが高く、v-show は初期レンダリング コストが高くなります。したがって、実際の使用シナリオに基づいて適切な命令を選択する必要があります。

リストレンダリング

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: &#39;#app&#39;,        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"},            ]
        }
    });

//items はデータ内の属性名であり、item を使用して、現在の配列によって走査される各要素を取得できます。

v-for には組み込みの $index 変数があり、これを v-for 命令内で呼び出して、現在の配列要素のインデックスを出力できます。

さらに、インデックスに独自のエイリアスを作成することもできます:

    <li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>

注: vue.js はデータ内の配列のネイティブ メソッドをカプセル化するため、配列が変更されたときにビューの更新をトリガーできますが、ビューはトリガーできません。次の 2 つの状況でトリガーされます。 更新されました:
1. インデックスを介して配列要素を直接変更します。例: vm.items[0] = {title:'title-changed'};

2. "modify" の長さを直接変更することはできません。 array"、例: vm.items .length = 0

最初のケースでは、Vue.js は、データを変更しながらビューを更新する $set メソッドを提供します。これは次のように記述できます:

    vm.items.$set(0,{title:'title-changed'})  
 或者  vm.$set('items[0]',{title:'title-also-changed'});

リストから、配列内の一意の識別子 ID を決定します。トレースバイを通じて配列の一意の識別子を設定します。 Vue.js は、レンダリング プロセス中に元のオブジェクト スコープと DOM 要素を再利用しようとします。

    <li v-for="item in items" track-by="_id"></p>

v-for はオブジェクトをトラバースし、スコープ内で組み込み変数 $key にアクセスしたり、key 変数を (key, value) の形式でカスタマイズしたりできます。

    <li v-for="(key,value) in objectDemo">
        {{ key }} - {{ $key }} : {{ value }}    </li>
    var vm = new Vue({
        el:&#39;#app&#39;,        data: {
            objectDemo : {
                a:&#39;a-value&#39;,
                b:&#39;b-value&#39;,
                c:&#39;c-value&#39;
            }
        }
    })

v-for はループの数として使用される単一の整数を受け入れることができます:

    <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を実装

WeChat アプレット - 複雑なデータ構造テンプレートのレンダリング

以上がVue.js がブラウザーでテンプレートのレンダリングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。