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) ;  // 10

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;  //66
        }
    });

    document.getElementById(`a`).addEventListener(`input`,function(event){
        var text = event.target.value; //66
        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中對指令的處理。到這兒你就可以添加只自定義的指令了。同時也明白自定義指令是如何實現的了。當然數據的雙向綁定是還沒有實現的。