深入理解vue Render函数


Posted in Javascript onJuly 19, 2017

最近在学习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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
网上应用的一个不错common.js脚本
Aug 08 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
layui动态渲染生成select的option值方法
Sep 23 Javascript
Vue AST源码解析第一篇
Jul 19 #Javascript
Vue之Watcher源码解析(1)
Jul 19 #Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 #Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 #Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 #Javascript
Vue之Watcher源码解析(2)
Jul 19 #Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
js获取url传值的方法
2015/12/18 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
ReactNative中使用Redux架构总结
2017/12/15 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python实现扫描ip地址的小程序
2019/04/16 Python
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
会计专业自荐信
2013/12/02 职场文书
新员工入职感言
2014/02/01 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
统计员岗位职责
2015/02/11 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python