Vue 2.x V-model implementation

const reg_var = / \ {\ {(. +?) \} \} /;
class MVVM{
  constructor(el, data) {
    this.el = document.querySelector(el);
    this._data = data;
    this.domPool = {}
    this.init()
  }


  init() {
    this.initData();
    this.initDom()
  }


  initDom() {
    this.bindDom(this.el)
    this.bindInput(this.el)
  }
  
  bindDom(el) {
    const childNodes = el.childNodes;

    childNodes.forEach(item= > {
      if (item.nodeType === 3) {
        const _value = item.nodeValue;

        if (_value.trim().length) {
          let _isValid = reg_var.test(_value)
          if (_isValid) {
            const _key = _value.match(reg_var)[1].trim();
            this.domPool[_key] = item.parentNode;
            item.parentNode.innerHTML = this.data[_key] || undefined
          }
        }
      }
      item.childNodes && this.bindDom(item)
   })
  }


  bindInput(el) {
    const _allInputs = el.querySelectorAll('input')
    _allInputs.forEach(input= > {
      const _vModel = input.getAttribute('v-model')
      if (_vModel) {
       input.addEventListener('keyup'.this.handleInput.bind(this,_vModel,input),false)}}}handleInput(key, input) {
    const _value = input.value
    this.data[key] = _value
  }


  initData() {
    const that = this
    this.data = {};
    for (let key in this._data) {
      Object.defineProperty(this.data, key, {
        get() {
          return that._data[key]
        },
        set(newVal) {
          that.domPool[key].innerHTML = newVal
          that._data[key] = newVal
        }
      })
    }
  }
   
}

DefineProperty * 2. Input -> Input /keyup -> Binding of event handlers -> Change data * 3. Related DOM -> data => bound together * a property that manipulates data => corresponding to DOM changes */
Copy the code