VUE的核心原理

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="span"></div>
<input type="text" id="input">
<input type="text" id="input2">
</body>
<script>
///JS的defineProperty属性的作用是 改变对象属性
// defineProperty('obj','text2','{ }');
// 第一个 obj 传入的对象
//第二个 text2 对象的属性 obj 对象拥有的text2属性
//第三个 数据描述符和存取描述符 enumerable: false, configurable: false,

//writable: false, value: "static" 和set() get() 两者只能存在其1 get 一定要return 出结果

var obj = {};
Object.defineProperty(obj, 'text2', {
get: function () {
return value;
},
set: function (newvalue) {
//接收input 里传来的值 给value
value = newvalue
document.getElementById('span').textContent = newvalue;
document.getElementById('input').value = newvalue;
}
});
//监听键盘的弹起事件
document.getElementById('input').addEventListener('keyup', function (e) {
console.log(e);
console.log(e.target);
console.log(e.target.value);
//赋值给 obj对象属性
obj.text2 = e.target.value;
});

</script>
</html>
原文地址:https://www.cnblogs.com/shenbo666/p/10043560.html