What is the difference between `el` and `template` in vue component and app?

user_141947 0
Viewed 24821

A VUE component (and the app itself) have an el: and also a template.

I want to understand what the difference is, when do I use one and when the other:

If I create a project with Monaca CLI from the minimal VUE-OnsenUI template I see:

new Vue({
  el: '#app',
  template: '<app></app>',
  components: { App }
});

From the very verbose documentation lacking examples, to make a long story short, I gather that the template dom element and everything in it will replace the el dom element. (The template can only have a single root, right?). For example : If my html is: 

<html>...
  <body>...
    <replaceThis></replaceThis>...

and my vue js says: 

el: "replace-this", 
template: "<div id='replaced'>hi there</div>"

Then I will get : 

<html>...<body>...<div id='replaced'>hi there</div>...

but I can also write: 

el: "#bla", 
template: "#blu"

Then if my html is 

<html>
  <body>
    <div id="bla">
       anything inside here including the surrounding div will be replaced 
    </div>
    <template id="blu">
       <span id ="replacing-html">
           when ran in span, it stays mainly in the pan
       </span> 
    </template>
  </body>
</html>

then the div with id bla will be replaced with the replacing-html span elelment that is inside the template. (the template tag itself with everything in it will still remain in the emitted html. correct?)

So I need to understand:

  1. Is the template content replacing the el element?
  2. Must the template only have a single root element directly under it?
  3. Am I correct with my first example?
  4. Am I correct about the second example?
  5. Will the template tag with everything in it remain in the emitted html?
  6. What happens in the case of the Monaca Vue-OnsenUI example above where the el is the same as the template: "app". Isn't this recursive? What is replaced and with what?
vuejs2
1 Answers

From the documentation on the el option:

Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.

After the instance is mounted, the resolved element will be accessible as vm.$el.

If this option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call vm.$mount() to manually start the compilation.

From the documentation on the template option:

A string template to be used as the markup for the Vue instance. The template will replace the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.

If the string starts with # it will be used as a querySelector and use the selected element’s innerHTML as the template string. This allows the use of the common trick to include templates.

In your example, the Vue instance you are defining is registering an app component and then using that in its template definition. It is also looking for an existing element in the DOM with an id of app to use as it's associated element when mounting.

I think your confusion is coming from the fact that both are using something named "app". They don't have to be named the same thing.

user_26784540
Related