ES6 클래스를 사용하여 Vue를 모방하여 양방향 바인딩 만들기

이번에는 ES6의 클래스를 사용하여 Vue를 모방하여 양방향 바인딩을 만드는 방법을 소개하겠습니다. ES6의 클래스를 사용하여 Vue를 모방하여 양방향 바인딩을 만들 때 주의할 점은 무엇인가요? 살펴보자.

최종 효과는 다음과 같습니다.

Constructor(생성자)

기본 el, 데이터, 메소드를 포함한 TinyVue 객체를 구성합니다.

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

Compiler(컴파일)

을 사용하여 입력 상자와 드롭다운 상자의 v-model과 요소의 클릭 이벤트 @click에 바인딩합니다.

먼저 이벤트를 로드하는 함수를 만듭니다.

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

클릭 이벤트 로드

클릭 이벤트는 메서드의 이벤트에 해당합니다

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

업데이트 보기(업데이트 프로그램)

마찬가지로 먼저 입력, 텍스트 영역 값, 선택 값, p의 innerHTML을 포함한 다양한 요소의 뷰를 처리하는 공개 함수를 만듭니다. 여기 구현 방법이 좀 낮아서 정기적인 교체만 생각합니다 {{text}}

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

Listener(watcher)

데이터 변경 후 뷰 업데이트

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

TinyVue 모든 코드

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

믿습니다 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:

Express에서 HTTP를 HTTPS로 보내는 방법

웹팩 모듈식 관리 및 패키징 도구를 사용하는 방법

위 내용은 ES6 클래스를 사용하여 Vue를 모방하여 양방향 바인딩 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!