vue渲染render

一、宏观上展现了Vue整体流程:

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中,需要使用JavaScript的编程能力和创建HTML,这就是render函数,它比template更接近编译器。

其实就是为固定的HTML模板提供了动态生成的操作。简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM。

二、如何使用render

当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,vm中有一个方法_c,也是这个函数的别名。

createElement({String-HTML 标签字符串 | Object-组件选项对象 | Function-异步函数})

三、普通vue使用render示例

<script>
    //模板
    var login = {
      template: '<h1>这是登录组件</h1>'
    }

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
     //createElements 是一个 方法,调用它,能够把 指定的 组件模板,渲染为 html 结构
      render: function (createElements) { 
        // 注意:这里 return 的结果,会 替换页面中 el 指定的那个 容器
        return createElements(login)
      }
    });
 </script>

猜你喜欢

转载自blog.csdn.net/lidongliangzhicai/article/details/93503025
今日推荐