vue模板实现1-简单正则替换

对模板的很粗糙的实现,就是简单地用正则处理了一下,还加了一个报错。有很多不完善的地方,欢迎指出。

//  my_vue.js
class Vue {
  constructor(obj) {
    const {el, data} = obj
    const node = document.querySelector(el)
    
    const reg = /{{\w+}}/g
    let str = node.innerHTML

    const arr = str.match(reg)

    arr.forEach((item)=>{
      const key = item.slice(2, -2)
      
      if(data[key] === undefined) {
        str = str.replace(item, '')
        node.innerHTML = str
        console.error(`[vue warn] ${key} is undefined`)

      }
      else {
        str = str.replace(item, data[key])
        node.innerHTML = str
      }
    })
  }
}
  // 示例代码
  

hello, {{msg}}, lala, {{name}}, {{age}}

你可能感兴趣的:(vue模板实现1-简单正则替换)