深入理解vue Render函数

2024-11-27 05:19:57

最近在学习vue，正好今日留个笔记，我自己还在摸索学习中，现整理出来以作记录。

会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶

首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例中传递的props的“nnum”值得控制可以自如的切换两种状态显示。这样就是和v-if 一样使用组件了

<div id="app">
    <mycom :v="nnum">
      <div slot="slot2">hahahhah</div>
      <div slot="slot1">ggggggggggggg</div>
    </mycom>
  </div>
  <script>
    Vue.component('mycom',{
      render:function(createElement){
        var s=this;
        if(this.v==1){
          return createElement('div',
           {
            domProps:{innerHTML:'component n='+this.n}
           })
        }else{ 

          return createElement('div',
            [this.$slots.slot1,this.$slots.slot2])
        }
      },
      props:{
        v:{
          type:Number,
          default:0
        },
        n:{
          default:'hello'
        }
      }
    });
    var app=new Vue({
      el:'#app',
      data:{
        nnum:1
      }
    })

v-for 的使用需要需要使用到map

<div id="app">
    <mycom :v="nnum" :ar="arr">
      <div slot="slot2">hahahhah</div>
      <div slot="slot1">ggggggggggggg</div>
    </mycom>
  </div>
  <script>
    Vue.component('mycom',{
      render:function(createElement){
        if(this.v==1){
          return createElement('div',
              this.ar.map(function(item){
                return createElement('li',
                  {
                    domProps:{
                      innerHTML:item
                    }
                  })
              })
           )
        }else{ 

          return createElement('div',
            [this.$slots.slot1,this.$slots.slot2])
        }
      },
      props:{
        v:{
          type:Number,
          default:0
        },
        n:{
          default:'hello'
        },
        ar:{
          type:Array,
          default:function(){ return [1,23,4,5,6,55,65]}
        } 

      }
    });
    var app=new Vue({
      el:'#app',
      data:{
        nnum:1,
        arr:[1,2,3,4,5,6,7,8]
      }
    })
  </script>
  </body>

只有map方法才能检测改变，其他的方法不能根据数据的改变能改变相应的状态下的例子中的arr数组依靠 apply的方法来实现的就不能够检测this.ar 的变换来重新计算

