著者は、 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とは何か、およびコードの再利用性にアプローチする方法についての一般的な理解が得られます。
前提条件
- Node.jsバージョン
14.16.0以降がコンピューターにインストールされています。 これをmacOSまたはUbuntu20.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu20.04
