深入理解vue Render函数
时间:2019-03-30
本文章向大家介绍深入理解vue Render函数,主要包括深入理解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"> <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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 微信小程序的王者时代
- [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)
- NUMA架构
- 如何处理 Python 入门难以进步的现象?
- 编写前置和后置条件的连贯接口库:CuttingEdge.Conditions
- [程序设计语言]-[核心概念]-03:控制流
- 简单代码实现“网站维护中”“coming soon” 效果
- 使用Topshelf创建Windows 服务
- 自定义AuthorizeAttribute
- 系统进程管理工具Process Explorer
- jquery 操作DOM元素(1)
- 开源的读取Excel文件组件-ExcelDataReader
- BlackPearl 的 ServiceObject 开发部署
- [程序设计语言]-[核心概念]-04:数据类型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法