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 を使用して複数のネットワーク インターフェースを持つコンテナーを起動する方法の例

推薦する

17 個の JavaScript ワンライナー

目次1. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

MySQLの起動失敗の解決策

MySQLの起動失敗の解決策MySQLを起動できませんmysqlを停止した後、いくつかの操作(ホスト...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...

Nginx ルーティング転送とリバースプロキシロケーション構成の実装

Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...

WeChatミニプログラムは同時通訳を利用して音声認識を実装します

私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...

OpenSSL は双方向認証のチュートリアルを実装します (サーバーとクライアントのコード付き)

1. 背景1.1 問題点最近の製品テスト レポートでは、PKI ベースの認証方法の使用が推奨されて...

React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....

MySQL テーブル自動増分 ID オーバーフロー障害レビュー ソリューション

問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景: t...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

Vue ページをリフレッシュするために provide と injection を適用する

目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...

CSS3 のフィルタプロパティの使用に関する詳細な説明

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...

JavaScript でシンプルなクリスマス ゲームを実装する

目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...

IE8 ベータ 1 には注意が必要な 2 つの領域があります

<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...