Vue.js の単一コンポーネント
Vue.js
Published: 2019-11-04

やったこと

Vue.js で component を指定するとき html の id 属性を利用して指定します。

確認環境

$ vue info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 62.0
    Safari: 13.0.3
  npmGlobalPackages:
    @vue/cli: 4.0.5

調査

構成要素

template

HTML でコンポーネントを定義します。

script

UIコンポーネントの振る舞いを制御します。

css

コンポーネントの装飾をします。

実装準備

$ npm install -g @vue/cli-service-global

実装例

sample.vue

<template>
  <p class="message">{{ msg }}</p>
</template>

<script>
export default {
  data () {
    return { msg: 'Hello' }
  }
}
</script>

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

起動

$ vue serve sample.vue --open

css は head タグの中に挿入されます。

参考