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

<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>

<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)類型為元素
      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)類型為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>