使用 js 实现一个最简化的 v-modal

v-modal 本质是一个语法糖，包含 v-bind 和 v-on 两个操作。

<input type="text" v-modal="message" />

是下面代码的简写：

<input type="text" @input="message=$event.target.value" :value="message" />

<input type="text" v-model="msg" />
<p v-model="msg"></p>

<script>
let data={
    msg:"Hello Word!!!"
}

const input = document.querySelector("input");
const p = document.querySelector("p");
    
let directiveKey = input.getAttribute('v-model')
const _value=data[directiveKey]
input.value = _value;
p.innerHTML = _value;

// 视图变数据跟着变
input.addEventListener("input", function () {
   data.msg = input.value;
});
    
// 数据变视图跟着变
data=new Proxy({},{
    set(target, propKey,value){
        input.value=value
        p.innerHTML = value
        return Reflect.get(target, propKey, value);
	},
    get(target, propKey){
       return Reflect.get(target, propKey);
	},
})
</script>