這篇文章主要介紹“怎么使用ES6的class模仿Vue實(shí)現(xiàn)一個(gè)雙向綁定”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么使用ES6的class模仿Vue實(shí)現(xiàn)一個(gè)雙向綁定”文章能幫助大家解決問(wèn)題。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到富縣網(wǎng)站設(shè)計(jì)與富縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋富縣地區(qū)。

最終效果如下：

構(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ù)用來(lái)載入事件：

// 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ù)來(lái)處理不同元素中的視圖，包括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)聽(tīng)器(watcher)

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

 

 

 

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