精华内容
下载资源
问答
  • 终于搞懂了vue 的 render 函数(一) -_-|||

    万次阅读 多人点赞 2018-10-11 20:32:18
    文章目录render 函数作用render 函数讲解render 函数的返回值(VNode)render 函数的参数(createElement)createElement 函数的返回值(VNode)createElement 函数的参数(三个)结合代码 vue渲染函数文档第一遍看...


    第二篇传送门:终于搞懂了vue 的 render 函数(二)(๑•̀ㅂ•́)و✧


    vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。

    注:本文代码都是在单文件组件中编写。代码地址

    render 函数作用

    render 函数template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数

    官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几。具体代码可以看文档。

    render 函数讲解

    render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement,我们重点来说 createElement 参数

    1. render 函数的返回值(VNode)

      VNode(即:虚拟节点),也就是我们要渲染的节点。

    2. render 函数的参数(createElement)

      createElementrender 函数 的参数,它本身也是个函数,并且有三个参数。

      1. createElement 函数的返回值(VNode)

        createElement 函数的返回值是 VNode(即:虚拟节点)。

      2. createElement 函数的参数(三个)

        1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需
        2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
        3. 子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。
      3. 结合代码

         /**
          * render: 渲染函数
          * 参数: createElement
          * 参数类型: Function
         */
         render: function (createElement) {
           let _this = this['$options'].parent	// 我这个是在 .vue 文件的 components 中写的,这样写才能访问this
           let _header = _this.$slots.header   	// $slots: vue中所有分发插槽,不具名的都在default里
         
           /**
            * createElement 本身也是一个函数,它有三个参数
            * 返回值: VNode,即虚拟节点
            * 1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
            * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
            * 3. 子虚拟节点 (VNodes),由 `createElement()` 构建而成,也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点,可以用 createElement() 创建,文本节点直接写就可以
            */
           return createElement(       
             // 1. 要渲染的标签名称:第一个参数【必需】      
             'div',   
             // 2. 1中渲染的标签的属性,详情查看文档:第二个参数【可选】
             {
               style: {
                 color: '#333',
                 border: '1px solid #ccc'
               }
             },
             // 3. 1中渲染的标签的子元素数组:第三个参数【可选】
             [
               'text',   // 文本节点直接写就可以
               _this.$slots.default,  // 所有不具名插槽,是个数组
               createElement('div', _header)   // createElement()创建的VNodes
             ]
           )
         }
        

    可以看下控制台中打印出来的 $slots
    在这里插入图片描述
    ⚠️ 从 2.6.0 开始,官方文档推荐使用作用域插槽访问所有 $slots,具体见终于搞懂了vue 的 render 函数(二)(๑•̀ㅂ•́)و✧

    展开全文
  • renderError

    2020-04-18 20:00:39
    renderError New in 2.2.0+ Type: (createElement: () => VNode, error: Error) => VNode Details: Only works in development mode. Provide an alternative render output when the default render func...

    renderError

    New in 2.2.0+
    
    Type: (createElement: () => VNode, error: Error) => VNode
    
    Details:
    
    Only works in development mode.
    
    Provide an alternative render output when the default render function encounters an error. The error will be passed to renderError as the second argument. This is particularly useful when used together with hot-reload.
    
    Example:
    
    new Vue({
      render (h) {
        throw new Error('oops')
      },
      renderError (h, err) {
        return h('pre', { style: { color: 'red' }}, err.stack)
      }
    }).$mount('#app')
    
    See also: Render Functions
    
    展开全文
  • 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 失去作用,在应用中会触发报错。

    展开全文
  • 然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。我的理解是,render 能做的 template 能也能做。但是某些场景下,render 比 template 做的更好,让你...

    大家好,我是金庆大叔。
    首先我们看看官方文档的说法:

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

    我的理解是,render 能做的 template 能也能做。但是某些场景下,render 比 template 做的更好,让你少些很多代码。少很多if判断,早点return. 对于一个追求代码高效的程序员。有必要理解vue 的Render.

    由于我一直用的是webpack+vue-cli+vue2.0的模块化开发的方式。所以我的例子会根据官方的例子进行改版。

    以下是我想到的一些应用场景。
    1.当你需要根据父组件的数据 ,动态改变子组件的显示内容,而子组件的内容大部分是重复的但是代码很多时。

    父组件代码:

    <template>
      <div id="app">
     <!--把要传到子组件的数字绑定到childLevel变量中,到子组件中用props接住-->
        <child :childLevel="level"></child>
      </div>
    </template>
    
    <script>
    import child from '@/components/child'
    export default {
      name: 'father',
      components: {
        child
      },
      data () {
        return {
          level: 1
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    子组件代码:

    <template>
      <div>
        <h1 v-if="childLevel === 1">
     <!-- 这里v-if="childLevel === 1"的意思是如果你父组件传下来的childLevel===1,就显示第一个h1的东西,如果你父组件传下来的childLevel===2就显示下面的h2的东西。也就是说,这里的逻辑就是根据父组件data(){} 中的level的数字,来显示你子组件的对应数字的h(n)
          下方的slot插槽,其实这里可以写其他任何东西,只是用slot在此例子中的场景是重复出现多次,现在要先写的复杂矮戳穷一点。最后用render函数的方法用一句代码搞定,显得高大上一点。
          -->
          <slot>111</slot>
        </h1>
        <h2 v-if="childLevel === 2">
          <slot>222</slot>
        </h2>
        <h3 v-if="childLevel === 3">
          <slot>333</slot>
        </h3>
        <h4 v-if="childLevel === 4">
          <slot>444</slot>
        </h4>
        <h5 v-if="childLevel === 5">
          <slot>555</slot>
        </h5>
        <h6 v-if="childLevel === 6">
          <slot>666</slot>
        </h6>
      </div>
    </template>
    
    <script>
    export default {
      name: 'child',
      props: { // props对象接住父组件传下来的东西。不懂可以先去恶补vue的props
        childLevel: {
          type: Number, // 指定参数的类型 其他的还有Array Object等等
          required: true
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    这时,你手动去修改父组件的data里面的level的数值,你会发现显示的内容就做相应的改变。下面让我们增加几个按钮,写一个方法来操控一下。

    <template>
      <div id="app">
        <!--把要传到子组件的数字绑定到childLevel变量中,到子组件用props接住-->
        <child :childLevel="level"></child>
        <!-- 增加的按钮在此 -->
        <button @click="changeNumber(1)">h1</button>
        <button @click="changeNumber(2)">h2</button>
        <button @click="changeNumber(3)">h3</button>
        <button @click="changeNumber(4)">h4</button>
        <button @click="changeNumber(5)">h5</button>
        <button @click="changeNumber(6)">h6</button>
      </div>
    </template>
    
    <script>
    import child from '@/components/child'
    export default {
      name: 'father',
      components: {
        child
      },
      data () {
        return {
          level: 1
        }
      },
      methods: {// 增加的方法在此
        changeNumber (level) {
          this.level = level
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    

    好了,vue文档大概的意识就是说,h1-h6只是想改变字体的大小。而slot中的东西是不变的。既然只是改变1-6几个数字,就tm没必要写那么多代码。接下来用render函数的方式实现,却发现遇到了坑,后来知道,其实既然选择的.vue 单文件的开发模式,在 .vue文件中是无法实用render的。因为这种模式,vue的实例只有一个。在组件里就无法再实例一个vue了。所以也就无法做到将render渲染到.vue的组件中。

    展开全文
  • offscreen-render

    2019-10-03 14:08:56
    offscreen-render涉及的内容比较多,有offscreen-render那就有onscreen render,onscreen render指的是GPU在当前用于显示的屏幕缓冲区进行渲染,相反offscreen-render就是不在当前的屏幕缓存区,而在另外的缓冲区...
  • 视图相应函数一、 ... JsonResponse结构2.2 JsonResponse示例三、StreamingHttpResponse 响应3.1 StreamingHttpResponse结构四、FileResponse响应4.1 FileResponse结构五、Render 响应函数 视图函数接收HTTP请求
  • Render process gone

    2021-01-14 08:59:44
    js报错Render process gone Render process gone 处理:可能由于代码死循环啥的,使用任务管理器先杀掉运行的该程序,再检查代码是否死循环。
  • app.render和res.render的区别

    千次阅读 2017-12-01 03:08:15
    原文档:Think of app.render() as a utility function for generating rendered view strings. Internally res.render() uses app.render() to render views.把app.render当成一个生成视图的工具,而且res.render...
  • render的使用

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

    千次阅读 2016-04-25 20:33:51
    render第二个参数是将主图片的参数变量@subject传递到渲染的局部图片中可以用subject来引用 实际项目: 1.locals: {subject: @subject}用来向局部视图传递变量 _form.html.erb中: '/ma
  • rails render

    2013-10-24 16:20:46
    载入模板文件 复制代码 # 载入app/views//edit....render :edit render :action => :edit render 'edit' render 'edit.html.erb' render :action => 'edit' render :action => 'edit.html.erb'   # 载入app/view
  • iview 的render函数就是vue的render函数 iview常用在表格里面自定义内容 render函数常用的配置 h就是createdElement的简写 3个参数如下: h("元素名称或组件名称", { domProps: { // 原生dom元素的一些属性 value:...
  • unity lineRender

    2020-07-25 01:25:47
    简单使用 m_ShotLineRender.SetPosition(0, Vector3.zero); m_ShotLineRender....3一个物体只能创建一个LineRender, 要画多条线只能创建多个物体 4material的Shader改为Sprites/Default,否则不能修改颜色。 ...
  • render prop理解

    2019-09-22 21:08:23
    'render prop’是指一种在react组件之间使用一个值为函数的prop共享代码的技术; 简单来说,render prop是函数形式的属性(不是特指一个名为render的prop); 好处,使得react组件之间能够轻松获得属性(值),不...
  • RenderDoc Integration RenderDoc 集成 本文档主要是对Unity官方手册的个人理解与总结(其实以翻译记录为主:&amp;gt;) 仅作为个人学习使用,不得作为商业用途,欢迎转载,并请注明出处。 文章中涉及到的操作都...
  • Universal Render Pipeline

    千次阅读 2020-03-06 17:27:04
    https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@8.0/manual/InstallingAndConfiguringURP.html
  • React Render Props

    2018-08-05 16:30:30
    定义: Render Props 顾名思义就是我们传一个Props名为Render(但其实命名是随意的) 什么时候使用: 和高阶组件有点类似,当我们需要共享一些功能的时候,可以将这些功能提取成组件,并且使用组件的时候,在外部...
  • render是什么意思

    千次阅读 2011-01-26 22:46:00
    render
  • js render

    千次阅读 2016-03-29 11:56:15
    render就是渲染的意思。 而渲染,就是这样一个过程,浏览器根据页面的html代码、css定义、javascript脚本的操作,在浏览器上按照一定的规范(传说中的 DOCTYPE )显示出相应的内容。 举个最简单的例子: 这个是粗体...
  • render()

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

    千次阅读 2017-11-23 20:40:14
    自django1.3开始:render()方法是render_to_response的一个崭新的快捷方式,前者会自动使用RequestContext。而后者必须coding出来,这是最明显的区别,当然前者更简洁。  return render_to_response('blog_add....
  • django renderrender_to_response()

    千次阅读 2016-07-08 16:21:27
    django renderrender_to_response()
  • 写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码... 【Vue原理】Render - 源码版 之 静态 Render 上一篇我们讲了 render 函数,而 Vue 为了更新时速度快一...
  • renderTree渲染

    2019-10-10 16:18:41
    在这一步,需要把dom树和cssom树给结合起来,生成一棵完整的RenderTree。 RenderTree其实很简单,就是遍历dom树,对于每个dom节点,放到cssom树上匹配,最后找到对应的唯一一条规则,附加上去。 举个栗子, ...
  • Lightweight Render Pipeline

    2019-06-19 10:58:00
    Lightweight Render Pipeline (LWRP),轻量级渲染管线,是一个Unity预制的Scriptable Render Pipeline (SRP)。LWRP可以为移动平台提供图形渲染功能,但你也可以在高端主机和PC上使用LWRP。LWRP使用简化的、基于物理...
  • 1.render 函数作用 render 函数跟template一样都是创建 html 模板的,但是有些场景中用template实现起来代码冗长繁琐而且有大量重复,这时候就可以用render 函数。 2.render 函数讲解 render 函数即渲染函数,它...
  • 该文档位于Surround360/Surround_render目录下 翻译正文如下: #Surround360 Render 步骤 为了渲染捕获的素材,我们使用位于surround360_render / scripts / run_all.py中的Python脚本run_all.py 脚本通过运行...
  • Django模板 render_to_string与render

    千次阅读 2019-04-11 16:57:13
    代码展示: templates文件夹中的,index.html文件: Title 这个是从模板中渲染的字符串 urls.py: from django.urls import path from front import views urlpatterns = [ ...render_to_string:...
  • vue渲染render

    2019-06-24 21:37:03
    一、宏观上展现了Vue整体流程: ...然而在一些场景中,需要使用JavaScript的编程能力和创建HTML,这就是render函数...简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DO...
  • Renderdoc调试总结

    千次阅读 2020-06-20 09:02:10
    Renderdoc调试总结 https://www.jianshu.com/p/7587dc0a42f4 renderdoc调试总结 http://aicdg.com/renderdoc-hlsl/ λ 1 /renderdoc-hlsl/ ⌘ blogspace λ * Menu utf-8 web .html 1 home 2 my ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,432
精华内容 47,372
关键字:

render