web-dev-qa-db-ja.com

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

私はVueをインストールしたばかりで、vue-cli webpackテンプレートを使ってプロジェクトを作成するためのいくつかのチュートリアルに従っています。それがコンポーネントを作成するとき、私はそれが以下の中に私たちのデータを束縛するのに気付きます：

export default {
    name: 'app',
    data: []
}

他のチュートリアルでは、データが次のようにバインドされているのがわかります。

new Vue({
    el: '#app',
    data: []
)}

違いは何ですか、そしてなぜ2つの構文が違うように見えるのでしょうか。 vue-cliによって生成されたApp.vueから、使用しているタグの内部から 'new Vue'コードを動作させるのに問題がある.

vue.jsvue-componentvue-cli
54
rockzombie2

あなたが宣言するとき：

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

これは通常、残りのアプリケーションが派生するルートVueインスタンスです。これはhtmlドキュメントで宣言されているルート要素を切り離します。例えば：

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

他の構文は、後で登録して再利用できるコンポーネントを宣言しています。たとえば、次のような単一のファイルコンポーネントを作成したとします。

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

後でこれをインポートして次のように使用できます。

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

また、dataプロパティは必ず関数として宣言してください。そうしないと、それらは反応しなくなりません。

74
user320487

export defaultは、Vueコンポーネントのローカル登録を作成するために使用されます。

これは、コンポーネントについてさらに詳しく説明した素晴らしい記事です。 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

2
atrichkov

最初のケース（export default {...}）は、何らかのオブジェクト定義を使用可能にするためのES2015構文です。

2番目のケース（new Vue (...)）は、定義されているオブジェクトをインスタンス化するための標準的な構文です。

最初のものはJSでVueをブートストラップするために使用されますが、どちらもコンポーネントとテンプレートを構築するために使用できます。

詳細は https://vuejs.org/v2/guide/components-registration.html を参照してください。

1
Shellum
<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>
0
A.Batgem