Home > Article > Web Front-end > What is the abbreviation of el in vue?

What is the abbreviation of el in vue?

青灯夜游Original: 2022-12-13 18:12:257308browse

In vue, el is the abbreviation of element, which can be called a mount point. The function of el is to provide a DOM element that already exists on the page as the mounting target of the Vue instance. It can be a CSS selector or an HTMLElement instance; after the instance is mounted, the element can be used as "vm.$el" access.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

el is the abbreviation of element, which can be called a mount point. The principle comes from: In the MVC architecture, a tag is used as a container to wrap some tags, so that the tags can be re-rendered while retaining some necessary attributes.

In every vue2.0 project, we will see that in the entry file (i.e. main.js), the el attribute will be configured when generating the root instance, but this attribute cannot be configured in the components we create ourselves. The following quotes the description of the el attribute in the official document :

el

Type : string | Element

Restriction: Only takes effect when creating an instance with new.

Details:

Provide a DOM element that already exists on the page as the mounting target for the Vue instance. Can be a CSS selector or an HTMLElement instance. [Related recommendations: vuejs video tutorial, web front-end development]

After the instance is mounted, the elements can be accessed using vm.$el .

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

Simply speaking, the role of el is to indicate which element of the page we want to insert the instance generated by the current vue component. The value of the el attribute can be the css selector. String, or directly the corresponding element object. And the el attribute can only be configured when using new to generate an instance, and we just export a configuration object in the component. If el is set, an error will be reported.

// 错误使用方式，在组件中设置el
// 提示错误： [Vue warn]: option "el" can only be used during instance creation with the `new` keyword.
export default {
    el: '#app'
}
 
// 正确写法
var vm = new Vue({
    el: '#app'
})

Let’s take a look at index.html in the project.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>backstage</title>
  </head>
  <body>
    <!-- {el：&#39;#app&#39;} 即把这里的元素作为根实例的挂载对象 -->
    <div id="app"></div>
  </body>
</html>

Print vm.$el, you will find that the instance has been mounted to the element of el:

(Learning video sharing: Vuejs introductory tutorial, Basic programming video)

The above is the detailed content of What is the abbreviation of el in vue?. For more information, please follow other related articles on the PHP Chinese website!

mvc 架构 css html String 字符串 JS 对象 dom 选择器

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is vue single page and multi-pageNext article：What is vue single page and multi-page

See more

What is the abbreviation of el in vue?

el

Related articles