手动实现一个基础的双向数据绑定
2020-04-10 本文已影响0人
指尖跳动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="" name="" v-model='message'><br>
<span v-bind='message'></span>
</div>
<script type="text/javascript">
var data = {
message:''
}
var input = document.querySelector('[v-model=message]')
input.onkeyup=function(){
data.message = input.value
// data.message 发生改变 触发 Object.defineproperty
}
Object.defineProperty(data, 'message', {
// set 接受唯一参数，即该属性新的参数值。
set(newValue){
var span = document.querySelector('[v-bind=message]')
span.innerHTML=newValue
this.value = newValue
},
// get 方法执行时没有参数传入
get(){
//将newValue 返回给 message
return this.value
}
})
</script>
</body>
</html>
