9.構成部品の紹介と登録
板橋隊長張基孝のVuejs入門基礎授業を聞いて、内容を整理しました.
毎日20分ちょっとVuejs頑張れ.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools
ビューコンポーネント
毎日20分ちょっとVuejs頑張れ.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools
ビューコンポーネント
コンポーネントは、画面領域を分割して開発できる機能です.
領域を分割することで、再利用性を向上させることができます.
分割領域は、構成部品間の関係を生成します.
ほとんどの現代のフロントエンドフレームワークは素子に基づいて開発されている.
構成部品登録の練習
1.ルート構成部品の作成
divラベルを作成します.
Vueインスタンスを作成する場合は、既定ではルート構成部品です.
Vueインスタンスでappを使用してelプロパティを作成します.
これにより,appというタグ内部がルート素子認知の範囲となる.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 여기가 뷰 인스턴스의 적용 범위다 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
OpenWith Live Serverを使用してブラウザを実行し、開発者ツールを開きます.
(Live Server:ドキュメントの変更と保存は、すぐにブラウザに反映されます.)
2.構成部品の定義
「app-header」というコンポーネントを作成します.
次の構造を使用して構成部品を定義できます.
Vue.component(「構成部品名」、構成部品内容);
コンポーネントの内容は、オブジェクトを作成しながらテンプレートのプロパティを定義します.
3.構成部品の登録
appラベルに「app-header」コンポーネントを登録します.<body>
<div id="app">
<!-- 여기가 뷰 인스턴스의 유효 범위 -->
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
new Vue({
el: '#app'
})
</script>
</body>
ファイルを保存し、ブラウザを確認します.
Rootコンポーネントの下にapp-headerコンポーネントを作成しました.
その他の構成部品を定義します。
「app-content」コンポーネントを定義して登録しました.
ビュー開発者ツールで構成部品を表示します.
Root構成部品サブアイテムには2つの構成部品があります.
ここで、Root構成部品は親構成部品です.
「app-header」コンポーネントと「app-content」コンポーネントはサブコンポーネントです.
この構造では素子の関係を決定することができる.
インバース構成部品
Vue.component()として登録
Vueルートインスタンスに構成部品を登録すると、複数のインスタンスで共通に使用されるグローバル構成部品になります.
開発時には通常、逆方向構成部品が使用されます.
注Vue。js公式ドキュメント:グローバルコンポーネント領域コンポーネント
注)構成部品名:ロールケーキ-シンボル
ハイフネーションを使用します.Vue.component('my-component-name', {})
次のレッスンでは、ゾーンコンポーネントを学習します.
Reference
この問題について(9.構成部品の紹介と登録), 我々は、より多くの情報をここで見つけました
https://velog.io/@freejia/9.-컴포넌트-소개-및-등록-실습
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
1.ルート構成部品の作成
divラベルを作成します.
Vueインスタンスを作成する場合は、既定ではルート構成部品です.
Vueインスタンスでappを使用してelプロパティを作成します.
これにより,appというタグ内部がルート素子認知の範囲となる.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 여기가 뷰 인스턴스의 적용 범위다 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>(Live Server:ドキュメントの変更と保存は、すぐにブラウザに反映されます.)
2.構成部品の定義
「app-header」というコンポーネントを作成します.
次の構造を使用して構成部品を定義できます.
Vue.component(「構成部品名」、構成部品内容);
コンポーネントの内容は、オブジェクトを作成しながらテンプレートのプロパティを定義します.
3.構成部品の登録
appラベルに「app-header」コンポーネントを登録します.
<body>
<div id="app">
<!-- 여기가 뷰 인스턴스의 유효 범위 -->
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
new Vue({
el: '#app'
})
</script>
</body>Rootコンポーネントの下にapp-headerコンポーネントを作成しました.
その他の構成部品を定義します。
「app-content」コンポーネントを定義して登録しました.
ビュー開発者ツールで構成部品を表示します.
Root構成部品サブアイテムには2つの構成部品があります.
ここで、Root構成部品は親構成部品です.
「app-header」コンポーネントと「app-content」コンポーネントはサブコンポーネントです.
この構造では素子の関係を決定することができる.
インバース構成部品
Vue.component()として登録
Vueルートインスタンスに構成部品を登録すると、複数のインスタンスで共通に使用されるグローバル構成部品になります.
開発時には通常、逆方向構成部品が使用されます.
注Vue。js公式ドキュメント:グローバルコンポーネント領域コンポーネント
注)構成部品名:ロールケーキ-シンボル
ハイフネーションを使用します.
Vue.component('my-component-name', {})Reference
この問題について(9.構成部品の紹介と登録), 我々は、より多くの情報をここで見つけました https://velog.io/@freejia/9.-컴포넌트-소개-및-등록-실습テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol