Vue模板解析简化版

function Compile2(el, vm) {
   
   
    //保存vm
    this.$vm = vm
    //保存el
    this.$el = this.isElementNode(el) ? el : document.querySelector(el)
    //如果el元素存在
    if (this.$el) {
   
   
        //取出el的所有子节点放到虚拟内存中
        this.$fragment = this.node2Fragment(this.$el)
        // 编译fragment中的所有子节点
        this.init()
        //编译完成后初始化显示
        this.$el.appendChild(this.$fragment)

    }

}

Compile2.prototype = {
   
   
    //创建虚拟节点并将传来的el子节点都放进去
    node2Fragment(el) {
   
   
        let fragment = document.createDocumentFragment()
        let child = null
        while (child = el.firstChild) {
   
   
            //编译所有层次的子节点,添加到fragment中
            fragment.appendChild(child)
        }
        return fragment
    },
    init() {
   
   
        this.compileElement(this.$fragment)
    },
    //这个方法最终会编译处理el的所有层次的子节点,因为里面会递归调用
    compileElement(el) {
   
   
        //得到所有子节点
        let chileNodes = el.childNodes,
            //保存vm对象
            me = this
        Array
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值