vueJS的双向绑定原理

双向绑定的样子：

<template>
	<div id="Apple">
		<input type="text" name="message" v-model="msg">
		{{msg}}
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				msg:"this is my msg!"
			}
		}
	}
</script>

就是这样：

实现原理：

使用Object.defineProperty();实现

<input type="text" name="text" id="inputText">
	<span id="showText"></span>
	<!-- built files will be auto injected -->
	<script type="text/javascript">
		var obj={};
		Object.defineProperty(obj,'hello',{
			set:function(newVal){
				document.getElementById('inputText').value=newVal;
				document.getElementById('showText').innerHTML=newVal;
			}
		});

		document.addEventListener('keyup',function(e){
			obj.hello=e.target.value;
		});

	</script>

就是这样：

好了。

还有一大串：

参考链接：http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension

这个好复杂，现在实在看不懂。