如何在vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)雙向綁定
這篇文章給大家介紹如何在vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)雙向綁定，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
成都創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供章丘企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為章丘眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
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)單的雙向綁定
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)
這種方式簡(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í)列話(huà)VUE中元素掛載點(diǎn)(el);在通過(guò)createDocumentFragment創(chuàng)建文檔碎片，解析操作完畢后，把碎片放置在DOM中。
{{text}}
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'
}
});
關(guān)于如何在vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)雙向綁定就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
當(dāng)前標(biāo)題：如何在vue項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)雙向綁定
文章鏈接：http://weahome.cn/article/jjhdeg.html
重慶分公司
重慶分公司
