手写一个简单的vue里的v-model文本框的内容：前端的几大框架都有双向绑定原理，这是vue的一个简单的实例，v-mo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>文本框的内容：<span></span></div>
    <div id="app">
        <input type="text" name="" id="" v-model="msg"/>
    </div>
    <script>
        let span = document.getElementsByTagName('span')[0];
        class MyVUE{
            constructor({el,data}) {
                this.el = document.querySelector(el);
                this.data = data;
                // 初始化data
                this.initData();
                // 初始化model
                this.initModel()
            }
            initData() {
                Object.entries(this.data).forEach(([key,value]) => {
                    let val = value;
                    Object.defineProperty(this,key,{
                        get() {
                            return val;
                        },

```js

                    set(newVal) {
                        val = newVal;
                    }
                })
            });
        }
        initModel() {
            const nodes = this.el.querySelectorAll('[v-model]');
            nodes.forEach(item => {
                let key = item.getAttribute('v-model');
                item.value = this[key];
                item.addEventListener('input',e => {
                    this.data[key] = e.target.value;
                    span.innerText = this.data[key];
                })
            })    
        }
    }

    const vm = new MyVUE({
        el:'#app',
        data:{
            msg:'success',
        }
    });

    console.log(vm);
</script>

```