master

分支 (2)

管理

管理

master

xiao

vue_code
/
8_3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <div style="font-size: 14px; position:absolute;bottom:20px; left:10px;">
    源代码地址：https://gitee.com/xiao_yan_bin/vue_code<br/>
    github: https://github.com/xiaoyanbin/vue_code<br/>
    vue设计与实现，持续更新，建议点赞收藏，有问题可以在评论区留言
  </div>
  <script>
    const renderer = createRenderer({
      createElement(type){
        return document.createElement(type)
      },
      insert(child,parent,anchor){
        parent.insertBefore(child,anchor)
      },
      remove(child){
        child.parent.removeChild(child)
      },
      setElementText(el,text){
        el.textContent = text
      },
      patchProps(el,key,prevValue,nextValue){
        if(shouldSetAsProp(key,prevValue,nextValue)){
         const type = typeof el[key]
          if(type === 'boolean' && nextValue ===''){
           el[key] = true
          }else{
            el[key] = nextValue
          }
        }else{
          el.setAttribute(key,nextValue)
        }
      }
    })
 // class

 function patchProps(el,key,prevValue,nextValue) {
   if(key === 'class'){
      el.className = nextValue || ''
   }else{
     el.setAttribute(key,nextValue)
   }
  }

  </script>
</body>
</html>