Vue Render函数原理及代码实例解析
简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM
因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h
虽然在render里使用createElement函数创建DOM节点不是很直观，但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
<div id="app">
<my-component :list="list"></my-component>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-component', {
props: {
list: {
type: Array,
default: () => []
}
},
render(createElement) {
if (this.list.length) {
return createElement('ul', this.list.map(item => createElement('li', item)))
} else {
return createElement('p', 'Empty list')
}
}
})
new Vue({
el: '#app',
data: {
list: ['html', 'css', 'javascript']
}
})
</script>
</body>
</html>
另外，由于v-if，v-else，v-show等指令都无法在render里使用，需要自己手动实现，拿常用的v-model举个栗子：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
Vue.component('my-component', {
data() {
return {
message: ''
}
},
render(createElement) {
return createElement(
'div',
[
createElement(
'input',
{
on: {
input: e => this.message = e.target.value
}
}
),
createElement('p', this.message)
]
)
}
})
相关推荐
-
浅谈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 iview组件表格 render函数的使用方法详解
如果要在标签中加入属性,例如img 中src属性 a标签中href属性 此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on
-
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的使用
1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如如下我想要实现如下html: <div id="container"> <h1> <a href="#" rel="external nofollow" rel="external nofollow"
-
vue中render函数的使用详解
render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. render方法的实质就是生成template模板: 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的: 通过这三个参数,可以生成一个完整的模板 官网实例 //未使用render函数 Vue.component('anchored-heading', { template: '#anchor
-
浅谈vue的iview列表table render函数设置DOM属性值的方法
如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属
-
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中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h 虽然在render里使用createElement函数创建DOM节点不是很直观
-
JDK源码Enum类原理及代码实例解析
正文 一 概述 枚举类型是 JDK 5 之后引进的一种非常重要的引用类型,可以用来定义一系列枚举常量,使用 enum 来表示枚举可以更好地保证程序的类型安全和可读性 实际上在使用关键字enum创建枚举类型并编译后,编译器会为我们生成一个相关的类,这个类继承了Java API中的java.lang.Enum类, 也就是说通过关键字enum创建枚举类型在编译后事实上也是一个类类型而且该类继承自java.lang.Enum类 使用举例 public class EnumTest { enum MyCo
-
MyBatis缓存实现原理及代码实例解析
一.一级缓存(本地缓存) sqlSession级别的缓存.一级缓存是一直开启的:SqlSession级别的一个Map与数据库同一次会话期间查询到的数据会放在本地缓存中.以后如果需要获取相同的数据,直接从缓存中拿,没必要再去查询数据库: 一级缓存失效情况(没有使用到当前一级缓存的情况,效果就是,还需要再向数据库发出查询): 1.sqlSession不同 2.sqlSession相同,查询条件不同.(当前一级缓存中还没有这个数据) 3.sqlSession相同,两次查询之间执行了增删改操作(这次增删
-
vue封装swiper代码实例解析
这篇文章主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 data(){ return{ list:[], swiperOption:"", xiding : "", // 轮播高度 SwiperHeight:'' } }, mounted(){ this.onload() // 获取轮播图图片的高度 setTimeout(()=> { // 通过ref获取轮播dom
-
Python随机数函数代码实例解析
这篇文章主要介绍了Python随机数函数代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 ''' choice(seq) 从序列的元素中随机选出一个元素 randrange ([start,] stop [,step]) 从指定范围内,在指定步长递增的集合中 获取一个随机数,步长默认为 1 .注:不包含 stop 值 random() 随机生成下一个实数,它在[0,1)范围内. shuffle(lst) 将序列的所有元素随机排序,返回
-
深入理解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函数实战之实现tabs选项卡组件
用过Element ui库的童鞋肯定知道<el-tabs>组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的?我咋刚开始使用<el-tabs>组件的时候就有去想过,也想去实现一个超级简单的tabs选项卡组件,无奈当时功力不够,未能实现.最近的一个简单项目中正好要用到选项卡组件,由于项目简单也就没有使用任何第三方库,于是就自己动手写了个选项卡组件. 1.实现tabs选项卡组件的思考 <el-tabs
-
VUE render函数使用和详解
目录 前言 render的作用 render函数讲解 render和template的区别 render举例 总结 前言 在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要 通过JavaScript 的编程能力来进行操作.此时,就到了render函数展示拳脚去时候了. render的作用 官网示例入口 在官网的这里示例中,使用组件,将相同的内容通过solt放进h1-h6的标签中,在使用传统方式时,代
-
Python解析json代码实例解析
这篇文章主要介绍了Python解析json代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 什么是json格式: JSON(JavaScript Object Notation):一种轻量级数据交换格式,相对于XML而言更简单,也易于阅读和编写,机器也方便解析和生成,Json是JavaScript中的一个子集. import json data = { "statusCode": 200, "data":