说明

使用 JavaScript 模拟 Vue，实现渲染，数据改变时，能够同步显示到输入框上

html

<div id="app">
    <input type="text" v-model="name" />
</div>

JavaScript

<script type="text/javascript">

    var data = {
        name : "杜子腾"
    }

    var appHTML = document.getElementById("app").innerHTML

    // 用js实现vue的功能

    // 渲染
    document.querySelector('[v-model="name"]').value = data.name

    // 双向绑定之一，当data中的属性改变时，同步显示到网页上
    // data 对象的 name 属性的 原值
    var nameData = data.name
    // 监听 data 对象的 name属性
    Object.defineProperty(data,"name",{

        // 访问 data 的 name 属性时，就会触发执行该函数
        get:function(){
            return nameData
        },
        // 改变 data 的 name 属性时，就会触发执行该函数
        set:function(newValue){
            nameData = newValue
            document.querySelector('[v-model="name"]').value = data.name
//                    console.log(" name 的值改变了，新值是：",newValue)
        }

    })


    // 双向绑定之二：输入框的内容改变时，修改 data 中的数据
    document.querySelector('[v-model="name"]').addEventListener("keyup",function(e){
        data.name = e.target.value
    })


</script>