2019年2月6日（水）

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

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

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

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

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

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

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

は同じ。

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 としてアクセス可能。