数据的双向绑定
双向绑定指的是视图和数据两个之间双向绑定！
在页面中绑定两个或者多个元素，比如一个input框和一个p标签，当在input框输入值时，p标签也会自动更新文本。只关注数据的操作，减少对DOM的操作。
一、直接赋值
也就是将input框的值赋值给p标签的文本
html代码块
<p id="txt"></p>
<input type="text" id="inp">
js代码块
<script>
var txt = document.getElementById('txt');
var inp = document.getElementById('inp');
inp.oninput = function() {
txt.innerHTML = inp.value;
}
</script>
也能够实现当input框的值发生改变时，p标签的文本也可以及时主动更新
二、访问器监听 Object.defineProperty方法
访问器监听的实现，主要采用了javascript中原生方法：Object.defineProperty，该方法可以为某对象添加访问器属性，当获取或者给该对象属性赋值的时候，会触发访问器属性
注意：1.Object.defineProperty方法只能用于对象，所有使用该方法时，必须创建对象。
2.当你访问或者获取该对象的属性时，会立马触发访问器属性getter，从而去获取该属性的值
3.当你设置该对象的属性时，会立马触发访问器属性setter，设置该属性的值，setter更改的是视图（DOM）！setter必须要传参！
html代码块
<p id="txt"></p>
<input type="text" id="inp">
js代码块
<script>
var txt = document.getElementById('txt');
var inp = document.getElementById('inp');
var obj = {
} //创建空对象——‘数据中心’
Object.defineProperty(obj, 'value', {
//获取input的值
get() {
return inp.value
},
//设置input框的值
set(res) {
inp.value = res
// 数据改变了触发setter方法，更改的是视图(DOM)==>数据改变视图
txt.innerHTML = res
}
})
// 操作DOM，更改的是数据==>视图改变数据
inp.oninput = function() {
obj.value = inp.value
}
</script>
