Simple understanding of _javascript techniques for El, template, replace elements in Vue

The example of this article for us to resolve the Vue El, template, replace elements, for your reference, the specific contents are as follows

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

El

Type: String | HtmlElement | Function

Limit: Only functions in the component definition.

With:

Provides a mount element for an instance. The value can be a CSS selector, or an actual HTML element, or a function that returns an HTML element. Note that elements are used only as mount points. If a template is provided, the element is replaced unless replace is false. Elements can be accessed using VM. $el.

Used in Vue.extend must be a function value so that all instances do not share elements.

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

Template

Type: String

With:

Instance template. The template replaces the Mount element by default. If the Replace option is false, the template is inserted inside the Mount element. In both cases, the contents of the mounted element will be ignored unless the template has content distribution slot.

If the value starts with a #, it is used as an option and will use the InnerHTML of the matching element as the template. A common technique is to use the <script type= "x-template" > include templates.

Note In some cases, such as when a template contains multiple top-level elements, or only plain text, the instance becomes a fragment instance that manages multiple nodes rather than one node. The non-process control directives on the mount element of the fragment instance are ignored.

Replace

Type: Boolean

Default value: True

Restrictions: can only be used with the template option

With:

Determines whether to replace the mount element with a template. If set to True (this is the default), the template overrides the Mount element and merges the attributes of the mount element and the template root node. If set to false the template overwrites the contents of the mounted element and does not replace the mount element itself.

Example:

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

New Vue ({
 el: ' #replace ',
 Template: ' <p class= ' bar ' >replaced</p> '
})

Results:

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

Replace set to False:

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

New Vue ({
 el: ' #insert ',
 replace:false,
 Template: ' <p class= ' bar ' >inserted</p> '
})

Results:

<div id= "Insert" class= "foo" >
 <p class= "Bar" >inserted</p>
</div>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.