如何在vue项目中实现数据双向绑定-创新互联
这篇文章给大家介绍如何在vue项目中实现数据双向绑定，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
在宜城等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站制作、
成都外贸网站建设 网站设计制作定制开发,公司网站建设,企业网站建设,
高端网站设计,
全网营销推广,
外贸网站制作,宜城网站建设费用合理。
1.vue中数据的双向绑定采用的时候，数据劫持的模式。其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter。这也正是Vue不兼容IE8以下的原因。
2.Object.defineProerty();
var obj = {};
Object.defineProperty(obj,"hello",{
enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举);
configurable: true, //表示这个属性能否用 delete 删除
get(){ //获取属性值，说白了就是返回值
return this.val;
},
set(newVale){ //对属性的处理 (说白了: 就是在赋值的过程中提供一个方法来决定返回值)
this.val = newVale + 5;
console.log(this.val); // 10
}
})
obj.hello = 5;
console.log(obj.hello) ; // 103.实现简单的双向绑定
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)
这种方式简单粗暴，直接通过操作DOM完成绑定。我想，肯定有人会认为，你这样写，还不如在input事件中直接对Id为B的DOM元素赋值，这样不是多此一举吗？请看下面在框架中我们该如何实现。
4.实现简单的 v-model
首先我们需要获取文档中的真实元素节点也就是VUE中实列话VUE中元素挂载点(el);在通过createDocumentFragment创建文档碎片，解析操作完毕后，把碎片放置在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);
// 将所有子节点添加到fragment中，child是指向元素首个子节点的引用。
// 将child引用指向的对象append到父对象的末尾，原来child引用的对象就跳到了frag对象的末尾，
// 而child就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了
}
return frag;
},
moelElement: function(node, vm) {
var reg = /\{\{(.*)\}\}/; //匹配 {{}} () 获取匹配到的值
//节点类型为元素
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) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm.data[name]= e.target.value;
});
node.value = vm.data[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
};
}
//节点类型为text
if(node.nodeType === 3) {
if(reg.test(node.nodeValue)) {
var name = RegExp.$1; // 获取匹配到的字符串 () 正则中的分组。通过$1获取第一个分组
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'
}
});
关于如何在vue项目中实现数据双向绑定就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文题目：如何在vue项目中实现数据双向绑定-创新互联
网页路径：http://hxwzsj.com/article/dhohoi.html
