なるはや Vue SPA入門：単一ファイルコンポーネント

Vue CLI3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きましょう。

目次はこちら

今回は 単一ファイルコンポーネント編です。

前提事項

Vue Router 編 が完了していること。

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

Vue CLI3 で生成したプロジェクトでは単一ファイルコンポーネントに対して Vue のコーディングを行っていきます。単一ファイルコンポーネントとは *.vue 拡張子を持つファイルのことです。

src/views/SandBox.vue を以下のように修正してみましょう。

src/views/SandBox.vue

<template>
  <div class="sandbox">
    <!-- ここにこのコンポーネントの HTML を書きます -->
    <h1>SandBox</h1>

    <p>{{ msg }}</p>
    <p>{{ now() }}</p>
  </div>
</template>

<script>
// ここに JavaScript を書きます

// このコンポーネントで使用する Vue オブジェクト
export default {
  // データ
  data() {
    return {
      msg: "Hello, World!"
    };
  },

  // メソッド
  methods: {
    now() {
      return new Date();
    }
  }
};
</script>

<style>
/* ここに、このコンポーネントに適用する CSS を書きます */
.sandbox {
  color: red;
}
</style>

単一ファイルコンポーネントは以下の３つの要素で構成されています。
HTML, JS, CSS が１つのファイル内に書かれているので、生産性、保守性に優れています。

構成要素	内容
template タグ	HTMLを記述します。 自分が作成したコンポーネントもHTMLタグとして使えます。
script タグ	JavaScriptを記述します。 主に Vue オブジェクトを定義します。 Vue オブジェクトでは data や methods 等を定義します。
style タグ	CSSを記述します。

動作確認

画面トップのメニューのSandboxをクリックします。以下の条件を満たしていればOKです。

• ページ内の文字が赤色
• Hello, World!が表示されている
• 現在の時刻が表示されている

次回

Vue の基本