v-model双向数据绑定

双向数据绑定

主要用于给表单元素创建双向数据绑定。
即：
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。