Vue.js 単一ファイルコンポーネント

今日はVue.jsの単一ファイルコンポーネントについてまとめたいと思います。

単一ファイルコンポーネントとは今までhtml、css、javascriptを三つのファイルに分けて記述していた物を一つのファイルにまとめて記述する方法になります。Vue.jsの場合はファイル名.vueといった拡張子の形で作成されます。

構成としてはhtml部分を記載するtemplate部分、javascript部分を作成するscript部分、css部分を作成するstyle部分によって成り立ちます。

<template>
  htmlの記述
</template>

<script>
  // 必要ファイルのインポート
  import ~
  
  // 外部から参照するための記載(データ、メソッドなどもこの中に記載する)
  export default {  
　　
  }

</script>
<style>
  cssの記述
</style>

元々分離されていたファイルをまとめた形になるので、記法が大きく変わったり特殊な決まりがあるわけではなくエラーが発生した際などに問題がある箇所の特定に役立つ記法といった印象を受けました。特に今まで名前の重複を気にしてスタイルを当てる必要があったCSSの一意要素名を考える必要がなくなったのは、個人的に負担が減る部分でした。

本日は以上です。