首页 ›存档› 技术 › 查看内容

【北京第九十一期】js双向数据绑定原理

2018-3-30 13:00 |来自: 互联网 319 0

摘要: 1.背景介绍- angular双向绑定介绍定义：在Angular网页应用中，数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式 ...

1.背景介绍-

angular双向绑定介绍

定义：在Angular网页应用中，数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时，视图就能反映这种改变，反之亦然。

angular编译的是视图（DOM），而不是模板

模板：指未经编译的附加了标记和指令的HTML
模型：用于展示数据或交互的变量
视图：最终渲染出来的页面

2.知识剖析

anguar双向绑定的过程

从DOM到model：绑定事件

从model到DOM：angular监听model，然后使用指令系统修改DOM

7.参考文献

1.双向数据绑定

文本链接：http://jnshu.com/daily/21372?uid=6039

视频链接：https://v.qq.com/x/page/j0396nv0wow.html

ppt链接：https://ptteng.github.io/PPT/PPT/js-09-two-way-data-binding.html#/

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 <span id="email-placeholder">[邮箱地址]</span> 删除 </div> <script> (function() { // 邮箱地址使用 Base64 编码伪装，防止爬虫直接抓取 var encodedEmail = "YWRtaW5AaGFja2Jhc2UubmV0"; // admin@hackbase.net 的 Base64 编码 var email = atob(encodedEmail); // 解码得到真实邮箱 var container = document.getElementById("email-placeholder"); if (container) { container.textContent = email; } })(); </script> </td></tr> </table> <div id="diycontentbottom" class="area"></div> <script src="data/cache/home.js?zj6" type="text/javascript"></script> <div id="click_div"><table cellpadding="0" cellspacing="0" class="atd"> <tr><td> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=click&op=add&clickid=1&idtype=aid&id=231811&hash=c27c2a64735c4c0930d5f4c30043d867&handlekey=clickhandle" id="click_aid_231811_1" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/luguo.gif" alt="" /><br />路过</a> </td> <td> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=click&op=add&clickid=2&idtype=aid&id=231811&hash=c27c2a64735c4c0930d5f4c30043d867&handlekey=clickhandle" id="click_aid_231811_2" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/leiren.gif" alt="" /><br />雷人</a> </td> <td> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=click&op=add&clickid=3&idtype=aid&id=231811&hash=c27c2a64735c4c0930d5f4c30043d867&handlekey=clickhandle" id="click_aid_231811_3" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/woshou.gif" alt="" /><br />握手</a> </td> <td> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=click&op=add&clickid=4&idtype=aid&id=231811&hash=c27c2a64735c4c0930d5f4c30043d867&handlekey=clickhandle" id="click_aid_231811_4" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/xianhua.gif" alt="" /><br />鲜花</a> </td> <td> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=click&op=add&clickid=5&idtype=aid&id=231811&hash=c27c2a64735c4c0930d5f4c30043d867&handlekey=clickhandle" id="click_aid_231811_5" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/jidan.gif" alt="" /><br />鸡蛋</a> </td> </tr> </table> <script type="text/javascript"> function errorhandle_clickhandle(message, values) { if(values['id']) { showCreditPrompt(); show_click(values['idtype'], values['id'], values['clickid']); } } </script> </div> <div id="diycontentclickbottom" class="area"></div> </div> <div class="o cl ptm pbm"> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=favorite&type=article&id=231811&handlekey=favoritearticlehk_231811" id="a_favorite" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr ofav">收藏</a> <a href="https://www.hackbase.net/home.php?mod=spacecp&ac=share&type=article&id=231811&handlekey=sharearticlehk_231811" id="a_share" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr">分享</a> <a href="misc.php?mod=invite&action=article&id=231811" id="a_invite" onclick="showWindow('invite', this.href, 'get', 0);" class="oshr oivt">邀请</a> </div> <div class="pren pbm cl"> <em>上一篇：<a href="https://www.hackbase.net/techdoc/tech/231810.html">【君实PD-1招募10】考察JS001在标准治疗失败后的膀胱尿路上皮癌患者中的有效性和安全 ...</a></em><em>下一篇：<a href="https://www.hackbase.net/techdoc/tech/231812.html">周三 | 这些公司的福利待遇极好，来看看 | 中国移动通信研究院/中国电信北研院等</a></em></div> </div> <div id="diycontentrelatetop" class="area"></div> <div id="diycontentrelate" class="area"></div> <div id="diycontentcomment" class="area"></div> </div> <div class="sd pph"> <div class="drag"> <div id="diyrighttop" class="area"></div> </div> <div class="bm"> <div class="bm_h cl"> <h2>相关分类</h2> </div> <div class="bm_c"> <ul class="xl xl2 cl"><li><a href="https://www.hackbase.net/techdoc/info/">资讯</a></li> <li><a href="https://www.hackbase.net/techdoc/tech/">技术</a></li> </ul> </div> </div> <div class="drag"> <div id="diy2" class="area"></div> </div> </div> </div> <div class="wp mtn"> <div id="diy3" class="area"></div> </div> <input type="hidden" id="portalview" value="1"></div> <div id="ft" class="footer cl"> <div class="wp"> <div id="flk" class="y"> <p> <a href="https://www.hackbase.net/forum.php?mod=misc&action=showdarkroom" >黑名单</a><span class="pipe">|</span><a href="https://www.hackbase.net/archiver/" >存档</a><span class="pipe">|</span><a href="https://www.hackbase.net/forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><a href="sitemap.html" target="_blank" >网站地图</a><span class="pipe">|</span><a href="exemption.html" target="_blank" >免责条款</a><span class="pipe">|</span><a href="legal.html" target="_blank" >法律声明</a><span class="pipe">|</span><a href="privacy.html" target="_blank" >隐私保护</a><span class="pipe">|</span><strong><a href="https://www.hackbase.net" target="_blank">HACKBASE</a></strong> </p> <p class="xs0"> GMT+8, 2026-6-6 18:49<span id="debuginfo"> </span> </p> </div> <div id="frt"> <p>Powered by <strong><a href="https://www.discuz.vip/" target="_blank">Discuz!</a></strong> </p> </div></div> </div> <script src="home.php?mod=misc&ac=sendmail&rand=1780742950" type="text/javascript"></script> <div id="scrolltop"> <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span> </div> <script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script> </body> </html>