レンダリング関数と JSX の詳細

<h1>
  <a name="hello-world" href="#hello-world" rel="外部 nofollow" >
    こんにちは世界！
  </a>
</h1>

<anchored-heading :level="1">こんにちは世界！</anchored-heading>

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

Vue.component('アンカー付き見出し', {
  テンプレート: '#anchored-heading-template',
  小道具: {
    レベル：
      タイプ: 数値、
      必須: true
    }
  }
})

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

<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
}

var getChildrenTextContent = 関数 (children) {
  戻り値 children.map(function (node) {
    ノードの子を返す
      ? 子のテキストコンテンツを取得します(node.children)
      : ノード.テキスト
  }）。参加する（''）
}

Vue.component('アンカー付き見出し', {
  レンダリング: 関数 (createElement) {
    // ケバブケースIDを作成する
    var 見出しId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')

    要素の作成を返す(
      'h' + このレベル、
      [
        要素を作成します('a', {
          属性: {
            名前: 見出しID、
            href: '#' + 見出しID
          }
        }, this.$slots.default)
      ]
    ）
  },
  小道具: {
    レベル：
      タイプ: 数値、
      必須: 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) を返します。
        }
      }
    })
  ])
}

要素を作成します(
  'アンカー見出し'、{
    小道具: {
      レベル: 1
    }
  }, [
    createElement('span', 'こんにちは')、
    ' 世界！'
  ]
）

<アンカー見出し:level="1">
  こんにちは世界！
</アンカー見出し>

'./AnchoredHeading.vue' から AnchoredHeading をインポートします。

新しいVue({
  el: '#demo',
  レンダリング: 関数 (h) {
    戻る （
      <アンカー見出しレベル={1}>
        こんにちは世界！
      </アンカーされた見出し>
    ）
  }
})

Vue.component('my-component', {
  機能的: 真、
  // Propsはオプションです props: {
    // ...
  },
  // インスタンスの不足を補うために // コンテキストレンダリングとして2番目の引数を提供します: function (createElement, context) {
    // ...
  }
})

<テンプレート機能>
</テンプレート>

var 空のリスト = { /* ... */ }
var テーブルリスト = { /* ... */ }
var OrderedList = { /* ... */ }
var 順序なしリスト = { /* ... */ }

Vue.component('スマートリスト', {
  機能的: 真、
  小道具: {
    アイテム: {
      タイプ: 配列、
      必須: true
    },
    isOrdered: ブール値
  },
  レンダリング: 関数 (createElement, コンテキスト) {
    関数適切なリストコンポーネント（）{
      var アイテム = context.props.items

      if (items.length === 0) 空のリストを返す
      if (typeof items[0] === 'object') は TableList を返します
      if (context.props.isOrdered) は OrderedList を返します。

      順序なしリストを返す
    }

    要素の作成を返す(
      適切なリストコンポーネント()、
      コンテキスト.データ、
      コンテキスト.子供
    ）
  }
})

Vue.component('my- functional-button', {
  機能的: 真、
  レンダリング: 関数 (createElement, コンテキスト) {
    // 属性、イベント リスナー、子ノードなどを完全に透過的に送信します。
    createElement('button', context.data, context.children) を返します。
  }
})

<テンプレート機能>
  <ボタン
    クラス="btn btn-primary"
    v-bind="data.attrs"
    v-on="リスナー"
  >
    <スロット/>
  </ボタン>
</テンプレート>

<私の機能コンポーネント>
  <p v-スロット:foo>
    初め
  </p>
  <p>2番目</p>
</my-function-component> 関数コンポーネント

<div>
        <ヘッダー>
          <h1>私はテンプレートです!</h1>
        </ヘッダー>
        <p v-if="メッセージ">{{ メッセージ }}</p>
        <p v-else>メッセージはありません。</p>
      </div>

関数匿名(
）{
  with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("メッセージがありません。"))])])}
}

_m(0): 関数匿名(
）{
  with(this){return _c('header',[_c('h1',[_v("私はテンプレートです!")])])}
}