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>ここで、
<!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 チュートリアル (バイナリ配布)
推薦する
Linux系でよく使われる運用・保守コマンド（まとめ）
目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...
Linux で pyenv をインストールする方法
前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...
iviewは動的なフォームとカスタム検証期間の重複を実装します
フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...
Viteプロジェクトを作成する手順
目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...
Linuxのアラーム機能の例の説明
Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...
k8sとDockerの関係についての簡単な説明
最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...
CSS テキスト配置実装コード
フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...
MySQL アーキテクチャのナレッジポイントの概要
1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...
Linux学習におけるmkdirコマンドの詳しい説明
目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...
ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する
Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...
Nginx でアンチホットリンクを設定するための手順を完了する
必要：通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...
ウェブページ作成のテスト問題を全て解けますか？
Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...
スクロールバーの美化効果を実現するための CSS3 のサンプル コード
具体的なコードは次のとおりです。 /*スクロールバーの幅*/ ::-webkit-スクロールバー{ ...
MySQLは遅いSQLを開始し、原因を分析します
ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...
CSSリンクと@importの違いの詳細な説明
HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...