Menu
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:
template content replacing the el element?template only have a single root element directly under it? template tag with everything in it remain in the emitted html? el is the same as the template: "app". Isn't this recursive? What is replaced and with what? 
390
The $el option in Vue provides Vue with an existing HTML element to mount the Vue instance generated using the new keyword. this. $el. querySelector is used to access HTML elements and modify the element's properties.
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Components in Vue are composed of three parts; a template (which is like HTML), styles and JavaScript. These can be split into multiple files or the same .
In the context of Vue, "DOM template" (commonly seen as "in-DOM template" in the rest of the Vue docs) refers to a component's markup specified in the document body/head, as opposed to a string template or SFC template.
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.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
