单项数据流

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="app">
<input type="text" v-model="msg">
{{msg}}

</div>
<script>
//先判断作用域内部是否有子元素
function isChild(node){
if(node.childNodes.length===0){
return false
}
else{
return node
}
}
//将节点加入文档碎片
function nodeToFragment(node,vm){
var frag= document.createDocumentFragment();
var child;
while(child = node.firstChild){
//开始赋值
compile(child,vm);
if(isChild(child)){
//判断子节点内部的子节点
nodeToFragment(isChild(child),vm)
}
frag.appendChild(child)

        }
        node.appendChild(frag);
        //将碎片在加入作用域
    }
    function compile(node,vm){
        if(node.nodeType === 1){
            //如果节点为元素
             var attr = node.attributes;  
             //获取该元素的属性          
            for(var i=0;i<attr.length;i++){
                //获取自定义属性 v-model
                if(attr[i].nodeName === 'v-model'){
                    //获取值 则为 data.属性名 v-model="msg"中的msg  
                    var name = attr[i].nodeValue;
                   
                    //该元素的 值为app 中data 的
                    node.value=vm.data[name];
                    //使用后删除该属性
                    node.removeAttribute(attr[i].nodeName)
                }
            }
        }
          if(node.nodeType === 3){

            //如果为文本 进行正则判断

            var reg = /\{\{(.*)\}\}/;
       
        if(reg.test(node.nodeValue.trim())){
            
            //将正则匹配到的{{}}中的字符串赋值给name

            var name = RegExp.$1;
            
            //利用name对应赋值相应的节点值

            node.nodeValue = vm.data[name];
           
        }
    }
}
    
     
        function Vue(options){
           //封装一个vue
            this.id=options.el;
            this.data=options.data;
            nodeToFragment(document.getElementById(this.id),this)
        }
        var vm=new Vue({
             //初始化一个vue 
            el:'app',
            data:{
                msg:'hello,two-ways-binding'
            }
        })
</script>
</body>

</html>

单项数据流

推荐阅读更多精彩内容