1. ノード、ツリー、仮想DOM<div> <h1>私のタイトル</h1> テキストコンテンツ <!-- TODO: タグラインを追加 --> </div> 各要素はノードです。テキストの各段落もノードです。コメントもノードです。ノードはページのセクションです。家系図と同じように、各ノードには子ノードが存在する可能性があります (つまり、各部分に他の部分を含めることができます)。 これらすべてのノードを効率的に更新するのは難しい場合がありますが、幸いなことに手動で行う必要はありません。 Vue にページ上の HTML をどのようにしたいかを伝えるだけで、テンプレートで指定できます。 <h1>{{ ブログタイトル }}</h1> またはレンダリング関数では: レンダリング: 関数 (createElement) { createElement('h1', this.blogTitle) を返します } どちらの場合も、blogTitle が変更されても、Vue は自動的にページを更新し続けます。 2. 仮想DOMVue は、実際の DOM がどのように変更されるかを追跡するために仮想 DOM を作成します。次のコード行をよく見てください: createElement('h1', this.blogTitle) を返します
// @returns {VNode} 要素を作成します( // {文字列 | オブジェクト | 関数} // HTML タグ名、コンポーネント オプション オブジェクト、または // 上記のいずれかに解決される非同期関数。必須フィールドです。 'div', // {物体} // テンプレート内の属性に対応するデータ オブジェクト。オプション。 { // (詳細は次のセクションを参照) }, // {文字列 | 配列} // `createElement()` によって構築された子仮想ノード (VNode)、 // 文字列を使用して「テキスト仮想ノード」を生成することもできます。オプション。 [ 「まずはテキストを書いてください」 createElement('h1', '見出し'), 要素を作成します(MyComponent, { 小道具: { いくつかのプロパティ: 'foobar' } }) ] ) 2.1 データオブジェクトの詳細レンダリング関数では、一部のテンプレート属性には Vnode データ オブジェクトの最上位フィールドがあり、通常の属性や { // `v-bind:class` と同じ API、 // 文字列、オブジェクト、または文字列とオブジェクトの配列を受け入れます 'class': { foo: 真、 バー: 偽 }, // `v-bind:style` と同じ API、 // 文字列、オブジェクト、またはオブジェクトの配列を受け入れます style: { 色: '赤'、 フォントサイズ: '14px' }, // 通常の HTML 属性 属性: { id: 'foo' }, // コンポーネントプロパティ 小道具: { myProp: 'バー' }, // DOMプロパティ domProps: { 内部HTML: 'baz' }, // イベントリスナーは`on`内にあります。 // ただし、`v-on:keyup.enter` のような修飾子はサポートされなくなりました。 // 処理関数で keyCode を手動で確認する必要があります。 の上: { クリック: this.clickHandler }, // コンポーネント内で `vm.$emit` によってトリガーされるイベントではなく、ネイティブ イベントをリッスンするコンポーネントにのみ使用されます。 ネイティブオン: { クリック: this.nativeClickHandler }, // カスタムディレクティブ。 `binding` では `oldValue` を使用できないことに注意してください。 // 割り当て。Vue によって自動的に同期されるためです。 ディレクティブ: [ { 名前: 'my-custom-directive', 値: '2'、 式: '1 + 1'、 引数: 'foo', 修飾子: バー: 真 } } ]、 // スコープ付きスロットの形式は // { name: props => VNode | Array<VNode> } です スコープスロット: { デフォルト: props => createElement('span', props.text) }, // コンポーネントが別のコンポーネントのサブコンポーネントである場合、スロットの名前を指定する必要があります slot: 'name-of-slot'、 // その他の特別なトップレベルプロパティ キー: 'myKey', 参照: 'myRef', // レンダリング関数で複数の要素に同じ参照名を適用すると、 // すると `$refs.myRef` は配列になります。 参照先: true } 2.2 制約VNode は一意である必要があります コンポーネント ツリー内のすべての レンダリング: 関数 (createElement) { var myParagraphVNode = createElement('p', 'hi') createElement('div', [ を返します。 // エラー - VNode が重複しています myParagraphVNode、myParagraphVNode ]) } 要素/コンポーネントを何度も繰り返す必要がある場合は、ファクトリ関数を使用してそれを実行できます。たとえば、次のレンダリング関数は、20 個の同一の段落を完全に合法的な方法でレンダリングします。 レンダリング: 関数 (createElement) { createElement('div', を返します。 Array.apply(null, { 長さ: 20 }).map(関数 () { createElement('p', 'hi') を返します }) ) } 3. レンダリング機能のテンプレート機能3.1 v-if と v-forネイティブ <ul v-if="アイテムの長さ"> <li v-for="item in items">{{ item.name }}</li> </ul> <p v-else>アイテムが見つかりません。</p> これらはすべて、 プロパティ: ['アイテム'], レンダリング: 関数 (createElement) { if (this.items.length) { createElement('ul', this.items.map(function (item) { を返します。 createElement('li', item.name) を返します。 })) } それ以外 { return createElement('p', 'アイテムが見つかりません。') } } 3.2 vモデルレンダリング関数には プロパティ: ['値'], レンダリング: 関数 (createElement) { var 自己 = これ createElement('input', を返す) domProps: { 値: 自己.値 }, の上: { 入力: 関数 (イベント) { self.$emit('input', イベントターゲット値) } } }) } これは低レベルになることの代償ですが、 3.3 イベントとキー修飾子
例えば: の上: { '!click': this.doThisInCapturingMode、 '~keyup': this.doThisOnce、 '~!マウスオーバー': this.doThisOnceInCapturingMode } 他のすべての修飾子の場合、イベント ハンドラー内からイベント メソッドを使用できるため、プライベート プレフィックスは必要ありません。 すべての修飾子を使用した例を次に示します。 の上: { keyup: 関数 (イベント) { // イベントをトリガーする要素がイベントがバインドされている要素でない場合は、 // 戻ります if (event.target !== event.currentTarget) 戻ります // Enter キーが押されなかった場合、または // Shift キーが同時に押されなかった場合 // 戻ります if (!event.shiftKey || event.keyCode !== 13) 戻ります // イベントのバブリングを停止する event.stopPropagation() // 要素のデフォルトのキーアップイベントを防止します。event.preventDefault() // ... } } 3.4 スロット
レンダリング: 関数 (createElement) { // `<div><スロット></スロット></div>` createElement('div', this.$slots.default) を返します }
プロパティ: ['メッセージ'], レンダリング: 関数 (createElement) { // `<div><スロット:text="メッセージ"></スロット></div>` createElement('div', [ を返します。 this.$scopedSlots.default({ テキスト: this.message }) ]) } レンダリング関数を使用してスコープ スロットを子コンポーネントに渡す場合は、 レンダリング: 関数 (createElement) { // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>` createElement('div', [ を返します。 要素を作成します('child', { // データオブジェクトに `scopedSlots` を渡す // 形式は { name: props => VNode | Array<VNode> } です スコープスロット: { デフォルト: 関数 (props) { createElement('span', props.text) を返します。 } } }) ]) } 3.5 例'vue/types/umd' から { CreateElement, RenderContext } をインポートします。 エクスポートデフォルト{ 機能的: 真、 小道具: { 行: オブジェクト、 レンダリング: 関数、 インデックス: 番号、 カラム: { タイプ: オブジェクト、 デフォルト: null } }, レンダリング: (h: CreateElement, ctx: RenderContext) => { 定数パラメータ: 任意 = { 行: ctx.props.row、 インデックス: ctx.props.index } if (ctx.props.column) params.column = ctx.props.column ctx.props.render(h, params) を返す } }
以下もご興味があるかもしれません:
|
>>: Dockerバッチコンテナオーケストレーションの実装
プロジェクトシナリオプロジェクトの背景全体にカスタム透かしを追加します。透かしのテキスト、フォントの...
この記事では、thinkphp5.1 + Vue+axiosを使用してファイルをアップロードする方法...
Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...
この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように...
この記事の例では、要素UIテーブルにドロップダウンフィルタリングを実装するための具体的なコードを参考...
コードをコピーコードは次のとおりです。 <a href=# title="ここに表示...
要素UIとはelement-ui は、Ele.me のフロントエンド チームが開発者、デザイナー、製...
目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...
docker-compose.yml を編集し、次のコンテンツを追加します。 バージョン: '...
JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...
この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...
目次概要フロントエンド知識システムフロントエンドの3つの要素プレゼンテーション層 (CSS)動作レイ...
絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
現在のページへのリンク。 -------------------一般的な使用法は次のとおりです。 &...
この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...