jtk

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その5

  • 5.3 カスタムディレクティブ
  • 5.4 描画関数
  • 5.5 ミックスイン

はスキップ。もう少し基礎的な部分を理解したらもう一度読み直そうと思います。。

6 単一コンポーネントによる開発

6.2 単一コンポーネントとは

Vue.js では、上記のような単一ファイルコンポーネントのことを、単一コンポーネントの英語の呼び名の Single File Components の頭文字から、SFCsfc と略して呼ぶことがあります。また、Vueコンポーネント(Vue Components) と呼ぶことがあります。

は同じ。

6.5 単一コンポーネントの動作を体験する

Vue CLIネコ本のとき にやったようなプロジェクト単位の作成でないと使えないと思っていましたが、単一のファイルでも vue serve を使えば使用が可能。
ちょっと試してみたいときなどにはいいですね。

hello.vue ファイルの中身

<template>
  <p class="message">メッセージ: {{ msg }}</p>
</template>

<script>
  export default {
    data() {
      return {
        msg: "こんにちは"
      };
    }
  };
</script>

<style>
  .message {
    color: red;
  }
</style>

コマンドで、hello.vue ファイルの親フォルダに移動して、

$ vue serve hello.vue --open

addon が必要と怒られたので、

$ yarn global add @vue/cli-service-global

eslint がないと怒られたので、

Error: Cannot find module 'eslint-plugin-vue'
$ npm install --save eslint eslint-plugin-vue@nexeslint-config-vue

でもう一度、

$ vue serve hello.vue --open

とすると、http://localhost:8080/ の URL で hello.vue が展開される。

ここでは、Vue CLI から、webpack と Vue Loader を使ってバンドルしています。

6.6 単一ファイルコンポーネントの機能

6.6.1 外部ファイルのインポート

src 属性で以下のように外部ファイルの内容をインポートできます。 パスには、当該の単一ファイルコンポーネントからの相対パスを指定してください。

<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>

6.6.2 スコープ付き CSS

<style> ブロックに scoped 属性を付与することで、その単一ファイルコンポーネント内の要素にのみ適用するカプセル化を実現します。Vue.js の単一ファイルコンポーネントでは、スコープ付き CSS(Scoped CSS)と呼んでいます。

<style scoped>
  .message {
    color: red;
  }
</style>

<!-- グローバルなCSSも同一ファイルに書ける -->
<style>
  .message {
    font-size: 30px;
  }
</style>

とスコープすると、下記のように出力される。(例)

...
<head>
  <style type="text/css">
    .message {
      font-size: 30px;
    }
    .message[data-v-3bcf9374] {
      color: red;
    }
  </style>
</head>
...

6.6.3 CSS モジュール

CSS モジュールでも名前空間衝突を防止できる。

.vueファイル

<template>
  <p :class="$style.message">メッセージ: {{ msg }}</p>
</template>

<script>
  export default {
    data() {
      return {
        msg: "こんにちは"
      };
    }
  };
</script>

<style module>
  .message {
    color: blue;
  }
</style>

出力結果

<!-- 省略 -->
...
<style type="text/css">
  .hello_message_1mO00 {
    color: blue;
  }
</style>
<!-- 省略 -->
<p class="hello_message_1mO00">メッセージ: こんにちは</p>
...
<!-- 省略 -->

スコープ付き CSS

接頭辞 data-v-ハッシュ値で構成されたカスタムデータ属性によりカプセル化

CSS モジュール

一意なスタイル識別子によってカプセル化
スタイル識別子オブジェクトは算出プロパティ $style としてアクセス可能。