SOURCE

window.onload = function () {
    console.log('onload')
    let app = new Sue({
      el: '#app',
      data: {
        message: '123'
      }
    })
    
    document.querySelector('#click').addEventListener('click', () => app.set('message','Hello World'))
}

function BindingProxyHandler () {
  return {
     get: (target, key, receiver) => {
      return Reflect.get(target, key, receiver);
    },
    set: (target, key, value, receiver) => {
			let doms = document.querySelectorAll(`${this.elTag} [s-model="${key}"]`) || null
      if (!doms || doms.length === 0)return
      // update DOM
      doms.forEach(dom => {
        dom.value = dom.innerHTML = value	
      })
      return Reflect.set(target, key, value, receiver);
    }
	}
}

function Sue(options) {
  if (!options.el) throw Error('`el` can not be null')
  
  this.elTag = options.el
  this.el = document.querySelectorAll(options.el)
  if (this.el.length > 0){
   this.el = this.el[0] 
  } else {
   throw new Error('`el` element not exist')
  }
  // data binding
  this.datas = new Proxy(options.data || {}, BindingProxyHandler.call(this))

  this.bindInput()
  // set default
  Object.keys(this.datas).forEach(key => this.set(key, this.datas[key]))
  return this
}

Sue.prototype.set = function (key, value) {
  if (!this.datas[key])return
  this.datas[key] = value
}

Sue.prototype.bindInput = function (modelName) {
  let el = document.querySelector(`${this.elTag}`)
  el.addEventListener('keyup', (evt) => {
    let node = evt.target
    if (node.tagName === 'INPUT' && node.getAttribute('s-model') !== '') {
      console.log(node.value)
      this.datas[node.getAttribute('s-model')] = node.value
    }
  })
  return el
}

<div id="app">
  <input s-model="message" />
  <button id="click">设置message为Hello World</button>
  <br/><span s-model="message"></span>
</div>