SoFunction
Updated on 2025-04-11

Usage of el, template, and render in vue instance configuration object

Priority of all three

render > template > el

el

  • Only take effect when creating instances with new
  • Provides a DOM element that already exists on the page as the mount target for the Vue instance.
  • It can be a CSS selector or an HTMLElement instance
  • After the instance is mounted, the element can be usedvm.$elaccess

template

  • A string template is used as the identifier of a Vue instance.
  • The template will replace the mounted element.
  • The contents of the mounted element will be ignored unless the contents of the template have distribution slots.

render

  • String template alternatives allow you to use JavaScript's maximum programming capabilities.
  • The rendering function receives a createElement method as the first parameter to create a VNode

The connection between the three

  • When there is a render render function in the Vue option object, the Vue constructor will directly use the render function to render the DOM tree
  • When there is no render render function in the option object, the Vue constructor first generates the render function by compiling the template template, and then renders the DOM tree
  • When there is neither a render render function nor a template in the Vue option object, the outerHTML of the mounted element will be obtained through the el attribute as the template, and the rendering function will be compiled and generated.

When rendering the DOM tree, the render render function has the highest priority, and the template is second and needs to be compiled into the render function. If the element corresponding to the mount point el attribute exists, then its outerHTML will be used for compilation and rendering when neither of the first two exists.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="vapp-1">{{ info }}</div>
    <div class="vapp-2">{{ info }}</div>
    <div class="vapp-3">{{ info }}</div>
    <script src="./js/"></script>
    <script>
      new Vue({
        el: ".vapp-1",
        data: {
          info: "This is the outerHTML rendering of the mounted element through the el attribute.",
        },
        template: "<div>This is the template attribute template rendering.</div>",
        render: function (h) {
          return h("div", {}, "This is rendering in render attribute.");
        },
      });

      new Vue({
        el: ".vapp-2",
        data: {
          info: "This is the outerHTML rendering of the mounted element through the el attribute.",
        },
        template: "<div>This is the template attribute template rendering.</div>",
      });

      new Vue({
        el: ".vapp-3",
        data: {
          info: "This is the outerHTML rendering of the mounted element through the el attribute.",
        },
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!-- result--&gt;
This isrenderProperty rendering。
This istemplateProperty template rendering。
This is通过elAttribute to get the mounted elementouterHTMLRendering method。

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.