Vue export default vs new Vue

Question

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

User · Answer

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

User · Answer

When you declare  new Vue       el    app       data            return              That is typically your root Vue instance that the rest of the application descends from  This hangs off the root element declared in an html document  for example   lt html gt           lt body gt       lt div id  quot app quot  gt  lt  div gt     lt  body gt   lt  html gt   The other syntax is declaring a component which can be registered and reused later  For example  if you create a single file component like     my-component js export default       name   my-component       data            return             You can later import this and use it like     another-component js  lt template gt     lt my-component gt  lt  my-component gt   lt  template gt   lt script gt    import myComponent from  my-component    export default       components          myComponent           data            return                       lt  script gt   Also  be sure to declare your data properties as functions  otherwise they are not going to be reactive

User · Answer

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

User · Answer

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

[vue.js] Vue 'export default' vs 'new Vue'

Examples related to vue.js

Examples related to vue-component

Examples related to vue-cli