今天小編給大家分享一下怎么使用ES6的class寫一個(gè)雙向綁定的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)與策劃設(shè)計(jì),叢臺(tái)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:叢臺(tái)等地區(qū)。叢臺(tái)做網(wǎng)站價(jià)格咨詢:18980820575

最終效果如下：

構(gòu)造器(constructor)

構(gòu)造一個(gè)TinyVue對(duì)象，包含基本的el，data，methods

class TinyVue{
 constructor({el, data, methods}){
  this.$data = data
  this.$el = document.querySelector(el)
  this.$methods = methods
  // 初始化
  this._compile()
  this._updater()
  this._watcher()
 }
}

編譯器(compile)

用于解析綁定到輸入框和下拉框的v-model和元素的點(diǎn)擊事件@click。

先創(chuàng)建一個(gè)函數(shù)用來載入事件：

// el為元素tagName，attr為元素屬性（v-model，@click）
_initEvents(el, attr, callBack) {
 this.$el.querySelectorAll(el).forEach(i => {
  if(i.hasAttribute(attr)) {
   let key = i.getAttribute(attr)
   callBack(i, key)
  }
 })
}

載入輸入框事件

this._initEvents('input, textarea', 'v-model', (i, key) => {
 i.addEventListener('input', () => {
  Object.assign(this.$data, {[key]: i.value})
 })
})

載入選擇框事件

this._initEvents('select', 'v-model', (i, key) => {
 i.addEventListener('change', () => Object.assign(this.$data, {[key]: i.options[i.options.selectedIndex].value}))
})

載入點(diǎn)擊事件

點(diǎn)擊事件對(duì)應(yīng)的是methods中的事件

this._initEvents('*', '@click', (i, key) => {
 i.addEventListener('click', () => this.$methods[key].bind(this.$data)())
})

視圖更新器(updater)

同理先創(chuàng)建公共函數(shù)來處理不同元素中的視圖，包括input、textarea的value，select的選擇值，div的innerHTML

_initView(el, attr, callBack) {
 this.$el.querySelectorAll(el, attr, callBack).forEach(i => {
  if(i.hasAttribute(attr)) {
   let key = i.getAttribute(attr),
    data = this.$data[key]
   callBack(i, key, data)
  }
 })
}

更新輸入框視圖

this._initView('input, textarea', 'v-model', (i, key, data) => {
 i.value = data
})

更新選擇框視圖

this._initView('select', 'v-model', (i, key, data) => {
 i.querySelectorAll('option').forEach(v => {
  if(v.value == data) v.setAttribute('selected', true)
  else v.removeAttribute('selected')
 })
})

更新innerHTML

這里實(shí)現(xiàn)方法有點(diǎn)low，僅想到正則替換{{text}}

let regExpInner = /\{{ *([\w_\-]+) *\}}/g
this.$el.querySelectorAll("*").forEach(i => {
 let replaceList = i.innerHTML.match(regExpInner) || (i.hasAttribute('vueID') && i.getAttribute('vueID').match(regExpInner))
 if(replaceList) {
  if(!i.hasAttribute('vueID')) {
   i.setAttribute('vueID', i.innerHTML)
  }
  i.innerHTML = i.getAttribute('vueID')
  replaceList.forEach(v => {
   let key = v.slice(2, v.length - 2)
   i.innerHTML = i.innerHTML.replace(v, this.$data[key])
  })
 }
})

監(jiān)聽器(watcher)

數(shù)據(jù)變化之后更新視圖

 

 

 

 加一
 
您輸入的是：{{text1}}+{{text2}}+{{text3}}
 
  Volvo
  Saab
 
 
  Volvo
  Saab
 
 
您選擇了：{{select}}