Vueをインストールし、いくつかのチュートリアルに従って、vue-cli webpackテンプレートを使用してプロジェクトを作成しました。コンポーネントを作成すると、次の内部でデータがバインドされていることに気づきました。
export default {
name: 'app',
data: []
}
一方、他のチュートリアルでは、データがバインドされているのがわかります。
new Vue({
el: '#app',
data: []
)}
違いは何ですか、なぜ2つの構文が異なるように見えるのですか？vue-cliによって生成されたApp.vueから使用しているタグの内側から「新しいVue」コードを機能させるのに問題があります。
回答:
宣言すると：
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プロパティは関数として宣言してください。宣言しないと、反応しません。
export default Vueコンポーネントのローカル登録を作成するために使用されます。
これは、コンポーネントの詳細を説明する優れた記事です https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
最初のケース（export default {...}） は、いくつかのオブジェクト定義を使用可能にするためのES2015構文です。
2番目のケース（new Vue (...)）は、定義されたオブジェクトをインスタンス化するための標準構文です。
最初のものはJSでVueをブートストラップするために使用されますが、どちらもコンポーネントとテンプレートを構築するために使用できます。
詳細については、https：//vuejs.org/v2/guide/components-registration.htmlを参照してください。
いつでも
export someobject
そして、いくつかのオブジェクトは
{
"prop1":"Property1",
"prop2":"Property2",
}
上記はimportまたはを使用してどこにでもインポートできますmodule.jsを、そこにsomeobjectを使用できます。これは、someobjectがオブジェクトになるという制限ではありません。それは、関数、クラス、またはオブジェクトにすることもできます。
あなたが言う時
new Object()
あなたが言ったように
new Vue({
el: '#app',
data: []
)}
ここでは、クラスVueのオブジェクトを開始しています。
私の答えがあなたのクエリを一般的かつより明確に説明することを願っています。
<template>
<my-components></my-components>
</template>
<script>
import myComponents from 'my-components'
export default {
components: {
myComponents
}
data () {
return {}
}
created(){},
methods(){}
}
</script>