Vue.jsの単一ファイルコンポーネント【現役エンジニアが解説】

今回は、Vue.jsの単一ファイルコンポーネントについて、簡単に解説していきます。

基本的な書き方

Vue.jsではコンポーネントを単一のファイルで管理します。

ファイルは、template、script、styleという3つのブロックで構成されます。

<template>
</template>

<script>
</script>

<style>
</style>

templateにはHTML、scriptにはVue.js(JavaScript)、styleにはCSSを書きます。

子コンポーネントでの書き方

Vue CLIでプロジェクト作成した場合のサンプルを見てみましょう。

ここではsrc/components/HelloWorld.vueが子コンポーネント側です。