vue渲染render

朱雀 2022-01-06 08:17 344阅读 0赞

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

![vue-render-1.jpg][]

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>

注：通过这种方式，实现了通过js来创建HTML。尤其是有组件时候，这种方式会很方便。

注：在webpack中，需要使用渲染方式。

[vue-render-1.jpg]: /images/20211227/42e459b5a66e4865979d0e261770e3e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 yii2 render 页面渲染

render渲染、renderPartial渲染部分、renderContent、renderAjax、renderFile ①　render显示view和layout

港控/mmm°/ 2023年07月13日 04:06/ 0 赞/ 16 阅读

相关 iview—Table表格render 渲染

1.序号 2.if判断、a标签 3.if判断、Input输入 4.renderHeader自定义列头的点击事件、render的Input点击事件

Dear 丶/ 2023年06月04日 02:53/ 0 赞/ 52 阅读

相关 vue 由slot插槽引出渲染函数render

今天又看了一遍vue文档中的渲染函数，理解的差不多了，这里记录下，方便查阅，平时写的template组件vue内部通过正则匹配还是会编译成一棵虚拟节点树，最后放到渲染函数中去执

ゝ一世哀愁。/ 2023年01月18日 09:24/ 0 赞/ 22 阅读

相关 vue服务端渲染vue-server-render支持的模板语法

在vue ssr官方文档中，并没有一一说明渲染模板都支持那些语法。仅仅是简单的说了，支持 `{ {}}` 转义插值 `{ { {}}}` 插入HTML 如果想使

拼搏现实的明天。/ 2022年11月07日 14:31/ 0 赞/ 188 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 372 阅读

相关渲染树render tree

CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。 DOM树和CSSOM树连接在一起形

「爱情、让人受尽委屈。」/ 2022年06月13日 13:38/ 0 赞/ 269 阅读

相关 Vue.js学习（一）：用render函数渲染组件

这里通过一个完整的例子对render函数的用法和注意事项进行说明： HTML： <div id="app"> <demo :level="1"><p>我的自定义p标

￡神魔★判官ぃ/ 2022年06月02日 05:10/ 0 赞/ 940 阅读

相关 vue渲染render

一、宏观上展现了Vue整体流程： ![vue-render-1.jpg][] Vue推荐在绝大多数情况下使用`template`来创建你的HTML。然而在一些场景中，

朱雀/ 2022年01月06日 08:17/ 0 赞/ 345 阅读

相关 Render渲染函数-深入应用

渲染函数是vue中的一个非常重要的功能。基本在个性化的展示上都会使用到。所以需要对其有较为深入的理解才行。之前写过一篇关于渲染的，算是基础。在随后的使用过程中，发现还需要更

雨点打透心脏的1/2处/ 2021年10月15日 12:21/ 0 赞/ 376 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 567 阅读