Vue v-model 双向数据绑定

Vue 双向数据绑定 

即双向的  数据到页面 和 页面到数据（页面的表单数据 文本域等）
实现一个简单的数据双向绑定
使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值，即可实现这样的一个简单的数据双向绑定
  <input type="text" id="textInput">
  输入：<span id="textSpan"></span>
  <script>
    var obj = {},
        textInput = document.querySelector('#textInput'),
        textSpan = document.querySelector('#textSpan');

    Object.defineProperty(obj, 'foo', {
      set: function (newValue) {
        textInput.value = newValue;
        textSpan.innerHTML = newValue;
      }
    });

    textInput.addEventListener('keyup', function (e) {
        obj.foo = e.target.value;
    });
  </script>
实现过程
输入框以及文本节点与 data 中的数据绑定
输入框内容变化时，data 中的数据同步变化。即 view => model 的变化
data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化
v-model 
<div>
    <input type="text" v-model='msg'>
</div>
F12调试 输入框中可以修改数据  数据也修改可以修改页面