render_renderer - CSDN
精华内容
参与话题
  • render函数

    千次阅读 2018-08-10 20:04:10
    1.什么是render函数? 1)vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。 2)render函数中的createElement方法有三...

    1.什么是render函数?

    1)vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。

    2)render函数中的createElement方法有三个参数。第一个参数为外层标签名,第二个为外层标签的属性对象,第三个为外层标签中的内容

    2.举个栗子(来自vue官方文档)

    代码说明: 
    1. 最下面的new Vue方法很明显,是new了一个Vue的实例,挂载点#app这个dom; 
    2. Vue.component这部分代码,第一个参数表示注册了一个Vue的组件,标签名是child(即 <child> 标签会被替换); 
    3. 第二个参数中,template属性表示取找id=“template”的标签(另注,这个标签是<script>,或者是<div>,或者是template,或者是其他,没有影响),然后将这个标签作为组件的模板; 
    4. props表示传递给这个组件的变量,通过标签中的v-bind:level这种形式传递变量level的值等于1。在这里的写法是限制变量类型为number,并且强制需要; 
    5. slot表示内容分发,具体来说,就是把组件替换的源html标签里的内容(如 <child> 标签里面的内容,不包含 <child> 标签本身,这里是Hello world!),发在 <slot> 标签所在的位置(即放在<h1>-<h2> 这样的标签内); 
    6. 如果还不理解,可以运行该段代码查看结果,或者去看vue的官方文档说明; 
    7. 总的来说,顺序如下:注册一个组件,这个组件有模板,这个模板里有一个变量,变量的值通过父组件来传递,然后根据变量的值,通过v-if命令显示对应的html标签内容,然后在父组件里使用这个组件,让子组件显示需要显示的内容。

    3.render ES6 箭头函数的写法:

    将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h 失去作用,在应用中会触发报错。

    展开全文
  • Render函数的使用方法

    万次阅读 2017-12-23 14:56:35
    Render函数是vue2.x 新增的一个函数、主要用来提升节点的性能,它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom。 前期在使用 iview 和 element 树形控件时,想要在节点的前面...

    Render函数是vue2.x 新增的一个函数、主要用来提升节点的性能,它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom

    前期在使用 iview 和 element 树形控件时,想要在节点的前面加上光标、后面加上编辑按钮,找遍所有的 API 都没有找到对应设置方法,只看到了rendoerContent 函数,发现此函数可以使用想要功能,render-content 函数仔细研究了一番,发现不仅好用,并且灵活。

    本例使用 vue  +  element 实现

    例子1:在树的每个节点后面添加上编辑按钮。

     

    renderContent (createElement, { node, data, store }) {

      var self = this;

     

      return createElement('span', [

        // 显示树的节点信息

        createElement('span', node.label),

        // 在属性节点后后面添加一个“ ” 和 “ 

        createElement('span',{

          attrs:{

            style:"margin-left:150px"

          },

          domProps: {

            innerHTML: "<i class=\"el-icon-circle-plus\"></i>"

          },

          on: {

            click(){

              // 添加子节点

              console.info("点击了节点" + data.id + "的添加按钮");

              store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);

            }

          }

        }),

        createElement('span',{

          attrs:{

            style:"margin-left:10px"

          },

          domProps: {

            innerHTML: "<i class=\"el-icon-delete\" style=></i>"

          },

          on: {

            click(){

              // 删除子节点

     console.info("点击了节点" + data.id + "的删除按钮");

              store.remove(data);

            }

          }

        }),

      ]);

    },

     

     例二:通过判断节点的深度,显示不同的光标

    renderContent (createElement, { node, data, store }) {

      var self = this;

      // 通过判断,在第层之后只显示 “ ” 和 节点信息

      if (data.deep > 4) {

        return createElement('span', [

          // 显示树的节点信息

          createElement('span', node.label),

     

          // 设备后面删除光标的响应函数

          createElement('span',{

            attrs:{

              style:"margin-left:10px"

            },

            domProps: {

              innerHTML: "<i class=\"el-icon-delete\" style=></i>"

            },

            on: {

              click(){

                // 删除子节点

                console.info("点击了节点" + data.id + "的删除按钮");

                store.remove(data);

              }

            }

          }),

        ]);

      }

     

    //通过对应节点显示对应的信息

      return createElement('span', [

        // 显示树的节点信息

        createElement('span', node.label),

     

        createElement('span',{

          attrs:{

            style:"margin-left:150px"

          },

          domProps: {

            innerHTML: "<i class=\"el-icon-circle-plus\"></i>"

          },

          on: {

            click(){

              // 添加子节点

              console.info("点击了节点" + data.id + "的添加按钮");

              store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);

            }

          }

        }),

        createElement('span',{

          attrs:{

            style:"margin-left:10px"

          },

          domProps: {

            innerHTML: "<i class=\"el-icon-delete\" style=></i>"

          },

          on: {

            click(){

              // 删除子节点

              console.info("点击了节点" + data.id + "的删除按钮");

              store.remove(data);

            }

          }

        }),

      ]);

    },

    参考图片:



    展开全文
  • render的使用

    千次阅读 2020-01-11 17:07:16
    Render是使用js的完全编程能力来渲染页面,即用js来构建DOM. 说明:render是一个方法,自带一个形参createElement,这个参数也是一个方法,是用来创建vue 节点的,也就是html模板的,然后渲染(render)到指定的节点...

    Render是使用js的完全编程能力来渲染页面,即用js来构建DOM.

    说明:render是一个方法,自带一个形参createElement,这个参数也是一个方法,是用来创建vue 节点的,也就是html模板的,然后渲染(render)到指定的节点上。render函数的目的是创建dom节点。因为createElement是个形参,所以这个形参可以用任何字符替换,比如h。

    • createElement:
      createElement接收3个参数:

    第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;

    第二个为数据对象(可选);

    第三个为子节点(可选)。

    需求:子组件根据父组件传入的level值,显示不同的标签

    定义子组件:

    <template>

      <div>

        <!-- 根据level来显示不同的成绩 -->

       <h1 v-if="level==1">{{msg}}</h1>

       <h2 v-if="level==2">{{msg}}</h2>

       <h3 v-if="level==3">{{msg}}</h3>

       <h4 v-if="level==4">{{msg}}</h4>

      </div>

    </template>

    <script>

    export default {

      name:'Child',

      data(){

        return {

          msg:'这是信息'

        }

      },

      props:{

        level:{

            type:Number,

            default:0

          }

      }

    }

    </script>

     

     

    定义父组件:

    <template>

        <div>

            <p>父组件</p>

            <child :level="level"></child>

        </div>

    </template>

    <script>

    import Child from './Child'

    export default {

        name:'Parent',

        data(){

    return {

        level:2

    }

        },

        components:{

            Child

        }

    }

    </script>

    <style>

     

    </style>


     

     

    效果图为:

    由此可看到,虽然功能实现了,但是子组件中的代码不简洁。下面是使用render函数来实现,

    定义子组件:

     

     

     

    <script>

    export default {

      name:'Child',

      data(){

        return {

          msg:'这是信息'

        }

      },

      props:{

        level:{

            type:Number,

            default:0

          }

      },

     render(h){

      return h('h'+this.level,{

        style:{

          color:'red'

        },

        on:{

          click:()=>{

            console.log('点击事件')

          }

        }

      },this.msg)

     }

    }

    </script>

     

    父组件不变,效果图为:

    功能已经实现,子组件中的代码非常简洁。

    解析:render函数的参数是一个函数,通常以h来代替此函数,h函数有3个参数,参数1是标签,参数2是该标签的相关属性,参数3是标签内的内容。
    以下组件是利用render渲染列表

    <script>

    export default {

      name: "Child",

      props: {

        items: {

          type: Array

        }

      },

      render(h) {

        if (this.items.length > 0) {

          return h(

            "ul",

            this.items.map(item => {

              return h("li", item);

            })

          );

        } else {

          return h('p','no found')

        }

      }

    };

    </script>

    vue2.0里面的写法

    render: h => h(App)

    等价于

    render:function(h){

    return h(App);

    }

    也等价于

    render:function(createElement){

    return createElement(App)

    }

    关于render,还可以绑定其他属性:详情请查看vue的render介绍

    再看下面的例子:

    定义子组件:

    <script>
    export default {
      name: "Child",
      data() {
        return {
          count: 0
        };
      },
      methods:{
        add(){
            this.count++;
        }
      },
      render(h) {
        return h(
          "button",//第一个参数是元素的名字
          {//第二个参数是数据对象,可绑定class/id/attr/style/事件等
            class: {
              foo: true,
              bar: false
            },
            attrs: {
              id: "foo"
            },
            props: {
              myProp: "bar"
            },
            style: {
              color: "red"
            },
            on: {
              click: this.add
            }
          },
          `点击了我${this.count}次`//第三个参数是显示在元素里面的内容
        );
      }
    };
    </script>

    定义父组件:

    <template>
        <div>
    	<p>我是父组件</p>
    	<One/>
    	</div>
    </template>
    <script>
    import One from './One.vue'
    export default {
    	name: 'Parent',
    	data(){
    		return{
    		}
    	},
    	components:{
    		One
    	}
    }
    </script>
    <style>
    	button{
    		margin-top:10px;
    	}
    </style>

    效果图:

    注意:用render时,若内容里面有data对象里面的数据,需使用`变量名是${userName}`这种写法。

    在main.js中注册全局组件,组件使用render:

    Vue.component('sayHello',{
    	render(h){
    		  return h('p',{
    			  style:{
    				  color:'red'
    			  }
    		  },`早上好,${this.userName}`)//格式是`${this.userName}`
    		},
    	data(){
    		return{
    			userName:'小明'
    		}
    	}
    })

    其他组件使用sayHello组件:

    <template>
      <div>
        <h3>这里是父组件</h3>
    	<sayHello></sayHello>
      </div>
    </template>
    <script>
    export default {
      name: "Parent",
      data() {
        return {}
      }
    };
    </script>

     

    展开全文
  • render()函数进行服务器端渲染(详细)

    万次阅读 2018-10-13 11:24:25
    框架 怎么来的? 安装package.json =&amp;gt; npm init 新建app.js 安装express框架 =&amp;gt; npm install express --save 模块什么时候用什么时候安装 node app ...const expres...

    使用 Express 做服务端框架的时候,如果选择一种类似于 EJS这种模板引擎渲染前端页面的时候,经常服务端在响应 http 请求的时候调用 res.render({options}) 去向模板中渲染数据, 可以把视图响应给客户端.

    框架
    在这里插入图片描述
    怎么来的?

    安装package.json => npm init
    新建app.js
    安装express框架 => npm install express --save
    模块什么时候用什么时候安装
    node app
    新建public文件夹/index.html(客户端渲染)
    创建views文件夹/product.js order.js

    app.js

    const express = require('express');
    const app = express();
    app.use(express.static('public'));
    app.listen(7000,function(){
        console.log('服务已经启动,请访问http://localhost:7000');
        // 访问http://localhost:7000 
    })
    

    报错cannot get/ 原因没有设置静态资源目录 管线
    就是加入管线 app.use(express.static('public'));

    为什么能找到public文件夹?
    把app.use看成管道,第一道网就是public,带进入这个文件夹,默认进入index.js

    index.html

    <body>
        <h1>我是主页</h1>
        <a href="http://www.baidu.com">百度</a>
        <a href="/user.html">用户</a>
        <!-- 跳转使用render函数 -路由 -->
        <a href="/order/list">订单列表</a>
        <a href="/product/list">产品列表</a>  
        <a href="/api/product/list">产品列表</a>  
    </body>
    

    1打通路
    在这里插入图片描述
    加入管线
    在这里插入图片描述
    效果:返回一个json
    在这里插入图片描述

    2.怎么让他返回一个HTML页面?

    express约定的视图文件夹views
    在这里插入图片描述
    node app
    效果:找不到文件
    在这里插入图片描述
    缺少一道网 -->视图模板 必须用它来找views/.html并且可以解析它->安装ejs

    npm install ejs --save
    

    引入 const ejs = require('ejs');
    加入管线(设置视图引擎) app.engine('ejs',ejs.renderFile);
    在这里插入图片描述
    3.怎么让他去找到views文件夹? app.set('views','views'); set和use功能一样
    // 第一个参数是视图模板(固定),第二个参数是视图模板所在的位置,默认express框架把views文件夹当成视图文件的位置

    app.engine('ejs',require('ejs').renderFile);//优化
    

    查文档 http://www.expressjs.com.cn/4x/api.html#app.engine

    如果想让他解析jsp文件(安全性高)
    app.engine(‘jsp’,require(‘ejs’).renderFile);//优化
    views/ order.jsp
    router/order.js ->res.render(‘order.jsp’)//ejs后缀可以省略
    在这里插入图片描述
    改成ejs
    app.engine(‘ejs’,require(‘ejs’).renderFile);
    views/ order.ejs
    router/order.js ->res.render(‘order’)
    在这里插入图片描述
    错误表示没有解析器,设置一个解析器
    app.set(‘view engine’,‘ejs’);

    相当于

    解析HTML,js

    app.engine('ejs',require('ejs').renderFile);
    

    解析ejs

    app.set('view engine','ejs');
    

    两个作用一样
    4.怎么让视图动态化?

    原来:视图模板里面发起ajax请求 ,脚本,jQuery $.get 获取数据,绑定到视图上(dom绑定)

    现在:要动态渲染,需要数据

    数据从哪里来?

    回到render函数

    res.render('order',[option]);
    
    // 第一个参数是视图的名称,如果是.ejs文件,必须省略后缀名,如果是.html,.jsp,.abc,.def等自己定义的后缀名时,必须加后缀。
     // 第二个参数是视图需要的数据
    

    数据传过去了如何使用?

    ejs语法

    <%= title %>
    

    app.js

    app.set('views','views');//可以省略。默认
    app.set('view engine','ejs');//与下两行等效  如果是.ejs文件,可省略后缀名,
    // 需要使用视图模板引擎,让他解析views文件中的.html文件
    // 需要安装视图模板引擎:npm install ejs --save
    	//      const ejs = require('ejs');
    	//      app.engine('ejs',ejs.renderFile);
    	// 设置视图引擎
    	// 加()立即执行了,没有加()相当于绑定到前面
    	// app.engine('ejs',require('ejs').renderFile);//要在order.js里加 res.render('order.ejs')  如果是.ejs文件,必须加上后缀名,
    //------------------------------------------------------
    app.use(require('./router/order.js'));
    app.use(require('./router/product.js'));
    // 理解在接口前多加一个前缀
    app.use('/api',require('./router/product.js'));
    

    router/order.js

    const express = require('express');
    const route = express.Router(); 
    
    // 方盒子-属性,不加括号、 立方体-方法加括号
    // a标签发起的是get请求,如果要让他发起post请求,要设置监听事件
    route.get('/order/list',function(req,res,next){
        // res.json({code:200});
      
        res.render('order',{
            title:'我是订单列表页',
            content:'<h2>我是标题2</h2>',
            person:{
                name:'张三',
                age:20,
                sex:true,
                fav:['读书','听音乐','唱歌']
            }
        });
    });
    
    module.exports = route;
    

    模板用ejs渲染
    views/order.ejs

    <body>
        订单列表
        <!-- 带=的不会解析HTML标签,
            带-的会解析HTML标签 
            判断语句注意:1.不能加=号 2.闭合{}-->
        <%= title %>
        <hr>
        <%- content %>
        <hr>
        姓名:<%= person.name %><br />
        年龄:<%= person.age %><br />
        姓别:<%= person.sex?"男":"女" %><br />
        姓别:<% if(person.sex){ %>
                    <span style="color: red">男</span>
              <% }else{     %>
                    女
              <% } %>
        <hr>
        爱好:
        <% for(var i = 0; i < person.fav.length ;i++){%>
        <%=     person.fav[i]%>
        <%  }%>
    </body>
    

    在这里插入图片描述

    router/product.js

    const express = require('express');
    
    const route = express.Router();
    
    route.get("/product/list",function(req,res,next){
        res.render('product',{
            id:1,
            name:'华为',
            price:2000,
            amount:309,
            products:[
                {id:2,name:'华为1',price:200, amount:309},
                {id:3,name:'华为2',price:20, amount:309}
            ]
        });
    });
    
    module.exports = route;
    

    product.ejs

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            table{
                /* 为表格设置合并边框模型 */
                border-collapse: collapse;
                width: 600px;
            }
            th,td{
                border:1px solid #ccc;
                height:40px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>产品列表</h2>
        <table>
            <tr>
                <td>编号</td>
                <th>产品名称</th>
                <th>单价</th>
                <th>库存量</th>
            </tr>
            <tr>
                <td><%=id%></td>
                <td><%=name%></td>
                <td><%=price%></td>
                <td><%=amount%></td>
            </tr>
            <% for(var i = 0;i < products.length;i++ ){ %>
            <tr>
                <td><%= products[i].id %></td>
                <td><%= products[i].name %></td>
                <td><%= products[i].price %></td>
                <td><%= products[i].amount %></td>
            </tr>   
            <% } %>
        </table>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 终于搞懂了vue 的 render 函数(一) -_-|||

    万次阅读 多人点赞 2020-07-28 14:38:37
    文章目录render 函数作用render 函数讲解render 函数的返回值(VNode)render 函数的参数(createElement)createElement 函数的返回值(VNode)createElement 函数的参数(三个)结合代码 vue渲染函数文档第一遍看...
  • 写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码... 【Vue原理】Render - 源码版 之 静态 Render 上一篇我们讲了 render 函数,而 Vue 为了更新时速度快一...
  • Renderer组件示例

    千次阅读 2018-04-12 19:31:04
    [root@localhost salt]# cat test{{ a }}{{ b }}[root@localhost salt]# cat /srv/pillar/test.slsa: b[root@localhost salt]# cat test.sls#!pydef run(): example = {} example['/tmp/test'] = { 'fi...
  • render()

    千次阅读 2019-02-20 10:58:43
    render() render() render()方法是类组件唯一必须的方法。 当被调用时,其应该检查this.props 和 this.state并返回以下类型之一: React元素。通常是由 JSX 创建。例如,&lt;div /&gt; 和 &...
  • render函数介绍,以及 render: h => h(App)

    万次阅读 多人点赞 2018-06-24 17:18:03
     render方法的实质就是生成template模板; 2. 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给它的; 3. 这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容 4. 通过这...
  • render是什么意思

    千次阅读 2011-01-26 22:46:00
    render
  • 第一:语法是:render: (h, params) => { 此时它所代表得含义是:render:(h,params) => { return h(" 定义的元素 “,{ 元素的性质 },” 元素的内容"/[元素的内容]) 实例: title: ‘角色’, key: ‘role’, ...
  • jQuery DataTables render简述

    万次阅读 2016-08-08 11:47:35
    前台table绑定数据时,用得比较多的一款jQuery插件就是DataTable了,在展示列的时候有时候会遇到要根据前一列内容展示后一列内容的情况,DataTable也提供了这样的方法--render。 官方api有介绍render,如下: ...
  • jsrender的基本使用

    千次阅读 2019-07-10 18:13:29
    1、什么是jsrender 一个JavaScript库,允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库,它具有无代码标记语法和高性能,不依赖于jQuery,也不依赖于文档对象模型...
  • 在UE4中使用RenderDoc

    2020-09-09 23:45:40
    本篇的目标是尝试在UE4中使用RenderDoc (主要参考UE4官方文档:RenderDoc | Unreal Engine Documentation) 准备 1.安装RenderDoc RenderDoc官网:https://renderdoc.org/ 2.启用插件 注意,插件的配置中将指定了...
  • laydate.render is not a function

    万次阅读 2017-10-23 10:46:29
    最近在用layui开发后台,在使用layui提供的时间插件时发下控制台爆laydate.render is not a function,当时就很费解,仔细阅读了API用法,还是不行,又在官网重新下载的js,但是依然一样的错,没办法只能去了解js代码了,...
  • 这个问题我想有好多人可能遇到过,我在网上尽然没有找到相关的答案,再次我就分享一下我去如何解决vue render 中 如何正确配置img的src 路径?   解决方法   1.一般情况下我们本地图片会放在assets文件夹下,...
  • 一、ReactDom的render结构 在控制台输出ReactDom: 可以看出render函数有三个参数,第一个参数是指要渲染的元素,第二个参数是这些元素要放在什么容器里面,第三个是回调函数。 二、render的第一个参数(jsx语法) 1...
  • vue使用render函数渲染table表格某一列的数组数据 当所需要渲染的表格数据是一个数组类型的数据时,可以使用render函数,如下所示: 1.先在需要显示的表头中写出关键字 &lt;Table :columns="columns1"...
  • iview table的render()函数基本的用法

    千次阅读 2019-02-18 14:04:31
    这里记录的是iviewui框架中render函数的用法。如下: 语法:render:(h,params)=&gt;{} 具体用法: render:(h,params) =&gt; { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容&...
  • react组件的render方法

    千次阅读 2019-02-01 13:53:32
    一个组件类必须要实现一个 render 方法, 这个 render 方法必须要返回一个 JSX 元素。 必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的. 错误的写法 render () { return ( &...
1 2 3 4 5 ... 20
收藏数 311,288
精华内容 124,515
关键字:

render