说明

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

html

<div id="app">
    {{name}}
</div>

JavaScript

<script type="text/javascript">

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

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

    // 用js实现vue的功能

    // 渲染
//            console.log("appHTML:",appHTML)
    var newAppHTML = appHTML.replace("{{name}}",data.name)
//            console.log("newAppHTML:",newAppHTML)
    document.getElementById("app").innerHTML = newAppHTML



    // 单向绑定，当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
            var newAppHTML = appHTML.replace("{{name}}",data.name)
            document.getElementById("app").innerHTML = newAppHTML
//                    console.log(" name 的值改变了，新值是：",newValue)
        }

    })


</script>

原文出处：/show_1IX6b9aC6NF9.html