学习的过程是漫长的,只有坚持不懈才能到达到自己的目标。

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); //
}
})
obj.hello = 5;
console.log(obj.hello) ; //

3.实现简单的双向绑定

<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; //
}
}); document.getElementById(`a`).addEventListener(`input`,function(event){
var text = event.target.value; //
obj.value = text;
},false) </script>

这种方式简单粗暴,直接通过操作DOM完成绑定。我想,肯定有人会认为,你这样写,还不如在input事件中直接对Id为B的DOM元素赋值,这样不是多此一举吗?请看下面在框架中我们该如何实现。

4.实现简单的  v-model

首先我们需要获取文档中的真实元素节点也就是VUE中实列话VUE中元素挂载点(el);在通过createDocumentFragment创建文档碎片,解析操作完毕后,把碎片放置在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);
// 将所有子节点添加到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'
}
});
</script>

到这里主要是学习了VUE中对指令的处理。到这儿你就可以添加只自定义的指令了。同时也明白自定义指令是如何实现的了。当然数据的双向绑定是还没有实现的。


vue中的数据双向绑定的更多相关文章

  1. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  2. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  3. 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题

    问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...

  4. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  5. vue 父子组件数据双向绑定

    父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...

  6. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  7. 数据双向绑定页面无反应(angularjs)

    问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...

  8. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. RTTI(运行时类型识别)

    C++为了能够在运行时正确判断一个对象确切的类型,加入了RTTI和type_info. type_info 为每一个类型增加一个type_info对象. 为了能够在运行时获得对象的类型信息type_i ...

  2. MFC 消息映射、分派和传递

    几个重要的结构体: struct AFX_MSGMAP { AFX_MSGMAP* pBaseMessageMap; AFX_MSGMAP_ENTRY* lpEntries; } struct AFX ...

  3. java四舍五入

    package com.clzhang.sample; import java.math.BigDecimal; import java.math.RoundingMode; import java. ...

  4. Ubuntu18.04安装Python3.6.8

    Ubuntu18.04预装了Python3.6.5 终于不再预装Python2.7了 但是系统预装的Python分散安装在各个目录里 以后改起来非常不方便 所以本次安装Python3.6.8 Pyth ...

  5. ETSI公布的多接入移动边缘计算概念验证

    ETSI多接入移动边缘计算 公布的概念验证如下: 来源 MEC PoC Projects PoC#1: "Video User Experience Optimization via MEC ...

  6. valgrind使用简介

    1.问题 虽然C/C++是一种非常有用且功能强大的语言,但很难调试. 某些时候可能遇到内存错误. 如果知道出错 ,或者程序一直崩溃,我们可以用gdb/DBX去调试. 但是,有时遇到的问题是由于内存错误 ...

  7. 【坚持】Selenium+Python学习之从读懂代码开始 DAY4

    2018/05/21 [生成器详解:廖雪峰的官方网站](https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d ...

  8. Centos 7 安装Zabbix

    一.环境准备与说明: 1.zabbix server 版本:3.4.12 ,https://www.zabbix.com/download 2.zabbix agent版本:3.4.14,https: ...

  9. 论文笔记:分形网络(FractalNet: Ultra-Deep Neural Networks without Residuals)

    FractalNet: Ultra-Deep Neural Networks without Residuals ICLR 2017 Gustav Larsson, Michael Maire, Gr ...

  10. AS的使用技巧

    title: AS的使用技巧 date: 2016-04-01 23:34:11 tags: [AndroidStudio] categories: [Tool,IDE] --- 概述 本文记录如何使 ...