Vue.js がブラウザーでテンプレートのレンダリングを実装する方法-jsチュートリアル-php.cn

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

零到壹度

リリース： 2018-04-21 11:05:48

オリジナル

2295 人が閲覧しました

この記事では、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:&#39;title-changed&#39;})  
 或者  vm.$set(&#39;items[0]&#39;,{title:&#39;title-also-changed&#39;});

ログイン後にコピー

リストから、配列内の一意の識別子 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>

ログイン後にコピー