コンポーネントの基本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 チュートリアル (バイナリ配布)
目次序文問題: 大きなファイルのコピーNodeJS のストリームとバッファバッファストリーム解決策 ...
まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...
この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...
ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...
MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...
——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...
目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...
まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...
1. <a>タグを使用して完了します <a href="/user/te...
ラジオボタンとチェックボックスラジオボタンとチェックボックスの効果を実現するための純粋な CSSラジ...
ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...