Posted on by 256hax

Vue.jsの「export default」と「new Vue」の書き方

  • export defaultは、コンポーネント化したい場合に使う。ほかの場所からも呼び出せるようになる。単一ファイル構成の場合はこれが使われる。
  • new Vueはそのとき実行したい場合に使う。
  • 書き方が違うだけなので、new Vueをexport defaultで書き換えることができる。

書き方の例

その１ Vue.js公式サイトのチュートリアル

new Vue

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

export default

export default {
  name: 'app',
  data () {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}

ソース - Vue.js 条件分岐とループ

その２ Vuetify公式チュートリアル

new Vue

new Vue({
  el: '#app',
  data: () => ({
    ...
  })
  ...
})

export default

export default {
  name: 'App',
//--- componentsがある場合は以下に書く ---//
//  components: {
//    ...
//  },
  data: () => ({
    ...
   })
  ...
}

参考サイト