Vueコンポーネントの基本のまとめ

Vueコンポーネントの基本のまとめ

コンポーネントの基本

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>

ここで、 <blog-post>コンポーネントはカスタム属性titleを介してデータを渡します。
v-bindを使用して 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 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>

子コンポーネントは、 $emitメソッドを使用してイベント名を渡すことでイベントをトリガーします。親コンポーネントはこのイベントを受信できます。

イベントを使用して値をスローすることができます。

<!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 を通じてスローされた値にアクセスできます。
コンポーネントで v-model を使用できます。

<!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内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • VUEの基本を理解するのに役立つ記事
  • VUE ユニアプリコア知識の簡単な紹介
  • Vueを使い始める際に習得する必要がある知識について簡単に説明します
  • Vueコンポーネント入門知識の包括的なレビュー
  • Vueの基礎知識はご存知ですか?

<<:  ZFS とは何か? ZFS を使用する理由とその機能

>>:  Linux インストール MySQL チュートリアル (バイナリ配布)

推薦する

Node.js でメモリ効率の高いアプリケーションを作成する方法

目次序文問題: 大きなファイルのコピーNodeJS のストリームとバッファバッファストリーム解決策 ...

mysql 5.7.19 最新バイナリインストール

まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...

MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...

大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション

MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

Vueは動的に生成されたコンポーネントをドラッグアンドドロップする要件を実装します

目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...

HTMLページをクリックしてダウンロードファイルを実装する2つの方法

1. <a>タグを使用して完了します <a href="/user/te...

ラジオボタンとチェックボックス効果の純粋な CSS 実装例

ラジオボタンとチェックボックスラジオボタンとチェックボックスの効果を実現するための純粋な CSSラジ...

iframe の多層ネスト、無制限のネスト、高度に適応したソリューション

ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...

MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...