双向数据绑定
主要用于给表单元素创建双向数据绑定。
即：
1.视图发生改变→数据发生对应的改变。即用户在视图（网页）上通过输入等操作，改变原数据。
2.数据改变→视图发生对应的改变。即在js中的数据本身发生改变（不由视图层面的操作导致的），视图要显示出最新的数据。
如：
Vue的绑定方式
Vue一般通过v-model指令进行双向数据绑定:
1.视图发生改变→对应的数据发生改变：用户在输入框里输入的内容会被message变量接下来，改变了app.message的值。
2.被改变的app.message同时也将动态更新在p标签的内容里。
<input type="text" id="app" v-model="message">
<p>{{message}}</p>
const app = new Vue({
el:'#app',
data:{
message:'hello',
}
})
Dom实现双向数据绑定（即v-model指令源码）
1.视图发生改变→对应数据发生改变：为标签注册事件监听属性，监听视图上的变化，然后重新为data.message赋值。
const app = {
message:'hello world !'
}
var inp = document.querySelector('input');
var text = document.querySelector('p');
text.innerHTML = app.message;
inp.value = app.message;
inp.oninput = function() {
app.message = inp.value;
text.innerHTML = inp.value;
}
2.数据发生改变→视图发生改变（重难点）
需要用到方法：Object.defineProperty(对象名,‘属性名’，对象)：
const app = {
message:'hello world !'
};
const temp = app.message; // 保存原数据到temp变量里
Object.defineProperty(app,'message',{
get:function() { // 在获取app.message属性值时调用
return temp;
},
set:function(value) { // 在设置app.message属性值时调用
temp = value; // 将被劫持下来的最新数据存在temp，以供get函数返回使用，这样就改变了原数据
text.innerHTML = value; // 将被劫持下来的最新数据显示在视图上
}
})
**注意1：**调用对象的defienProperty()方法时，get函数会在访问app.message时被调用，并劫持所获得的值存入temp。此时再访问app.message得到的值其实是get函数的返回值temp，虽然值与原先的2相等（因为事先存入了），但其实是不同的两个变量：app.message和temp。