手写MVVM框架-实现简单v-bind

v-bind 有两种情况：

1.绑定的是一个简单的属性

<div :class="customClass">简单v-bind</div>

2.绑定的元素上面有表达式

<div :class="{customClass: a + 1 > 2}">简单v-bind</div>

这一章我们先说第一种情况，比较简单，原理就是：

解析属性时遇到冒号开头或者v-bind:开头的就获取绑定的具体值并绑定到属性上

代码实现：

/**
 * 解析Node属性值
 * @param {*} vm 
 * @param {*} vnode 
 * @returns 
 */
function analysisNodeAttr(vm, node, parent) {
    let vnode = null;
    if(node.nodeType != 1) return
    let attrList = node.getAttributeNames();
    attrList.forEach((attr)=> {
        if(attr.startsWith("v-model")) {
            VModel(vm, node, node.getAttribute("v-model"));
        }
        if(attr.startsWith("v-on:") || attr.startsWith("@")) {
            let eventName = attr.replace("v-on:", "").replace("@", "")
            const event = getObjectValue(vm, node.getAttribute(attr))
            VON(vm, node, eventName, event)
        }
        if(attr.startsWith("v-bind:") || attr.startsWith(":")) {
            let attrName = attr.replace("v-bind:", "").replace(":", "")
            const attrValue = getObjectValue(vm, node.getAttribute(attr))
            VBind(vm, node, attrName, attrValue)
        }
        if(attr === "v-for") {
            vnode = VFOR(vm, node, parent, node.getAttribute(attr))
        }
    })
    return vnode;
}

export function VBind(vm, node, key, value) {
    if(node.nodeType != 1) return;
    if(/^{[\W\w]+}$/.test(value)) {
        console.log('复杂绑定')
    } else {
        simpleVbind(key, node, value)
    }
}

function simpleVbind(key, node, value) {
    if(key==='class') {
        // 如果key是class，则需要遍历value的值
        value.split(' ').forEach(className => {
            node.classList.add(className)
        })
    } else {
        // 给节点设置属性值
        node.setAttribute(key, value)
    }
}

我们在页面上绑定一个class看效果(可以看到class已经效果，文字变成了红色)