検索
ホームページウェブフロントエンドjsチュートリアル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 id="nbsp-item-title">{{ 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>


関連する推奨事項:

フロントエンドテンプレートとレンダリング

jquery jtemplates.js テンプレートレンダリングエンジンの詳細な使用法

テンプレート+の設計と実装データ分離レンダリング手法 レンダリングテンプレートを使用して

flaskを実装

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

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター