VueのRender関数

<div>
  <h1>私のタイトル</h1>
  テキストコンテンツ
  <!-- TODO: タグラインを追加 -->
</div>

<h1>{{ ブログタイトル }}</h1>

レンダリング: 関数 (createElement) {
  createElement('h1', this.blogTitle) を返します
}

createElement('h1', this.blogTitle) を返します

// @returns {VNode}
要素を作成します(
  // {文字列 | オブジェクト | 関数}
  // HTML タグ名、コンポーネント オプション オブジェクト、または // 上記のいずれかに解決される非同期関数。必須フィールドです。
  'div',

  // {物体}
  // テンプレート内の属性に対応するデータ オブジェクト。オプション。
  {
    // (詳細は次のセクションを参照)
  },

  // {文字列 | 配列}
  // `createElement()` によって構築された子仮想ノード (VNode)、
  // 文字列を使用して「テキスト仮想ノード」を生成することもできます。オプション。
  [
    「まずはテキストを書いてください」
    createElement('h1', '見出し'),
    要素を作成します(MyComponent, {
      小道具: {
        いくつかのプロパティ: 'foobar'
      }
    })
  ]
）

{
  // `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
}

レンダリング: 関数 (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  createElement('div', [ を返します。
    // エラー - VNode が重複しています
    myParagraphVNode、myParagraphVNode
  ])
}

レンダリング: 関数 (createElement) {
  createElement('div', を返します。
    Array.apply(null, { 長さ: 20 }).map(関数 () {
      createElement('p', 'hi') を返します
    })
  ）
}

<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', 'アイテムが見つかりません。')
  }
}

プロパティ: ['値'],
レンダリング: 関数 (createElement) {
  var 自己 = これ
  createElement('input', を返す)
    domProps: {
      値: 自己.値
    },
    の上： {
      入力: 関数 (イベント) {
        self.$emit('input', イベントターゲット値)
      }
    }
  })
}

の上： {
  '!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()
    // ...
  }
}

レンダリング: 関数 (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) を返します。
        }
      }
    })
  ])
}

'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) を返す
  }
}