コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 クラスを使用して Vue を模倣し、双方向バインディングの例を作成する

ES6 クラスを使用して Vue を模倣し、双方向バインディングの例を作成する

不言
リリース： 2018-06-30 17:21:18
オリジナル
1716 人が閲覧しました

この記事では主に、ES6 クラスを使用して Vue を模倣して双方向バインディングのサンプルコードを記述する方法を紹介します。内容が非常に優れているので、参考として共有します。

この記事では、ES6 クラスを使用して Vue を模倣し、双方向バインディングのサンプル コードを作成し、全員と共有する方法を紹介します。詳細は次のとおりです。

最終的な効果は次のとおりです。 Constructor (コンストラクター)

Construction 基本的な 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 (compile)

は、入力ボックスとドロップダウン ボックスにバインドされた 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)())
})
ログイン後にコピー

View updater ( updater)

同様に、まず、input、textarea 値、select 値、p の 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を更新

ここでの実装方法は少し低めで、定期的な置き換えしか考えていません{{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])
  })
 }
})
ログイン後にコピー

リスナー(ウォッチャー)

データ変更後にビューを更新

<p id="app">
 <input type="text" v-model="text1"><br>
 <input type="text" v-model="text2"><br>
 <textarea type="text" v-model="text3"></textarea><br>
 <button @click="add">加一</button>
 <h1>您输入的是：{{text1}}+{{text2}}+{{text3}}</h1>
 <select v-model="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
 </select>
 <select v-model="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
 </select>
 <h1>您选择了：{{select}}</h1>
</p>
<script src="./TinyVue.js"></script>
<script>
 let app = new TinyVue({
  el: &#39;#app&#39;,
  data: {
   text1: 123,
   text2: 456,
   text3: &#39;文本框&#39;,
   select: &#39;saab&#39;
  },
  methods: {
   add() {
    this.text1 ++
    this.text2 ++
   }
  }
 })
</script>
ログイン後にコピー
TinyVue Allコード
class TinyVue{
 constructor({el, data, methods}){
  this.$data = data
  this.$el = document.querySelector(el)
  this.$methods = methods
  this._compile()
  this._updater()
  this._watcher()
 }
 _watcher(data = this.$data) {
  let that = this
  Object.keys(data).forEach(i => {
   let value = data[i]
   Object.defineProperty(data, i, {
    enumerable: true,
    configurable: true,
    get: function () {
     return value;
    },
    set: function (newVal) {
     if (value !== newVal) {
      value = newVal;
      that._updater()
     }
    }
   })
  })
 }
 _initEvents(el, attr, callBack) {
  this.$el.querySelectorAll(el).forEach(i => {
   if(i.hasAttribute(attr)) {
    let key = i.getAttribute(attr)
    callBack(i, key)
   }
  })
 }
 _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)
   }
  })
 }
 _updater() {
  this._initView(&#39;input, textarea&#39;, &#39;v-model&#39;, (i, key, data) => {
   i.value = data
  })
  this._initView(&#39;select&#39;, &#39;v-model&#39;, (i, key, data) => {
   i.querySelectorAll(&#39;option&#39;).forEach(v => {
    if(v.value == data) v.setAttribute(&#39;selected&#39;, true)
    else v.removeAttribute(&#39;selected&#39;)
   })
  })
  let regExpInner = /\{{ *([\w_\-]+) *\}}/g
  this.$el.querySelectorAll("*").forEach(i => {
   let replaceList = i.innerHTML.match(regExpInner) || (i.hasAttribute(&#39;vueID&#39;) && i.getAttribute(&#39;vueID&#39;).match(regExpInner))
   if(replaceList) {
    if(!i.hasAttribute(&#39;vueID&#39;)) {
     i.setAttribute(&#39;vueID&#39;, i.innerHTML)
    }
    i.innerHTML = i.getAttribute(&#39;vueID&#39;)
    replaceList.forEach(v => {
     let key = v.slice(2, v.length - 2)
     i.innerHTML = i.innerHTML.replace(v, this.$data[key])
    })
   }
  })
 }
 _compile() {
  this._initEvents(&#39;*&#39;, &#39;@click&#39;, (i, key) => {
   i.addEventListener(&#39;click&#39;, () => this.$methods[key].bind(this.$data)())
  })
  this._initEvents(&#39;input, textarea&#39;, &#39;v-model&#39;, (i, key) => {
   i.addEventListener(&#39;input&#39;, () => {
    Object.assign(this.$data, {[key]: i.value})
   })
  })
  this._initEvents(&#39;select&#39;, &#39;v-model&#39;, (i, key) => {
   i.addEventListener(&#39;change&#39;, () => Object.assign(this.$data, {[key]: i.options[i.options.selectedIndex].value}))
  })
 }
}
ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue2.0 マルチタブ切り替えコンポーネントのパッケージ化の紹介

Vue フォームデモ v-model 双方向バインディングの問題について

以上がES6 クラスを使用して Vue を模倣し、双方向バインディングの例を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
class es6 双方向バインディング バインディング
ソース：php.cn
前の記事：Vue2.0 マルチタブ切り替えコンポーネントのカプセル化の概要 次の記事：パスから # 記号を削除する Vue メソッド
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2052
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2206
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1862
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1749
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1772
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート