I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following:
export default {
name: 'app',
data: []
}
Whereas in other tutorials I see data being bound from:
new Vue({
el: '#app',
data: []
)}
What is the difference, and why does it seem like the syntax between the two is different? I'm having trouble getting the 'new Vue' code to work from inside the tag I'm using from the App.vue generated by the vue-cli.
This question is related to
vue.js
vue-component
vue-cli
Whenever you use
export someobject
and someobject is
{
"prop1":"Property1",
"prop2":"Property2",
}
the above you can import anywhere using import
or module.js
and there you can use someobject. This is not a restriction that someobject will be an object only it can be a function too, a class or an object.
When you say
new Object()
like you said
new Vue({
el: '#app',
data: []
)}
Here you are initiating an object of class Vue.
I hope my answer explains your query in general and more explicitly.
export default
is used to create local registration for Vue component.
Here is a great article that explain more about components https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
The first case (export default {...}
) is ES2015 syntax for making some object definition available for use.
The second case (new Vue (...)
) is standard syntax for instantiating an object that has been defined.
The first will be used in JS to bootstrap Vue, while either can be used to build up components and templates.
See https://vuejs.org/v2/guide/components-registration.html for more details.
Source: Stackoverflow.com