点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
let data ={
_data:{}
}
Reflect.defineProperty(data,'msg',{
get(){
return this._data.msg;
},
set(val){
this._data.msg = val;
updateView(this._data);
}
})
let dom = document.getElementById('app');
let tpl = dom.innerHTML;
function updateView(data){
let html = tpl.replace(/{{(\w+)}}/g,(match,$1)=>{
debugger
return data[$1] || "";
})
dom.innerHTML = html;
}
data.msg='hello';
</script>
</body>
</html>