コンポーネント指向【Vue.js】

忘備録メモ(作成中)

コンポーネントとは

機能ごとにHTML/JavaScript/CSSをセットしたパーツが入った箱の様なモノ
例）ナビゲーション・ユーザー情報などを「それぞれ1つのファイル(部品)」にして「独立したコンポーネント」とする事ができる

コンポーネント指向とは

複数のコンポーネントを作って、それを組み合わせることで一つのアプリケーション(ページ)を作るという考え方
使い方も簡単で、運用効率も良い

利点

①設計・開発・テストがコンポーネント単位で行える
→チームで作業分担が容易になる
→テストによりコンポーネント単位で品質が担保できる
②共通化できるようになる(下記参照)
→使い回す事ができる(別のアプリにも使える)

コンポーネントで共通化できるもの

・HTMLによる構造
・CSSによる見た目
・javascriptによる動作
これら３つすべてが同じである必要はない。
例）構造と動作をコンポーネント化して、見た目を別(外部)で追加するなど

styleのscoped

コンポーネント指向で必要な機能(個別に独立したファイルを作れる)
そのファイルでしか適用されないCSSの記述ができる

<style scoped>
//scopedと指定する事で、ここに記述したスタイルは、このファイルでしか適用されない
</style>

以下作成中・・・