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. DOMとBOM関連1. 要素にフォーカスがあるかどうかを確認する2. 要素の兄弟ノードをす...
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
MySQLの起動失敗の解決策MySQLを起動できませんmysqlを停止した後、いくつかの操作(ホスト...
目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...
この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...
Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...
1. 背景1.1 問題点最近の製品テスト レポートでは、PKI ベースの認証方法の使用が推奨されて...
目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....
問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景: t...
では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...
目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...
最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...
目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...
<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...