単一ファイルコンポーネント
単一ファイルコンポーネントを学習しました。
これはVue.jsのコンポーネントを単独のコンポーネントとして作成する機能です。
single file conponentsからsfcやSFCと呼ばれたり、Vueコンポーネントと呼ばれるそうです。
1つのファイルに1つのコンポーネントしか定義できませんが、これが実はメリットだったりします。
ブロック要素の役割ごとに明確に区分してファイルを定義できるため、一貫性と保守性が高いコンポーネントを実現できるとのことらしいですな。
そして、個人的にいいなーと思ったのが、スタイルも含めてコンポーネントとして定義できるところですね！
単一ファイルコンポーネントを構成するブロックは、以下の3つです。
- <template>ブロック
- <script>ブロック
- <style>ブロック
<style>ブロックでは先ほども申し上げた通り、単一ファイルコンポーネントごとにスタイルをカプセル化できます。
従来のCSSは、スタイルが干渉しないようにBEMなどの記法が開発に利用されてきましたが、これに対して単一ファイルコンポーネントでは、スコープ付きCSS/CSSモジュールによってコンポーネント単位でカプセル化することで、スタイル定義の干渉を回避できます。
単一ファイルコンポーネントの学習記録としてgithubに載せています↓
単一ファイルコンポーネントの開発には、Vue CLIというVue.js向けのアプリケーション開発環境のセットアップなどの機能を提供すろコマンドラインツールを使います。
なので試される方は、Node.jsをインストールして、Vue CLIをインストールしてください。
では。
