1.vue中數(shù)據(jù)的雙向綁定采用的時(shí)候,數(shù)據(jù)劫持的模式。其實(shí)主要是用了Es5中的Object.defineProperty;來(lái)劫持每個(gè)屬性的getter,和setter。這也正是Vue不兼容IE8以下的原因。
2.Object.defineProerty();
var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示這個(gè)屬性能夠通過(guò) for -- in 循環(huán) (是否可枚舉); configurable: true, //表示這個(gè)屬性能否用 delete 刪除 get(){ //獲取屬性值,說(shuō)白了就是返回值 return this.val; }, set(newVale){ //對(duì)屬性的處理 (說(shuō)白了: 就是在賦值的過(guò)程中提供一個(gè)方法來(lái)決定返回值) this.val = newVale + 5; console.log(this.val); // 10 } }) obj.hello = 5; console.log(obj.hello) ; // 103.實(shí)現(xiàn)簡(jiǎn)單的雙向綁定
<input type="text" id="a"><div id="b"></div><script type="text/javascript"> var obj = {}; Object.defineProperty(obj,`value`,{ enumerable: true, configurable: true, get(){ return this.val; }, set(newValue){ document.getElementById(`b`).innerText = newValue; this.val = newValue; //66 } }); document.getElementById(`a`).addEventListener(`input`,function(event){ var text = event.target.value; //66 obj.value = text; },false)</script>這種方式簡(jiǎn)單粗暴,直接通過(guò)操作DOM完成綁定。我想,肯定有人會(huì)認(rèn)為,你這樣寫(xiě),還不如在input事件中直接對(duì)Id為B的DOM元素賦值,這樣不是多此一舉嗎?請(qǐng)看下面在框架中我們?cè)撊绾螌?shí)現(xiàn)。
4.實(shí)現(xiàn)簡(jiǎn)單的 v-model
首先我們需要獲取文檔中的真實(shí)元素節(jié)點(diǎn)也就是VUE中實(shí)列話VUE中元素掛載點(diǎn)(el);在通過(guò)createDocumentFragment創(chuàng)建文檔碎片,解析操作完畢后,把碎片放置在DOM中。
<div id="app"> <input type="text" id="a" v-model="text"> {{text}}</div> <script type="text/javascript"> function Model(node, vm) { if(node) {this.$frag = this.nodeToFragment(node, vm); return this.$frag; } } Model.prototype = { construtor:'Model', nodeToFragment: function(node, vm) { var self = this; var frag = document.createDocumentFragment(); var child; while(child = node.firstChild) { self.moelElement(child, vm); frag.appendChild(child); // 將所有子節(jié)點(diǎn)添加到fragment中,child是指向元素首個(gè)子節(jié)點(diǎn)的引用。// 將child引用指向的對(duì)象append到父對(duì)象的末尾,原來(lái)child引用的對(duì)象就跳到了frag對(duì)象的末尾,// 而child就指向了本來(lái)是排在第二個(gè)的元素對(duì)象。如此循環(huán)下去,鏈接就逐個(gè)往后跳了 } return frag; }, moelElement: function(node, vm) { var reg = //{/{(.*)/}/}/; //匹配 {{}} () 獲取匹配到的值 //節(jié)點(diǎn)類(lèi)型為元素 if(node.nodeType === 1) { var attr = node.attributes; // 解析屬性 for(var i = 0; i < attr.length; i++ ) { if(attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名 node.addEventListener('input', function(e) { // 給相應(yīng)的data屬性賦值,進(jìn)而觸發(fā)該屬性的set方法 vm.data[name]= e.target.value; }); node.value = vm.data[name]; // 將data的值賦給該node node.removeAttribute('v-model'); } }; } //節(jié)點(diǎn)類(lèi)型為text if(node.nodeType === 3) { if(reg.test(node.nodeValue)) { var name = RegExp.$1; // 獲取匹配到的字符串 () 正則中的分組。通過(guò)$1獲取第一個(gè)分組 name = name.trim(); node.nodeValue = vm.data[name]; // 將data的值賦給該node } } }, } function Vue(options) { this.data = options.data; var data = this.data; var id = options.el; var dom =new Model(document.getElementById(id),this); // 編譯完成后,將dom返回到app中 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } });</script>到這里主要是學(xué)習(xí)了VUE中對(duì)指令的處理。到這兒你就可以添加只自定義的指令了。同時(shí)也明白自定義指令是如何實(shí)現(xiàn)的了。當(dāng)然數(shù)據(jù)的雙向綁定是還沒(méi)有實(shí)現(xiàn)的。
以上所述是小編給大家介紹的vue中的數(shù)據(jù)雙向綁定,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注