return createElement('div',
              Array.apply(null,this.ar.map(function(item){
                return createElement('li',
                  {
                    domProps:{
                      innerHTML:'item'
                    }
                  })
              }))

<body>
  <div id="app">
    <mycom :v="nnum" :ar="arr">
      <div slot="slot2">hahahhah</div>
      <div slot="slot1">ggggggggggggg</div>
    </mycom>
  </div>
  <script>
    Vue.component('mycom',{
      render:function(createElement){
        if(this.v==1){
          return createElement('div',
              this.ar.map(function(item){
                return createElement('li',
                  {
                    domProps:{
                      innerHTML:item
                    }
                  })
              })
            )
        }else{
           return createElement('div',
              Array.apply(null,this.ar.map(function(item){
                return createElement('li',
                  {
                    domProps:{
                      innerHTML:'item'
                    }
                  })
              }))
            )
        }
      },
      props:{
        v:{
          type:Number,
          default:0
        },
        n:{
          default:'hello'
        },
        ar:{
          type:Array,
          default:function(){ return [1,23,4,5,6,55,65]}
        } 

      }
    });
    var app=new Vue({
      el:'#app',
      data:{
        nnum:2,
        arr:[1,2,3,4,5,6,7,8]
      }
    })
  </script>
  </body>

v-model 使用domProps来实现双向绑定

使用对value：赋值可以将数据绑定给 input 的默认值，但是对input 的修改并不能传递给vue 这涉及到组件的通信问题，
所以想实现双向绑定，只能自己写事件来出发 vue shu'j的传递

domProps:{value:self.v }

<body>
  <div id="app">
    <mycom :v="nnum" :ar="arr">
      <div slot="slot2">hahahhah</div>
      <div slot="slot1">ggggggggggggg</div>
    </mycom>
    <div>{{nnum}}</div>
  </div>
  <script>
    Vue.component('mycom',{
      render:function(createElement){
        var self=this;
        var inp=createElement('input',
                  {
                    domProps:{
                      value:self.v
                    }
                  });
          return createElement('div',[inp]) 

        },
      props:{
        v:{
          type:Number,
          default:0
        },
        n:{
          default:'hello'
        },
        ar:{
          type:Array,
          default:function(){ return [1,23,4,5,6,55,65]}
        } 

      }
    });
    var app=new Vue({
      el:'#app',
      data:{
        nnum:100,
        arr:[1,2,3,4,5,6,7,8]
      }
    })
  </script>
  </body>

通过input触发undateValue来更新 app中的nnum 值（差点没转过弯来，render过于复杂后，真的是自己找罪受）

<div id="app">
    <mycom :v="nnum" :ar="arr" @input="updateValue"> 

    </mycom>
    <div>{{nnum}}</div>
  </div>
  <script>
    Vue.component('mycom',{
      render:function(createElement){
        var self=this;
        var inp=createElement('input',
                  {
                    domProps:{
                      value:self.v
                    },
                    on:{
                     input:function(event){
                      self.$emit('input',event.target.value) 

                     }
                    }
                  });
          return createElement('div',[inp]) 

        },
      props:{
        v:{
          type:Number,
          default:0
        },
        n:{
          default:'hello'
        },
        ar:{
          type:Array,
          default:function(){ return [1,23,4,5,6,55,65]}
        } 

      },
      methods:{
        update:function(){ 

        }
      }
    });
    var app=new Vue({
      el:'#app',
      data:{
        nnum:100,
        arr:[1,2,3,4,5,6,7,8]
      },
      methods:{
        updateValue:function(value){
          this.nnum=parseFloat(value);
        }
      }
    }) 

  </script>
  </body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue2.x中的Render函数详解

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能
如何理解Vue的render函数的具体用法

本文介绍了如何理解Vue的render函数的具体用法,分享给大家,具体如下: 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.b
了解VUE的render函数的使用

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容 <div id="div1"> <child :level="1">Hello world!</chil
深入理解vue Render函数

最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录. 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例中传递的props的"nnum"值得控制可以自如的切换两种状态显示.这样就是和v-if 一样使用组件了 <div id="app"> <mycom :v="nnum&qu
浅谈Vue render函数在ElementUi中的应用

vue的render函数在日常开发中被广泛应用,今天以ElementUI中的table表头重构为引,实际应用一下借助render函数实现表头搜索,不足之处请多多指教! 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="date" label="日期&quo
Vue render函数实战之实现tabs选项卡组件

用过Element ui库的童鞋肯定知道<el-tabs>组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的?我咋刚开始使用<el-tabs>组件的时候就有去想过,也想去实现一个超级简单的tabs选项卡组件,无奈当时功力不够,未能实现.最近的一个简单项目中正好要用到选项卡组件,由于项目简单也就没有使用任何第三方库,于是就自己动手写了个选项卡组件. 1.实现tabs选项卡组件的思考 <el-tabs
vue render函数动态加载img的src路径操作

分享一下我去如何解决vue render 中如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e
VUE render函数使用和详解

目录前言 render的作用 render函数讲解 render和template的区别 render举例总结前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操作.此时,就到了render函数展示拳脚去时候了. render的作用官网示例入口在官网的这里示例中,使用组件,将相同的内容通过solt放进h1-h6的标签中,在使用传统方式时,代
Vue Render函数原理及代码实例解析

简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h 虽然在render里使用createElement函数创建DOM节点不是很直观
Vue Render函数创建DOM节点代码实例

虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的.一个简单的render示例如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
Vue中render函数的使用方法

render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 什么情况下适合使用render函数在一次封装一套通用按钮组件的工作中,按钮有四个样式(default success error ).首先,你可能会想到如下实现 <div v-if="type === 'success'">success</div> <div v-else
Vue render深入开发讲解

简介在使用Vue进行开发的时候,大多数情况下都是使用template进行开发,使用template简单.方便.快捷,可是有时候需要特殊的场景使用template就不是很适合.因此为了很好使用render函数,我决定深入窥探一下.各位看官如果觉得下面写的有不正确之处还望看官指出,你们与我的互动就是写作的最大动力. 场景官网描述的场景当我们开始写一个通过 level prop 动态生成 heading 标签的组件,你可能很快想到这样实现: <script type="text/x-temp
vue 中的 render 函数作用详解

render 函数作用 vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了.建议配合文档阅读,本文也是根据文档加上自己的理解. 注:本文代码都是在单文件组件中编写.代码地址 render 函数作用 render 函数跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数. 官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几.具体代码可以看文档.

深入理解vue Render函数

相关推荐

随机推荐