Vue渲染函数

Vue使用了一个虚拟DOM的实现,通过树状结构的JavaScript对象来构建虚拟DOM。再将构建的虚拟DOM应用到浏览器的真实DOM上。这尽可能避免了DOM操作,提高了性能。

render函数中所用的方法是createElement,别名h,这个h来源于使用JavaScript描述HTML的技术-HyperScript

createElement方法接受三个参数:

  1. 第一个参数是元素的类型,可以是一个标签名,比如div,可以是一个组件名,也可以是组件定义对象。
  2. 第二个参数可选,是一个定义了属性(class,style等),prop,事件监听等的数据对象。
  3. 第三个参数也是可选,可以是纯文本,也可以是通过createElement创建的元素数组。

示例:

1
2
3
4
5
6
render(h){
        return h('ul',{'class':'students'},[
          h('li',{'class':'student'},'bob'),
          h('li',{'class':'student'},'rose'),
        ])
      }

上面代码将在浏览器中渲染成:

1
2
3
4
<ul class="students">
    <li class="student">bob</li>
    <li class="student">rose</li>
  </ul>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值