微信小程序开发案例_vue双向数据绑定原理根究(附demo)

  • 栏目:公司新闻 时间:2021-01-12 15:03 分享新闻到:
<返回列表

vue双向数据绑定原理探究(附demo)       本文主要介绍了vue双向数据绑定的原理,文章结尾附上完整demo下载。具有一定的参考价值,下面跟着小编一起来看下吧

昨天被导师叫去研究了一下vue的双向数据绑定原理。。。本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊。。。自己动手写了一个。

双向绑定的思想

双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者。

双向绑定的一些方法

目前,前端实现数据双向数据绑定的方法大致有以下三种:

1.发布者-订阅者模式(backbone.js)

思路:使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。

2.赃值检测(angular.js)

思路:通过轮询的方式检测数据变动。才特定的事件触发时进入赃值检测。

大致如下:

  DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

  XHR响应事件 ( $http )

  浏览器Location变更事件 ( $location )

  Timer事件( $timeout , $interval )

  执行 $digest() 或 $apply()

3.数据劫持(vue.js)

思路:使用Object.defineProperty对数据对象做属性get和set的监听,当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以触发了。

wue双向数据绑定小demo思路

①  构造一个Wue对象,定义该对象的属性el、data,创建对象的时候传相应数据,并执行init()方法。

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

②  Init方法中执行bindText和bindModel方法,这两个方法分别是解析dom中绑定了w-model、w-text指令的html,并作相应处理。

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

③  bindText方法,把带有w-text指令的元素放进一个数组中,如:w-text='demo',然后令其innerHTML的值等于传进来的data[demo]。

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

④  bindModel方法,把带有w-model指令的元素(一般为form相关元素)放进一个数组中,如:w-model='demo',为每一个元素绑定keyup事件(兼容浏览器写法)。

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

⑤  使用Object.defineProperty,定义set和get方法,并在set方法中调用bindText方法。这是利用了一旦w-model的值在input中被改变,会自动执行set方法,所以只有在这个方法中调用更新w-text的方法即可。

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

⑥使用

html: br h3 双向数据绑定demo /h3 
 div id="wrap" 
 input type="text" w-model='demo' 
 h5 w-text='demo' /h5 
 /div br js:
 script src='../js/wue.js' /script 
 script 
 new Wue({
 el:'#wrap',
 data:{
 demo:'winty'
 /script 

完整demo下载:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


分享新闻到:

更多阅读

微信小程序开发案例_vue双向数据绑定原理

公司新闻 2021-01-12
vue双重数据信息关联基本原理研究(附demo) 昨日被老师叫去科学研究了一下vue的双重数据...
查看全文

广州凡科互联网科技股份有限公司招聘销

公司新闻 2021-01-11
招聘人数:6职位信息不是你的能力,决定了你的命运,而是你的决定,改变了你的命运。——...
查看全文

广州凡科互联网科技股份有限公司招聘网

公司新闻 2021-01-11
招聘人数:27职位信息工作内容:1.负责有赞渠道电商客户的拓展及维护。2.分析客户需求,结...
查看全文
返回全部新闻


区域站点: 南丰县一键生成h5   南宫市免费的h5页面制作工具官网   囊谦县h5答题   南和县h5游戏怎么制作   南华县一键生成h5   南江县免费的h5页面制作工具官网   南京市h5答题   南靖县h5游戏怎么制作   南康市一键生成h5   南乐县免费的h5页面制作工具官网   南陵县h5答题   南宁市h5游戏怎么制作   南平市一键生成h5   南皮县免费的h5页面制作工具官网   南市区h5答题   南通市h5游戏怎么制作   南投县一键生成h5   南雄市免费的h5页面制作工具官网   南溪县h5答题   南阳市h5游戏怎么制作   南漳县一键生成h5   南召县免费的h5页面制作工具官网   南郑县h5答题   那坡县h5游戏怎么制作   那曲县一键生成h5   纳雍县免费的h5页面制作工具官网   讷河市h5答题   内黄县h5游戏怎么制作   内江市一键生成h5   内丘县免费的h5页面制作工具官网   内乡县h5答题   嫩江市h5游戏怎么制作   聂荣县一键生成h5   尼玛县免费的h5页面制作工具官网   尼木县h5答题   宁安市h5游戏怎么制作   宁波市一键生成h5   宁城县免费的h5页面制作工具官网   宁德市h5答题   宁都县h5游戏怎么制作   宁国市一键生成h5   宁海县免费的h5页面制作工具官网   宁化县h5答题   宁晋县h5游戏怎么制作   宁陵县一键生成h5   宁明县免费的h5页面制作工具官网   宁南县h5答题   宁强县h5游戏怎么制作   宁陕县一键生成h5   宁武县免费的h5页面制作工具官网   宁乡市h5答题   宁阳县h5游戏怎么制作   宁远县一键生成h5   农安县免费的h5页面制作工具官网   磐安县h5答题   盘锦市h5游戏怎么制作   盘山县一键生成h5   磐石市免费的h5页面制作工具官网   盘州市h5答题   蓬安县h5游戏怎么制作   澎湖县一键生成h5   蓬莱市免费的h5页面制作工具官网   彭山县h5答题   蓬溪县h5游戏怎么制作   彭阳县一键生成h5   彭泽县免费的h5页面制作工具官网   彭州市h5答题   偏关县h5游戏怎么制作   平安县一键生成h5   平昌县免费的h5页面制作工具官网   平定县h5答题   屏东县h5游戏怎么制作   平度市一键生成h5   平果县免费的h5页面制作工具官网   平和县h5答题   平湖市h5游戏怎么制作   平江县一键生成h5   平乐县免费的h5页面制作工具官网   平凉市h5答题   平利县h5游戏怎么制作   平罗县一键生成h5   平陆县免费的h5页面制作工具官网   屏南县h5答题   平泉市h5游戏怎么制作   屏山县一键生成h5   平顺县免费的h5页面制作工具官网   平塘县h5答题   平潭县h5游戏怎么制作   平武县一键生成h5   萍乡市免费的h5页面制作工具官网   平乡县h5答题   平阳县h5游戏怎么制作   平遥县一键生成h5   平阴县免费的h5页面制作工具官网   平邑县h5答题   平远县h5游戏怎么制作   平舆县一键生成h5   皮山县免费的h5页面制作工具官网   普安县h5答题   浦北县h5游戏怎么制作   浦城县一键生成h5   普洱市免费的h5页面制作工具官网   普格县h5答题   浦江县h5游戏怎么制作   普兰县一键生成h5   普宁市免费的h5页面制作工具官网   莆田市h5答题   迁安市h5游戏怎么制作   乾安县一键生成h5   潜江市免费的h5页面制作工具官网   潜山市h5答题  

友情链接: 慕龙建筑 手机h5页面制作 中车集团 抽奖h5页面 h5建站 h5网站建设 手机版

Copyright © 2002-2020 h5答题_h5游戏怎么制作_一键生成h5_免费的h5页面制作工具官网_h5页面怎么制作 版权所有 (网站地图) 备案号:粤ICP备10235580号