VUE レンダリング機能の使い方と詳細な説明

VUE レンダリング機能の使い方と詳細な説明

序文

通常のプログラミングでは、ほとんどの場合、HTML はテンプレートを通じて作成されます。ただし、特殊なケースでは、テンプレート方式ではニーズを十分に満たすことができません。このとき、操作するには JavaScript プログラミング スキルが必要です。この時点で、レンダリング機能がその威力を発揮します。

レンダリングの役割

公式サイトのサンプルエントリー

公式サイトのこの例では、solt を通じて h1-h6 タグに同じ内容を入れるためにコンポーネントが使用されています。従来の方法を使用すると、コードが長くなるだけでなく、タイトルの各レベルに<slot></slot>が繰り返し記述され、アンカー要素を挿入するときに再度繰り返す必要があります。レンダリング関数を使用すると、コードがはるかに簡単になります。

Vue.component('アンカー付き見出し', {
  レンダリング: 関数 (createElement) {
    要素の作成を返す(
      'h' + this.level, // タグ名 this.$slots.default // 子ノード配列)
  },
  小道具: {
    レベル:
      タイプ: 数値、
      必須: true
    }
  }
})

レンダリング関数の役割は、シーン内のテンプレートによって実装されたコードが長くて扱いにくく、繰り返しが多い場合に、コードを大幅に簡素化することです。

レンダリング機能の説明

レンダリング関数を使用する場合、createElement パラメータが使用されます。この createElement パラメータも本質的には関数であり、Vue で仮想 DOM を構築するために使用されるツールです。 createElement を見てみましょう。

createelement メソッドには、次の 3 つのパラメーターがあります。

createEement(, {}, []) を返します

1. 最初のパラメータ(必須パラメータ): 主に DOM で HTML コンテンツを提供するために使用されます。タイプは文字列、オブジェクト、または関数です。

2. 2 番目のパラメータ (オブジェクト タイプ、オプション): この DOM 内の渡されたコンポーネントのスタイル、属性、パラメータ、バインディング イベントなどを設定するために使用されます。

3. 3 番目のパラメータ (型は配列、配列要素の型は VNode、オプション): 主に、新しく追加されたその他のコンポーネントなどの配布コンテンツを設定するために使用されます。

注意: コンポーネントツリー内のすべてのvnodeは一意である必要があります

createElement パラメータを渡すと、仮想ノードが作成され、そのノードがレンダリングに返されます。

一般的に、レンダリング機能の本質は仮想ノードを作成することです。

レンダリングとテンプレートの違い

類似点:

render関数はtemplateと同様にHTMLテンプレートを作成する。

違い:

  • Templateは単純なロジックに適しており、レンダリングは複雑なロジックに適しています。
  • templateユーザーにとって比較的理解しやすいですが、柔軟性に欠けます。カスタム レンダリング機能は非常に柔軟ですが、ユーザーに対する要件は高くなります。
  • renderのパフォーマンスは高く、テンプレートのパフォーマンスは低くなります。
  • レンダリングに render 関数を使用する場合、コンパイル プロセスは発生しません。これは、ユーザーがプログラムに直接コードを与えるのと同じです。したがって、これを使用するには高いユーザー要件が必要となり、エラーが発生しやすくなります。
  • Render関数の優先度はテンプレートの優先度よりも高くなりますが、Mustache (二重中括弧) 構文は再度使用できないことに注意してください。

注意: テンプレートとレンダリングは一緒に使用できません。そうしないと無効になります。

レンダリング例

たとえば、共通のボタン コンポーネントのセットを一度にカプセル化すると、ボタンには 4 つのスタイル (成功、エラー、警告、デフォルト) が設定されます。

テンプレートメソッドは次のとおりです。

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

ボタンの数が少ない場合はこれで問題ありませんが、ボタンの数が増えると非常に長くなります。このとき、レンダリング機能が必要になります。

状況に応じてボタンDOMを生成する

レンダリング機能を使用する前に、テンプレート タグを削除し、ロジック レイヤーのみを保持する必要があります。

クラスは渡された型を通じて動的に入力され、コンテンツは inderText を通じて DOM に追加されます。

レンダリング(h) {
  h('div', { を返す
   クラス: {
    ボタン: 真、
    'btn-success': this.type === 'success'、
    'btn-danger': this.type === 'danger'、
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    内部テキスト: this.text
   },
   の上: {
    クリック: this.handleClick
   }
  });
 },

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue.jsのレンダリング関数の使い方の詳しい説明
  • Vue Render関数はDOMノードコード例を作成します
  • Vueレンダリング関数の実際の戦闘でタブタブコンポーネントを実装する
  • Vue のレンダリング関数の使い方の詳細な説明
  • Vueのレンダリング関数の使い方
  • VUEのレンダリング機能の使い方を理解する
  • Vueにレンダリング関数の実装を導入する理由

<<:  HTMLはマーキーを使用してテキストを左右にスクロールします

>>:  CSSアニメーション効果アニメーションの一般的なスタイル

推薦する

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

EasyUEFI を使用して Windows 10 で USB ドライブなしで Ubuntu 18 をインストールする

1. BIOSを確認するまず、コンピュータの起動モードを確認します。win+R と入力し、msinf...

入力タイプとは何を意味し、入力を制限する方法

入力を制限する一般的な方法1. ボタンが押されたときに点線のボックスを消すには、入力に属性値hide...

Mysql のフィールドのデータの一部をバッチ置換する (推奨)

MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....

Vue でバイナリ ファイル ストリームを受信して​​ PDF プレビューを実現する方法

バックグラウンド コントローラー @RequestMapping("/getPDFStre...

vue+iviewのメニューとタブの連携方法

Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...

MySQL インデックスが失敗するいくつかの状況の概要

1. インデックスはnull値を保存しないより正確に言うと、単一列インデックスには null 値は格...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

Windows 上の MySQL 5.6 で my.ini 設定ファイルを見つける方法

忘れてしまった場合に後で戻って確認できるようにメモしておいてください。問題の説明:今日はちょっとした...

JS で async await をエレガントに使用する方法

目次jQuery の $.ajax Webpack時代の始まり約束について深く考えるネストをなくすj...

速度、読み込み、Web アプリケーションなどにおける div と table の違い。

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

一般的な JavaScript 文字列メソッド 28 個と使用方法のヒントのまとめ

目次序文1. 文字列の長さを取得する2. 文字列の指定された位置の値を取得する(1) charAt(...

W3Cチュートリアル(16):その他のW3Cの活動

このセクションでは、その他の重要かつ興味深い W3C アクティビティの概要を説明します。このセクショ...

Vue でデータが変更された後にビューを同期的に更新する方法

序文少し前に、興味深い問題を目にしました。Vue のデータが変更された後に、ビューを同期的に更新する...

VS2022 リモート デバッグ ツールの使い方

WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...