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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する
>>: docker を使用して複数のネットワーク インターフェースを持つコンテナーを起動する方法の例
1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...
目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...
目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...
この記事では、Linux のユーザーおよびグループのコマンドについて例を挙げて説明します。ご参考まで...
Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...
1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...
クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...
この記事に誤りがあったり、ご提案がありましたら、お気軽にご連絡ください。よろしくお願いいたします。は...
Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...
Remote-SSHをインストールして設定するまず VSCode を開き、拡張機能を見つけて、Rem...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
<br />何の警告もなく、cnBeta で TOM.COM の Web サイトが再設計...
目次要約する <テンプレート> <div> 要素 <h2>{{メ...
Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...
目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...