Simple understanding of el, template, and replace elements in Vue

This article analyzes the elements el, template, and replace in vue for everyone's reference, and the specific content is as follows

api: http://cn.vuejs.org/api/#el

el

Type: String | HTMLElement | Function

Limitation: Can only be a function in the component definition.

Details:

Provide a mounting element for the instance. The value can be a CSS selector, an actual HTML element, or a function that returns an HTML element. Note that the element is only used as a mounting point. If a template is provided, the element will be replaced unless replace is false. The element can be accessed using vm.$el.

Must be a function value when used in Vue.extend, so that all instances will not share elements.

If this option is specified during initialization, the instance will immediately enter the compilation process. Otherwise, you need to call vm.$mount() to manually start the compilation.

template

Type: String

Details:

Instance template. The template defaults to replacing the mounted element. If the replace option is false, the template will be inserted inside the mounted element. In both cases, the content of the mounted element will be ignored unless the template has a content distribution slot.

If the value starts with #, it is used as an option symbol, and the innerHTML of the matched element will be used as the template. A common technique is to use <script type="x-template"> Contains the template.

Note that in some cases, such as when the template contains multiple top-level elements or only contains plain text, the instance will become a fragment instance, managing multiple nodes instead of a single node. Non-flow control instructions on the mounted element of the fragment instance are ignored.

replace

Type: Boolean

Default Value: true

Limitation: Can only be used with the template option

Details:

Decide whether to use the template to replace the mounted element. If set to true (the default value), the template will cover the mounted element and merge the attributes of the mounted element and the template root node. If set to false, the template will cover the content of the mounted element and will not replace the mounted element itself.

Example:

<div id="replace" class="foo"></div>

new Vue({
 el: '#replace',
 template: '<p class="bar">replaced</p>'
)

Result:

<p class="foo bar" id="replace">replaced</p>

Set replace to false:

<div id="insert" class="foo"></div>

new Vue({
 el: '#insert',
 replace: false,
 template: '<p class="bar">inserted</p>'
)

Result:

<div id="insert" class="foo">
 <p class="bar">inserted</p>
</div>

That's all for this article, I hope it will be helpful for your learning, and I also hope everyone will support the呐喊 tutorial more.