【vue】--手動實現一個基礎雙向綁定

時間 2019-11-09

標籤 vue 手動實現一個基礎雙向綁定简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="" name="" v-model='message'><br>
        <span v-bind='message'></span>
    
    </div>
</body>
</html>
<script type="text/javascript">
    var data = {
        message:''
    }
    var input = document.querySelector('[v-model=message]')
    input.onkeyup=function(){
        data.message = input.value
        // data.message 發生改變 觸發 Object.defineproperty
    }
    
    //Object.defineProperty 接受三個參數 
    // obj 要在其上定義屬性的對象。
    // prop 要定義或修改的屬性的名稱。
    // descriptor 將被定義或修改的屬性描述符。 僅用到 get 和 set 屬性
　　 // 這個方法會直接在一個對象上定義一個新屬性或者修改對象上的現有屬性，並返回該對象。

    Object.defineProperty(data, 'message', {
        // set 接受惟一參數，即該屬性新的參數值。
        set(newValue){
            var span = document.querySelector('[v-bind=message]')
            span.innerHTML=newValue
　　　　　　　this.value = newValue
        },
        // get 方法執行時沒有參數傳入
        get(){
　　　　     //將newValue 返回給 message
            return this.value
        }

    })

</script>

相關標籤/搜索