Vue が JSX 構文をサポートする方法の詳細な説明

通常、Vue の開発にはテンプレート構文を使用します。実際、react と同じ構文があり、これは jsx 構文もサポートしています。 この記事では主に、Vue が JSX 構文をサポートする方法についての詳細な説明を紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Vue のテンプレートは実際にはレンダリング関数にコンパイルされます。

1。 JSX 構文は、テンプレートに近い構文に戻すことができるという点です。

1. インストールします

createElement(
 'anchored-heading', {
  props: {
   level: 1
  }
 }, [
  createElement('span', 'Hello'),
  ' world!'
 ]
)

2. .babelrc ファイルを編集します

<anchored-heading :level="1">
　　<span>Hello</span> world!
</anchored-heading>

createElement のエイリアスとして h を使用するのが Vue の一般的な規則です。実際、これは JSX にも必要です。h がスコープ内でその役割を失うと、アプリケーションでエラーが発生します。 関連する推奨事項:

JSXとHTMLの違い

ReactとJSX_html/css_WEB-ITnoseを使い始める

JavaScriptのReactフレームワークのJSX構文学習入門チュートリアル_基礎知識

以上がVue が JSX 構文をサポートする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。