vue数据双向绑定原理

div id=adddiv id=msg/divinput type=text oninput=change(this)/div!-- 1.引入vue插件 --script src=./js/vue.js/scriptscript//2.创建一个对象var username={name:lili}//3.数据劫持...

<div id="add">
        <div id="msg"></div>
        <input type="text" oninput="change(this)">
    </div>
    <!-- 1.引入vue插件 -->
    <script src="Li9qcy92dWUuanM="></script>
    <script>
        //2.创建一个对象
        var username={
            name:"lili"
        }
        //3.数据劫持
        //创建一个空对象
        var obj={}
        Object.defineProperty(obj,'name',{
            //获取
            get(){
                return username.name
            },
            //发送
            set(val){
                username.name=val;
                document.getElementById("msg").innerHTML=obj.name;
            }
        })
        //4.渲染数据
        document.getElementById("msg").innerHTML=obj.name
        //5.订阅
        function change(ev){
            console.log(ev.value);
            obj.name=ev.value

        }
    </script>