コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <ボタン カウンター></ボタン カウンター> <ボタン カウンター></ボタン カウンター> <ボタン カウンター></ボタン カウンター> </div> <スクリプト> // button-counterという新しいコンポーネントを定義します Vue.component('button-counter', { データ: 関数 () { 戻る { カウント: 0 } }, テンプレート: '<button v-on:click="count++">{{ count }} 回クリックしました。</button>' }); 新しい Vue({ el: '#app' }); </スクリプト> </本文> </html> ボタンをクリックすると、各コンポーネントのカウントが個別に維持されることに注意してください。ここで、カスタム コンポーネントのデータ プロパティは関数である必要があり、各インスタンスは返されたオブジェクトの独立したコピーを保持します。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <ボタン カウンター></ボタン カウンター> <ボタン カウンター></ボタン カウンター> <ボタン カウンター></ボタン カウンター> </div> <スクリプト> var ボタンカウンタデータ = { カウント: 0 } // button-counterという新しいコンポーネントを定義します Vue.component('button-counter', { データ: 関数 () { 戻るボタンCounterData }, テンプレート: '<button v-on:click="count++">{{ count }} 回クリックしました。</button>' }); 新しい Vue({ el: '#app' }); </スクリプト> </本文> </html> 2 Propsを介して子コンポーネントにデータを渡す<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <blog-post title="Vue との旅"></blog-post> <blog-post title="Vue を使用したブログ作成"></blog-post> <blog-post title="Vue が楽しい理由"></blog-post> </div> <スクリプト> Vue.component('ブログ投稿', { プロパティ: ['タイトル'], テンプレート: '<h3>{{ title }}</h3>' }) 新しい Vue({ el: '#app' }); </スクリプト> </本文> </html> ここで、 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <blog-post v-for="投稿内の投稿" v-bind:key="post.id" v-bind:title="post.title"></blog-post> </div> <スクリプト> Vue.component('ブログ投稿', { プロパティ: ['タイトル'], テンプレート: '<h3>{{ title }}</h3>' }) 新しいVue({ el: '#app', データ: { 投稿: { id: 1, title: 'Vue との旅' }, { id: 2, title: 'Vue でブログを書く' }, { id: 3, title: 「なぜ Vue は楽しいのか」 } ] } }); </スクリプト> </本文> </html> 3 単一のルート要素各コンポーネントにはルート要素が 1 つだけ必要です。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post> </div> <スクリプト> Vue.component('ブログ投稿', { プロパティ: ['post'], テンプレート: ` <div class="ブログ投稿"> <h3>{{ 投稿.タイトル }}</h3> <div v-html="投稿コンテンツ"></div> </div> ` }) 新しいVue({ el: '#app', データ: { 投稿: { id: 1、タイトル: 'Vue との旅'、コンテンツ: '私の旅...' }、 { id: 2、タイトル: 'Vue でブログを書く'、コンテンツ: '私のブログ...' }、 { id: 3、title: 「Vue が楽しい理由」、content: 「Vue はとても楽しい...」 } ] } }); </スクリプト> </本文> </html> v-bind:post="post" によってバインドされた投稿はオブジェクトであるため、多くのプロパティを介してデータを渡す手間が省けることに注意してください。 4 サブコンポーネントイベントのリッスン<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <div :style="{fontSize: postFontSize + 'em'}"> <blog-post v-for="投稿内の投稿" v-bind:key="post.id" v-bind:post="投稿" v-on:enlarge-text="postFontSize += 0.1" /> </div> </div> <スクリプト> Vue.component('ブログ投稿', { プロパティ: ['post'], テンプレート: ` <div class="ブログ投稿"> <h3>{{ 投稿.タイトル }}</h3> <button v-on:click="$emit('enlarge-text')">テキストを拡大する</button> <div v-html="投稿コンテンツ"></div> </div> ` }) 新しいVue({ el: '#app', データ: { 投稿フォントサイズ: 1, 投稿: { id: 1、タイトル: 'Vue との旅'、コンテンツ: '私の旅...' }、 { id: 2、タイトル: 'Vue でブログを書く'、コンテンツ: '私のブログ...' }、 { id: 3、title: 「Vue が楽しい理由」、content: 「Vue はとても楽しい...」 } ] } }); </スクリプト> </本文> </html> 子コンポーネントは、 イベントを使用して値をスローすることができます。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <div :style="{fontSize: postFontSize + 'em'}"> <blog-post v-for="投稿内の投稿" v-bind:key="post.id" v-bind:post="投稿" v-on:enlarge-text="postFontSize += $event" /> </div> </div> <スクリプト> Vue.component('ブログ投稿', { プロパティ: ['post'], テンプレート: ` <div class="ブログ投稿"> <h3>{{ 投稿.タイトル }}</h3> <button v-on:click="$emit('enlarge-text', 0.2)">フォントを拡大する</button> <div v-html="投稿コンテンツ"></div> </div> ` }) 新しいVue({ el: '#app', データ: { 投稿フォントサイズ: 1, 投稿: { id: 1、タイトル: 'Vue との旅'、コンテンツ: '私の旅...' }、 { id: 2、タイトル: 'Vue でブログを書く'、コンテンツ: '私のブログ...' }、 { id: 3、title: 「Vue が楽しい理由」、content: 「Vue はとても楽しい...」 } ] } }); </スクリプト> </本文> </html> 親コンポーネントでは、$event を通じてスローされた値にアクセスできます。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <!-- <input v-model="searchText"> --> <input v-bind:value="searchText" v-on:input="searchText = $event.target.value"> <p>{{ 検索テキスト }}</p> </div> <スクリプト> 新しいVue({ el: '#app', データ: { 検索テキスト: '' } }); </スクリプト> </本文> </html> <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <スタイル> </スタイル> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <本文> <div id="アプリ"> <カスタム入力 v-model="検索テキスト"></カスタム入力> <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input> <p>{{ 検索テキスト }}</p> </div> <スクリプト> Vue.component('カスタム入力', { プロパティ: ['値'], テンプレート: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >` }) 新しいVue({ el: '#app', データ: { 検索テキスト: '' } }); </スクリプト> </本文> </html> 最後に、DOM テンプレートを解析する際の注意事項です。 以上がVueコンポーネントの基礎知識のまとめの詳しい内容です。Vueコンポーネントについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: ZFS とは何か? ZFS を使用する理由とその機能
>>: Linux インストール MySQL チュートリアル (バイナリ配布)
目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...
前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...
フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...
目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...
Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...
最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...
フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...
1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...
目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...
Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...
必要:通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...
Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...
具体的なコードは次のとおりです。 /*スクロールバーの幅*/ ::-webkit-スクロールバー{ ...
ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...
HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...