著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

Vue.js を使用してWebアプリケーションを作成する場合は、小さなモジュール式のコードブロックでアプリケーションを構築することをお勧めします。 これにより、アプリケーションの一部に焦点が当てられるだけでなく、複雑さが増すにつれてアプリケーションの更新が容易になります。 Vue CLI から生成されたアプリにはビルド手順が必要なため、シングルファイルコンポーネント（SFC）にアクセスして、アプリにモジュール性を導入できます。 SFCには.vue拡張子があり、HTML <template>、<script>、および<style>タグが含まれており、他のコンポーネントに実装できます。

SFCを使用すると、開発者は、コンポーネントごとに独自の HTML タグを作成し、それらをアプリケーションで使用することができます。 <p> HTMLタグがブラウザで段落をレンダリングし、レンダリングされない機能も保持するのと同じように、コンポーネントタグはVueテンプレートに配置されている場所にSFCをレンダリングします。

このチュートリアルでは、SFCを作成し、propsを使用してデータを渡し、slotsを使用してタグ間にコンテンツを挿入します。 このチュートリアルを終了するまでに、SFCとは何か、およびコードの再利用性にアプローチする方法についての一般的な理解が得られます。

前提条件