vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue实例配置对象中el、template、render

vue实例配置对象中el、template、render的用法

作者:Wyyyy1024

这篇文章主要介绍了vue实例配置对象中el、template、render的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

三者优先级

render > template > el

el

template

render

三者的联系

进行DOM树的渲染时,render渲染函数的优先级最高,template次之且需编译成渲染函数,而挂载点el属性对应的元素若存在,则在前两者均不存在时,其outerHTML才会用于编译与渲染

<!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/vue.js"></script>
    <script>
      new Vue({
        el: ".vapp-1",
        data: {
          info: "这是通过el属性获取挂载元素的outerHTML方式渲染。",
        },
        template: "<div>这是template属性模板渲染。</div>",
        render: function (h) {
          return h("div", {}, "这是render属性方式渲染。");
        },
      });

      new Vue({
        el: ".vapp-2",
        data: {
          info: "这是通过el属性获取挂载元素的outerHTML方式渲染。",
        },
        template: "<div>这是template属性模板渲染。</div>",
      });

      new Vue({
        el: ".vapp-3",
        data: {
          info: "这是通过el属性获取挂载元素的outerHTML方式渲染。",
        },
      });
    </script>
  </body>
</html>
<!-- 结果-->
这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文