Home > Article > Web Front-end > What does el mean in vue.js
What does el mean in vue.js
- coldplay.xixiOriginal
- 2020-11-09 16:55:278440browse
The meaning of el in vue.js: The type of el is [String | HTMLElement | Function], which is used to provide mounting elements for instances. If there is a render function or template attribute, the mounting element will be Vue generated DOM replacement.
[Related article recommendations: vue.js]
in vue.js el means:
el
Type: String | HTMLElement | Function
Restrictions: Can only be functions in component definitions.
Details:
Provides mounting elements for instances. 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 mount point. If a template is provided the element is replaced unless replace is false. Elements can be accessed with vm.$el.
It 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 start compilation manually.
The provided element can only be used as a mount point. Different from Vue 1.x, all mounting elements will be replaced by the DOM generated by Vue. Therefore, it is not recommended to mount the root instance on 100db36a723c770d327fc0aef2ce13b1 or 6c04bd5ca3fcae76e30b72ad730ca86d.
If neither the render function nor the template attribute exists, the HTML of the mounted DOM element will be extracted and used as a template. At this time, the Vue library built by Runtime Compiler must be used. Everyone knows the role of
el, which is used to specify the mounting target of the Vue instance. We focus on the above two parts. To summarize: if there is a render function or template attribute, the mounted element will be replaced by the DOM generated by Vue; otherwise, the HTML where the mounted element is located will be extracted and used as a template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="ppp"></div>
</body>
</html>Example: DOM rendered by render function replaces b6e927d7e9bbb9062e270db5cafd5aef16b28748ea4df4d9c2150843fecfba68
new Vue({
el: '#ppp',
router,
store,
render: h => h(App)
})Related free learning recommendations: javascript（ video)
The above is the detailed content of What does el mean in vue.js. For more information, please follow other related articles on the PHP Chinese website!