vue的核心思想
1,数据驱动
2，组件化
利用原生js实现vue的双向绑定思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data bidirectional binding</title>
</head>
<body>
<input type="text" id="userName">
<span id="uName"></span>
</body>
<script>
var obj = {};
Object.defineProperty(obj, 'userName', {
set: function (val) {
console.log('set init');
document.querySelector('#uName').innerText = val;
document.querySelector('#userName').value = val;
},
get: function () {
}
});
document.querySelector('#userName').addEventListener('keyup',function () {
obj.userName = document.querySelector('#userName').value;
});
</script>
</html>