<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1> {
{ name }} </h1>
{
{name}}
</div>
<script>
const app = new Vue({
el: '#app',
data: {
name: '温情key'
}
})
</script>
</body>
</html>
解析前页面显示
vue是如何解析成我们定义data所对应的值
class Vue {
constructor(options) {
this.$el = document.querySelector(options.el);
this.$data = options.data;
this.compile(this.$el);
};
compile(node) {
node.childNodes.forEach((item, index) => {
if(item.nodeType === 1) {
if(item.childNodes.length > 0) {
this.compile(item);
}
}
if(item.nodeType === 3) {
let reg = /\{\{(.*?)\}\}/g;
let text = item.textContent;
item.textContent = text.replace(reg, (match, vmKey) => {
vmKey = vmKey.trim();
return this.$data[vmKey];
})
}
})
};
}
解析后页面显示