vue原理与实现-输入框

说明

使用 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>

原文出处:http://www.malaoshi.top/show_1IX6b9ahXFVB.html