communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Utilisez les classes ES6 pour imiter Vue et écrire un exemple de liaison bidirectionnelle

Utilisez les classes ES6 pour imiter Vue et écrire un exemple de liaison bidirectionnelle

不言
Libérer： 2018-06-30 17:21:18
original
1716 Les gens l'ont consulté

Cet article présente principalement comment utiliser les classes ES6 pour imiter Vue afin d'écrire un exemple de code de liaison bidirectionnelle. Le contenu est assez bon. Je vais le partager avec vous maintenant et le donner comme référence.

Cet article explique comment utiliser les classes ES6 pour imiter Vue afin d'écrire un exemple de code de liaison bidirectionnelle et de le partager avec tout le monde. Les détails sont les suivants :

L'effet final. est la suivante :

Constructeur (constructeur)

Construction d'un objet TinyVue, comprenant des éléments de base, des données et des méthodes 

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

Compilateur(compile)

est utilisé pour analyser l'événement click @click du v-model et de l'élément lié à la zone de saisie et boîte déroulante.

Créez d'abord une fonction pour charger l'événement : 

// 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)
  }
 })
}
Copier après la connexion

Charger l'événement de la zone de saisie

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

Charger l'événement de la zone de sélection

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

Charger l'événement de clic

L'événement de clic correspond à l'événement dans les méthodes

this._initEvents('*', '@click', (i, key) => {
 i.addEventListener('click', () => this.$methods[key].bind(this.$data)())
})
Copier après la connexion

Afficher le programme de mise à jour (updater)

De même, créez d'abord une fonction publique pour gérer les vues dans différents éléments, y compris l'entrée, la valeur de la zone de texte, la valeur de sélection, le HTML interne de p

_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)
  }
 })
}
Copier après la connexion

pour mettre à jour la vue de la zone de saisie 

this._initView('input, textarea', 'v-model', (i, key, data) => {
 i.value = data
})
Copier après la connexion

Mettre à jour la vue de la zone de sélection

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')
 })
})
Copier après la connexion

Mettre à jour innerHTML

La méthode d'implémentation ici est un peu faible, je ne pense qu'au remplacement régulier {{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])
  })
 }
})
Copier après la connexion

Listener (watcher)

Mettre à jour la vue après les modifications des données

<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>
Copier après la connexion

Code complet de TinyVue

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}))
  })
 }
}
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'emballage des composants de commutation multi-onglets Vue2.0

À propos de la démo du formulaire Vue v-model Problèmes avec la liaison bidirectionnelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
class es6 双向绑定 绑定
source：php.cn
Article précédent：Introduction à l'encapsulation du composant de commutation multi-onglets Vue2.0 Article suivant：Méthode Vue pour supprimer le signe # du chemin
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2052
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2206
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1862
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1749
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1772
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal