序文通常のプログラミングでは、ほとんどの場合、HTML はテンプレートを通じて作成されます。ただし、特殊なケースでは、テンプレート方式ではニーズを十分に満たすことができません。このとき、操作するには JavaScript プログラミング スキルが必要です。この時点で、レンダリング機能がその威力を発揮します。 レンダリングの役割公式サイトのサンプルエントリー 公式サイトのこの例では、solt を通じて h1-h6 タグに同じ内容を入れるためにコンポーネントが使用されています。従来の方法を使用すると、コードが長くなるだけでなく、タイトルの各レベルに 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 パラメータを渡すと、仮想ノードが作成され、そのノードがレンダリングに返されます。 一般的に、レンダリング機能の本質は仮想ノードを作成することです。 レンダリングとテンプレートの違い類似点: 違い:
注意: テンプレートとレンダリングは一緒に使用できません。そうしないと無効になります。 レンダリング例たとえば、共通のボタン コンポーネントのセットを一度にカプセル化すると、ボタンには 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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTMLはマーキーを使用してテキストを左右にスクロールします
>>: CSSアニメーション効果アニメーションの一般的なスタイル
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
1. BIOSを確認するまず、コンピュータの起動モードを確認します。win+R と入力し、msinf...
入力を制限する一般的な方法1. ボタンが押されたときに点線のボックスを消すには、入力に属性値hide...
MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....
バックグラウンド コントローラー @RequestMapping("/getPDFStre...
Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...
1. インデックスはnull値を保存しないより正確に言うと、単一列インデックスには null 値は格...
著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...
忘れてしまった場合に後で戻って確認できるようにメモしておいてください。問題の説明:今日はちょっとした...
目次jQuery の $.ajax Webpack時代の始まり約束について深く考えるネストをなくすj...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...
目次序文1. 文字列の長さを取得する2. 文字列の指定された位置の値を取得する(1) charAt(...
このセクションでは、その他の重要かつ興味深い W3C アクティビティの概要を説明します。このセクショ...
序文少し前に、興味深い問題を目にしました。Vue のデータが変更された後に、ビューを同期的に更新する...
WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...