vue渲染render

朱雀 2022-01-06 08:17 320阅读 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 条评论，320人围观）

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

相关阅读

相关 iview—Table表格render 渲染

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

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

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

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

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

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

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

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

相关渲染树render tree

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

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

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

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

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

相关 Spring MVC 页面渲染( render view )

一、理解view解析过程 1.1 从逻辑view到物理view 在Spring MVC 中，controllers不会负责具体的页面渲染，它仅仅是调用业务逻辑并返回

超、凢脫俗/ 2022年05月25日 02:08/ 0 赞/ 244 阅读

相关 ThreeJs学习笔记——渲染(render)分析

一、前言 ThreeJs 封装了 WebGL 进行渲染时所涉及到的相关概念，如光照，材质，纹理以及相机等。除此之外，其还抽象了场景(Scene)以及用于渲染的渲染器(We

爱被打了一巴掌/ 2022年04月27日 22:16/ 0 赞/ 1512 阅读

相关 vue渲染render

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

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

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

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

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

相关 iview,用render函数渲染

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

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