Vue Render函数原理及代码实例解析
作者:viewts 发布时间:2023-07-02 16:34:38
标签: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)
]
)
}
})
来源:https://www.cnblogs.com/viewts/p/11208452.html
0
投稿
猜你喜欢
- 如下所示:#抽象 (函数)# 1、callable 判断一个对象是否可以被调用x = 1def y(): &nbs
- 我已安装了WINDOWS NT OPTON PACK 中的SMTP Service,请问如何使用它的发送邮件功能?在安装了SMTP Serv
- Python list列表添加元素方法实际开发中,经常需要对 Python 列表进行更新,包括向列表中添加元素、修改表中元素以及删除元素。&
- 比如:Set Connobject=nothing nothing如同英文单词字面意思,没有,没有那个,没有这个,没有东西 Set Conn
- 本文实例为大家分享了python使用Matplotlib画条形图的具体代码,供大家参考,具体内容如下数据中国的四个直辖市分别为北京市、上海市
- 引言大家在日常工作中,经常会碰到类似的场景,需要计算在某个时间段内的工作日以及确定某天是否为工作日,这里的介绍的工具包将很好的解决这个问题。
- 是什么能让一个设计看上去是协调的,有条理的,专业的?答案是”色彩”.不是所有的项目都要用那种浅的”公司蓝”(corporate blue)才
- 1 概述1.1 无监督学习 在一个典型的监督学习中,我们有一个有标签的训练集,我们的目标是找到能够区
- 前言本篇文章主要讲解vue响应式原理的逻辑,也就是vue怎么从最开始一步步推导出响应式的结构框架。 先从头构建一个简单函数推导出Vue3的R
- Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下module.exports =
- 网络通用urllib -网络库(stdlib)。requests -网络库。grab – 网络库(基于pycurl)。pycurl – 网络
- 在并发编程中,资源的分配和回收是一个很重要的问题。对于频繁的分配和回收,会造成大量的开销。而 Go 语言的 Sync.Pool 是一个可以帮
- 前言小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以
- 引言:一开始二维码加群,但是呢,这个东西隔一段时间会过期,我需要 每隔一段时间去更新二维码,然后当群人数超过100人了,只能邀请进群, 这个
- 本文实例讲述了mysql聚簇索引的页分裂。分享给大家供大家参考,具体如下:在MySQL中,MyISAM采用的是非聚簇索引的,InnoDB存储
- 保留COOKIES一个小时Response.Cookies("MyCookie").Expires= (now
- 输出用print加上字符串,就可以向屏幕上输出指定的文字。比如输出'hello, world',用代码实现如下:>&g
- 本文实例讲述了php+jQuery实现的 * 导航栏下拉菜单显示效果。分享给大家供大家参考,具体如下:首先看看效果图:1.数据配置文件 db.
- 问题描述如下:解决方案如下:下图中字体调整为18及以上效果如下:来源:https://blog.csdn.net/appleyuchi/ar
- 现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKe