Home > Web Front-end > JS Tutorial > body text

Research on the principle of two-way data binding in Vue

高洛峰
Release: 2017-01-20 10:17:16
Original
1946 people have browsed it

The idea of ​​two-way binding

The idea of ​​two-way data binding is the synchronization of the data layer and the UI layer. When either one of the two changes, the data will be synchronously updated to the other.

Some methods of two-way binding

Currently, there are roughly three ways to implement two-way data binding on the front end:

1. Publisher-subscriber model ( backbone.js)

Idea: Use custom data attributes to specify binding in HTML code. All bound JavaScript objects and DOM elements will be "subscribed" to a publisher object. Any time a JavaScript object or an HTML input field is detected to have changed, we will delegate the event to the publisher-subscriber pattern, which in turn will broadcast and propagate the change to all bound objects and elements.

2. Stolen value detection (angular.js)

Idea: Detect data changes through polling. Only when a specific event is triggered will the stolen value detection be entered.

Approximately as follows:

• DOM events, such as users entering text, clicking buttons, etc. (ng-click)

• XHR response event ($http)

• Browser Location change event ($location)

• Timer event ($timeout, $interval )

• Execute $digest() or $apply()

3. Data hijacking (vue.js)

Idea: Use Object.defineProperty to make attributes on the data object The monitoring of get and set calls the node's instructions when there are data reading and assignment operations, so that the most common = equal sign assignment can be triggered.

Wue two-way data binding small demo idea

① Construct a Wue object, define the properties el and data of the object, pass the corresponding data when creating the object, and execute the init() method.

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};
Copy after login

② The bindText and bindModel methods are executed in the Init method. These two methods are to parse the html bound to the w-model and w-text instructions in the dom and process them accordingly. .

init:function(){
  this.bindText();
  this.bindModel();
 }
Copy after login

③ bindText method, put the elements with w-text directive into an array, such as: w-text='demo', and then make the value of innerHTML equal to the passed Incoming data[demo].

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }
Copy after login

④ bindModel method, put elements with w-model instructions (generally form-related elements) into an array, such as: w-model='demo', for Each element is bound to the keyup event (compatible with browser writing).

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll(&#39;[w-model]&#39;),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }
 }
}
Copy after login

⑤ Use Object.defineProperty to define the set and get methods, and call the bindText method in the set method. This is used once the value of w-model is changed in the input, the set method will be automatically executed, so only the method of updating w-text can be called in this method.

defineObj:function(obj,prop,value){
  var val=value||&#39;&#39;;
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
  
  }catch (err){
  console.log(&#39;Browser not support!&#39;)
  }
 }
Copy after login

⑥Use

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model=&#39;demo&#39;>
 <h5 w-text=&#39;demo&#39;></h5>
</div><br>js:
 <script src=&#39;../js/wue.js&#39;></script>
 <script>
 new Wue({
 el:&#39;#wrap&#39;,
 data:{
  demo:&#39;winty&#39;
 }
 })
 </script>
Copy after login

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope that there will be more Support PHP Chinese website!

For more related articles exploring the principles of vue two-way data binding, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!