Vue.jsのレンダリング関数の使い方の詳しい説明

Vue.jsのレンダリング関数の使い方の詳しい説明

Vue では、ほとんどの場合、テンプレートを使用して HTML を作成することを推奨しています。ただし、シナリオによっては、テンプレートよりもコンパイラに近いレンダリング関数である JavaScript の完全なプログラミング能力が本当に必要になります。

HTMLレベルでは、コンポーネントインターフェースを次のように定義することにしました。レベル1~6を渡してh1~h6タグを生成し、スロットを使用してコンテンツを生成します。

<div id="div1">
    <child :level="1">こんにちは世界!</child>
</div>

<script type="text/x-template" id="子テンプレート">
  <h1 v-if="レベル === 1">
    <スロット></スロット>
  </h1>
  <h2 v-if="レベル === 2">
    <スロット></スロット>
  </h2>
  <h3 v-if="レベル === 3">
    <スロット></スロット>
  </h3>
  <h4 v-if="レベル === 4">
    <スロット></スロット>
  </h4>
  <h5 v-if="レベル === 5">
    <スロット></スロット>
  </h5>
  <h6 v-if="レベル === 6">
    <スロット></スロット>
  </h6>
</スクリプト>

<script type="text/javascript">
    /**
     * 子コンポーネントをグローバルに登録します。テンプレート値が # で始まる場合はオプション シンボルとして使用され、一致する要素の innerHTML がテンプレートとして使用されることに注意してください。よくあるトリックは、<script type="x-template"> を使用してテンプレートを組み込むことです。これの利点は、HTML が内部のコンテンツをレンダリングしないことです。* 
     * ここでテンプレートを使用するのは最善の選択ではありません:
     * 1. コードが長い* 2. 異なるタイトルにコンテンツを挿入するにはスロットを繰り返し使用する必要がある 
     * 3. コンポーネントにはルート要素が必要なので、タイトルとコンテンツは <div><h1>hello world</h1></div> のような無駄な div で囲まれます。
     */

    Vue.component('child', {
      テンプレート: '#child-template',
      小道具: {
        レベル:
          タイプ: 数値、
          必須: true
        }
      },
      データ: 関数() {
        戻る {
          1: 1
        }
      }
    })

    新しいVue({
        el:"#div1"
    })
  </スクリプト>

上記の例を render 関数を使用して実装してみます。render関数を使用する場合、テンプレート オプションは無視されることに注意してください。

createElement は 3 つのパラメータを受け取ります。

最初のパラメータは HTML タグ名、コンポーネント、または関数にすることができます。このパラメータは必須です。
2 番目はデータ オブジェクト {Object} (オプション) です。

次に例を示します。

<div id="div1">
    <子:レベル="1">
        こんにちは世界!
    </子>
    <子:レベル="2">
        <!-- 表示されません -->
        <span slot="footer">これはフッタースロットです</span>
        <p slot="header">これはヘッダースロットです</p>
    </子>
</div>


<スクリプト>
    Vue.component('child', {
        レンダリング: 関数 (createElement) {
            console.log(this.$slots);
            要素の作成を返す(
                'h' + this.level, // tagName タグ名 {
                    // 各hタグのクラスを設定する
                    'クラス': {
                        foo: 真、
                        バー: 偽
                    },
                    //最終的にインラインスタイルとしてレンダリングされます style: {
                        色: '赤'、
                        フォントサイズ: '14px'
                    },
                    // その他の HTML 属性 attrs: {
                        id: 'foo',
                        'データID': 'バー'
                    },
                    // DOM属性domProps: {
                        // innerHTML: 'domPropsから',
                    },
                    // "on" に基づくイベント リスナー
                    // そのため、v-on:keyup.enter on: { などの修飾子はサポートされなくなりました。
                        クリック: this.clickHandler
                    },
                    // ...
                },
                // this.$slots から VNodes リストの静的コンテンツを取得できます // $slots.default はコンポーネントの名前のないスロットにアクセスするために使用されます
                // 名前付きスロットが必要な場合、スロット名を指定する必要があります。this.$slots.header
                // [this.$slots.default,this.$slots.footer,this.$slots.header] //レベル2のスロットを表示 [this.$slots.default] //名前のないスロットのみを表示
            )
        },
        template: '<div v-if="level===1"><slot></slot></div>', // 無視されます props: {
            レベル:
                タイプ: 数値、
                必須: true
            }
        },
        メソッド: {
            クリックハンドラ: 関数 () {
                コンソールログ('clickHandler')
            }
        }
    })

    新しいVue({
        el: "#div1"
    })
</スクリプト>

レンダリングは次のようになります。

ここに写真の説明を記入してください

Vue.js の render 関数の詳しい使い方については、これで終了です。Vue.js の render 関数に関するより詳しい内容については、123WORDPRESS.COM の過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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

<<:  Linux で AIDE に基づいてファイルシステムの整合性を検出する方法

>>:  MySQL OOM (メモリオーバーフロー) の解決策

推薦する

Ansibleを使用してディレクトリ内のすべてのコンテンツを削除する方法

Ansible を使用する学生は、以下に示すように、Ansible が特定のフォルダーまたはファイル...

垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

マップタグパラメータの詳細な紹介と使用例

マップ タグはペアで表示する必要があります。 <map> ....</map>...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

Alibaba CloudにMySQLをインストールする方法の詳細な説明

軽量のオープンソース データベースである MySQL は、エンタープライズ レベルのアプリケーション...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

MySQL で制限を使用するとパフォーマンスに影響するのはなぜですか?

まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...

HTMLファイル内の中国語の文字化けとブラウザでの表示の問題

今日も私のページが文字化けしていたので、インターネットで関連する問題を検索しました。この方法はかなり...

dockerfile における ENTRYPOINT と CMD の組み合わせと違い

前回の記事【dockerコンテナのためのdockerfileを詳しく解説】では、dockerfile...

Linux ディスク クォータ管理のグラフィカルな例

ディスク クォータは、コンピューター内の指定されたディスクのストレージ制限です。つまり、管理者はユー...

MySQLテーブルシャーディングとパーティショニングの具体的な実装方法

縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...

CentOS 8 に MySql をインストールしてリモート接続を許可する方法

ダウンロードしてインストールします。まず、システムに MySQL または MariaDB があるかど...