vue中数据驱动视图 主要是通过给对象定义特性来完成的
通过获取视图模板 更新视图模板 渲染数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 视图 -->
<div id="app">
<h1>{{msg}}--{{msg}}</h1>
</div>
<script type="text/javascript">
// 定义数据
var data = {
msg: '',
// 备份数据
_data: {}
};
// 获取视图
var view = document.getElementById('app');
// 第一次模板
var tpl = view.innerHTML;
// 想获知数据的属性改变，我们要定义特性
Object.defineProperty(data, 'msg', {
//这里的this指向是data对象
// 取值方法
get: function() {
// 从备份数据中，获取数据
return this._data.msg;
},
// 赋值方法
set: function(value) {
// 将value存储在备份数据中
this._data.msg = value;
// 更新数据
updateView(this._data)
// console.log(value)
}
})
// 更新视图
function updateView(data) {
// 在模板中匹配变量
var result = tpl.replace(/{{(\w+)}}/g, function(match, $0) {
// data中，获取$0对应属性名称数据，并返回
return data[$0]
})
// 更新视图
view.innerHTML = result;
}
data.msg = 'hello'
</script>
</body>
</html>
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
