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
      }
    })
  }
}

  // 示例代码
  <div id="app">
    <p>hello, {{msg}}, lala, {{name}}, {{age}}</p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'vue',
        name: 'wang'
      }
    })
  </script>