博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
render总结
阅读量:4670 次
发布时间:2019-06-09

本文共 858 字,大约阅读时间需要 2 分钟。

vue渲染组件的顺序是:

执行render函数-->没有render参数解析template参数内容-->没有template参数将el内html当做template解析

其中解析template实质上是转换为render函数。

语法:

render: (createElement)=>{

  return createElement(...)

}

备注: 此createElement非原生js方法中的createElement

难点和精髓在于传入的createElement函数

createElement语义上应该创建真实的dom元素,但实际上其真实的名称应该是createNodeDescription(创建节点说明),包含此节点的子节点及如何渲染等信息,

这里注意两点:

1.创建出的并非真实node,而多称之为虚拟节点(visual node),或简称为VNode,而虚拟dom(visual dom)是对由vNode组成的树的简称

2.节点有许多种,元素节点、文本节点、注释节点(是的,注释也是节点~)。。

 

createElement的三个参数

1. 当前创建对象{string|Object|function} 必选

html标签字符串

Object组件选项对象

function函数返回前两者

 

2.数据对象{object}  可选

此VNode的属性对象

 

3.子节点 {string|Array}  可选

如果是string,则类似于innerHTML,作为文本节点嵌入

如果是array,数组元素可以是字符串(文本节点)或由createElement创建的VNode

例如:

var vm= new Vue({    render: h=> {        return h('p', ['11', h('span', '333')])    }}).$mount('#a')
View Code

 

转载于:https://www.cnblogs.com/yanze/p/7660863.html

你可能感兴趣的文章
10G整数文件中寻找中位数或者第K大数
查看>>
操作手机数据库的uri
查看>>
Python小应用1 - 抓取网页中的链接地址
查看>>
HTML表格和列表笔记&练习<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于表格的一些练...
查看>>
Hadoop HBase概念学习系列之hbase shell中执行java方法(高手必备)(二十五)
查看>>
数据类型
查看>>
SharePoint 2010中的内容类型集线器 - 内容类型发布与订阅
查看>>
如何解决在Windows Server 2008 R2 上安装证书服务重启后出现 CertificationAuthority 91错误事件...
查看>>
c# 获取键盘的输入
查看>>
mysql忘记密码
查看>>
小股神助A股股民畅享经济发展红利
查看>>
Python灰帽子pdf
查看>>
Node.js区块链开发pdf
查看>>
轻松学SQL Server数据库pdf
查看>>
Oracle 日期查询
查看>>
说说今年的计划
查看>>
把discuzX 的用户登录信息添加到纯静态页面
查看>>
文件大小计算
查看>>
iOS:给图片置灰色
查看>>
Java 8 (5) Stream 流 - 收集数据
查看>>