VueでJSXを使用する方法

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

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

# Enterキーを押すだけです vue create vue-jsx

vue.js を babel にインポートします。

モジュール.エクスポート = {
 プリセット: [
 '@vue/cli-plugin-babel/プリセット',
 ['@vue/babel-preset-jsx',
  {
  'injectH': 偽
  }]
 ]
}

与える（） {
 戻る （
 <div>
  <h3>目次</h3>
  {/* プレーンテキスト */
  <p>こんにちは、私はゴパルです</p>
  動的コンテンツ */
  <p>こんにちは { this.msg }</p>
  入力ボックス*/
  <入力 />
  {/* カスタム コンポーネント */
  <myComponent></myComponent>
 </div>
 );
}

与える（） {
 <div><input placeholder="111" /></div> を返します。
}

与える（） {
 戻り値 <入力
   タイプ="メール"
   プレースホルダー={this.placeholderText}
   />
}

レンダリング (要素を作成) {
 戻る （
  <ボタン {...this.largeProps}></ボタン>
 ）
}

定数入力属性 = {
 タイプ: 'メール'、
 プレースホルダー: 'メールアドレスを入力してください'
};
与える（） {
 <input {...{ attrs: inputAttrs }} /> を返します。 
}

与える（） {
 {/* 名前付きスロット */
 <myComponent>
 <header slot="header">ヘッダー</header>
 <header slot="content">コンテンツ</header>
 <footer slot="footer">フッ​​ター</footer>
 </myComponent>
}

与える（） {
 戻る （
 <div>
  {/* プレーンテキスト */
  <p>私はカスタムコンポーネントです</p>
  {this.$slots.header}
  {this.$slots.content}
  {this.$slots.footer}
 </div>
 );
}

与える（） {
 {/* 名前付きスロット スコープ スロット*/
 <myComponent {
 ...{
  スコープスロット: {
  テスト: ({user}) => (
   <div>{ユーザー名}</div>
  ）
  }
 }
 }>
 </myComponent>

与える（） {
 戻る （
 <div>
  {this.$scopedSlots.test({
  ユーザー: this.user
  })}
 </div>
 );
}

与える（） {
 {/* 説明書 */}
 {/* v モデル */
 <div><input vModel={this.newTodoText} /></div>
 {/* v-model と修飾子*/
 <div><vModel_trim={this.tirmData} を入力します></div>
 {/* v-on リスナー イベント*/
 <div><input vOn:input={this.inputText} /></div>
 {/* v-on リスナー イベントと修飾子*/
 <div><入力vOn:click_stop_prevent={this.inputText} /></div>
 html
 <p domPropsInnerHTML={html} />
}

export default ({ props }) => <p>hello {props.message}</p>

'./FunctionalComponent' から funComponent をインポートします。

...

与える（） {
 戻り値: 関数コンポーネント*/
  <funComponent message="ゴパル"></funComponent>
}