VueでJSXを使用する方法

VueでJSXを使用する方法

JSXとは何か

JSX は Javascript の構文拡張であり、JSX = Javascript + XML、つまり Javascript で XML を記述します。JSX のこの機能により、Javascript の柔軟性と HTML のセマンティクスおよび直感性を兼ね備えています。

Vue で JSX を使用する理由は何ですか?

場合によっては、コンポーネントを抽象化するためにレンダリング関数を使用します。レンダリング関数はあまり明確ではありません。公式ドキュメントを参照してください。レンダリング関数は記述が非常に困難な場合があります。

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

対応するテンプレートは次のとおりです。

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

これは明らかに報われない仕事ですが、ここで JSX が登場します。 Vue で JSX を使用するには、Babel プラグインを使用する必要があります。これにより、テンプレートに近い構文に戻ることができます。次に、Vue で JSX を書き始めましょう。

始める

Vue プロジェクトをすばやく作成し、vue-cli を使用してプロジェクトを作成します。

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

インストールの依存関係:

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

.babelrc を設定します:

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

基本コンテンツ

ここでは、プレーンテキスト、動的コンテンツ、ラベルの使用、カスタム コンポーネントの使用など、Vue で記述された基本的なコンテンツをいくつか示します。これらは、以下に示すように、通常使用する単一ファイル コンポーネントに似ています。

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

属性/小道具

属性バインディングは通常のHTML構造と同じである

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

動的属性が以前はv-bind:placeholder="this.placeholderText"だった場合、placeholder={this.placeholderText}になることに注意してください。

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

オブジェクトを展開することもできます

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

入力タグと同様に、次のように属性をバッチバインドできます。

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

スロット

名前付きスロットとスコープ付きスロットを実装する方法を見てみましょう。

名前付きスロット: 親コンポーネントは単一ファイル コンポーネント テンプレートと同様に記述され、挿入される場所は slot="header" で指定されます。サブコンポーネントは、this.$slots.header を通じてスロットの名前を指定します。ここで、header はスロットの名前です。

親コンポーネント:

与える() {
 {/* 名前付きスロット */
 <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>
 );
}

スコープ付きスロット: 子コンポーネントでは、{this.$scopedSlots.test({ user: this.user })} はスロットの名前が test であることを指定し、ユーザーを親コンポーネントに渡します。親コンポーネントがサブコンポーネント タグを書き込むときに、scopedSlots 値を通じて挿入位置をテストとして指定し、コールバック関数でサブコンポーネントによって渡されたユーザー値を取得します。

親コンポーネント:

与える() {
 {/* 名前付きスロット スコープ スロット*/
 <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} />
}

機能コンポーネント

機能コンポーネントは、ステートレスでインスタンスのないコンポーネントです。詳細については、公式 Web サイトを参照してください。次の内容を含む新しい FunctionalComponent.js ファイルを作成します。

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

親コンポーネントは次のように呼び出されます。

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

...

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

以上がVueでJSXを使用する方法の詳細です。VueでJSXを使用する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue3 開発に JSX が推奨されるのはなぜですか?
  • Vue 3.0 での JSX 構文の使用
  • Vue+render+jsx は編集可能な動的マルチレベルテーブルヘッダーのサンプルコードを実装します
  • Vue での JSX の使用とその理由
  • Vue での JSX の不完全な適用ガイドの要約
  • Vue で jsx 構文を使用する方法
  • Vueコンポーネントjsx構文の具体的な使用
  • Vue jsx の使用ガイドと vue.js での jsx 構文の使用方法
  • Vue が JSX 構文をサポートする方法の詳細な説明
  • webpack を使用して vue プロジェクトで jsx 構文を記述する方法の詳細な説明
  • jsx を使用して vue コンポーネントを記述する方法の詳細な説明

<<:  Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

>>:  docker を使用して複数のネットワーク インターフェースを持つコンテナーを起動する方法の例

推薦する

CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...

Linuxカーネルスケジューラソースコード初期化の分析

目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...

Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析

目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...

Linux ユーザーとグループのコマンド例分析 [切り替え、ユーザーの追加、権限制御など]

この記事では、Linux のユーザーおよびグループのコマンドについて例を挙げて説明します。ご参考まで...

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...

Centos7 に yum 経由で MySQL をインストールする方法

1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

SQLインジェクションの詳しい解説 - セキュリティ編(第2部)

この記事に誤りがあったり、ご提案がありましたら、お気軽にご連絡ください。よろしくお願いいたします。は...

Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル

Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...

VSCode の Remote-SSH を使用して Linux に接続し、リモート開発を行う

Remote-SSHをインストールして設定するまず VSCode を開き、拡張機能を見つけて、Rem...

HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

TOM.COMのホームページリニューアルの経験

<br />何の警告もなく、cnBeta で TOM.COM の Web サイトが再設計...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

Nginx キャッシュ設定例

Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...

Linux のメモリ管理とアドレス指定の詳細な紹介

目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...