【Vue】コンポーネント構文

自分は単一ファイルコンポーネント記法で実装しているのに

<scripts>
  new Vue({
    ‥
  });
</scripts>

のようなnew Vue記法をそのまま使ってしまって
延々とエラー‥みたいなことをしてしまったので備忘録

htmlファイル上でvueを使用する場合

new Vue

を使う

例

<div id="container">
    <p>{{ comments }}.</p>
</div>

<scripts>
  new Vue({
    el: '#container',
    data: {
        comments: "hello in root"
    }
  });
</scripts>

Vueファイルの場合

<scripts>
  export default {
  ‥
  }
</scripts>

を使う

例

// myComponent.vue

<template>
  <div id="container">
    <p>{{ comments }}.</p>
  </div>
  <myComponent></myComponent>
</template>
//  html部は<template>タグで囲む


<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {
        comments: 'hello in root'
      }
    }
    ...
  }
</script>

参考

vue.js — Vueの 'エクスポートデフォルト'と '新しいVue'