在实现双向数据绑定的之前，先来实现单向数据绑定，首先，我们的HTML结构如下图所示。
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
<ul>
<li>1</li>
<li>{{msg}}</li>
<li>{{test}}</li>
</ul>
</div>
接下来就是在JS里面实现单向数据绑定了，不管怎么样，我们就像Vue一样，直接来创建个Vue实例化对象。
new Vue({
el:"app",
data:{
msg:"hello world",
test:"单向绑定"
}
});
而此时根本就没有Vue这个类，所以下一步直接来创建这个类，在这个类当中，我们将传递过来的el属性值赋值给id（该例中以id为例），并且也用一个data来保存传递过来的data信息。
function Vue(options){
this.id=options.el;
this.data=options.data;
}
好了，那么下一步的问题就是如何实现单向数据绑定的问题了，在Vue当中，我们可以通过v-model这样的属性名或者{{}}的形式来进行绑值操作，很显然，我们是需要依次获取到整个id为app标签下的所有node节点，当其是元素节点的时候，就要查看其属性名是否含有v-model，如果有，根据其设置的value值对应的去Vue实例化对象的data属性中查找并赋值；当其是文本节点的时候，就需要匹配{{}}里面的内容，然后同上操作。
为了讲解方便，就先来实现根据节点所属类别来进行赋值操作的方法，该方法需要两个参数，一个参数为当前的节点，一个为实例化的Vue对象。
function compile(node,vm){
//当node节点为元素节点时
if(node.nodeType === 1){
var attr=node.attributes;
//遍历当前节点的所有属性
for(let [i,v] of [].entries.call(attr)){
if(v.nodeName=="v-model"){
var name=v.nodeValue;
node.value=vm.data[name];
node.removeAttribute(v.nodeName);
}
}
}
//当node节点为文本节点时
if(node.nodeType === 3){
var reg=/\{\{(.*)\}\}/;
if(reg.test(node.nodeValue.trim())){
var name=RegExp.$1;
node.nodeValue=vm.data[name];
}
}
}
然后很重要的一步就是获取到id为app元素节点下的所有节点，调用刚刚封装好了的compile方法即可，那么如何来获取到这所谓的所有节点呢？小伙伴们可能一下子就想到了节点属性上有一个childNodes，然后循环这里的每一项，如果该项存在着子节点的话，可以递归调用该方法，emm，听起来很有道理的感觉，代码如下图所示。
但是这么运行起来的时候结果并没有达到预期的效果，问题出现在哪了呢？说实话，我也踩了一下这个坑，思考了一下才反应过来，这主要是由于DOM映射导致的，我们可以试着打印出循环的结果，可以发现只打印出了4次，而并没有将里面的7项都给输出，至于DOM映射机制在本篇文章当中就不进行过多的介绍，详情可百度或参考我的个人博客。
既然知道了是DOM映射导致的问题，那么又该如何去解决呢，其实很简单，在存在DOM映射的情况下，每一次node.childNodes的长度都会减一，并且去除的这一个正好是之前数组的第一项，故而我们只需要每一次拿到node.childNodes的第一项就可以了。
那么除了for循环实现方式以外，有没有其它更好的实现方式呢，答案是有的，还是类似的逻辑，我们可以用while来代替for循环，只要我们的node存在第一个子节点（firstChild）就可以了。
好了，到此为止，咱们就实现了单向数据绑定的操作，下一篇咱们再深入去实现双向数据绑定的骚操作吧！
