BinaryDevelop
  1. ホーム
  2. vue.js

[解決済み] Vueの「エクスポートデフォルト」と「新しいVue」の比較

2022-05-03 05:12:09

質問

Vueをインストールしたばかりで、いくつかのチュートリアルに沿って、vue-cli webpackテンプレートを使ってプロジェクトを作成しています。コンポーネントを作成するとき、私はそれが次の内部に私たちのデータをバインドしていることに気づきました。 

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

他のチュートリアルでは、データがバインドされているのを見ますが。 

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

また、両者の構文が異なるように思えるのはなぜですか？ vue-cliによって生成されたApp.vueから使用しているタグの中から、「新しいVue」のコードを動作させるのに苦労しています。

どうすればいいですか？

宣言する場合。 

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

これは、典型的には、アプリケーションの残りの部分が下降するルートVueインスタンスです。これは、たとえば html ドキュメントで宣言されたルート要素からぶら下がっています。 

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

もう一つの構文は、後で登録・再利用できるコンポーネントを宣言するものです。例えば、次のような1つのファイルコンポーネントを作成するとする。 

// 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 プロパティは関数として扱われ、そうでない場合はリアクティブに動作しません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します