Vue介紹
成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、閩清網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站制作、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為閩清等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
Vue是當(dāng)前很火的一款MVVM的輕量級框架,它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。因為它提供了簡潔易于理解的api,使得我們很容易上手。
Vue與MVVM
如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM,學(xué)習(xí)Vue.js時請先拋開手動操作DOM的思維,因為Vue.js是數(shù)據(jù)驅(qū)動的,你無需手動操作DOM。Vue以數(shù)據(jù)為驅(qū)動,將自身的Dom元素與數(shù)據(jù)進行綁定,一旦創(chuàng)建綁定,Dom和數(shù)據(jù)保持同步。
雙向綁定
主流雙向數(shù)據(jù)綁定實現(xiàn)原理
臟值檢測 : 這是AngularJS實現(xiàn)雙向數(shù)據(jù)綁定的方式。 原理是 當(dāng)數(shù)據(jù)進行變更的時候?qū)λ蠱odel和View的綁定關(guān)系進行一次檢查,識別是否有數(shù)據(jù)進行了變更,如果有變化則進行處理,由于可能進一步引發(fā)其他數(shù)據(jù)的改變,會再次循環(huán)這個過程,知道沒有數(shù)據(jù)的變化之后。發(fā)送數(shù)據(jù)到視圖重新渲染。 可想而知,這樣的方式性能不高。
單向數(shù)據(jù)綁定
指的是我們先把模板寫好,然后把模板和數(shù)據(jù)(數(shù)據(jù)可能來自后臺)整合到一起形成HTML代碼,然后把這段HTML代碼插入到文檔流里面。
單向數(shù)據(jù)綁定缺點:HTML代碼一旦生成完以后,就沒有辦法再變了,如果有新的數(shù)據(jù)來了,那就必須把之前的HTML代碼去掉,再重新把新的數(shù)據(jù)和模板一起整合后插入到文檔流中。 簡單的來說就是DOM操作直接改變
數(shù)據(jù)數(shù)據(jù)雙向
數(shù)據(jù)模型(Module)和視圖(View)之間的雙向綁定。
用戶在視圖上的修改會自動同步到數(shù)據(jù)模型中去,同樣的,如果數(shù)據(jù)模型中的值發(fā)生了變化,也會立刻同步到視圖中去。雙向數(shù)據(jù)綁定的優(yōu)點是無需進行和單向數(shù)據(jù)綁定的那CRUD(Create,Retrieve,Update,Delete)操作雙向數(shù)據(jù)綁定最經(jīng)常的應(yīng)用場景就是表單了,這樣當(dāng)用戶在前端頁面完成輸入后,不用任何操作,我們就已經(jīng)拿到了用戶的數(shù)據(jù)存放到數(shù)據(jù)模型中了。
如何使用js達到雙向數(shù)據(jù)綁定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="userName"> <br> <span id ="uName"></span> <script> var obj={ pwd:"1234" }; //主要使用到了get和set方法,最為關(guān)鍵 Object.defineProperty(obj,"userName",{ get:function(){ console.log('get init'); }, set:function(val){ console.log("set init"); document.getElementById("uName").innerText=val; document.getElementById("userNmae").value=val; } }); document.getElementById("userName").addEventListener("keyup",function(event){ obj.userName=event.target.value; } ) </script> </body> </html>
運行上述的dome,可以使用控制臺,obj.username=123賦值,會自動觸發(fā)set方法。若我們在控制臺使用obj.username拿值可以觸發(fā)get方法,這也就是vue的雙向數(shù)據(jù)綁定的核心點。
總結(jié)
以上所述是小編給大家介紹的輕松理解vue的數(shù)據(jù)雙向綁定問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
分享題目:輕松理解vue的雙向數(shù)據(jù)綁定問題
文章網(wǎng)址:http://muchs.cn/article46/pipshg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、App開發(fā)、域名注冊、移動網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)