vue基础Dom 最后页面在浏览器里显示的是 张三
这个过程使用的模板渲染
<body>
<div id="root">
<p>{{name}}</p>
</div>
<script>
var app = new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>
</body>
下面根据vue模板渲染的原理 用js简单实现
vue模板渲染时的执行流程
- 获得模板 此时模板带有坑>指上文的{{name}}
- 利用vue构造函数里的数据来填坑 > 指app里提供的data数据 最后生成可以在页面显示的‘标签’
- 将最后生成的标签替换到原来 带有坑的标签
<body>
<div id="root">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<script>
// 1.获得模板
var tmpNode = document.getElementById('root');
// 2.提供数据
let data = {
name:'李四',
age:22
}
// 3.将数据放进模板中 方式:递归 算法
function compiler(template,data){
let childNodes = template.childNodes; //获取子元素
for(let i = 0;i<childNodes.length;i++){
let type = childNodes[i].nodeType; // 1 代表元素 3 文本节点
if(type == 3){
// 3文本节点 判断里面是否有{{}}插值
let tex = childNodes[i].nodeValue; // 该属性只有文本节点才有意义
//判断有没有 {{}}
tex = tex.replace(brackets,function(_,g){
let key = g.trim(); //写在花括号里的内容
let value = data[key];
//将花括号里的值 用这个值替换
return value
})
childNodes[i].nodeValue = tex
}else if(type == 1){
//1.代表元素,进行递归
compiler(childNodes[i],data)
}
}
}
//括号的正则表达式
let brackets = /\{\{(.+?)\}\}/g;
// 利用模板生成一个需要被渲染的html标签 .cloneNode(true)深拷贝
let generateNode = tmpNode.cloneNode(true)
compiler(generateNode,data)
//4.将渲染好的html放到页面当中 模板被保留
root.parentNode.replaceChild(generateNode,root)
</script>
</body>
上边就简单的实现了 vue 中的模板渲染。不断学习中。